AdList.vue 10 KB

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