feat(confirm-order): 支持选择多个优惠券并优化优惠券展示逻辑

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

@@ -23,6 +23,8 @@ import { storeToRefs } from 'pinia'
 import { useRouter } from '../../../../core/utils/router'
 import dayjs from 'dayjs'
 import { Coupon } from '../../../../core/libs/models'
+import CouponCard from '@/pages/common/components/coupon-card.vue'
+import { select } from 'radash'
 
 const router = useRouter()
 const userStore = useUserStore()
@@ -30,7 +32,7 @@ const { userInfo } = storeToRefs(userStore)
 const show = ref(false)
 const a = ref(1)
 const data = ref()
-const selectedCoupon = ref<Coupon>()
+const selectedCoupons = ref<Coupon[]>()
 const { data: coupons, run: setCoupons } = useRequest(() =>
   getProductCoupons({
     userId: userInfo.value.userId,
@@ -38,18 +40,21 @@ const { data: coupons, run: setCoupons } = useRequest(() =>
     isUse: 0,
   }),
 )
+const paidPoints = computed(() => (data.value?.totalsPoints || 0).toString())
 const handlePay = async () => {
+  console.log(111)
+
+  const couponList =
+    selectedCoupons.value?.map((it) => ({
+      couponId: it.id,
+      projectIds: it.productIds,
+      buinessId: it.buinessId,
+    })) || []
   const { code } = await requestToast(
     () =>
       orderPay({
         ...data?.value,
-        couponList: [
-          {
-            couponId: selectedCoupon.value.id,
-            projectIds: selectedCoupon.value.productIds,
-            buinessId: selectedCoupon.value.buinessId,
-          },
-        ],
+        couponList,
       }),
     { success: true, successTitle: '兑换成功' },
   )
@@ -61,6 +66,10 @@ const handleQ = async () => {
   await setCoupons()
   show.value = true
 }
+const handleSelect = (coupon: Coupon) => {
+  selectedCoupons.value = [coupon]
+  show.value = false
+}
 onLoad(async (query: { data: string }) => {
   data.value = JSON.parse(query.data)
 })
@@ -72,7 +81,7 @@ onLoad(async (query: { data: string }) => {
       <div class="flex flex-col gap-6">
         <template v-for="(it, i) in data?.list" :key="i">
           <div class="flex gap-3">
-            <div class="w-16 h-16 bg-[#f6f6f6] rounded-lg">
+            <div class="w-16 h-16 bg-[#f6f6f6] rounded-lg overflow-hidden">
               <wd-img width="100%" height="100%" :src="it.orderImgUrl"></wd-img>
             </div>
             <div class="flex flex-col justify-between flex-1">
@@ -94,15 +103,20 @@ onLoad(async (query: { data: string }) => {
     </Card>
     <Card>
       <div class="flex flex-col gap-8">
-        <SectionHeading title="总积分" :end-text="data?.totalsPoints" size="sm"></SectionHeading>
-        <div @click="handleQ">
-          <SectionHeading title="优惠券" end-text="已选2张" end-arrow size="sm"></SectionHeading>
-        </div>
         <SectionHeading
-          title="实付积分"
-          :end-text="data?.totalsCurrPoints"
+          title="总积分"
+          :end-text="data?.totalsPoints.toString()"
           size="sm"
         ></SectionHeading>
+        <div @click="handleQ">
+          <SectionHeading
+            title="优惠券"
+            :end-text="`已选${selectedCoupons?.length || 0}张`"
+            end-arrow
+            size="sm"
+          ></SectionHeading>
+        </div>
+        <SectionHeading title="实付积分" :end-text="paidPoints" size="sm"></SectionHeading>
       </div>
     </Card>
     <BottomAppBar fixed placeholder>
@@ -135,32 +149,14 @@ onLoad(async (query: { data: string }) => {
           <wd-tab title="可用优惠券"></wd-tab>
           <wd-tab title="不可用优惠券"></wd-tab>
         </wd-tabs>
-        <div class="bg-[#f6f6f6] p-3.5 flex flex-col gap-4">
+        <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">
-                  <!-- GELATO咖啡兑换券 -->
-                  {{ 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="{ couponType: 2, ...it }"
+              canSelect
+              :selected="selectedCoupons?.map(({ id }) => id).includes(it.id)"
+              @select="handleSelect"
+            ></CouponCard>
           </template>
         </div>
         <!-- <wd-button block :round="false">确认</wd-button> -->

packages/app/src/pages/home/mall/shopping-cart/index.vue

@@ -76,6 +76,11 @@ const handleProductNumsChange = async (nums, product) => {
         },
       ],
     })
+    if (selected.value.map((it) => it.productId).includes(product.productId)) {
+      selected.value = selected.value.map((it) =>
+        it.productId === product.productId ? { ...it, nums } : it,
+      )
+    }
   } else {
     await deleteProductItemBuy({
       doList: [
@@ -86,6 +91,11 @@ const handleProductNumsChange = async (nums, product) => {
         },
       ],
     })
+    if (selected.value.map((it) => it.productId).includes(product.productId)) {
+      selected.value = selected.value.map((it) =>
+        it.productId === product.productId ? { ...it, nums } : it,
+      )
+    }
   }
   await pageHelperRef.value?.refresh()
 }
@@ -113,13 +123,14 @@ const handlePlaceOrder = async () => {
   )
   if (code === 0) {
     // router.push(`/pages/home/mall/confirm-order`)
-    await deleteProductItemBuy({
-      doList: selected.value.map(({ productId }) => ({
-        productId,
-        deleted: true,
-        userId: userInfo.value.userId,
-      })),
-    })
+    // await deleteProductItemBuy({
+    //   doList: selected.value.map(({ productId }) => ({
+    //     productId,
+    //     deleted: true,
+    //     userId: userInfo.value.userId,
+    //   })),
+    // })
+    pageHelperRef.value?.reload()
     router.push(`/pages/home/mall/confirm-order/index?data=${JSON.stringify(res)}`)
   }
 }
@@ -145,7 +156,7 @@ const handlePlaceOrder = async () => {
                     :class="`${selected.map((it) => it.productId).includes(it.productId) ? 'bg-black' : ''}`"
                   ></div>
                 </div>
-                <div class="w-[110px] h-[110px] bg-[#f6f6f6] rounded-2xl">
+                <div class="w-[110px] h-[110px] bg-[#f6f6f6] rounded-2xl overflow-hidden">
                   <wd-img width="100%" height="100%" :src="it.productCoverImgUrl"></wd-img>
                 </div>
                 <div class="flex flex-col justify-between flex-1">