From 512d87c6f2c13b391a757190385328835f09cdd4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8D=A2=E8=B6=8A?= <552369664@qq.com>
Date: Tue, 20 Aug 2024 16:38:50 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E3=80=91=E5=95=86=E5=93=81=E7=BB=93=E7=AE=97=E9=A1=B5=E7=8E=B0?=
 =?UTF-8?q?=E5=9C=A8=E5=8F=AF=E5=B1=95=E7=A4=BA=E4=BC=98=E6=83=A0=E5=88=B8?=
 =?UTF-8?q?=E6=98=AF=E5=90=A6=E5=8F=AF=E7=94=A8=E4=BB=A5=E5=8F=8A=E6=98=AF?=
 =?UTF-8?q?=E5=90=A6=E5=8F=AF=E7=94=A8=E7=9A=84=E5=8E=9F=E5=9B=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../s-coupon-select/s-coupon-select.vue       | 44 ++++++++++---------
 1 file changed, 23 insertions(+), 21 deletions(-)

diff --git a/sheep/components/s-coupon-select/s-coupon-select.vue b/sheep/components/s-coupon-select/s-coupon-select.vue
index e1a9db43..42d7e7f5 100644
--- a/sheep/components/s-coupon-select/s-coupon-select.vue
+++ b/sheep/components/s-coupon-select/s-coupon-select.vue
@@ -1,24 +1,19 @@
 <!-- 订单确认的优惠劵选择弹窗 -->
 <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" :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;