【功能优化】商品结算页现在可展示优惠券是否可用以及是否可用的原因

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

@@ -1,24 +1,19 @@
 <!-- 订单确认的优惠劵选择弹窗 -->
 <template>
-  <su-popup
+  <su-popup :show="show" type="bottom" round="20" @close="emits('close')" showClose backgroundColor="#f2f2f2">
-    :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
+      <scroll-view class="model-content" scroll-y :scroll-with-animation="false" :enable-back-to-top="true">
-        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" :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
@@ -31,19 +26,18 @@
             </template>
           </s-coupon-list>
         </view>
-        <!-- TODO 芋艿：未来接口需要支持下
+        <!--不可使用的优惠券区域-->
         <view class="subtitle ss-m-t-40 ss-m-l-20">不可使用优惠券</view>
-        <view v-for="item in state.couponInfo.cannot_use" :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.cannot_use_msg }}</view>
+                <view class="reason-desc">{{ item.description || '未达到使用门槛' }}</view>
               </view>
             </template>
           </s-coupon-list>
         </view>
-      -->
       </scroll-view>
     </view>
     <view class="modal-footer ss-flex">
@@ -57,7 +51,8 @@
   const props = defineProps({
     modelValue: { // 优惠劵列表
       type: Object,
-      default() {},
+      default() {
+      },
     },
     show: {
       type: Boolean,
@@ -84,7 +79,7 @@
   // 确认优惠劵
   const onConfirm = () => {
     emits('confirm', state.couponId);
-  }
+  };
 </script>
 <style lang="scss" scoped>
   :deep() {
@@ -96,25 +91,30 @@
   .model-box {
     height: 60vh;
   }
+
   .title {
     font-size: 36rpx;
     height: 80rpx;
     font-weight: bold;
     color: #333333;
   }
+
   .subtitle {
     font-size: 26rpx;
     font-weight: 500;
     color: #333333;
   }
+
   .model-content {
     height: 54vh;
   }
+
   .modal-footer {
     width: 100%;
     height: 120rpx;
     background: #fff;
   }
+
   .confirm-btn {
     width: 710rpx;
     margin-left: 20rpx;
@@ -123,12 +123,14 @@
     border-radius: 40rpx;
     color: #fff;
   }
+
   .reason-title {
     font-weight: 600;
     font-size: 20rpx;
     line-height: 26rpx;
     color: #ff0003;
   }
+
   .reason-desc {
     font-weight: 600;
     font-size: 20rpx;