Fix：3982 【商城小程序】送礼页面优惠券改为选填模式

pkg_user/views/gift/gift.vue

@@ -106,14 +106,14 @@
     <view class="price-wrap">
       <view class="v12-font-28 v12-dark-text v12-font-bold">价格明细</view>
       <view class="v12-justify-between v12-align-center v12-font-28 v12-mt-1">
-        <view>商品总价：</view>
+        <view class="v12-font-24 v12-dark-text">商品总价：</view>
         <view>
           <text class="v12-dark-text v12-font-22">￥</text>
           <text class="v12-dark-text v12-font-30">{{ computedResult.totalPrice }}</text>
         </view>
       </view>
       <view class="v12-justify-between v12-align-center v12-font-28 v12-mt-1">
-        <view>平台折扣：</view>
+        <view class="v12-font-24 v12-dark-text">平台折扣：</view>
         <view>
           -
           <text class="v12-dark-text v12-font-22">￥</text>
@@ -121,11 +121,20 @@
         </view>
       </view>
       <view class="v12-justify-between v12-align-center v12-font-28 v12-mt-1">
-        <view>优惠券：</view>
-        <view>
+        <view class="v12-font-24 v12-dark-text v12-align-center">
+          <view class="">
+            优惠券：
+          </view>
+          <view class="v12-align-center v12-ml-1" v-if="couponTitle">
+            <view class="v12-primary-text v12-primary-border v12-font-22 v12-radius-6 v12-px-1">券</view>
+            <view class="v12-primary-text v12-primary-border v12-font-22 v12-radius-6 v12-px-1">{{ couponTitle }}</view>
+          </view>
+        </view>
+        <view @click="showCouponsPopup()" class="v12-dark-text v12-font-30">
           -
           <text class="v12-dark-text v12-font-22">￥</text>
           <text class="v12-dark-text v12-font-30">{{ computedResult.couponPrice }}</text>
+          <text class="iconfont icon-jiantou v12-font-24 v12-dark-text"></text>
         </view>
       </view>
       <u-divider></u-divider>
@@ -178,6 +187,22 @@
       :show.sync="showPayPicker"
       @confirm="onPayConfirm"
     />
+    <u-popup
+      :show="showPopup"
+      :round="10"
+      mode="bottom"
+      close-on-click-overlay
+      @close="changeCoupons"
+    >
+      <CouponsPopup
+        v-if="couponList.usable && couponList.usable.length > 0"
+        :two-list="couponList"
+        @change="changeCoupons"
+        @close="close"
+        :id="couponId"
+        :show-tab="false"
+      />
+    </u-popup>
   </view>
 </template>
 
@@ -189,12 +214,14 @@ import {mapGetters} from "vuex";
 import giftTips from './components/giftTips.vue'
 import CoverPicker from './components/CoverPicker.vue'
 import PayPicker from './components/PayPicker.vue';
+import CouponsPopup from "@/components/CouponsPopup.vue"
 export default {
   components: {
     giftTips,
     CoverPicker,
     PayPicker,
-    passkeyborad
+    passkeyborad,
+    CouponsPopup
   },
   data() {
     return {
@@ -227,11 +254,24 @@ export default {
       defaultIndex:0,
       discount: null,
       computedResult: {},
+      couponList: {
+        unusable: [],
+        usable: []
+      },
+      couponTitle: '',
+      showPopup: false
+    }
+  },
+  watch: {
+    async couponId(value) {
+      this.couponIndex = this.couponList['usable']?.findIndex(item => item.id === +value)
+      this.couponTitle = this.couponList['usable']?.[this.couponIndex]?.couponTitle
+      await this.computedPrice(this.goodsInfo.cartNum, 1)
     }
   },
   onLoad(opts) {
     this.cartId = opts.cartId
-    this.couponId = opts.couponId
+    // this.couponId = opts.couponId || 0
     this.discount = opts.discount
     this.getGift()
   },
@@ -256,6 +296,26 @@ export default {
     })
   },
   methods: {
+    showCouponsPopup() {
+      this.showPopup = !this.showPopup
+    },
+    close() {
+      this.showPopup = !this.showPopup
+    },
+    changeCoupons(item) {
+      if(!item) return
+      if (this.couponList.usable && this.couponList.usable.length === 0) return
+      this.showPopup = !this.showPopup
+      if(!item.id) {
+        this.couponId = 0
+        this.couponTitle = ''
+        this.computedPrice(this.goodsInfo.cartNum, 1)
+        return
+      }
+      this.couponId = item.id
+      this.couponTitle = item.couponTitle
+      this.computedPrice(this.goodsInfo.cartNum, 1)
+    },
     makeAgain() {
       const params = {
         orderId: this.orderId,
@@ -290,7 +350,12 @@ export default {
       },10)
       this.$forceUpdate()
     },
-    computedPrice(num) {
+    /**
+     * 计算价格
+     * @param {Number} num 数量
+     * @param {Boolean} f 有值时 couponId不取默认值
+     */
+    computedPrice(num, f) {
       const params = {
         cartId: this.cartId,
         couponId: this.couponId,
@@ -300,6 +365,11 @@ export default {
         params.discount = this.discount
       }
       getGiftCardSendOrderAmount(this.orderKey, params).then(res => {
+        this.couponList = res.data.result.couponList
+        if(!f) {
+          this.couponId = res.data.result.defaultCouponId || 0
+          this.$forceUpdate()
+        } 
         this.payPrice = res.data.result.payPrice
         this.computedResult = res.data.result
         this.$forceUpdate()
@@ -335,10 +405,9 @@ export default {
         this.selectedCover = res.data.specialGiftCardTemplate.cover
         this.giftImage = res.data.specialGiftCardTemplate.image
         this.defaultIndex = this.coverList.findIndex(item => item.id === this.templateId)
-        console.log(this.defaultIndex, 'defaultIndex');
-        if(!this.couponId) {
-          this.couponId = res.data.couponList.usable[0] && res.data.couponList.usable[0].id || ''
-        }
+        // if(!this.couponId) {
+        //   this.couponId = res.data.couponList.usable[0] && res.data.couponList.usable[0].id || ''
+        // }
         this.computedPrice(this.goodsInfo.cartNum)
       })
     },
@@ -460,17 +529,17 @@ export default {
         }
       }) .catch(err => {
         console.log(err);
-            uni.hideLoading();
-            uni.showToast({
-              title:err.msg,
-              icon: "none",
-              duration: 2000
-            });
-          }).finally(() => {
-            this.isShowPayPwdPop = false;
-            this.$refs.payPwdPop.clear();//清空支付密码
-            this.$refs.payPwdPop.close();//关闭支付密码弹窗
-          });
+        uni.hideLoading();
+        uni.showToast({
+          title:err.msg,
+          icon: "none",
+          duration: 2000
+        });
+      }).finally(() => {
+        this.isShowPayPwdPop = false;
+        this.$refs.payPwdPop.clear();//清空支付密码
+        this.$refs.payPwdPop.close();//关闭支付密码弹窗
+      });
     }
   }
 }