feat(总排行榜页): 新增图片预加载缓冲动画，并修复切换按钮的显示问题

src/views/Ranking/Overall/Ranking.vue

@@ -1,33 +1,39 @@
 <!-- src/views/Ranking/Overall/Ranking.vue -->
 <template>
   <div class="fullPage" :style="{ backgroundColor }">
-    <!-- 背景图 -->
+    <!-- 预加载状态 -->
-    <div style="position: absolute; top: 0; left: 0; width: 100vw; z-index: 3">
+    <div v-show="isLoading" class="loading-container">
-      <img
+      <div class="loading-spinner"></div>
-        v-show="rankingType == 'Wealth'"
+      <p>{{ $t('loading') }}...</p>
-        v-smart-img
-        :src="imageUrl('bgWealth')"
-        alt=""
-        style="display: block; width: 100%; object-fit: cover"
-      />
-      <img
-        v-show="rankingType == 'Charm'"
-        v-smart-img
-        :src="imageUrl('bgCharm')"
-        alt=""
-        style="display: block; width: 100%; object-fit: cover"
-      />
-      <img
-        v-show="rankingType == 'Room'"
-        v-smart-img
-        :src="imageUrl('bgRoom')"
-        alt=""
-        style="display: block; width: 100%; object-fit: cover"
-      />
     </div>
 
     <!-- 主要内容 -->
-    <div style="position: relative; z-index: 4">
+    <div v-show="!isLoading" style="position: relative; z-index: 4">
+      <!-- 背景图 -->
+      <div style="position: absolute; top: 0; left: 0; width: 100vw; z-index: -1">
+        <img
+          v-show="rankingType == 'Wealth'"
+          v-smart-img
+          :src="imageUrl('bgWealth')"
+          alt=""
+          style="display: block; width: 100%; object-fit: cover"
+        />
+        <img
+          v-show="rankingType == 'Charm'"
+          v-smart-img
+          :src="imageUrl('bgCharm')"
+          alt=""
+          style="display: block; width: 100%; object-fit: cover"
+        />
+        <img
+          v-show="rankingType == 'Room'"
+          v-smart-img
+          :src="imageUrl('bgRoom')"
+          alt=""
+          style="display: block; width: 100%; object-fit: cover"
+        />
+      </div>
+
       <!-- 哨兵元素 -->
       <div ref="sentinel"></div>
 
@@ -284,10 +290,11 @@
     </div>
 
     <!-- 我的排名占位 -->
-    <div style="height: 15vw"></div>
+    <div v-if="!isLoading" style="height: 15vw"></div>
 
     <!-- 我的排名 -->
     <div
+      v-if="!isLoading"
       style="position: fixed; bottom: 0; z-index: 999; padding: 0 1px; width: 100%"
       :style="{ backgroundColor }"
     >
@@ -428,8 +435,11 @@ const totalRanking = ref({})
 const showRanking = ref([])
 const myRanking = ref({}) //我的排名
 
+// 预加载状态
+const isLoading = ref(true)
+
 // 预加载关键图片
-const preloadCriticalImages = () => {
+const preloadCriticalImages = async () => {
   const criticalImages = [
     imageUrl('bgWealth'),
     imageUrl('bgCharm'),
@@ -443,7 +453,7 @@ const preloadCriticalImages = () => {
     imageUrl('top3-room'),
   ]
 
-  preloadImages(criticalImages)
+  await preloadImages(criticalImages)
 }
 
 // 筛选展示榜单
@@ -652,17 +662,31 @@ const getMyRankingInfo = async () => {
 }
 
 // 刷新页面数据
-const initData = () => {
+const initData = async () => {
-  getRanking() // 获取榜单
+  await Promise.all([
-  getMyRankingInfo() //获取我的排名
+    getRanking(), // 获取榜单
+    getMyRankingInfo(), //获取我的排名
+  ])
+}
+
+// 完成预加载
+const completePreloading = async () => {
+  try {
+    // 执行所有初始化操作
+    await Promise.all([initData(), preloadCriticalImages()])
+  } catch (error) {
+    console.error('预加载过程中发生错误:', error)
+  } finally {
+    // 无论成功或失败都结束加载状态
+    isLoading.value = false
+  }
 }
 
 // 使用工具函数连接APP
 const connectToAppHandler = async () => {
   await connectToApp(() => {
     // 连接成功回调
-    initData() //初始化数据
+    completePreloading() // 完成预加载
-    preloadCriticalImages() //预加载关键图片
   })
 }
 
@@ -722,6 +746,36 @@ onMounted(() => {
   backdrop-filter: blur(32px);
 }
 
+/* 添加加载动画样式 */
+.loading-container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #666;
+}
+
+.loading-spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid #f3f3f3;
+  border-top: 3px solid #f59e0b;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-bottom: 12px;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 @media screen and (max-width: 360px) {
   * {
     font-size: 10px;

src/views/Ranking/Overall/components/topUser.vue

@@ -68,6 +68,7 @@
         <div style="width: 60%; position: relative">
           <img v-smart-img :src="coinNumBgUrl" alt="" width="100%" style="display: block" />
           <div
+            v-if="distributionValue"
             style="
               position: absolute;
               inset: 0;