feat(messages): 添加优惠券选择功能并优化优惠券展示

packages/app/src/pages/messages/index.vue

@@ -26,6 +26,8 @@ import { requestToast } from '../../core/utils/common'
 import { useUserStore } from '../../store'
 import { storeToRefs } from 'pinia'
 import MessageCard from './components/message-card.vue'
+import CouponCard from '../common/components/coupon-card.vue'
+import { select } from 'radash'
 
 const pageHelperRef = ref<ComponentExposed<typeof PageHelper>>()
 const userStore = useUserStore()
@@ -56,7 +58,7 @@ const handleSubmit = async (message: Message) => {
       orderPointsSubmit({
         id: message.businessId,
         userId: message.designerId,
-        couponUserId: 19,
+        couponUserId: selectedCoupon.value?.id,
       }),
     {
       success: true,
@@ -76,6 +78,10 @@ const handleQ = async (res) => {
   coupons.value = res
   show.value = true
 }
+const handleSelect = (coupon: Coupon) => {
+  selectedCoupon.value = coupon
+  show.value = false
+}
 onShow(async () => {
   nextTick(() => {
     pageHelperRef.value?.refresh()
@@ -116,31 +122,14 @@ onShow(async () => {
           <wd-tab title="可用优惠券"></wd-tab>
           <wd-tab title="不可用优惠券"></wd-tab>
         </wd-tabs>
-        <div class="bg-[#f6f6f6] p-3.5">
+        <div class="bg-[#f6f6f6] py-3.5 flex flex-col gap-4">
           <template v-for="(it, i) in coupons" :key="i">
-            <div
-              class="bg-white rounded-2xl p-3.5 flex gap-2.5"
-              @click="(selectedCoupon = it), (show = false)"
-            >
-              <div class="w-[94px] h-[94px] bg-[#f6f6f6] rounded-[10px]"></div>
-              <div class="flex flex-col justify-around flex-1">
-                <div class="text-black text-sm font-normal font-['PingFang_SC'] leading-normal">
-                  {{ it.couponName }}
-                </div>
-                <div class="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 class="flex items-center">
-                <div class="w-4 h-4 rounded-full border border-black/60 border-solid"></div>
-              </div>
-            </div>
+            <CouponCard
+              :options="it"
+              can-select
+              :selected="selectedCoupon?.id === it.id"
+              @select="handleSelect"
+            ></CouponCard>
           </template>
         </div>
         <!-- <wd-button block :round="false">确认</wd-button> -->