feat(coupon): 优化优惠券展示和逻辑

- 在 CouponCard 组件中添加优惠券状态枚举，优化状态显示逻辑
- 在确认订单页面添加可用优惠券展示和选择功能
- 调整我的优惠券页面查询逻辑
- 重构部分代码以提高可维护性

packages/app/src/core/libs/models.ts

@@ -764,7 +764,17 @@ export interface ConfirmOrder {
   item: number
   type: any
 }
-
+export enum CouponStatus {
+//   HAVE_USE(1, "已使用"),
+//   NOT_USE(2, "未使用"),
+//   EXPIRED(3, "已过期"),
+//   BECAME_INVALID(4, "已失效"),
+// ;
+  HAVE_USE = 1,
+  NOT_USE = 2,
+  EXPIRED = 3,
+  BECAME_INVALID = 4
+}
 export interface Coupon {
   id: number
   couponId: number
@@ -800,6 +810,7 @@ export interface Coupon {
   materialName: string
   couponImgUrl: string
   couponDO?: { couponDesc?: string }
+  couponStatus: CouponStatus
 }
 export interface PointsDetail {
   id: number

packages/app/src/pages/common/components/coupon-card.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import Card from '@/components/card.vue'
-import { Coupon } from '../../../core/libs/models'
+import { Coupon, CouponStatus } from '../../../core/libs/models'
 import dayjs from 'dayjs'
-import { useMessage } from 'wot-design-uni'
 import used from '@designer-hub/assets/src/libs/assets/used'
-import invalid from '@designer-hub/assets/src/libs/assets/invalid'
 import expired from '@designer-hub/assets/src/libs/assets/expired'
+import invalid from '@designer-hub/assets/src/libs/assets/invalid'
 
 const props = withDefaults(
   defineProps<{ options?: Coupon; canSelect?: boolean; selected?: boolean }>(),
@@ -18,7 +17,7 @@ const emits = defineEmits<{ select: [coupon: Coupon]; clickInstruction: [coupon:
 </script>
 <template>
   <Card custom-class="mx-3.5">
-    <div class="relative">
+    <div class="relative" @click="emits('select', options)">
       <div class="flex gap-3">
         <div class="w-[94px] h-[94px] bg-[#f6f6f6] rounded-2.5 overflow-hidden">
           <template v-if="options.couponType === 1">
@@ -58,21 +57,31 @@ const emits = defineEmits<{ select: [coupon: Coupon]; clickInstruction: [coupon:
           </div>
           <div
             class="text-black/40 text-xs font-normal font-['PingFang_SC'] leading-normal flex items-center"
-            @click="emits('clickInstruction', options)"
+            @click.stop="emits('clickInstruction', options)"
           >
             使用说明
             <wd-icon name="arrow-right" size="14"></wd-icon>
           </div>
         </div>
-        <div class="flex items-center" v-if="canSelect" @click="emits('select', options)">
+        <div class="flex items-center" v-if="canSelect">
           <div
             class="w-4 h-4 rounded-full border border-black/60 border-solid"
             :class="`${selected ? 'bg-black' : ''}`"
           ></div>
         </div>
       </div>
-      <div class="absolute top--4 right--4">
-        <wd-img width="58" height="58" :src="options.isUse ? used : options.isValid ? invalid : expired"></wd-img>
+      <div v-if="options.couponStatus !== CouponStatus.NOT_USE" class="absolute top--4 right--4">
+        <wd-img
+          width="58"
+          height="58"
+          :src="
+            {
+              [CouponStatus.HAVE_USE]: used,
+              [CouponStatus.EXPIRED]: expired,
+              [CouponStatus.BECAME_INVALID]: invalid,
+            }[options.couponStatus]
+          "
+        ></wd-img>
       </div>
     </div>
   </Card>

packages/app/src/pages/home/mall/confirm-order/index.vue

@@ -43,6 +43,14 @@ const requestData = computed(() => ({
 const { data: confirmOrder, run: setConfirmOrder } = useRequest(() =>
   getOrderAmount(requestData.value),
 )
+const { data: coupons, run: setCoupons } = useRequest(
+  () =>
+    getProductCoupons({
+      userId: userInfo.value?.userId,
+      productIds: data.value?.list.map((it) => it.productId).join(','),
+    }),
+  {},
+)
 const offerPoints = computed(() => {
   const products = sort(data.value?.list, (it: any) => it.points).reverse()
   let sumBrandPoints = 0
@@ -95,7 +103,10 @@ const handleClose = () => {
 }
 onLoad(async (query: { data: string }) => {
   data.value = JSON.parse(query.data)
-  await setConfirmOrder()
+  console.log(data.value)
+  setCoupons()
+  await Promise.all([setCoupons(), setConfirmOrder()])
+  // await setConfirmOrder()
 })
 </script>
 
@@ -155,9 +166,11 @@ onLoad(async (query: { data: string }) => {
               <div class="flex items-center gap-1">
                 <template v-if="!selectedCoupons?.length">
                   <div
-                    class="text-black/40 text-sm font-normal font-['PingFang_SC'] leading-[10.18px]"
+                    class="text-sm font-normal font-['PingFang_SC'] leading-[10.18px]"
+                    :class="coupons.length ? 'text-[#ef4343]' : 'text-black/40'"
                   >
-                    选择优惠券
+                    <!--                    选择优惠券-->
+                    {{ coupons.length ? `${coupons.length}张可用` : '无可用' }}
                   </div>
                 </template>
                 <template v-else>

packages/app/src/pages/mine/coupons/index.vue

@@ -17,7 +17,7 @@ const tabs = ref([
   { label: '销售积分券', value: '1' },
   { label: '商品优惠券', value: '2' },
 ])
-const query = computed(() => ({ couponType: tab.value, isUse: 0 }))
+const query = computed(() => ({ couponType: tab.value }))
 // const {data, run: set} = useRequest(() => getCoupons({}))
 </script>
 <template>