feat(coupon-card): 添加优惠券卡组件并在我的优惠券页面中使用

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

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import Card from '@/components/card.vue'
+import { Coupon } from '../../../core/libs/models'
+import dayjs from 'dayjs'
+withDefaults(defineProps<{ options?: Coupon; canSelect?: boolean; selected?: boolean }>(), {
+  canSelect: false,
+  selected: false,
+})
+const emits = defineEmits<{ select: [coupon: Coupon] }>()
+</script>
+<template>
+  <Card custom-class="mx-3.5">
+    <div class="flex gap-3">
+      <div class="w-[94px] h-[94px] bg-[#f6f6f6] rounded-2.5 overflow-hidden">
+        <template v-if="options.couponType === 1">
+          <div class="bg-[#fff8f8] w-full h-full flex flex-col items-center justify-center">
+            <div class="text-[#ff7878] text-[26px] font-normal font-['PingFang_SC']">
+              {{ options.brandPoints }}
+            </div>
+            <div class="text-[#ff7878] text-base font-normal font-['PingFang_SC']">积分</div>
+          </div>
+        </template>
+        <template v-else>
+          <wd-img width="100%" height="100%" :src="options.couponImgUrl"></wd-img>
+        </template>
+      </div>
+      <div class="flex-1 flex flex-col justify-around">
+        <div class="text-black text-sm font-normal font-['PingFang_SC'] leading-normal">
+          <!-- GELATO咖啡兑换券 -->
+          {{ options.couponName }}
+        </div>
+        <div class="text-black/40 text-xs font-normal font-['PingFang_SC'] leading-normal">
+          有效期：
+          <!-- 2024/04/01-2024/05/30 -->
+          {{ dayjs(options.validityStartDate).format('YYYY/MM/DD') }}-{{
+            dayjs(options.validityEndDate).format('YYYY/MM/DD')
+          }}
+        </div>
+        <div class="text-black/40 text-xs font-normal font-['PingFang_SC'] leading-normal">
+          使用说明
+        </div>
+      </div>
+      <div class="flex items-center" v-if="canSelect" @click="emits('select', options)">
+        <div
+          class="w-4 h-4 rounded-full border border-black/60 border-solid"
+          :class="`${selected ? 'bg-black' : ''}`"
+        ></div>
+      </div>
+    </div>
+  </Card>
+</template>

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

@@ -6,13 +6,14 @@ import Card from '@/components/card.vue'
 import { getCoupons } from '../../../core/libs/requests'
 import PageHelper from '@/components/page-helper.vue'
 import dayjs from 'dayjs'
+import CouponCard from '@/pages/common/components/coupon-card.vue'
 
 const tab = ref(2)
 const tabs = ref([
   { label: '商品优惠券', value: 2 },
   { label: '销售积分券', value: 1 },
 ])
-const query = computed(() => ({ couponType: tab.value }))
+const query = computed(() => ({ couponType: tab.value, isUse: 0 }))
 // const {data, run: set} = useRequest(() => getCoupons({}))
 </script>
 <template>
@@ -26,47 +27,7 @@ const query = computed(() => ({ couponType: tab.value }))
       <template #default="{ source }">
         <div class="flex flex-col gap-4">
           <template v-for="(it, i) of source.list" :key="i">
-            <Card custom-class="mx-3.5">
-              <div class="flex gap-3">
-                <div class="w-[94px] h-[94px] bg-[#f6f6f6] rounded-2.5 overflow-hidden">
-                  <template v-if="it.couponType === 1">
-                    <div
-                      class="bg-[#fff8f8] w-full h-full flex flex-col items-center justify-center"
-                    >
-                      <div class="text-[#ff7878] text-[26px] font-normal font-['PingFang_SC']">
-                        {{ it.brandPoints }}
-                      </div>
-                      <div class="text-[#ff7878] text-base font-normal font-['PingFang_SC']">
-                        积分
-                      </div>
-                    </div>
-                  </template>
-                  <template v-else>
-                    <wd-img width="100%" height="100%" :src="it.couponImgUrl"></wd-img>
-                  </template>
-                </div>
-                <div class="flex flex-col justify-around">
-                  <div class="text-black text-sm font-normal font-['PingFang_SC'] leading-normal">
-                    <!-- GELATO咖啡兑换券 -->
-                    {{ it.couponName }}
-                  </div>
-                  <div
-                    class="text-center text-black/40 text-xs font-normal font-['PingFang_SC'] leading-normal"
-                  >
-                    有效期：
-                    <!-- 2024/04/01-2024/05/30 -->
-                    {{ dayjs(it.validityStartDate).format('YYYY/MM/DD') }}-{{
-                      dayjs(it.validityEndDate).format('YYYY/MM/DD')
-                    }}
-                  </div>
-                  <div
-                    class="text-black/40 text-xs font-normal font-['PingFang_SC'] leading-normal"
-                  >
-                    使用说明
-                  </div>
-                </div>
-              </div>
-            </Card>
+            <CouponCard :options="it"></CouponCard>
           </template>
         </div>
       </template>