【需求 20520】 perf: 抽奖相关优化，二次提醒，YA币不够提醒等

src/components/common/LuckyWheel/components/LuckyWheel.vue → src/components/common/LuckyWheelContainer/components/LuckyWheel.vue

@@ -30,12 +30,17 @@
 <script lang="ts" setup>
 import { LuckyWheel } from '@lucky-canvas/vue'
 import ringTexture from '@/assets/img/lucky-wheel-outer-ring.svg'
-import type { WheelPrizeItemDto, LuckWheelResultDto } from '@/api'
+import type { WheelPrizeItemDto, LuckWheelResultDto, WheelConfigDto } from '@/api'
 import { participateLuckyWheel, getWheelPrizeList } from '@/api'
 
 import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 import { useMessageBox } from '@/hooks'
-
+import { useYaBiStore } from '@/stores'
+import { push } from 'notivue'
+const { wheelConfig } = defineProps<{
+  wheelConfig: WheelConfigDto
+}>()
+const yabiStore = useYaBiStore()
 const { confirm } = useMessageBox()
 
 const breakpoints = useBreakpoints(breakpointsTailwind)
@@ -128,7 +133,7 @@ const startCallback = async () => {
     const { data } = await participateLuckyWheel()
     const idx = computedPrizes.value.findIndex((item) => item.id === data.prizeId)
     myLucky.value?.stop(idx)
-
+    yabiStore.fetchYaBiData()
     resultPrize = data
   }, 1000)
 }
@@ -136,8 +141,12 @@ const startCallback = async () => {
 // 获取最新的奖品列表 对比 是否更新了
 const popClick = async () => {
   if (isSpinning.value) return
-  const { data } = await getWheelPrizeList()
+  if (yabiStore.yabiData.currentValue < wheelConfig!.costYaCoin)
+    return push.error(
+      `您的YA币不足,抽奖所需${wheelConfig!.costYaCoin}YA币,当前YA币${yabiStore.yabiData.currentValue}`,
+    )
 
+  const { data } = await getWheelPrizeList()
   const newWheelPrizeList = data
   const oldWheelPrizeList = wheelPrizeList.value
   // 暂时只需要对比 1长度不一致 需要更新 2如果长度一样 如果有一组的名字或者图片 不一样 需要更新
@@ -164,6 +173,10 @@ const popClick = async () => {
     })
     wheelPrizeList.value = newWheelPrizeList
   } else {
+    // 二次确认
+    await confirm({
+      title: `本次抽奖消耗${wheelConfig?.costYaCoin} YA币，确定开始吗？`,
+    })
     startCallback()
   }
 }

src/components/common/LuckyWheel/index.vue → src/components/common/LuckyWheelContainer/index.vue

 <template>
-  <Comp @handle-prize-result="handlePrizeResult" />
+  <Comp :wheelConfig="wheelConfig" @handle-prize-result="handlePrizeResult" />
   <Teleport to="body">
     <Transition name="result">
       <div
@@ -104,7 +104,11 @@ import type { ComponentPublicInstance } from 'vue'
 import gsap from 'gsap'
 
 import Comp from './components/LuckyWheel.vue'
-import type { LuckWheelResultDto } from '@/api'
+import type { LuckWheelResultDto, WheelConfigDto } from '@/api'
+
+const { wheelConfig } = defineProps<{
+  wheelConfig: WheelConfigDto
+}>()
 
 const showResult = ref(false)
 const currentPrize = ref<LuckWheelResultDto | null>(null)

src/views/homePage/index.vue

@@ -359,7 +359,7 @@
             <h1 class="text-sm sm:text-base font-bold">大转盘</h1>
           </div>
           <div class="flex justify-center">
-            <LuckyWheel />
+            <LuckyWheelContainer :wheelConfig="wheelConfig" />
           </div>
           <div class="flex items-center justify-center text-sm text-gray-500 xl:mt-4 px-1 truncate">
             每次抽奖{{ wheelConfig?.costYaCoin }} YA币
@@ -407,7 +407,7 @@ import { useQuestionStore, useActivityStore, useYaBiStore } from '@/stores'
 import { storeToRefs } from 'pinia'
 import { push } from 'notivue'
 import { useBreakpoints, breakpointsTailwind } from '@vueuse/core'
-import LuckyWheel from '@/components/common/LuckyWheel/index.vue'
+import LuckyWheelContainer from '@/components/common/LuckyWheelContainer/index.vue'
 import { RewardButtonEnum } from '@/constants'
 import RewardButton from '@/components/common/RewardButton/index.vue'
 import { useTourStore } from '@/stores'

src/views/videoDetail/components/rewardDialog.vue

@@ -103,7 +103,9 @@ const selectAmount = (amount: number) => {
 // 确认打赏
 const handleConfirm = async () => {
   if (yabiData.value.currentValue < selectedAmount.value) {
-    push.warning('余额不足,请先充值')
+    push.error(
+      `您的YA币不足,打赏所需${selectedAmount.value}YA币,当前YA币${yabiData.value.currentValue}`,
+    )
     return
   }