promoProduct.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. <template>
  2. <view class="content">
  3. <z-paging ref="paging" @query="getRow" use-virtual-list cell-height-mode="dynamic" use-compatibility-mode :extra-data="extraData">
  4. <view slot="top">
  5. <view class="tab-search">
  6. <u-search placeholder="请输入产品名称/轮胎规格" shape="round" :clearabled="true" show-action v-model="queryWord" @clear="searchList" @search="searchList" @custom="searchList"></u-search>
  7. </view>
  8. </view>
  9. </z-paging>
  10. </view>
  11. </template>
  12. <script>
  13. import { queryPromoProductByPage } from '@/api/video.js'
  14. import { purchaseSave } from '@/api/purchase.js'
  15. export default {
  16. data() {
  17. return {
  18. extraData:{
  19. id: 'promoProductList',
  20. // 添加产品
  21. chooseProduct:(item)=>{
  22. this.chooseProduct(item)
  23. }
  24. },
  25. promoActiveSn: null,
  26. chooseList: [],
  27. screenWidth: 0,
  28. showChoosePopu: false,
  29. queryWord: ''
  30. };
  31. },
  32. onLoad(opts) {
  33. uni.setNavigationBarTitle({
  34. title: opts.title||'促销活动产品'
  35. })
  36. this.screenWidth = uni.getSystemInfoSync().windowWidth
  37. this.$store.state.vuex_tempData = null
  38. this.promoActiveSn = opts.promoActiveSn
  39. // 购物车是否有缓存
  40. const cacheList = this.$store.state.vuex_cartList.find(k => k.sn == this.promoActiveSn)
  41. this.chooseList = cacheList ? JSON.parse(JSON.stringify(cacheList.list)) : []
  42. },
  43. onShow() {
  44. this.showChoosePopu=false
  45. },
  46. onUnload() {
  47. // 存储已选列表值
  48. const hasCache = this.$store.state.vuex_cartList.find(k => k.sn == this.promoActiveSn)
  49. if(hasCache){
  50. hasCache.list = this.chooseList
  51. }else{
  52. this.$store.state.vuex_cartList.push({sn:this.promoActiveSn,list: this.chooseList})
  53. }
  54. this.$u.vuex('vuex_cartList', this.$store.state.vuex_cartList)
  55. // 清空数据
  56. this.chooseList = null
  57. },
  58. methods: {
  59. // 查询列表
  60. searchList(){
  61. this.$refs.paging.reload()
  62. },
  63. // @query所绑定的方法不要自己调用!!需要刷新列表数据时,只需要调用this.$refs.paging.reload()即可
  64. getRow(pageNo, pageSize) {
  65. console.log('pageNo',pageNo)
  66. console.log('pageSize',pageSize)
  67. let _this = this
  68. let params = {
  69. pageNo: pageNo,
  70. pageSize: pageSize,
  71. queryWord: this.queryWord,
  72. promoActiveSn: this.promoActiveSn
  73. }
  74. queryPromoProductByPage(params).then(res => {
  75. if (res.status == 200) {
  76. const list = res.data.list||[]
  77. const ret = []
  78. if(list.length%2!=0){
  79. list.push(null)
  80. }
  81. for(let i=0;i<list.length;i=i+2){
  82. const a = list[i]
  83. const hasAChecked = this.chooseList.find(s=>s.id == a.id)
  84. const b = list[i+1]
  85. const hasBChecked = this.chooseList.find(s=>s.id == b.id)
  86. // 如果超出
  87. if(b){
  88. ret.push({list:[this.formatData(a,hasAChecked),this.formatData(b,hasBChecked)]})
  89. }else{
  90. ret.push({list:[this.formatData(a,hasAChecked)]})
  91. }
  92. }
  93. _this.$refs.paging.complete(ret);
  94. }
  95. })
  96. },
  97. // 格式化数据
  98. formatData(k,hasChecked){
  99. return {
  100. id: k.id,
  101. cost: k.cost,
  102. checked: !!hasChecked,
  103. qty: !!hasChecked ? hasChecked.qty : 0,
  104. productCode: k.productCode,
  105. productSn: k.productSn,
  106. productImage: k.productImage,
  107. productName: k.productName,
  108. productOrigCode: k.productOrigCode,
  109. promoActiveSn: k.promoActiveSn,
  110. promoRuleSn: k.promoRuleSn,
  111. promoRuleValue: k.promoRuleValue,
  112. promoRuleType: k.promoRuleType,
  113. show: false
  114. }
  115. },
  116. // 添加产品
  117. chooseProduct(item){
  118. }
  119. },
  120. };
  121. </script>
  122. <style lang="less" scoped>
  123. .content{
  124. width: 100%;
  125. height: 100vh;
  126. }
  127. .tab-search{
  128. padding: 15rpx 20rpx;
  129. background: #fff;
  130. }
  131. </style>