feat(app): 添加优惠券记录组件并集成到订单详情页面

- 新增 CouponRecord 组件用于显示优惠券信息
- 在订单详情页面添加优惠券相关显示逻辑- 更新订单列表页面，增加积分和金额的显示
- 在数据模型中添加 couponList 字段用于存储优惠券信息

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

@@ -653,6 +653,14 @@ export interface PointsOrder {
    * 获取方式: 1:到店核销 3:其他
    */
   gainType?: number
+  couponList?: {
+    materialId: number
+    couponImgUrl: any
+    materialsName: string
+    validityStartDate: number
+    validityEndDate: number
+    brandPoints: number
+  }[]
 }
 export interface UserBasicInfo {
   id: number

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

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import Card from '@/components/card.vue'
+import dayjs from 'dayjs'
+import used from '@designer-hub/assets/src/libs/assets/used'
+import expired from '@designer-hub/assets/src/libs/assets/expired'
+import invalid from '@designer-hub/assets/src/libs/assets/invalid'
+import { CouponStatus } from '@/core/libs/models'
+
+const props = withDefaults(
+  defineProps<{
+    option?: {
+      materialId: number
+      couponImgUrl: any
+      materialsName: string
+      validityStartDate: number
+      validityEndDate: number
+      brandPoints: number
+    }
+    canSelect?: boolean
+    selected?: boolean
+  }>(),
+  {
+    canSelect: false,
+    selected: false,
+  },
+)
+</script>
+<template>
+  <div
+    class="mx-3.5 p-4 bg-[rgba(255,255,255,0.7)] rounded-2xl shadow-[0px_5px_8px_0px_rgba(21,3,3,0.03)]"
+  >
+    <div class="relative">
+      <div class="flex gap-3">
+        <div class="w-[68px] h-[68px] bg-[#f6f6f6] rounded-2.5 overflow-hidden">
+          <!--          <template v-if="option.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="option.couponImgUrl"></wd-img>
+          <!--          </template>-->
+        </div>
+        <div class="flex-1 flex flex-col justify-around">
+          <div class="flex items-center gap-1">
+            <div
+              class="px-[3px] rounded border border-solid border-[#ff3636] justify-center items-center gap-2.5 inline-flex"
+            >
+              <div
+                class="text-[#ff3e3e] text-[10px] font-normal font-['PingFang_SC'] leading-normal"
+              >
+                {{ option.materialsName }}
+              </div>
+            </div>
+            <div class="text-black text-sm font-normal font-['PingFang_SC'] leading-normal">
+              <!-- GELATO咖啡兑换券 -->
+              {{ option.couponName }}
+            </div>
+          </div>
+          <div class="text-black/40 text-xs font-normal font-['PingFang_SC'] leading-normal">
+            <!--            有效期：-->
+            <!-- 2024/04/01-2024/05/30 -->
+            {{ dayjs(option.validityStartDate).format('YYYY/MM/DD') }}-{{
+              dayjs(option.validityEndDate).format('YYYY/MM/DD')
+            }}
+          </div>
+          <!--          <div-->
+          <!--            class="text-black/40 text-xs font-normal font-['PingFang_SC'] leading-normal flex items-center"-->
+          <!--            @click.stop="emits('clickInstruction', options)"-->
+          <!--          >-->
+          <!--            使用说明-->
+          <!--            <wd-icon name="arrow-right" size="14"></wd-icon>-->
+          <!--          </div>-->
+        </div>
+        <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="used"></wd-img>
+      </div>
+    </div>
+  </div>
+</template>

packages/app/src/pages/mine/orders/detail/index.vue

@@ -8,6 +8,8 @@ import BottomAppBar from '@/components/bottom-app-bar.vue'
 import dayjs from 'dayjs'
 import { requestToast } from '../../../../core/utils/common'
 import { useMessage } from 'wot-design-uni'
+import { right } from '@/core/libs/svgs'
+import CouponRecord from '@/pages/common/components/coupon-record.vue'
 
 const { confirm } = useMessage()
 const id = ref()
@@ -81,6 +83,34 @@ onLoad((query: { id: string }) => {
     ></SectionHeading>
     <SectionHeading title="总积分" size="sm" :end-text="`${data?.points ?? 0}`"></SectionHeading>
     <SectionHeading
+      title="优惠券"
+      :end-text="`已选${data.couponList?.length || 0}张`"
+      end-arrow
+      size="sm"
+    >
+      <template #start>
+        <div
+          v-if="data.couponList?.length"
+          class="px-1 py-.75 rounded border border-solid border-[#ef4343] justify-center items-center gap-2.5 inline-flex"
+        >
+          <div class="text-[#ef4343] text-[9px] font-normal font-['PingFang_SC'] leading-[10.18px]">
+            已选{{ data.couponList?.length }}张
+          </div>
+        </div>
+      </template>
+      <template #append>
+        <div class="flex items-center gap-1">
+          <div class="text-[#ef4343] text-sm font-normal font-['PingFang_SC'] leading-[10.18px]">
+            -{{ Number(data.points) - Number(data.orderMoney) }}
+          </div>
+          <wd-img :src="right" width="12" height="12"></wd-img>
+        </div>
+      </template>
+    </SectionHeading>
+    <div v-for="(it, i) in data.couponList" :key="i">
+      <CouponRecord :option="{ ...it }"></CouponRecord>
+    </div>
+    <SectionHeading
       title="实际支付积分"
       size="sm"
       :end-text="`${data?.payPoints ?? 0}`"

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

@@ -53,12 +53,17 @@ onShow(async () => {
                     <div
                       class="text-start text-black/40 text-sm font-normal font-['PingFang_SC'] leading-normal"
                     >
-                      x{{ it.orderQuantity || 1 }}
+                      <template v-if="String(it.orderType) !== '3'">
+                        x{{ it.orderQuantity || 1 }}
+                      </template>
                     </div>
                     <div class="flex-1"></div>
                     <div
                       class="text-start text-black/60 text-sm font-normal font-['PingFang_SC'] leading-normal"
                     >
+                      <template v-if="String(it.orderType) === '3'">
+                        {{ '¥' + (it.orderMoney ?? 0) + ' ｜' }}
+                      </template>
                       {{ it.payPoints }}积分
                     </div>
                   </div>