【功能优化】商城：价格计算时，返回可用 + 不可用的优惠劵

pages/order/confirm.vue

@@ -52,25 +52,38 @@
               class="score-img"
             />
             <text class="item-value ss-m-r-24">
-              {{ state.pointStatus ? state.orderInfo.totalPoint - state.orderInfo.usePoint : (state.orderInfo.totalPoint || 0) }}
+              {{
+                state.pointStatus
+                  ? state.orderInfo.totalPoint - state.orderInfo.usePoint
+                  : state.orderInfo.totalPoint || 0
+              }}
             </text>
             <checkbox-group @change="changeIntegral">
-              <checkbox :checked='state.pointStatus' :disabled="!state.orderInfo.totalPoint || state.orderInfo.totalPoint <= 0" />
+              <checkbox
+                :checked="state.pointStatus"
+                :disabled="!state.orderInfo.totalPoint || state.orderInfo.totalPoint <= 0"
+              />
             </checkbox-group>
           </view>
         </view>
         <!-- 快递配置时，信息的展示 -->
-        <view class="order-item ss-flex ss-col-center ss-row-between" v-if='addressState.deliveryType === 1'>
+        <view
+          class="order-item ss-flex ss-col-center ss-row-between"
+          v-if="addressState.deliveryType === 1"
+        >
           <view class="item-title">运费</view>
           <view class="ss-flex ss-col-center">
             <text class="item-value ss-m-r-24" v-if="state.orderInfo.price.deliveryPrice > 0">
               +￥{{ fen2yuan(state.orderInfo.price.deliveryPrice) }}
             </text>
-            <view class='item-value ss-m-r-24' v-else>免运费</view>
+            <view class="item-value ss-m-r-24" v-else>免运费</view>
           </view>
         </view>
         <!-- 门店自提时，需要填写姓名和手机号 -->
-        <view class="order-item ss-flex ss-col-center ss-row-between" v-if='addressState.deliveryType === 2'>
+        <view
+          class="order-item ss-flex ss-col-center ss-row-between"
+          v-if="addressState.deliveryType === 2"
+        >
           <view class="item-title">联系人</view>
           <view class="ss-flex ss-col-center">
             <uni-easyinput
@@ -82,7 +95,10 @@
             />
           </view>
         </view>
-        <view class="order-item ss-flex ss-col-center ss-row-between" v-if='addressState.deliveryType === 2'>
+        <view
+          class="order-item ss-flex ss-col-center ss-row-between"
+          v-if="addressState.deliveryType === 2"
+        >
           <view class="item-title">联系电话</view>
           <view class="ss-flex ss-col-center">
             <uni-easyinput
@@ -190,7 +206,6 @@
   import AddressSelection from '@/pages/order/addressSelection.vue';
   import sheep from '@/sheep';
   import OrderApi from '@/sheep/api/trade/order';
-  import CouponApi from '@/sheep/api/promotion/coupon';
   import { fen2yuan } from '@/sheep/hooks/useGoods';
 
   const state = reactive({
@@ -266,9 +281,9 @@
       remark: state.orderPayload.remark,
       deliveryType: addressState.value.deliveryType,
       addressId: addressState.value.addressInfo.id, // 收件地址编号
-      pickUpStoreId: addressState.value.pickUpInfo.id,//自提门店编号
+      pickUpStoreId: addressState.value.pickUpInfo.id, //自提门店编号
-      receiverName: addressState.value.receiverName,// 选择门店自提时，该字段为联系人名
+      receiverName: addressState.value.receiverName, // 选择门店自提时，该字段为联系人名
-      receiverMobile: addressState.value.receiverMobile,// 选择门店自提时，该字段为联系人手机
+      receiverMobile: addressState.value.receiverMobile, // 选择门店自提时，该字段为联系人手机
       pointStatus: state.pointStatus,
       combinationActivityId: state.orderPayload.combinationActivityId,
       combinationHeadId: state.orderPayload.combinationHeadId,
@@ -296,9 +311,9 @@
       couponId: state.orderPayload.couponId,
       deliveryType: addressState.value.deliveryType,
       addressId: addressState.value.addressInfo.id, // 收件地址编号
-      pickUpStoreId: addressState.value.pickUpInfo.id,//自提门店编号
+      pickUpStoreId: addressState.value.pickUpInfo.id, //自提门店编号
-      receiverName: addressState.value.receiverName,// 选择门店自提时，该字段为联系人名
+      receiverName: addressState.value.receiverName, // 选择门店自提时，该字段为联系人名
-      receiverMobile: addressState.value.receiverMobile,// 选择门店自提时，该字段为联系人手机
+      receiverMobile: addressState.value.receiverMobile, // 选择门店自提时，该字段为联系人手机
       pointStatus: state.pointStatus,
       combinationActivityId: state.orderPayload.combinationActivityId,
       combinationHeadId: state.orderPayload.combinationHeadId,
@@ -308,25 +323,13 @@
       return;
     }
     state.orderInfo = data;
+    state.couponInfo = data.coupons;
     // 设置收货地址
     if (state.orderInfo.address) {
       addressState.value.addressInfo = state.orderInfo.address;
     }
   }
 
-  // 获取可用优惠券
-  async function getCoupons() {
-    const { code, data } = await CouponApi.getMatchCouponList(
-      state.orderInfo.price.payPrice,
-      state.orderInfo.items.map((item) => item.spuId),
-      state.orderPayload.items.map((item) => item.skuId),
-      state.orderPayload.items.map((item) => item.categoryId),
-    );
-    if (code === 0) {
-      state.couponInfo = data;
-    }
-  }
-
   onLoad(async (options) => {
     if (!options.data) {
       sheep.$helper.toast('参数不正确，请检查！');
@@ -334,13 +337,15 @@
     }
     state.orderPayload = JSON.parse(options.data);
     await getOrderInfo();
-    await getCoupons();
   });
 
   // 使用 watch 监听地址和配送方式的变化
   watch(addressState, async (newAddress, oldAddress) => {
     // 如果收货地址或配送方式有变化，则重新计算价格
-    if (newAddress.addressInfo.id !== oldAddress.addressInfo.id || newAddress.deliveryType !== oldAddress.deliveryType) {
+    if (
+      newAddress.addressInfo.id !== oldAddress.addressInfo.id ||
+      newAddress.deliveryType !== oldAddress.deliveryType
+    ) {
       await getOrderInfo();
     }
   });

sheep/api/promotion/coupon.js

@@ -79,23 +79,6 @@ const CouponApi = {
       },
     });
   },
-  // 获得匹配指定商品的优惠劵列表
-  getMatchCouponList: (price, spuIds, skuIds, categoryIds) => {
-    return request({
-      url: '/promotion/coupon/match-list',
-      method: 'GET',
-      params: {
-        price,
-        spuIds: spuIds.join(','),
-        skuIds: skuIds.join(','),
-        categoryIds: categoryIds.join(','),
-      },
-      custom: {
-        showError: false,
-        showLoading: false, // 避免影响 settlementOrder 结算的结果
-      },
-    });
-  }
 };
 
 export default CouponApi;

sheep/components/s-coupon-list/s-coupon-list.vue

@@ -37,30 +37,22 @@
         <view class="ss-flex ss-row-between ss-m-t-16">
           <view
             class="sellby-text"
-            :class=" isDisable ? 'disabled-color' : 'subtitle-color'"
+            :class="isDisable ? 'disabled-color' : 'subtitle-color'"
             v-if="data.validityType === 2"
           >
             有效期：领取后 {{ data.fixedEndTerm }} 天内可用
           </view>
-          <view
+          <view class="sellby-text" :class="isDisable ? 'disabled-color' : 'subtitle-color'" v-else>
-            class="sellby-text"
-            :class=" isDisable ? 'disabled-color' : 'subtitle-color'"
-            v-else
-          >
             有效期: {{ sheep.$helper.timeFormat(data.validStartTime, 'yyyy-mm-dd') }} 至
             {{ sheep.$helper.timeFormat(data.validEndTime, 'yyyy-mm-dd') }}
           </view>
-          <view
+          <view class="value-enough" :class="isDisable ? 'disabled-color' : 'subtitle-color'">
-            class="value-enough"
-            :class="isDisable ? 'disabled-color' : 'subtitle-color'"
-          >
             满 {{ fen2yuan(data.usePrice) }} 可用
           </view>
         </view>
       </view>
     </view>
 
-    <!-- TODO 芋艿：可优化，增加优惠劵的描述 -->
     <view class="desc ss-flex ss-row-between">
       <view>
         <view class="desc-title">{{ data.description }}</view>
@@ -76,12 +68,10 @@
 </template>
 
 <script setup>
-  import { computed, reactive } from 'vue';
+  import { computed } from 'vue';
   import { fen2yuan } from '../../hooks/useGoods';
   import sheep from '../../index';
 
-  const state = reactive({});
-
   const isDisable = computed(() => {
     if (props.type === 'coupon') {
       return false;
@@ -202,4 +192,4 @@
   .price-text {
     color: #ff0000;
   }
-</style>
+</style>

sheep/components/s-coupon-select/s-coupon-select.vue

@@ -1,19 +1,28 @@
 <!-- 订单确认的优惠劵选择弹窗 -->
 <template>
-  <su-popup :show="show" type="bottom" round="20" @close="emits('close')" showClose backgroundColor="#f2f2f2">
+  <su-popup
+    :show="show"
+    type="bottom"
+    round="20"
+    @close="emits('close')"
+    showClose
+    backgroundColor="#f2f2f2"
+  >
     <view class="model-box">
       <view class="title ss-m-t-16 ss-m-l-20 ss-flex">优惠券</view>
-      <scroll-view class="model-content" scroll-y :scroll-with-animation="false" :enable-back-to-top="true">
+      <scroll-view
+        class="model-content"
+        scroll-y
+        :scroll-with-animation="false"
+        :enable-back-to-top="true"
+      >
         <!--可使用的优惠券区域-->
         <view class="subtitle ss-m-l-20">可使用优惠券</view>
-        <view v-for="(item, index) in state.couponInfo.filter(coupon => coupon.match)" :key="index">
+        <view
+          v-for="(item, index) in state.couponInfo.filter((coupon) => coupon.match)"
+          :key="index"
+        >
           <s-coupon-list :data="item" type="user" :disabled="false">
-            <template v-slot:reason>
-              <view class="ss-flex ss-m-t-24">
-                <view class="reason-title">可用原因：</view>
-                <view class="reason-desc">{{ item.description || '已达到使用门槛' }}</view>
-              </view>
-            </template>
             <template #default>
               <label class="ss-flex ss-col-center" @tap="radioChange(item.id)">
                 <radio
@@ -28,12 +37,12 @@
         </view>
         <!--不可使用的优惠券区域-->
         <view class="subtitle ss-m-t-40 ss-m-l-20">不可使用优惠券</view>
-        <view v-for="item in state.couponInfo.filter(coupon => !coupon.match)" :key="item.id">
+        <view v-for="item in state.couponInfo.filter((coupon) => !coupon.match)" :key="item.id">
           <s-coupon-list :data="item" type="user" :disabled="true">
             <template v-slot:reason>
               <view class="ss-flex ss-m-t-24">
                 <view class="reason-title"> 不可用原因：</view>
-                <view class="reason-desc">{{ item.description || '未达到使用门槛' }}</view>
+                <view class="reason-desc">{{ item.mismatchReason || '未达到使用门槛' }}</view>
               </view>
             </template>
           </s-coupon-list>
@@ -49,10 +58,10 @@
   import { computed, reactive } from 'vue';
 
   const props = defineProps({
-    modelValue: { // 优惠劵列表
+    modelValue: {
+      // 优惠劵列表
       type: Object,
-      default() {
+      default() {},
-      },
     },
     show: {
       type: Boolean,