商家订单优惠卷

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

@@ -104,10 +104,15 @@ onLoad((query: { id: string }) => {
           <div class="text-[#ef4343] text-sm font-normal font-['PingFang_SC'] leading-[10.18px]">
             -{{ Number(data.points) - Number(data.payPoints) }}
           </div>
+
+          <div v-for="(it, i) in data.couponList" :key="i">
+            <wd-img :option="{ ...it }"></wd-img>
+          </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>

packages/merchant/src/components/coupon-record.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import Card from '@/components/card.vue'
+import dayjs from 'dayjs'
+import used from '@designer-hub/assets/src/libs/assets/used'
+
+
+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/merchant/src/pages/mine/merchant/orders/detail/index.vue

@@ -10,7 +10,9 @@
 import { getPointsOrder } from '../../../../../core/libs/requests'
 import dayjs from 'dayjs'
 import { ref } from 'vue'
-import SectionHeading from '@designer-hub/app/src/components/section-heading.vue'
+
+import CouponRecord from '@/components/coupon-record.vue'
+import right from "@/assets/svgs/right.svg";
 
 const collapseValue = ref<string[]>(['item1'])
 const id = ref()
@@ -82,6 +84,34 @@ onLoad(async (query: { id: string }) => {
           </div>
         </div>
       </div> -->
+      <div
+        class="flex mt-[20px] items-center justify-between"
+        v-if="data?.couponList"
+      >
+        <span  class="text-black/60 text-sm font-normal font-['PingFang_SC'] leading-normal">优惠卷&nbsp&nbsp&nbsp&nbsp
+          <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>
+        </span>
+          <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.payPoints) }}
+            </div>
+
+            <div v-for="(it, i) in data.couponList" :key="i">
+              <wd-img :option="{ ...it }"></wd-img>
+            </div>
+            <wd-img :src="right" width="12" height="12"></wd-img>
+          </div>
+      </div>
+      <div v-for="(it, i) in data.couponList" :key="i">
+        <CouponRecord :option="{ ...it }"></CouponRecord>
+      </div>
       <div class="flex mt-[20px] items-center justify-between">
         <div class="text-black/60 text-sm font-normal font-['PingFang_SC'] leading-normal">
           实际支付积分