123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414 |
- <template>
- <a-row :gutter="10">
- <a-col :sm="24" style="margin-bottom: 20px;z-index: 10">
- <a-card :bordered="false">
- <div class="table-page-search-wrapper">
- <a-form layout="inline">
- <a-row :gutter="24">
- <a-col :md="8" :sm="8">
- <a-form-item label="行业">
- <j-tree-select
- v-model="queryParam.industry"
- ref="treeSelect"
- placeholder="请选择行业"
- v-decorator="['pid', validatorRules.pid]"
- dict="sys_category,name,id"
- pidField="pid"
- pidValue="67d69117968be1eecb1e705b399b9d93"
- ></j-tree-select>
- </a-form-item>
- </a-col>
- <a-col :md="8" :sm="8">
- <a-form-item label="广告主公司">
- <a-select
- showSearch
- v-model="queryParam.company"
- placeholder="请输入公司名称"
- style="width: 300px"
- :defaultActiveFirstOption="false"
- :showArrow="false"
- :filterOption="false"
- @search="handleCompanySearch"
- @change="handleCompanyChange"
- :notFoundContent="null"
- >
- <a-select-option v-for="d in companyData" :key="d.value">{{d.text}}</a-select-option>
- </a-select>
- </a-form-item>
- </a-col>
- <a-col :md="8" :sm="8">
- <a-form-item label="推广产品">
- <a-select
- showSearch
- v-model="queryParam.product"
- placeholder="请输入产品名称"
- style="width: 300px"
- :defaultActiveFirstOption="false"
- :showArrow="false"
- :filterOption="false"
- @search="handleProductSearch"
- @change="handleProductChange"
- :notFoundContent="null"
- >
- <a-select-option v-for="d in productData" :key="d.value">{{d.text}}</a-select-option>
- </a-select>
- </a-form-item>
- </a-col>
- <a-col :md="8" :sm="8">
- <a-form-item
- label="发布日期"
- :labelCol="{lg: {span: 7}, sm: {span: 7}}"
- :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
- >
- <a-range-picker name="buildTime" style="width: 100%" v-model="time" />
- </a-form-item>
- </a-col>
- <a-col :md="8" :sm="8">
- <a-form-item label="发布人">
- <a-input placeholder="请输入发布人昵称" v-model="queryParam.userName"></a-input>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="24">
- <a-col :md="10" :sm="10">
- <a-form-item label="排序">
- <a-radio-group v-model="queryParam.orderByColumn">
- <a-radio-button value="create_time">按抓取时间</a-radio-button>
- <a-radio-button value="time">按发布时间</a-radio-button>
- <a-radio-button value="view_count">按展示数</a-radio-button>
- <a-radio-button value="like_count">按喜欢数</a-radio-button>
- <a-radio-button value="comment_count">按评论数</a-radio-button>
- </a-radio-group>
- </a-form-item>
- </a-col>
- <a-col :md="6" :sm="6">
- <a-form-item>
- <a-radio-group v-model="queryParam.orderByType">
- <a-radio-button value="asc">正序</a-radio-button>
- <a-radio-button value="desc">倒序</a-radio-button>
- </a-radio-group>
- </a-form-item>
- </a-col>
- <a-col :md="8" :sm="8">
- <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
- <a-button
- type="primary"
- @click="searchReset"
- icon="reload"
- style="margin-left: 8px"
- >重置</a-button>
- </a-col>
- </a-row>
- </a-form>
- </div>
- <app-ad-modal ref="modalForm"></app-ad-modal>
- </a-card>
- </a-col>
- <vue-waterfall-easy
- class="adcover_waterfall_container"
- ref="waterfall"
- :imgsArr="imgsArr"
- @click="handleDetail"
- @scrollReachBottom="getData"
- style="height: 800px;"
- >
- <div class="img-info" slot-scope="props">
- <div class="some-info">
- <ul>
- <li>
- <b>发布人:</b>
- <span>{{props.value.userName}}</span>
- </li>
- <li>
- <b>质量分:</b>
- <span>{{props.value.score}}</span>
- </li>
- <li>
- <b>发布时间:</b>
- <span>{{props.value.time}}</span>
- </li>
- <li>
- <b>展示:</b>
- <span>{{props.value.viewCount}}</span>
- </li>
- <li>
- <b>喜欢:</b>
- <span>{{props.value.likeCount}}</span>
- </li>
- <li>
- <b>评论:</b>
- <span>{{props.value.commentCount}}</span>
- </li>
- </ul>
- </div>
- </div>
- <div slot="waterfall-over">无更多数据</div>
- </vue-waterfall-easy>
- <div class="scroll_top">
- <a-icon type="to-top" />
- </div>
- </a-row>
- </template>
- <script>
- import { getAction } from '@/api/manage'
- import { filterObj } from '@/utils/util'
- import vueWaterfallEasy from 'vue-waterfall-easy'
- import AppAdModal from './modules/AppAdModal'
- import JTreeSelect from '@/components/jeecg/JTreeSelect'
- import { JeecgListMixin } from '@/mixins/JeecgListMixin'
- import ARow from 'ant-design-vue/es/grid/Row'
- import ACol from 'ant-design-vue/es/grid/Col'
- import AFormItem from 'ant-design-vue/es/form/FormItem'
- import moment from 'moment'
- import $ from 'jquery'
- let timeout
- let currentValue
- function fetch(value, callback) {
- if (timeout) {
- clearTimeout(timeout)
- timeout = null
- }
- currentValue = value
- function fake() {}
- timeout = setTimeout(fake, 300)
- }
- $(function() {
- $('.scroll_top').click(function() {
- $('.vue-waterfall-easy-scroll').animate(
- {
- scrollTop: 0
- },
- 500
- )
- return false
- })
- $('.vue-waterfall-easy-scroll').scroll(function() {
- var top = $('.vue-waterfall-easy-scroll').scrollTop()
- if (top >= 100) {
- $('.scroll_top').fadeIn()
- } else {
- $('.scroll_top').fadeOut()
- }
- })
- })
- export default {
- name: 'waterfall',
- // mixins:[JeecgListMixin],
- data() {
- return {
- queryParam: {
- orderByColumn: 'create_time',
- orderByType: 'desc',
- start: '',
- end: ''
- },
- time: [],
- companyData: [],
- productData: [],
- value: undefined,
- imgsArr: [],
- pageNo: 1, // request param
- url: {
- feedsUrl: '/ctop/adcover/feeds',
- companySugestUrl: '/ctop/kuaishou/advertiser/companysugest',
- productSugestUrl: '/ctop/kuaishou/advertiser/productsugest',
- list: '/ctop/adcover/feeds'
- },
- validatorRules: {
- pid: {},
- name: {},
- code: {}
- },
- pidField: 'pid',
- isCoverStar: false // 收藏
- }
- },
- components: {
- AFormItem,
- ACol,
- ARow,
- vueWaterfallEasy,
- AppAdModal,
- JTreeSelect
- },
- mixins: [JeecgListMixin],
- methods: {
- searchQuery() {
- this.imgsArr = []
- this.ipagination.current = 1
- if (this.time != null && this.time.length > 0) {
- this.queryParam.start = moment(this.time[0]).format('YYYY-MM-DD')
- this.queryParam.end = moment(this.time[1]).format('YYYY-MM-DD')
- }
- this.getData()
- },
- searchReset() {
- this.queryParam = {
- orderByColumn: 'create_time',
- orderByType: 'desc'
- }
- this.imgsArr = []
- this.time = []
- this.ipagination.current = 1
- this.ipagination.pageSize = 20
- this.getData()
- },
- handleProductSearch(value) {
- getAction(this.url.productSugestUrl, { product: value }).then(res => {
- console.log(res)
- if (currentValue === value) {
- const result = res.result
- const data = []
- result.forEach(r => {
- data.push({
- value: r,
- text: r
- })
- })
- this.productData = data
- }
- })
- fetch(value)
- },
- handleProductChange(value) {
- this.value = value
- fetch(value, data => (this.productData = data))
- },
- handleCompanySearch(value) {
- getAction(this.url.companySugestUrl, { company: value }).then(res => {
- if (currentValue === value) {
- const result = res.result
- const data = []
- result.forEach(r => {
- data.push({
- value: r,
- text: r
- })
- })
- this.companyData = data
- }
- })
- fetch(value)
- },
- handleCompanyChange(value) {
- this.value = value
- fetch(value, data => (this.companyData = data))
- },
- handleDetail(event, { index, value }) {
- this.$refs.modalForm.show(value.photoId, value.userId)
- this.$refs.modalForm.title = '详情'
- },
- flushData() {
- this.imgsArr = []
- this.pageNo = 1
- this.getData()
- },
- modalFormOk() {},
- getQueryParams() {
- //获取查询条件
- var param = Object.assign(this.queryParam, this.isorter, this.filters)
- param.pageNo = this.ipagination.current
- param.pageSize = 20
- return filterObj(param)
- },
- getData() {
- var params = this.getQueryParams() //查询条件
- console.log(params)
- getAction(this.url.feedsUrl, params).then(res => {
- console.log(res)
- this.ipagination.current = this.ipagination.current + 1
- if (res.success) {
- if (res.result.length == 0) {
- this.$refs.waterfall.waterfallOver()
- return
- }
- for (var i = 0; i < res.result.length; i++) {
- let arr = {}
- arr.coverId = res.result[i].coverId
- arr.src = res.result[i].coverUrl
- arr.time = res.result[i].time
- arr.userName = res.result[i].userName
- arr.viewCount = res.result[i].viewCount
- arr.likeCount = res.result[i].likeCount
- arr.commentCount = res.result[i].commentCount
- arr.score = res.result[i].score
- arr.userId = res.result[i].userId
- arr.photoId = res.result[i].photoId
- //arr.href=res.result.records[i].mvUrl
- this.imgsArr = this.imgsArr.concat(arr)
- }
- }
- })
- },
- },
- created() {
- this.getData()
- }
- }
- </script>
- <style lang="scss">
- .adcover_waterfall_container {
- .img-box {
- .img-inner-box {
- position: relative;
- cursor: pointer;
- -webkit-transition: all 0.3s;
- transition: all 0.3s;
- .img-wraper {
- // height: 427px!important;
- img {
- }
- }
- .img-info {
- position: relative;
- // height: 146px!important;
- .some-info {
- color: rgba(0, 0, 0, 0.65);
- padding: 10px;
- ul {
- margin: 0;
- padding: 0;
- li {
- list-style: none;
- padding: 0;
- margin: 0;
- }
- }
- }
- .cover_star {
- position: absolute;
- right: 0;
- bottom: 0;
- padding: 10px;
- z-index: 1;
- color: rgba(0, 0, 0, 0.65);
- .coverStar {
- color: red;
- }
- }
- }
- }
- }
- }
- .scroll_top {
- position: fixed;
- z-index: 9;
- right: 80px;
- bottom: 40px;
- display: none;
- cursor: pointer;
- color: #1890ff;
- font-size: 40px;
- }
- </style>
|