EffectCaseList.vue 9.9 KB

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