Feat:优惠券对接

2023-12-25 17:16:56 +08:00
parent 847a80f251
commit 18a2fbb8a6
46 changed files with 1360 additions and 858 deletions
@@ -0,0 +1,128 @@
+<template>
+  <view class="popup-coupons">
+    <view class="popup-box">
+      <view class="popup-title bold tc">选择优惠券</view>
+      <SubSection :current="current" :can-use="canUse" :not-use="notUse" radioModel @change="changeNav"/>
+
+      <view class="list-box">
+        <view style="margin-bottom: 20rpx" v-for="(item,index) in list" :key="index">
+          <Coupons :data="item" radioModel @change="selectCoupon"/>
+        </view>
+
+        <view class="tc" v-if="list.length===0">
+          <image class="zero-coupons" :src="webUrl+'/20231201201733142658.png'" mode="scaleToFill"/>
+        </view>
+      </view>
+    </view>
+    <button disabled></button>
+    <view class="btn-done bold flex jc-center ai-center" :class="{'btn-disabled':current===1}" @click="setCoupon" v-if="current===0">确定
+    </view>
+  </view>
+</template>
+
+<script>
+import SubSection from "@/components/SubSection.vue"
+import Coupons from '@/components/Coupons.vue'
+
+export default {
+  name: 'CouponsPopup',
+  components: {SubSection, Coupons},
+  props: {
+    twoList: {
+      type: Object,
+      default: {}
+    }
+  },
+  computed: {
+    list() {
+      let temp = this.current === 0 ? this.twoList['usable'] : this.twoList['unusable']
+      return this.$global.deepClone(temp)
+    },
+    canUse() {
+      return this.twoList['usable'].length
+    },
+    notUse() {
+      return this.twoList['unusable'].length
+    }
+  },
+  watch: {
+    current() {
+      this.selectCoupon(this.couponId)
+    }
+  },
+  data() {
+    return {
+      webUrl: this.$VUE_APP_RESOURCES_URL,
+      current: 0,
+      couponId: 0
+    }
+  },
+  mounted() {
+    this.couponId = uni.getStorageSync('couponId') || 0
+    this.selectCoupon(this.couponId)
+  },
+  methods: {
+    changeNav(index) {
+      this.current = index
+    },
+    selectCoupon(id) {
+      const isCancel = this.couponId === id
+      this.couponId = isCancel ? 0 : id
+
+      this.list?.forEach(item => {
+        if (!isCancel) {
+          item.checked = id === item.id
+        } else {
+          item.checked = false
+        }
+      })
+    },
+    setCoupon() {
+      if (this.current === 1) return
+      // if (this.couponId !== 0) {
+        uni.setStorageSync('couponId', this.couponId)
+      // }
+      this.$emit('close')
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.popup-coupons {
+  .popup-box {
+    padding: 34rpx 32rpx;
+  }
+
+  .popup-title {
+    margin-bottom: 20rpx;
+    color: #333333;
+    font-size: 36rpx;
+    line-height: 52rpx;
+  }
+
+  .list-box {
+    max-height: 640rpx;
+    margin-top: 32rpx;
+    overflow-y: auto;
+  }
+
+  .btn-done {
+    width: 100%;
+    height: 80rpx;
+    background: #FF564A;
+    color: #FFFFFF;
+    font-size: 36rpx;
+  }
+
+  .btn-disabled {
+    background: #BFBFBF;
+  }
+
+  .zero-coupons {
+    width: 400rpx;
+    height: 366rpx;
+    vertical-align: middle;
+  }
+}
+</style>