feat(幸运冠军活动页): 新增图片预加载缓冲动画，并修复切换按钮的显示问题

src/views/Activities/LuckyChampion/index.vue

@@ -1,15 +1,26 @@
 <!-- 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>
       <!-- 新增的背景图层 -->
       <div class="background-overlay" :style="{ '--bg2-url': `url(${imageUrl('bg2')})` }"></div>
 
-    <div class="bg" :style="{ '--bg-url': `url(${imageUrl('bg')})` }">
+      <div class="bg">
+        <itemCenter :imgUrl="imageUrl('bg')" :contentStyle="`display: block;`">
           <!-- 状态栏占位区域（仅在APP中显示） -->
-      <div v-if="isInAppEnvironment" style="height: 30px"></div>
+          <!-- <div v-if="isInAppEnvironment" style="height: 30px"></div> -->
 
           <!-- 按钮 -->
-      <div style="margin-top: 72vw; display: flex; justify-content: flex-end; align-items: center">
+          <div
+            style="margin-top: 72vw; display: flex; justify-content: flex-end; align-items: center"
+          >
             <!-- 帮助按钮 -->
             <img
               v-smart-img
@@ -19,6 +30,7 @@
               @click="maskLayerShow = true"
             />
           </div>
+        </itemCenter>
 
         <!-- 倒计时 -->
         <div class="timeBox">
@@ -51,42 +63,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>
@@ -95,7 +107,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"
@@ -436,6 +448,7 @@
         </maskLayer>
       </div>
     </div>
+  </div>
 </template>
 
 <script setup>
@@ -456,6 +469,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(() => {
@@ -600,21 +616,23 @@ 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'),
+    // imageUrl('bg2'),
     imageUrl('giftItemBg'),
     imageUrl('helpBt'),
     imageUrl('helpInfo'),
     imageUrl('myRankingBg'),
-    imageUrl('RankingBg'),
+    // imageUrl('RankingBg'),
     imageUrl('RankingBottomBorder'),
     imageUrl('rankingBt'),
     imageUrl('rankingBtActive'),
@@ -633,12 +651,12 @@ const preloadCriticalImages = () => {
 
   const criticalImages_ar = [
     imageUrl('bg'),
-    imageUrl('bg2'),
+    // imageUrl('bg2'),
     imageUrl('giftItemBg'),
     imageUrl('helpBt'),
     imageUrl('helpInfo_ar'),
     imageUrl('myRankingBg'),
-    imageUrl('RankingBg'),
+    // imageUrl('RankingBg'),
     imageUrl('RankingBottomBorder'),
     imageUrl('rankingBt_ar'),
     imageUrl('rankingBtActive_ar'),
@@ -656,9 +674,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
   }
 }
 
@@ -666,8 +697,7 @@ const preloadCriticalImages = () => {
 const connectToAppHandler = async () => {
   await connectToApp(() => {
     // 连接成功回调
-    initData() //初始化数据
+    completePreloading() // 完成预加载
-    preloadCriticalImages() //预加载关键图片
   })
 }
 
@@ -699,9 +729,6 @@ onUnmounted(() => {
 .bg {
   width: 100vw;
   min-height: 100vh;
-  background-image: var(--bg-url);
-  background-size: 100% auto;
-  background-repeat: no-repeat;
   position: relative;
   z-index: 1;
 }
@@ -770,6 +797,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;