AdList.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414
  1. <template>
  2. <a-row :gutter="10">
  3. <a-col :sm="24" style="margin-bottom: 20px;z-index: 10">
  4. <a-card :bordered="false">
  5. <div class="table-page-search-wrapper">
  6. <a-form layout="inline">
  7. <a-row :gutter="24">
  8. <a-col :md="8" :sm="8">
  9. <a-form-item label="行业">
  10. <j-tree-select
  11. v-model="queryParam.industry"
  12. ref="treeSelect"
  13. placeholder="请选择行业"
  14. v-decorator="['pid', validatorRules.pid]"
  15. dict="sys_category,name,id"
  16. pidField="pid"
  17. pidValue="67d69117968be1eecb1e705b399b9d93"
  18. ></j-tree-select>
  19. </a-form-item>
  20. </a-col>
  21. <a-col :md="8" :sm="8">
  22. <a-form-item label="广告主公司">
  23. <a-select
  24. showSearch
  25. v-model="queryParam.company"
  26. placeholder="请输入公司名称"
  27. style="width: 300px"
  28. :defaultActiveFirstOption="false"
  29. :showArrow="false"
  30. :filterOption="false"
  31. @search="handleCompanySearch"
  32. @change="handleCompanyChange"
  33. :notFoundContent="null"
  34. >
  35. <a-select-option v-for="d in companyData" :key="d.value">{{d.text}}</a-select-option>
  36. </a-select>
  37. </a-form-item>
  38. </a-col>
  39. <a-col :md="8" :sm="8">
  40. <a-form-item label="推广产品">
  41. <a-select
  42. showSearch
  43. v-model="queryParam.product"
  44. placeholder="请输入产品名称"
  45. style="width: 300px"
  46. :defaultActiveFirstOption="false"
  47. :showArrow="false"
  48. :filterOption="false"
  49. @search="handleProductSearch"
  50. @change="handleProductChange"
  51. :notFoundContent="null"
  52. >
  53. <a-select-option v-for="d in productData" :key="d.value">{{d.text}}</a-select-option>
  54. </a-select>
  55. </a-form-item>
  56. </a-col>
  57. <a-col :md="8" :sm="8">
  58. <a-form-item
  59. label="发布日期"
  60. :labelCol="{lg: {span: 7}, sm: {span: 7}}"
  61. :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
  62. >
  63. <a-range-picker name="buildTime" style="width: 100%" v-model="time" />
  64. </a-form-item>
  65. </a-col>
  66. <a-col :md="8" :sm="8">
  67. <a-form-item label="发布人">
  68. <a-input placeholder="请输入发布人昵称" v-model="queryParam.userName"></a-input>
  69. </a-form-item>
  70. </a-col>
  71. </a-row>
  72. <a-row :gutter="24">
  73. <a-col :md="10" :sm="10">
  74. <a-form-item label="排序">
  75. <a-radio-group v-model="queryParam.orderByColumn">
  76. <a-radio-button value="create_time">按抓取时间</a-radio-button>
  77. <a-radio-button value="time">按发布时间</a-radio-button>
  78. <a-radio-button value="view_count">按展示数</a-radio-button>
  79. <a-radio-button value="like_count">按喜欢数</a-radio-button>
  80. <a-radio-button value="comment_count">按评论数</a-radio-button>
  81. </a-radio-group>
  82. </a-form-item>
  83. </a-col>
  84. <a-col :md="6" :sm="6">
  85. <a-form-item>
  86. <a-radio-group v-model="queryParam.orderByType">
  87. <a-radio-button value="asc">正序</a-radio-button>
  88. <a-radio-button value="desc">倒序</a-radio-button>
  89. </a-radio-group>
  90. </a-form-item>
  91. </a-col>
  92. <a-col :md="8" :sm="8">
  93. <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
  94. <a-button
  95. type="primary"
  96. @click="searchReset"
  97. icon="reload"
  98. style="margin-left: 8px"
  99. >重置</a-button>
  100. </a-col>
  101. </a-row>
  102. </a-form>
  103. </div>
  104. <app-ad-modal ref="modalForm"></app-ad-modal>
  105. </a-card>
  106. </a-col>
  107. <vue-waterfall-easy
  108. class="adcover_waterfall_container"
  109. ref="waterfall"
  110. :imgsArr="imgsArr"
  111. @click="handleDetail"
  112. @scrollReachBottom="getData"
  113. style="height: 800px;"
  114. >
  115. <div class="img-info" slot-scope="props">
  116. <div class="some-info">
  117. <ul>
  118. <li>
  119. <b>发布人:</b>
  120. <span>{{props.value.userName}}</span>
  121. </li>
  122. <li>
  123. <b>质量分:</b>
  124. <span>{{props.value.score}}</span>
  125. </li>
  126. <li>
  127. <b>发布时间:</b>
  128. <span>{{props.value.time}}</span>
  129. </li>
  130. <li>
  131. <b>展示:</b>
  132. <span>{{props.value.viewCount}}</span>
  133. </li>
  134. <li>
  135. <b>喜欢:</b>
  136. <span>{{props.value.likeCount}}</span>
  137. </li>
  138. <li>
  139. <b>评论:</b>
  140. <span>{{props.value.commentCount}}</span>
  141. </li>
  142. </ul>
  143. </div>
  144. </div>
  145. <div slot="waterfall-over">无更多数据</div>
  146. </vue-waterfall-easy>
  147. <div class="scroll_top">
  148. <a-icon type="to-top" />
  149. </div>
  150. </a-row>
  151. </template>
  152. <script>
  153. import { getAction } from '@/api/manage'
  154. import { filterObj } from '@/utils/util'
  155. import vueWaterfallEasy from 'vue-waterfall-easy'
  156. import AppAdModal from './modules/AppAdModal'
  157. import JTreeSelect from '@/components/jeecg/JTreeSelect'
  158. import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  159. import ARow from 'ant-design-vue/es/grid/Row'
  160. import ACol from 'ant-design-vue/es/grid/Col'
  161. import AFormItem from 'ant-design-vue/es/form/FormItem'
  162. import moment from 'moment'
  163. import $ from 'jquery'
  164. let timeout
  165. let currentValue
  166. function fetch(value, callback) {
  167. if (timeout) {
  168. clearTimeout(timeout)
  169. timeout = null
  170. }
  171. currentValue = value
  172. function fake() {}
  173. timeout = setTimeout(fake, 300)
  174. }
  175. $(function() {
  176. $('.scroll_top').click(function() {
  177. $('.vue-waterfall-easy-scroll').animate(
  178. {
  179. scrollTop: 0
  180. },
  181. 500
  182. )
  183. return false
  184. })
  185. $('.vue-waterfall-easy-scroll').scroll(function() {
  186. var top = $('.vue-waterfall-easy-scroll').scrollTop()
  187. if (top >= 100) {
  188. $('.scroll_top').fadeIn()
  189. } else {
  190. $('.scroll_top').fadeOut()
  191. }
  192. })
  193. })
  194. export default {
  195. name: 'waterfall',
  196. // mixins:[JeecgListMixin],
  197. data() {
  198. return {
  199. queryParam: {
  200. orderByColumn: 'create_time',
  201. orderByType: 'desc',
  202. start: '',
  203. end: ''
  204. },
  205. time: [],
  206. companyData: [],
  207. productData: [],
  208. value: undefined,
  209. imgsArr: [],
  210. pageNo: 1, // request param
  211. url: {
  212. feedsUrl: '/ctop/adcover/feeds',
  213. companySugestUrl: '/ctop/kuaishou/advertiser/companysugest',
  214. productSugestUrl: '/ctop/kuaishou/advertiser/productsugest',
  215. list: '/ctop/adcover/feeds'
  216. },
  217. validatorRules: {
  218. pid: {},
  219. name: {},
  220. code: {}
  221. },
  222. pidField: 'pid',
  223. isCoverStar: false // 收藏
  224. }
  225. },
  226. components: {
  227. AFormItem,
  228. ACol,
  229. ARow,
  230. vueWaterfallEasy,
  231. AppAdModal,
  232. JTreeSelect
  233. },
  234. mixins: [JeecgListMixin],
  235. methods: {
  236. searchQuery() {
  237. this.imgsArr = []
  238. this.ipagination.current = 1
  239. if (this.time != null && this.time.length > 0) {
  240. this.queryParam.start = moment(this.time[0]).format('YYYY-MM-DD')
  241. this.queryParam.end = moment(this.time[1]).format('YYYY-MM-DD')
  242. }
  243. this.getData()
  244. },
  245. searchReset() {
  246. this.queryParam = {
  247. orderByColumn: 'create_time',
  248. orderByType: 'desc'
  249. }
  250. this.imgsArr = []
  251. this.time = []
  252. this.ipagination.current = 1
  253. this.ipagination.pageSize = 20
  254. this.getData()
  255. },
  256. handleProductSearch(value) {
  257. getAction(this.url.productSugestUrl, { product: value }).then(res => {
  258. console.log(res)
  259. if (currentValue === value) {
  260. const result = res.result
  261. const data = []
  262. result.forEach(r => {
  263. data.push({
  264. value: r,
  265. text: r
  266. })
  267. })
  268. this.productData = data
  269. }
  270. })
  271. fetch(value)
  272. },
  273. handleProductChange(value) {
  274. this.value = value
  275. fetch(value, data => (this.productData = data))
  276. },
  277. handleCompanySearch(value) {
  278. getAction(this.url.companySugestUrl, { company: value }).then(res => {
  279. if (currentValue === value) {
  280. const result = res.result
  281. const data = []
  282. result.forEach(r => {
  283. data.push({
  284. value: r,
  285. text: r
  286. })
  287. })
  288. this.companyData = data
  289. }
  290. })
  291. fetch(value)
  292. },
  293. handleCompanyChange(value) {
  294. this.value = value
  295. fetch(value, data => (this.companyData = data))
  296. },
  297. handleDetail(event, { index, value }) {
  298. this.$refs.modalForm.show(value.photoId, value.userId)
  299. this.$refs.modalForm.title = '详情'
  300. },
  301. flushData() {
  302. this.imgsArr = []
  303. this.pageNo = 1
  304. this.getData()
  305. },
  306. modalFormOk() {},
  307. getQueryParams() {
  308. //获取查询条件
  309. var param = Object.assign(this.queryParam, this.isorter, this.filters)
  310. param.pageNo = this.ipagination.current
  311. param.pageSize = 20
  312. return filterObj(param)
  313. },
  314. getData() {
  315. var params = this.getQueryParams() //查询条件
  316. console.log(params)
  317. getAction(this.url.feedsUrl, params).then(res => {
  318. console.log(res)
  319. this.ipagination.current = this.ipagination.current + 1
  320. if (res.success) {
  321. if (res.result.length == 0) {
  322. this.$refs.waterfall.waterfallOver()
  323. return
  324. }
  325. for (var i = 0; i < res.result.length; i++) {
  326. let arr = {}
  327. arr.coverId = res.result[i].coverId
  328. arr.src = res.result[i].coverUrl
  329. arr.time = res.result[i].time
  330. arr.userName = res.result[i].userName
  331. arr.viewCount = res.result[i].viewCount
  332. arr.likeCount = res.result[i].likeCount
  333. arr.commentCount = res.result[i].commentCount
  334. arr.score = res.result[i].score
  335. arr.userId = res.result[i].userId
  336. arr.photoId = res.result[i].photoId
  337. //arr.href=res.result.records[i].mvUrl
  338. this.imgsArr = this.imgsArr.concat(arr)
  339. }
  340. }
  341. })
  342. },
  343. },
  344. created() {
  345. this.getData()
  346. }
  347. }
  348. </script>
  349. <style lang="scss">
  350. .adcover_waterfall_container {
  351. .img-box {
  352. .img-inner-box {
  353. position: relative;
  354. cursor: pointer;
  355. -webkit-transition: all 0.3s;
  356. transition: all 0.3s;
  357. .img-wraper {
  358. // height: 427px!important;
  359. img {
  360. }
  361. }
  362. .img-info {
  363. position: relative;
  364. // height: 146px!important;
  365. .some-info {
  366. color: rgba(0, 0, 0, 0.65);
  367. padding: 10px;
  368. ul {
  369. margin: 0;
  370. padding: 0;
  371. li {
  372. list-style: none;
  373. padding: 0;
  374. margin: 0;
  375. }
  376. }
  377. }
  378. .cover_star {
  379. position: absolute;
  380. right: 0;
  381. bottom: 0;
  382. padding: 10px;
  383. z-index: 1;
  384. color: rgba(0, 0, 0, 0.65);
  385. .coverStar {
  386. color: red;
  387. }
  388. }
  389. }
  390. }
  391. }
  392. }
  393. .scroll_top {
  394. position: fixed;
  395. z-index: 9;
  396. right: 80px;
  397. bottom: 40px;
  398. display: none;
  399. cursor: pointer;
  400. color: #1890ff;
  401. font-size: 40px;
  402. }
  403. </style>