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

src/views/Ranking/GamesKing/index.vue

@@ -1,6 +1,14 @@
 <!-- src/views/Activities/Game/index.vue -->
 <template>
   <div class="fullPage">
+    <!-- 预加载状态 -->
+    <div v-if="isLoading" class="loading-container">
+      <div class="loading-spinner"></div>
+      <p>{{ $t('loading') }}...</p>
+    </div>
+
+    <!-- 主要内容 -->
+    <div v-else>
       <!-- 新增的背景图层 -->
       <img
         v-smart-img
@@ -78,42 +86,42 @@
         <div>
           <div style="display: flex; justify-content: space-around; margin-top: 2vw">
             <!-- 排行榜按钮 -->
-          <div style="width: 40%; position: relative">
+            <div style="width: 40%; position: relative" @click="rankingShow = true">
               <img
+                v-show="!rankingShow"
                 v-smart-img
+                class="toggle-image"
                 :src="imageUrl(getImgName('rankingBt'))"
                 alt=""
                 style="display: block; width: 100%"
-              :style="{ opacity: rankingShow ? 0 : 1 }"
-              @click="rankingShow = true"
               />
               <img
+                v-show="rankingShow"
                 v-smart-img
+                class="toggle-image"
                 :src="imageUrl(getImgName('rankingBtActive'))"
                 alt=""
-              style="display: block; width: 100%; position: absolute; top: 0; left: 0"
+                style="display: block; width: 100%"
-              :style="{ opacity: rankingShow ? 1 : 0 }"
-              @click="rankingShow = true"
               />
             </div>
 
             <!-- 奖励按钮 -->
-          <div style="width: 40%; position: relative">
+            <div style="width: 40%; position: relative" @click="rankingShow = false">
               <img
+                v-show="rankingShow"
                 v-smart-img
+                class="toggle-image"
                 :src="imageUrl(getImgName('rewardsBt'))"
                 alt=""
                 style="display: block; width: 100%"
-              :style="{ opacity: rankingShow ? 1 : 0 }"
-              @click="rankingShow = false"
               />
               <img
+                v-show="!rankingShow"
                 v-smart-img
+                class="toggle-image"
                 :src="imageUrl(getImgName('rewardBtActive'))"
                 alt=""
-              style="display: block; width: 100%; position: absolute; top: 0; left: 0"
+                style="display: block; width: 100%"
-              :style="{ opacity: rankingShow ? 0 : 1 }"
-              @click="rankingShow = false"
               />
             </div>
           </div>
@@ -122,13 +130,7 @@
         <!-- 展示内容 -->
         <div>
           <!-- Ranking -->
-        <div v-show="rankingShow" style="position: relative; width: 100%">
+          <div v-show="rankingShow" style="position: relative; width: 100%; margin: 10px 0">
-          <!-- 背景图 -->
-          <!-- <div
-            class="ranking-bg"
-            :style="{ '--ranking-bg-url': `url(${imageUrl('RankingBg')})` }"
-          ></div> -->
-
             <div style="position: relative; z-index: 1">
               <!-- 第2-4名 -->
               <itemCenter
@@ -404,7 +406,9 @@
                     align-items: center;
                   "
                 >
-                <div style="color: #f9e447; text-align: center; font-size: 1.2em; font-weight: 900">
+                  <div
+                    style="color: #f9e447; text-align: center; font-size: 1.2em; font-weight: 900"
+                  >
                     7Days
                   </div>
                 </div>
@@ -571,6 +575,7 @@
         </maskLayer>
       </div>
     </div>
+  </div>
 </template>
 
 <script setup>
@@ -591,6 +596,9 @@ import maskLayer from '@/components/MaskLayer.vue'
 const isInAppEnvironment = ref(false) // 检测是否在APP环境中
 const maskLayerShow = ref(false) //帮助模块
 
+// 预加载状态
+const isLoading = ref(true)
+
 const langStore = useLangStore()
 // 当前语言类型
 const currentLangType = computed(() => {
@@ -741,13 +749,15 @@ const getRewardsAndGifts = async () => {
 }
 
 // 刷新页面数据
-const initData = () => {
+const initData = async () => {
-  getListAndMy() // 获取排行榜和我的排名
+  await Promise.all([
-  getRewardsAndGifts() //获取本周的礼物和奖励列表
+    getListAndMy(), // 获取排行榜和我的排名
+    getRewardsAndGifts(), //获取本周的礼物和奖励列表
+  ])
 }
 
 // 预加载关键图片
-const preloadCriticalImages = () => {
+const preloadCriticalImages = async () => {
   const criticalImages = [
     imageUrl('bg'),
     imageUrl('bg2'),
@@ -803,9 +813,22 @@ const preloadCriticalImages = () => {
   ]
 
   if (currentLangType.value == 'en') {
-    preloadImages(criticalImages)
+    await preloadImages(criticalImages)
   } else if (currentLangType.value == 'ar') {
-    preloadImages(criticalImages_ar)
+    await preloadImages(criticalImages_ar)
+  }
+}
+
+// 完成预加载
+const completePreloading = async () => {
+  try {
+    // 执行所有初始化操作
+    await Promise.all([initData(), preloadCriticalImages()])
+  } catch (error) {
+    console.error('预加载过程中发生错误:', error)
+  } finally {
+    // 无论成功或失败都结束加载状态
+    isLoading.value = false
   }
 }
 
@@ -813,8 +836,7 @@ const preloadCriticalImages = () => {
 const connectToAppHandler = async () => {
   await connectToApp(() => {
     // 连接成功回调
-    initData() //初始化数据
+    completePreloading() // 完成预加载
-    preloadCriticalImages() //预加载关键图片
   })
 }
 
@@ -850,17 +872,6 @@ onUnmounted(() => {
   z-index: 1;
 }
 
-.ranking-bg {
-  background-color: #400000;
-  background-image: var(--ranking-bg-url);
-  background-size: 100% auto;
-  background-repeat: no-repeat;
-
-  position: absolute;
-  inset: 10vw 2% 1vw;
-  z-index: 1;
-}
-
 .timeText {
   color: #fff;
   font-weight: 590;
@@ -903,6 +914,40 @@ onUnmounted(() => {
   margin-top: 10vw;
 }
 
+/* 添加加载动画样式 */
+.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;
+}
+
+.toggle-image {
+  transition: opacity 0.3s ease-in-out;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 @media screen and (max-width: 360px) {
   * {
     font-size: 10px;