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

components/Coupons.vue

@@ -6,7 +6,7 @@
         class="coupons__cover"
         mode="widthFix"
       />
-      <view @click="selectCoupon" class="check-radio" :class="{'v12-primary': data.checked}">
+      <view @click="selectCoupon" class="check-radio" :class="{'v12-primary': data.checked}" v-if="showRadio">
         <radio
           v-if="radioModel && data.status === 0"
           :value="data.id"
@@ -50,6 +50,10 @@
 export default {
   name: "Coupons",
   props: {
+    showRadio: {
+      type: Boolean,
+      default: true
+    },
     data: {
       type: Object,
       default: () => {

components/CouponsPopup.vue

@@ -14,7 +14,7 @@
         @change="changeNav"
         v-if="showTab"
       />
-      <view class="v12-radius-20 v12-white v12-align-center v12-justify-around v12-pa-3" v-else>
+      <view class="v12-radius-20 v12-white v12-align-center v12-justify-around v12-pa-3" v-if="!showTab && showRadio">
         <view class="">
           <view class="v12-text-center v12-font-28">
             券后价
@@ -61,6 +61,7 @@
         <view class="larg-one v12-mb-3">
           <Coupons
             :data="largOne"
+            :showRadio="showRadio"
             :radio-model="current === 0"
             @change="selectCoupon"
           />
@@ -75,6 +76,7 @@
         >
           <Coupons
             :data="item"
+            :showRadio="showRadio"
             :radio-model="current === 0"
             @change="selectCoupon"
             v-if="index !== maxIndex"
@@ -93,7 +95,7 @@
     </view>
     <button disabled></button>
     <view
-      v-if="current === 0"
+      v-if="current === 0 && showRadio"
       :class="{ 'btn-disabled': current === 1 }"
       class="btn-done bold flex jc-center ai-center v12-primary"
       @click="setCoupon"
@@ -111,6 +113,10 @@ export default {
   name: 'CouponsPopup',
   components: { SubSection, Coupons },
   props: {
+    showRadio: {
+      type: Boolean,
+      default: true
+    },
     twoList: {
       type: Object,
       default: {

pages/order/OrderSubmission/index.vue

@@ -380,7 +380,7 @@ export default {
         unusable: [],
         usable: []
       },
-      couponId: uni.getStorageSync('couponId') || 0,
+      couponId: null,
       couponIndex: -1,
       show: false,
       // 是否使用积分开关
@@ -449,8 +449,8 @@ export default {
   methods: {
     isNullOrEmpty,
     couponMax(e) {
-      this.couponTitle = e.couponTitle
+      // this.couponTitle = e.couponTitle
-      this.couponId = this.$yroute.query.couponId ||  uni.getStorageSync('couponId') || 0
+      // this.couponId = this.$yroute.query.couponId ||  uni.getStorageSync('couponId') || 0
     },
     showStoreList() {
       this.$store.commit("get_to", "orders")
@@ -464,7 +464,11 @@ export default {
     usePointsCheckChange(e) {
       this.computedPrice()
     },
-    // 计算订单金额
+    
+    /**
+     * 计算订单金额
+     * @param {*} f 有值时 couponId不取默认值
+     */
     computedPrice(f) {
       postOrderComputed(this.orderGroupInfo.orderKey, {
         addressId: this.addressInfo.id,
@@ -473,6 +477,10 @@ export default {
         usePoints: this.usePointsCheck ? 1 : 0,
         shipping_type: parseInt(this.shipping_type) + 1
       }).then(res => {
+        this.couponList = res.data.result.couponList
+        if(!f) {
+          this.couponId = res.data.result.defaultCouponId
+        }
         const data = res.data;
         if (data.status === "EXTEND_ORDER") {
           this.$yrouter.replace({
@@ -797,8 +805,17 @@ export default {
       if(!item) return
       if (this.couponList.usable.length === 0) return
       this.show = !this.show
-      this.couponId = uni.getStorageSync('couponId') || 0
+      if(!item.id) {
+        this.couponId = 0
+        this.couponTitle = ''
+        this.computedPrice(1)
+        return
+      }
+      this.couponId = item.id
       this.couponTitle = item.couponTitle
+      this.computedPrice(1)
+      // this.couponId = uni.getStorageSync('couponId') || 0
+      // this.couponTitle = item.couponTitle
     }
   }
 };

pages/shop/GoodsCon/index.vue

@@ -208,6 +208,7 @@
             @change="changeCoupons" 
             @close="changeCoupons()" 
             :showTab="false"
+            :showRadio="false"
             :currentPrice="storeInfo.price" />
         </u-popup>
         <!-- v9 优惠券结束 -->
@@ -1458,7 +1459,6 @@ export default {
             path: "/pages/order/OrderSubmission/index",
             query: {
               id: res.data.cartId,
-              couponId: that.couponId, // 优惠券ID
               discount: that.storeInfo.discount,
             }
           })
@@ -1467,7 +1467,8 @@ export default {
         if(news === 2) {
           const coupId = that.couponId ? that.couponId : (that.couponList.usable[0] && that.couponList.usable[0].id || '')
           uni.navigateTo({
-            url: '/pkg_user/views/gift/gift?cartId=' + res.data.cartId + '&couponId=' + coupId + (that.storeInfo.discount ? '&discount=' + that.storeInfo.discount : '')
+            // + '&couponId=' + coupId
+            url: '/pkg_user/views/gift/gift?cartId=' + res.data.cartId + (that.storeInfo.discount ? '&discount=' + that.storeInfo.discount : '')
           })
         }
         if(news === 0) {

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 class="v12-font-24 v12-dark-text v12-align-center">
-        <view>
+          <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) {
-        if(!this.couponId) {
+        //   this.couponId = res.data.couponList.usable[0] && res.data.couponList.usable[0].id || ''
-          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.hideLoading();
-            uni.showToast({
+        uni.showToast({
-              title:err.msg,
+          title:err.msg,
-              icon: "none",
+          icon: "none",
-              duration: 2000
+          duration: 2000
-            });
+        });
-          }).finally(() => {
+      }).finally(() => {
-            this.isShowPayPwdPop = false;
+        this.isShowPayPwdPop = false;
-            this.$refs.payPwdPop.clear();//清空支付密码
+        this.$refs.payPwdPop.clear();//清空支付密码
-            this.$refs.payPwdPop.close();//关闭支付密码弹窗
+        this.$refs.payPwdPop.close();//关闭支付密码弹窗
-          });
+      });
     }
   }
 }