【需求 20331】 feat: 文章详情页（帖子等相关、视频、问吧）加入骨架屏

src/views/videoDetail/components/rewardDialog.vue

@@ -54,12 +54,20 @@
       </div>
 
       <!-- 余额提示 -->
-      <div class="text-center text-12px text-gray-400 mt-4">当前余额: {{ balance }}</div>
+      <div class="text-center text-12px text-gray-400 mt-4">
+        当前余额: {{ yabiData.currentValue }}
+      </div>
     </div>
   </el-dialog>
 </template>
 <script setup lang="ts">
-import { addOrCancelArticleReward, getYaBiData } from '@/api'
+import { addOrCancelArticleReward } from '@/api'
+import { useYaBiStore } from '@/stores'
+import { storeToRefs } from 'pinia'
+
+const yabiStore = useYaBiStore()
+const { yabiData } = storeToRefs(yabiStore)
+
 const rewardNum = defineModel<number>('rewardNum', { required: true, default: 0 })
 interface RewardOption {
   amount: number
@@ -69,7 +77,6 @@ interface RewardOption {
 
 const dialogVisible = ref(false)
 const selectedAmount = ref(2)
-const balance = ref(0)
 
 let articleId = -1
 
@@ -82,12 +89,7 @@ const rewardOptions = ref<RewardOption[]>([
 const open = (id: number) => {
   articleId = id
   dialogVisible.value = true
-  getYaBiDataFn()
-}
-
-const getYaBiDataFn = async () => {
-  const { data } = await getYaBiData()
-  balance.value = data.currentValue
+  yabiStore.fetchYaBiData()
 }
 
 // 选择金额
@@ -100,7 +102,7 @@ const selectAmount = (amount: number) => {
 
 // 确认打赏
 const handleConfirm = async () => {
-  if (balance.value < selectedAmount.value) {
+  if (yabiData.value.currentValue < selectedAmount.value) {
     ElMessage.warning('余额不足,请先充值')
     return
   }
@@ -112,6 +114,7 @@ const handleConfirm = async () => {
   ElMessage.success('打赏成功!')
   dialogVisible.value = false
   rewardNum.value += selectedAmount.value
+  yabiStore.fetchYaBiData()
 }
 
 defineExpose({