feat(国王皇后打榜页): 新增图片预加载缓冲动画，并修复切换按钮的显示问题

src/views/Ranking/KingAndQueen/TopList.vue

@@ -1,6 +1,14 @@
 <!-- src/views/Ranking/KingAndQueen/TopList.vue -->
 <template>
   <div class="fullPage">
+    <!-- 预加载状态 -->
+    <div v-if="isLoading" class="loading-container">
+      <div class="loading-spinner"></div>
+      <p style="color: #fff">{{ $t('loading') }}...</p>
+    </div>
+
+    <!-- 主要内容 -->
+    <div v-else>
       <div class="bg" :style="{ '--bg-url': `url(${imageUrl('bg')})` }">
         <!-- 状态栏占位区域（仅在APP中显示） -->
         <div v-if="isInAppEnvironment" style="height: 30px"></div>
@@ -127,7 +135,13 @@
 
         <!-- 每周礼物 -->
         <div
-        style="display: flex; justify-content: center; width: 108vw; position: relative; left: -4vw"
+          style="
+            display: flex;
+            justify-content: center;
+            width: 108vw;
+            position: relative;
+            left: -4vw;
+          "
         >
           <itemCenter :imgUrl="imageUrl('eventGifts')">
             <div style="width: 80%; display: flex; justify-content: space-around; margin-top: 10%">
@@ -348,7 +362,12 @@
               >
                 <!-- 内容 -->
                 <div
-                style="width: 100%; display: flex; justify-content: space-around; margin-top: 16px"
+                  style="
+                    width: 100%;
+                    display: flex;
+                    justify-content: space-around;
+                    margin-top: 16px;
+                  "
                 >
                   <div
                     style="width: 40%"
@@ -652,7 +671,11 @@
                 width: 22%;
                 aspect-ratio: 1/1;
                 border-radius: 50%;
-              background: linear-gradient(to bottom, rgba(255, 224, 60, 1), rgba(255, 189, 19, 1));
+                background: linear-gradient(
+                  to bottom,
+                  rgba(255, 224, 60, 1),
+                  rgba(255, 189, 19, 1)
+                );
 
                 display: flex;
                 justify-content: center;
@@ -733,6 +756,7 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script setup>
@@ -756,6 +780,9 @@ import borderImg from './components/borderImg.vue'
 import itemCenter from '@/components/itemCenter.vue'
 import maskLayer from '@/components/MaskLayer.vue'
 
+// 预加载状态
+const isLoading = ref(true)
+
 // 获取OSS图片URL的函数
 const imageUrl = (filename) => getPngUrl('Ranking/KingQueen/', filename)
 
@@ -763,9 +790,7 @@ const imageUrl = (filename) => getPngUrl('Ranking/KingQueen/', filename)
 const connectToAppHandler = async () => {
   await connectToApp(() => {
     // 连接成功回调
-    getUserInfo()
+    completePreloading() // 完成预加载
-    updatePageData() // 刷新页面数据
-    preloadCriticalImages() // 预加载关键图片
   })
 }
 
@@ -1023,17 +1048,29 @@ const observer = new IntersectionObserver((entries) => {
 })
 
 // 刷新页面数据
-const updatePageData = () => {
+const updatePageData = async () => {
-  getTopList(kingListParams.value) // 获取国王榜单
+  // 重置数据
-  getTopList(queenListParams.value) // 获取女王榜单
+  kingList.value = []
-  getRewardsAndGifts() //获取本周的礼物和国王和皇后top奖励列表
+  queenList.value = []
-  getAllTopOne() //获取近几个月的榜首国王女王
+  kingListCurrent.value = 1
+  queenListCurrent.value = 1
+  showKingLoading.value = true
+  showQueenLoading.value = true
+
+  await Promise.all([
+    getTopList(kingListParams.value), // 获取国王榜单
+    getTopList(queenListParams.value), // 获取女王榜单
+    getRewardsAndGifts(), //获取本周的礼物和国王和皇后top奖励列表
+    getAllTopOne(), //获取近几个月的榜首国王女王
+  ])
 }
 
 // 预加载关键图片
-const preloadCriticalImages = () => {
+const preloadCriticalImages = async () => {
   const criticalImages = [
     imageUrl('bg'),
+    // imageUrl('border-item'),  // 这个是用在background-image的，无法使用v-smart-img指令
+    // imageUrl('border-item-user'),  // 这个是用在background-image的，无法使用v-smart-img指令
     imageUrl('help'),
     imageUrl('history'),
     imageUrl('listTitle'),
@@ -1046,9 +1083,7 @@ const preloadCriticalImages = () => {
     imageUrl('queenBt'),
     imageUrl('kingBt'),
     imageUrl('queenBtActive'),
-    imageUrl('border-item-user'),
     imageUrl('helpInfo'),
-    imageUrl('border-item'),
     imageUrl('timeBack'),
     imageUrl('timeNext'),
     imageUrl('cancel'),
@@ -1060,7 +1095,20 @@ const preloadCriticalImages = () => {
     imageUrl('top3'),
   ]
 
-  preloadImages(criticalImages)
+  await preloadImages(criticalImages)
+}
+
+// 完成预加载
+const completePreloading = async () => {
+  try {
+    // 执行所有初始化操作
+    await Promise.all([getUserInfo(), updatePageData(), preloadCriticalImages()])
+  } catch (error) {
+    console.error('预加载过程中发生错误:', error)
+  } finally {
+    // 无论成功或失败都结束加载状态
+    isLoading.value = false
+  }
 }
 
 // 组件挂载时检测环境
@@ -1116,6 +1164,36 @@ onUnmounted(() => {
   font-weight: 860;
 }
 
+/* 添加加载动画样式 */
+.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;