From ffa3b2e3d2ba4efdfc20ddefd0c2880a5cfd5b44 Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Thu, 25 Dec 2025 14:54:49 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=80=BB=E6=8E=92=E8=A1=8C=E6=A6=9C?=
 =?UTF-8?q?=E9=A1=B5):=20=E6=96=B0=E5=A2=9E=E5=9B=BE=E7=89=87=E9=A2=84?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E7=BC=93=E5=86=B2=E5=8A=A8=E7=94=BB=EF=BC=8C?=
 =?UTF-8?q?=E5=B9=B6=E4=BF=AE=E5=A4=8D=E5=88=87=E6=8D=A2=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E7=9A=84=E6=98=BE=E7=A4=BA=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Ranking/Overall/Ranking.vue         | 118 +++++++++++++-----
 .../Ranking/Overall/components/topUser.vue    |   1 +
 2 files changed, 87 insertions(+), 32 deletions(-)

diff --git a/src/views/Ranking/Overall/Ranking.vue b/src/views/Ranking/Overall/Ranking.vue
index e7a47b4..6e0b80e 100644
--- a/src/views/Ranking/Overall/Ranking.vue
+++ b/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">
-      <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 v-show="isLoading" class="loading-container">
+      <div class="loading-spinner"></div>
+      <p>{{ $t('loading') }}...</p>
     </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 = () => {
-  getRanking() // 获取榜单
-  getMyRankingInfo() //获取我的排名
+const initData = async () => {
+  await Promise.all([
+    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() //初始化数据
-    preloadCriticalImages() //预加载关键图片
+    completePreloading() // 完成预加载
   })
 }
 
@@ -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;
diff --git a/src/views/Ranking/Overall/components/topUser.vue b/src/views/Ranking/Overall/components/topUser.vue
index 574d803..24d4336 100644
--- a/src/views/Ranking/Overall/components/topUser.vue
+++ b/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;