feat: 添加优惠券使用说明功能，优化相关组件交互

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

@@ -2,6 +2,9 @@ import { title } from 'radash'
 import { cancelCircleReviewUpvote, cancelCircleUpvote, createCircleUpvote } from './requests'
 import { useUserStore } from '@/store'
 import { useRouter } from '../utils/router'
+import { Coupon } from './models'
+import { useMessage } from 'wot-design-uni'
+import { MessageOptions, MessageResult } from 'wot-design-uni/components/wd-message-box/types'
 
 const toast = (title: string) => uni.showToast({ title, icon: 'none' })
 export const handleUpvoteClick = async (
@@ -43,3 +46,15 @@ export const handleShareClick = () => {
     return false
   }
 }
+/**
+ * 优惠券使用说明
+ */
+export const handleClickInstruction = (
+  alert: (toastOptions: MessageOptions | string) => Promise<MessageResult>,
+  coupon: Coupon,
+) => {
+  alert({
+    title: '优惠券使用说明',
+    msg: coupon.couponDesc,
+  })
+}

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

@@ -577,6 +577,7 @@ export interface Coupon {
   productIds: string
   materialName: string
   couponImgUrl: string
+  couponDesc?: string
 }
 export interface PointsDetail {
   id: number

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

@@ -2,11 +2,15 @@
 import Card from '@/components/card.vue'
 import { Coupon } from '../../../core/libs/models'
 import dayjs from 'dayjs'
-withDefaults(defineProps<{ options?: Coupon; canSelect?: boolean; selected?: boolean }>(), {
-  canSelect: false,
-  selected: false,
-})
-const emits = defineEmits<{ select: [coupon: Coupon] }>()
+import { useMessage } from 'wot-design-uni'
+const props = withDefaults(
+  defineProps<{ options?: Coupon; canSelect?: boolean; selected?: boolean }>(),
+  {
+    canSelect: false,
+    selected: false,
+  },
+)
+const emits = defineEmits<{ select: [coupon: Coupon]; clickInstruction: [coupon: Coupon] }>()
 </script>
 <template>
   <Card custom-class="mx-3.5">
@@ -36,8 +40,12 @@ const emits = defineEmits<{ select: [coupon: Coupon] }>()
             dayjs(options.validityEndDate).format('YYYY/MM/DD')
           }}
         </div>
-        <div class="text-black/40 text-xs font-normal font-['PingFang_SC'] leading-normal">
+        <div
+          class="text-black/40 text-xs font-normal font-['PingFang_SC'] leading-normal flex items-center"
+          @click="emits('clickInstruction', options)"
+        >
           使用说明
+          <wd-icon name="arrow-right" size="14"></wd-icon>
         </div>
       </div>
       <div class="flex items-center" v-if="canSelect" @click="emits('select', options)">

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

@@ -4,6 +4,7 @@ import { Coupon } from '../../../core/libs/models'
 import { useUserStore } from '../../../store'
 import { storeToRefs } from 'pinia'
 import CouponCard from './coupon-card.vue'
+import { useMessage } from 'wot-design-uni'
 
 const props = withDefaults(
   defineProps<{
@@ -15,9 +16,10 @@ const props = withDefaults(
   { show: false },
 )
 const modelValue = defineModel({ default: () => [], type: Array as PropType<Coupon[]> })
-const emits = defineEmits<{ close: [] }>()
+const emits = defineEmits<{ close: []; clickInstruction: [coupon: Coupon] }>()
 const userStore = useUserStore()
 const { userInfo } = storeToRefs(userStore)
+const { alert } = useMessage()
 // const show = ref(false)
 const tab = ref(0)
 const request = ref()
@@ -79,6 +81,7 @@ onMounted(async () => {
               canSelect
               :selected="modelValue?.map(({ id }) => id).includes(it.id)"
               @select="handleSelect"
+              @click-instruction="(e) => emits('clickInstruction', e)"
             ></CouponCard>
           </template>
         </div>

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

@@ -27,12 +27,15 @@ 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'
+import ButtonEvo from '@/components/button-evo.vue'
+import { handleClickInstruction } from '../../../../core/libs/actions'
+import { useMessage } from 'wot-design-uni'
 
 const router = useRouter()
 const userStore = useUserStore()
 const { userInfo } = storeToRefs(userStore)
 const show = ref(false)
-const a = ref(1)
+const { alert } = useMessage()
 const data = ref()
 const selectedCoupons = ref<Coupon[]>()
 const { data: coupons, run: setCoupons } = useRequest(() =>
@@ -174,26 +177,15 @@ onLoad(async (query: { data: string }) => {
       </div>
     </Card>
     <BottomAppBar fixed placeholder>
-      <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">
+      <div class="h-[63px] bg-white backdrop-blur-[20px] flex items-center justify-between">
+        <div class="flex items-end gap-1.25">
+          <div class="text-[#ef4343] text-2xl font-normal font-['D-DIN_Exp'] leading-7">
             {{ paidPoints }}
           </div>
-          <div class="text-black/40 text-base font-normal font-['PingFang_SC'] leading-[34px]">
-            积分
-          </div>
+          <div class="text-black/40 text-base font-normal font-['PingFang_SC']">积分</div>
         </div>
         <div class="">
-          <TrapeziumButton size="large">
-            <div class="text-white text-base font-normal font-['PingFang_SC'] leading-tight">
-              <div
-                class="text-white text-base font-normal font-['PingFang_SC'] leading-tight"
-                @click="handlePay"
-              >
-                确认兑换
-              </div>
-            </div>
-          </TrapeziumButton>
+          <ButtonEvo @click="handlePay">确认兑换</ButtonEvo>
         </div>
       </div>
     </BottomAppBar>
@@ -203,6 +195,7 @@ onLoad(async (query: { data: string }) => {
       :show="show"
       :products="data?.list"
       @close="show = false"
+      @click-instruction="(e) => handleClickInstruction(alert, e)"
     ></CouponsSelector>
     <!-- <CouponsSelector></CouponsSelector> -->
     <!-- <wd-action-sheet title="优惠券" v-model="show">

packages/app/src/pages/home/mall/detail/index.vue

@@ -19,6 +19,7 @@ import { requestToast } from '../../../../core/utils/common'
 import { useUserStore } from '../../../../store'
 import { storeToRefs } from 'pinia'
 import BottomAppBar from '@/components/bottom-app-bar.vue'
+import ButtonEvo from '@/components/button-evo.vue'
 
 const userStore = useUserStore()
 const router = useRouter()
@@ -127,14 +128,17 @@ onLoad(async (query: { id: string }) => {
             </div>
           </InvertedTrapezoidButton>
         </div>
-        <div class="" @click="(show = true), (type = 'orderNow')">
-          <TrapeziumButton size="large">
+        <div class="w-full">
+          <!-- <TrapeziumButton size="large">
             <div class="text-white text-base font-normal font-['PingFang_SC'] leading-tight">
               <div class="text-white text-base font-normal font-['PingFang_SC'] leading-tight">
                 立即兑换
               </div>
             </div>
-          </TrapeziumButton>
+          </TrapeziumButton> -->
+          <ButtonEvo block size="lg" @click="(show = true), (type = 'orderNow')">
+            立即兑换
+          </ButtonEvo>
         </div>
       </div>
     </BottomAppBar>

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

@@ -27,6 +27,7 @@ import { storeToRefs } from 'pinia'
 import MessageCard from './components/message-card.vue'
 import { useMessage } from 'wot-design-uni'
 import CouponsSelector from '../common/components/coupons-selector.vue'
+import { handleClickInstruction } from '../../core/libs/actions'
 
 const pageHelperRef = ref<ComponentExposed<typeof PageHelper>>()
 const userStore = useUserStore()
@@ -42,6 +43,7 @@ const selectedCoupons = ref<Coupon[]>([])
 const coupons = ref<Coupon[]>([])
 const cancelReason = ref('')
 const currentMessage = ref<Message>()
+const { alert } = useMessage()
 const { confirm } = useMessage('wd-message-box-slot')
 
 const query = computed(() => ({ messageType: tabs.value[tab.value]?.value }))
@@ -145,6 +147,7 @@ onShow(async () => {
       :show="show"
       :business-id="currentMessage?.businessId"
       @close="show = false"
+      @click-instruction="(e) => handleClickInstruction(alert, e)"
     ></CouponsSelector>
   </view>
 </template>

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

@@ -7,7 +7,11 @@ import { getCoupons } from '../../../core/libs/requests'
 import PageHelper from '@/components/page-helper.vue'
 import dayjs from 'dayjs'
 import CouponCard from '@/pages/common/components/coupon-card.vue'
+import { Coupon } from '../../../core/libs/models'
+import { useMessage } from 'wot-design-uni'
+import { handleClickInstruction } from '../../../core/libs/actions'
 
+const { alert } = useMessage()
 const tab = ref('1')
 const tabs = ref([
   { label: '销售积分券', value: '1' },
@@ -27,7 +31,10 @@ const query = computed(() => ({ couponType: tab.value, isUse: 0 }))
       <template #default="{ source }">
         <div class="flex flex-col gap-4">
           <template v-for="(it, i) of source.list" :key="i">
-            <CouponCard :options="it"></CouponCard>
+            <CouponCard
+              :options="it"
+              @click-instruction="(e) => handleClickInstruction(alert, e)"
+            ></CouponCard>
           </template>
         </div>
       </template>