promoProduct.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. <template>
  2. <view class="content">
  3. <mosowe-invented-list
  4. :list="list"
  5. :cacheNum="30">
  6. <template #default="{ item }">
  7. <view class="item">
  8. <view class="name">
  9. {{ item.list[0].productName }}
  10. </view>
  11. <view class="age">
  12. {{ item.list[0].productCode }}
  13. </view>
  14. </view>
  15. </template>
  16. </mosowe-invented-list>
  17. </view>
  18. </template>
  19. <script>
  20. import { queryPromoProductByPage } from '@/api/video.js'
  21. import { purchaseSave } from '@/api/purchase.js'
  22. export default {
  23. data() {
  24. return {
  25. promoActiveSn: null,
  26. chooseList: [],
  27. windowWidth: 0,
  28. windowHeight: 0,
  29. showChoosePopu: false,
  30. queryWord: '',
  31. ctxScroll: null,
  32. trigger: false,
  33. loading: false,
  34. over: false,
  35. // 列表数据
  36. pageNo: 1,
  37. pageSize: 200,
  38. list: [],
  39. };
  40. },
  41. onLoad(opts) {
  42. uni.setNavigationBarTitle({
  43. title: opts.title||'促销活动产品'
  44. })
  45. this.windowWidth = uni.getSystemInfoSync().windowWidth
  46. this.windowHeight = uni.getSystemInfoSync().windowHeight
  47. // 初始化数据
  48. this.$store.state.vuex_tempData = null
  49. this.promoActiveSn = opts.promoActiveSn
  50. // 购物车是否有缓存
  51. const cacheList = this.$store.state.vuex_cartList.find(k => k.sn == this.promoActiveSn)
  52. this.chooseList = cacheList ? JSON.parse(JSON.stringify(cacheList.list)) : []
  53. },
  54. onReady() {
  55. this.loadData()
  56. },
  57. onShow() {
  58. this.showChoosePopu=false
  59. },
  60. onUnload() {
  61. // 存储已选列表值
  62. const hasCache = this.$store.state.vuex_cartList.find(k => k.sn == this.promoActiveSn)
  63. if(hasCache){
  64. hasCache.list = this.chooseList
  65. }else{
  66. this.$store.state.vuex_cartList.push({sn:this.promoActiveSn,list: this.chooseList})
  67. }
  68. this.$u.vuex('vuex_cartList', this.$store.state.vuex_cartList)
  69. // 清空数据
  70. this.chooseList = null
  71. },
  72. methods: {
  73. // 加载数据
  74. loadData() {
  75. console.log('pageNo',this.pageNo)
  76. console.log('pageSize',this.pageSize)
  77. let params = {
  78. pageNo: this.pageNo,
  79. pageSize: this.pageSize,
  80. queryWord: this.queryWord,
  81. promoActiveSn: this.promoActiveSn
  82. }
  83. queryPromoProductByPage(params).then(res => {
  84. if (res.status == 200) {
  85. const list = res.data.list||[]
  86. const ret = []
  87. if(list.length%2!=0){
  88. list.push(null)
  89. }
  90. for(let i=0;i<list.length;i=i+2){
  91. const a = list[i]
  92. const hasAChecked = this.chooseList.find(s=>s.id == a.id)
  93. const b = list[i+1]
  94. const hasBChecked = this.chooseList.find(s=>s.id == b.id)
  95. // 如果超出
  96. if(b){
  97. ret.push({list:[this.formatData(a,hasAChecked),this.formatData(b,hasBChecked)]})
  98. }else{
  99. ret.push({list:[this.formatData(a,hasAChecked)]})
  100. }
  101. }
  102. this.total = (res.data.count || 0) + 1
  103. this.list = this.list.concat(ret)
  104. }
  105. })
  106. },
  107. // 格式化数据
  108. formatData(k,hasChecked){
  109. return {
  110. id: k.id,
  111. cost: k.cost,
  112. checked: !!hasChecked,
  113. qty: !!hasChecked ? hasChecked.qty : 0,
  114. productCode: k.productCode,
  115. productSn: k.productSn,
  116. productImage: k.productImage,
  117. productName: k.productName,
  118. productOrigCode: k.productOrigCode,
  119. promoActiveSn: k.promoActiveSn,
  120. promoRuleSn: k.promoRuleSn,
  121. promoRuleValue: k.promoRuleValue,
  122. promoRuleType: k.promoRuleType,
  123. show: false
  124. }
  125. },
  126. // 添加产品
  127. chooseProduct(item){
  128. }
  129. },
  130. };
  131. </script>
  132. <style lang="less" scoped>
  133. .tab-search{
  134. padding: 15rpx 20rpx;
  135. background: #fff;
  136. }
  137. .content {
  138. width: 100vw;
  139. height: 100vh;
  140. .name {
  141. font-size: 32rpx;
  142. font-weight: bold;
  143. line-height: 40rpx;
  144. margin-bottom: 20rpx;
  145. color: #333;
  146. }
  147. .age {
  148. font-size: 24rpx;
  149. color: #999;
  150. }
  151. .item {
  152. margin: 30rpx;
  153. padding: 30rpx;
  154. box-sizing: border-box;
  155. background-color: #eee;
  156. border-radius: 12rpx;
  157. }
  158. }
  159. </style>