feat(confirm-order): 添加优惠券选择组件，优化优惠券显示逻辑并更新积分计算

packages/app/src/pages/common/components/coupons-selector.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { getPointsCoupons, getProductCoupons } from '../../../core/libs/requests'
+import { Coupon } from '../../../core/libs/models'
+import { useUserStore } from '../../../store'
+import { storeToRefs } from 'pinia'
+import CouponCard from './coupon-card.vue'
+
+const props = withDefaults(
+  defineProps<{
+    type: 'points' | 'product'
+    products?: any[]
+    businessId?: number
+    show?: boolean
+  }>(),
+  { show: false },
+)
+const modelValue = defineModel({ default: () => [], type: Array as PropType<Coupon[]> })
+const emits = defineEmits<{ close: [] }>()
+const userStore = useUserStore()
+const { userInfo } = storeToRefs(userStore)
+// const show = ref(false)
+const request = ref()
+const { data: coupons, run: setCoupons } = useRequest(() => request.value(), { initialData: [] })
+const handleSelect = (coupon: Coupon) => {
+  if (modelValue.value.map(({ id }) => id).includes(coupon.id)) {
+    modelValue.value = modelValue.value.filter(({ id }) => id !== coupon.id)
+  } else {
+    modelValue.value = [...modelValue.value, coupon]
+  }
+  emits('close')
+}
+watch(
+  () => props.show,
+  async (val) => {
+    console.log(val)
+
+    if (val) {
+      console.log(111111)
+
+      await setCoupons()
+    }
+  },
+)
+onMounted(async () => {
+  if (props.type === 'product') {
+    request.value = () =>
+      getProductCoupons({
+        userId: userInfo.value.userId,
+        productIds: props.products.map((it) => it.productId).join(','),
+        isUse: 0,
+      })
+  }
+  if (props.type === 'points') {
+    request.value = () =>
+      getPointsCoupons({
+        userId: userInfo.value.userId,
+        //   productIds: props.products.map((it) => it.productId).join(','),
+        businessId: props.businessId,
+        isUse: 0,
+      })
+  }
+  //   await setCoupons()
+})
+</script>
+<template>
+  <wd-action-sheet title="优惠券" :modelValue="show" @close="emits('close')">
+    <view class="">
+      <wd-tabs>
+        <wd-tab title="可用优惠券"></wd-tab>
+        <!-- <wd-tab title="不可用优惠券"></wd-tab> -->
+      </wd-tabs>
+      <div class="h-100 overflow-y-scroll">
+        <div class="bg-[#f6f6f6] py-3.5 flex flex-col gap-4 min-h-full">
+          <template v-for="(it, i) in coupons" :key="i">
+            <CouponCard
+              :options="{ couponType: 2, ...it }"
+              canSelect
+              :selected="modelValue?.map(({ id }) => id).includes(it.id)"
+              @select="handleSelect"
+            ></CouponCard>
+          </template>
+        </div>
+      </div>
+      <!-- <wd-button block :round="false">确认</wd-button> -->
+    </view>
+  </wd-action-sheet>
+</template>

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

@@ -25,6 +25,8 @@ import dayjs from 'dayjs'
 import { Coupon } from '../../../../core/libs/models'
 import CouponCard from '@/pages/common/components/coupon-card.vue'
 import { select, sort } from 'radash'
+import CouponsSelector from '@/pages/common/components/coupons-selector.vue'
+import { right } from '../../../../core/libs/svgs'
 
 const router = useRouter()
 const userStore = useUserStore()
@@ -83,7 +85,7 @@ const handlePay = async () => {
   }
 }
 const handleQ = async () => {
-  await setCoupons()
+  // await setCoupons()
   show.value = true
 }
 const handleSelect = (coupon: Coupon) => {
@@ -134,7 +136,39 @@ onLoad(async (query: { data: string }) => {
             :end-text="`已选${selectedCoupons?.length || 0}张`"
             end-arrow
             size="sm"
-          ></SectionHeading>
+          >
+            <template #start>
+              <div
+                v-if="selectedCoupons?.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]"
+                >
+                  已选{{ selectedCoupons?.length }}张
+                </div>
+              </div>
+            </template>
+            <template #append>
+              <div class="flex items-center gap-1">
+                <template v-if="!selectedCoupons.length">
+                  <div
+                    class="text-black/40 text-sm font-normal font-['PingFang SC'] leading-[10.18px]"
+                  >
+                    选择优惠券
+                  </div>
+                </template>
+                <template v-else>
+                  <div
+                    class="text-[#ef4343] text-sm font-normal font-['PingFang SC'] leading-[10.18px]"
+                  >
+                    -200
+                  </div>
+                </template>
+                <wd-img :src="right" width="12" height="12"></wd-img>
+              </div>
+            </template>
+          </SectionHeading>
         </div>
         <SectionHeading title="实付积分" :end-text="paidPoints" size="sm"></SectionHeading>
       </div>
@@ -143,7 +177,7 @@ onLoad(async (query: { data: string }) => {
       <div class="h-[63px] bg-white backdrop-blur-[20px] flex px-3.5 items-center justify-between">
         <div class="flex">
           <div class="text-[#ef4343] text-2xl font-normal font-['D-DIN Exp'] leading-normal">
-            {{ data?.totalsCurrPoints || data?.totalsPoints - data?.totalsCouponPoints }}
+            {{ paidPoints }}
           </div>
           <div class="text-black/40 text-base font-normal font-['PingFang_SC'] leading-[34px]">
             积分
@@ -163,7 +197,15 @@ onLoad(async (query: { data: string }) => {
         </div>
       </div>
     </BottomAppBar>
-    <wd-action-sheet title="优惠券" v-model="show">
+    <CouponsSelector
+      v-model="selectedCoupons"
+      type="product"
+      :show="show"
+      :products="data?.list"
+      @close="show = false"
+    ></CouponsSelector>
+    <!-- <CouponsSelector></CouponsSelector> -->
+    <!-- <wd-action-sheet title="优惠券" v-model="show">
       <view class="">
         <wd-tabs>
           <wd-tab title="可用优惠券"></wd-tab>
@@ -179,9 +221,8 @@ onLoad(async (query: { data: string }) => {
             ></CouponCard>
           </template>
         </div>
-        <!-- <wd-button block :round="false">确认</wd-button> -->
       </view>
-    </wd-action-sheet>
+    </wd-action-sheet> -->
   </view>
 </template>
 

packages/app/src/pages/messages/components/message-card.vue

@@ -11,7 +11,7 @@ const props = withDefaults(defineProps<{ options?: Message }>(), {})
 const emits = defineEmits<{
   submit: [message: Message]
   cancel: [message: Message]
-  selectCoupon: [coupons: any[]]
+  selectCoupon: [message: Message, coupons: any[]]
 }>()
 const { data: coupons, run: setCoupons } = useRequest(
   () =>
@@ -74,7 +74,7 @@ onMounted(async () => {
               </div>
               <div
                 class="flex items-center"
-                @click="coupons.length && emits('selectCoupon', coupons)"
+                @click="coupons.length && emits('selectCoupon', options, coupons)"
               >
                 <div
                   class="text-sm font-normal font-['PingFang_SC']"

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

@@ -18,7 +18,6 @@ import {
   orderPointsSubmit,
   updateMessage,
 } from '../../core/libs/requests'
-import dayjs from 'dayjs'
 import { MessageType } from '../../core/libs/enums'
 import { ComponentExposed } from 'vue-component-type-helpers'
 import { Coupon, Message } from '../../core/libs/models'
@@ -26,9 +25,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'
 import { useMessage } from 'wot-design-uni'
+import CouponsSelector from '../common/components/coupons-selector.vue'
 
 const pageHelperRef = ref<ComponentExposed<typeof PageHelper>>()
 const userStore = useUserStore()
@@ -40,9 +38,10 @@ const tabs = ref([
   { label: '系统消息', value: MessageType.System },
   { label: '互动消息', value: MessageType.Interact },
 ])
-const selectedCoupon = ref()
+const selectedCoupons = ref<Coupon[]>([])
 const coupons = ref<Coupon[]>([])
 const cancelReason = ref('')
+const currentMessage = ref<Message>()
 const { confirm } = useMessage('wd-message-box-slot')
 
 const query = computed(() => ({ messageType: tabs.value[tab.value]?.value }))
@@ -77,7 +76,7 @@ const handleSubmit = async (message: Message) => {
       orderPointsSubmit({
         id: message.businessId,
         userId: message.designerId,
-        couponUserId: selectedCoupon.value?.id,
+        couponUserId: selectedCoupons.value[0]?.id,
       }),
     {
       success: true,
@@ -87,24 +86,16 @@ const handleSubmit = async (message: Message) => {
   // await deleteMessage(message.id.toString())
   await updateMessage({ id: message.id, isRead: '1' })
   await pageHelperRef.value?.refresh()
-  selectedCoupon.value = undefined
+  selectedCoupons.value = []
 }
-const handleQ = async (res) => {
-  // const { data } = await getPointsCoupons({
-  //   userId: message.designerId,
-  //   businessId: message.businessId,
-  // })
-  // console.log(data)
+const handleQ = async (msg, res) => {
+  currentMessage.value = msg
   coupons.value = res
   show.value = true
 }
-const handleSelect = (coupon: Coupon) => {
-  selectedCoupon.value = coupon
-  show.value = false
-}
 onShow(async () => {
   nextTick(() => {
-    pageHelperRef.value?.refresh()
+    pageHelperRef.value?.reload()
   })
 })
 </script>
@@ -148,25 +139,13 @@ onShow(async () => {
         />
       </wd-config-provider>
     </wd-message-box>
-    <wd-action-sheet title="优惠券" v-model="show">
-      <view class="">
-        <wd-tabs>
-          <wd-tab title="可用优惠券"></wd-tab>
-          <wd-tab title="不可用优惠券"></wd-tab>
-        </wd-tabs>
-        <div class="bg-[#f6f6f6] py-3.5 flex flex-col gap-4">
-          <template v-for="(it, i) in coupons" :key="i">
-            <CouponCard
-              :options="it"
-              can-select
-              :selected="selectedCoupon?.id === it.id"
-              @select="handleSelect"
-            ></CouponCard>
-          </template>
-        </div>
-        <!-- <wd-button block :round="false">确认</wd-button> -->
-      </view>
-    </wd-action-sheet>
+    <CouponsSelector
+      v-model="selectedCoupons"
+      type="points"
+      :show="show"
+      :business-id="currentMessage?.businessId"
+      @close="show = false"
+    ></CouponsSelector>
   </view>
 </template>