From 2933224f180e7c75d1c082d31b763211bdc62ddf Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Tue, 2 Dec 2025 17:36:27 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E9=98=BF=E8=81=94=E9=85=8B=E5=9B=BD?=
 =?UTF-8?q?=E5=BA=86=E6=97=A5):=20=E4=BD=BF=E7=94=A8=E7=BD=91=E7=BB=9C?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=EF=BC=8C=E5=B9=B6=E5=AF=B9=E6=8E=A5=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E7=9A=84=E7=BC=93=E5=AD=98=EF=BC=8C=E9=A2=84=E5=8A=A0?=
 =?UTF-8?q?=E8=BD=BD=E7=AD=89=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Activities/UAE/IndependenceDay/index.vue  | 158 ++++++++++++------
 1 file changed, 104 insertions(+), 54 deletions(-)

diff --git a/src/views/Activities/UAE/IndependenceDay/index.vue b/src/views/Activities/UAE/IndependenceDay/index.vue
index 5d1c9b3..91ad293 100644
--- a/src/views/Activities/UAE/IndependenceDay/index.vue
+++ b/src/views/Activities/UAE/IndependenceDay/index.vue
@@ -1,7 +1,7 @@
-<!-- src/views/Activities/heroesDay/index.vue -->
+<!-- src/views/Activities/UAE/IndependenceDay/index.vue -->
 <template>
   <div class="fullPage">
-    <div class="bg">
+    <div class="bg" :style="{ '--bg-url': `url(${imageUrl('bg')})` }">
       <!-- 状态栏占位区域（仅在APP中显示） -->
       <div v-if="isInAppEnvironment" style="height: 30px"></div>
 
@@ -20,25 +20,25 @@
       <!-- 倒计时 -->
       <div style="display: flex; justify-content: center; margin-top: 2vw">
         <div style="width: 20%">
-          <itemCenter :imgUrl="images.timeBg">
+          <itemCenter :imgUrl="imageUrl('timeBg')">
             <div class="timeText" style="">{{ Days }}D</div>
           </itemCenter>
         </div>
         <div class="timeText timeGap"></div>
         <div style="width: 20%">
-          <itemCenter :imgUrl="images.timeBg">
+          <itemCenter :imgUrl="imageUrl('timeBg')">
             <div class="timeText" style="">{{ Hours }}</div>
           </itemCenter>
         </div>
         <div class="timeText timeGap">:</div>
         <div style="width: 20%">
-          <itemCenter :imgUrl="images.timeBg">
+          <itemCenter :imgUrl="imageUrl('timeBg')">
             <div class="timeText" style="">{{ Minutes }}</div>
           </itemCenter>
         </div>
         <div class="timeText timeGap">:</div>
         <div style="width: 20%">
-          <itemCenter :imgUrl="images.timeBg">
+          <itemCenter :imgUrl="imageUrl('timeBg')">
             <div class="timeText" style="">{{ Second }}</div>
           </itemCenter>
         </div>
@@ -46,21 +46,22 @@
 
       <!-- 每周礼物 -->
       <div style="display: flex; justify-content: center; margin-top: 10px">
-        <itemCenter :imgUrl="images.giftsBg" :contentStyle="'paddingTop: 5%;'">
+        <itemCenter :imgUrl="imageUrl('giftsBg')" :contentStyle="'paddingTop: 5%;'">
           <div style="width: 85%; display: flex; justify-content: space-around; margin-top: 10%">
             <div
               v-for="(gift, index) in gifts"
               :key="index"
               style="width: 30%; display: flex; flex-direction: column"
             >
-              <itemCenter :imgUrl="images.giftItemBg"
-                ><img
+              <itemCenter :imgUrl="imageUrl('giftItemBg')">
+                <img
                   v-smart-img
                   :src="gift.giftPhoto"
                   alt=""
                   width="70%"
                   style="display: block; object-fit: cover"
-              /></itemCenter>
+                />
+              </itemCenter>
               <div style="display: flex; justify-content: center; align-items: center; gap: 5px">
                 <img
                   v-smart-img
@@ -79,20 +80,45 @@
 
       <!-- 切换按钮 -->
       <div style="display: flex; justify-content: space-around; margin-top: 2vw">
-        <img
-          v-smart-img
-          :src="rankingShow ? images.rankingBtActive : images.rankingBt"
-          alt=""
-          style="display: block; width: 45%"
-          @click="rankingShow = true"
-        />
-        <img
-          v-smart-img
-          :src="!rankingShow ? images.rewardBtActive : images.rewardsBt"
-          alt=""
-          style="display: block; width: 45%"
-          @click="rankingShow = false"
-        />
+        <!-- 排行榜按钮 -->
+        <div style="width: 45%; position: relative">
+          <img
+            v-smart-img
+            :src="imageUrl('rankingBt')"
+            alt=""
+            style="display: block; width: 100%"
+            :style="{ opacity: rankingShow ? 0 : 1 }"
+            @click="rankingShow = true"
+          />
+          <img
+            v-smart-img
+            :src="imageUrl('rankingBtActive')"
+            alt=""
+            style="display: block; width: 100%; position: absolute; top: 0; left: 0"
+            :style="{ opacity: rankingShow ? 1 : 0 }"
+            @click="rankingShow = true"
+          />
+        </div>
+
+        <!-- 奖励按钮 -->
+        <div style="width: 45%; position: relative">
+          <img
+            v-smart-img
+            :src="imageUrl('rewardsBt')"
+            alt=""
+            style="display: block; width: 100%"
+            :style="{ opacity: rankingShow ? 1 : 0 }"
+            @click="rankingShow = false"
+          />
+          <img
+            v-smart-img
+            :src="imageUrl('rewardBtActive')"
+            alt=""
+            style="display: block; width: 100%; position: absolute; top: 0; left: 0"
+            :style="{ opacity: rankingShow ? 0 : 1 }"
+            @click="rankingShow = false"
+          />
+        </div>
       </div>
 
       <!-- 展示内容 -->
@@ -100,19 +126,22 @@
         <!-- Ranking -->
         <div v-show="rankingShow" style="position: relative; width: 100%">
           <!-- 背景图 -->
-          <div class="ranking-bg"></div>
+          <div
+            class="ranking-bg"
+            :style="{ '--ranking-bg-url': `url(${imageUrl('RankingBg')})` }"
+          ></div>
 
           <div style="position: relative; z-index: 2">
             <!-- 前三名 -->
             <itemCenter
-              :imgUrl="images.RankingMain"
+              :imgUrl="imageUrl('RankingMain')"
               :contentStyle="`padding: 28% 5% 0;flex-direction: column;`"
             >
               <div>
                 <!-- 第一 -->
                 <div style="display: flex; justify-content: center">
                   <TopUser
-                    :BorderImgUrl="images.topOne"
+                    :BorderImgUrl="imageUrl('topOne')"
                     :avatarUrl="RankingHasTop3[0].avatar"
                     :name="RankingHasTop3[0].nickname"
                     :distributionValue="RankingHasTop3[0].quantity"
@@ -125,7 +154,7 @@
                   <TopUser
                     :isTopOne="false"
                     ranking="2"
-                    :BorderImgUrl="images.topTwo"
+                    :BorderImgUrl="imageUrl('topTwo')"
                     :avatarUrl="RankingHasTop3[1].avatar"
                     :name="RankingHasTop3[1].nickname"
                     :distributionValue="RankingHasTop3[1].quantity"
@@ -135,7 +164,7 @@
                   <TopUser
                     :isTopOne="false"
                     ranking="3"
-                    :BorderImgUrl="images.topThree"
+                    :BorderImgUrl="imageUrl('topThree')"
                     :avatarUrl="RankingHasTop3[2].avatar"
                     :name="RankingHasTop3[2].nickname"
                     :distributionValue="RankingHasTop3[2].quantity"
@@ -152,9 +181,12 @@
               style="margin-bottom: 6vw; position: relative; z-index: 2"
             >
               <itemCenter
-                v-for="listItem in showRanking"
-                :imgUrl="images.RankingItem"
+                v-for="(listItem, index) in showRanking"
+                :key="listItem.userId"
+                :imgUrl="imageUrl('RankingItem')"
                 :contentStyle="`padding: 0 10%`"
+                :lazy="true"
+                :immediate="index < 2"
                 @click="viewUserInfo(listItem.userId)"
               >
                 <!-- 基本信息 -->
@@ -237,7 +269,7 @@
             <!-- 底框 -->
             <img
               v-smart-img
-              :src="images.RankingBottomBorder"
+              :src="imageUrl('RankingBottomBorder')"
               alt=""
               width="100%"
               style="display: block; margin-top: -32vw; position: relative; z-index: 1"
@@ -265,7 +297,7 @@
                 style="width: 100%"
               >
                 <div style="position: relative">
-                  <itemCenter :imgUrl="images.giftItemBg">
+                  <itemCenter :imgUrl="imageUrl('giftItemBg')">
                     <img
                       v-smart-img
                       :src="reward.cover || ''"
@@ -321,7 +353,7 @@
       <!-- 我的排名 -->
       <itemCenter
         style="position: fixed; bottom: -1vw; z-index: 2"
-        :imgUrl="images.myRankingBg"
+        :imgUrl="imageUrl('myRankingBg')"
         :contentStyle="`padding: 2% 7% 0`"
       >
         <!-- 基本信息 -->
@@ -400,7 +432,7 @@
       <maskLayer :maskLayerShow="maskLayerShow" @click="maskLayerShow = false">
         <!-- help弹窗 -->
         <div style="margin: 20% 0" @click.stop>
-          <img v-smart-img :src="images.helpInfo" alt="" style="display: block; width: 100%" />
+          <img v-smart-img :src="imageUrl('helpInfo')" alt="" style="display: block; width: 100%" />
         </div>
       </maskLayer>
     </div>
@@ -410,28 +442,18 @@
 <script setup>
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { isInApp, viewUserInfo } from '@/utils/appBridge.js'
+import { connectToApp } from '@/utils/appConnector.js'
+import { getPngUrl } from '@/config/imagePaths.js'
+import { preloadImages } from '@/utils/imagePreloader.js'
 
 import { getThisWeekRewardsAndGifts, getRankingListAndMyRanking } from '@/api/activity.js'
 
-import { connectToApp } from '@/utils/appConnector.js'
 import itemCenter from '@/components/itemCenter.vue'
 import TopUser from './components/topUser.vue'
 import maskLayer from '@/components/MaskLayer.vue'
 
-// vite动态批量导入图片
-const imageModules = import.meta.glob(
-  '@/assets/images/Activities/UAE/IndependenceDay/*.{png,jpg,svg}',
-  {
-    eager: true,
-  }
-)
-// 生成文件名映射对象（自动移除路径和扩展名）
-const images = Object.fromEntries(
-  Object.entries(imageModules).map(([path, module]) => {
-    const fileName = path.split('/').pop().split('.')[0]
-    return [fileName, module.default]
-  })
-)
+// 获取OSS图片URL的函数
+const imageUrl = (filename) => getPngUrl('Activities/UAE/IndependenceDay/', filename)
 
 const isInAppEnvironment = ref(false) // 检测是否在APP环境中
 const maskLayerShow = ref(false) //帮助模块
@@ -451,7 +473,7 @@ const myRanking = ref({}) // 我的排名
 const rewardsList = ref([]) // 奖励列表
 const gifts = ref([]) // 本周礼物
 
-const topImg = ref([images.top1RewardBg, images.top2RewardBg, images.top3RewardBg]) // top图片
+const topImg = ref([imageUrl('top1RewardBg'), imageUrl('top2RewardBg'), imageUrl('top3RewardBg')]) // top图片
 
 // 处理排行榜小于3人时的情况
 const RankingHasTop3 = computed(() => {
@@ -470,7 +492,6 @@ const RankingHasTop3 = computed(() => {
 // 展示用的榜单
 const showRanking = computed(() => {
   return Ranking.value.filter((_, index) => index >= 3)
-  // return []
 })
 
 // 奖励图片资源出错处理
@@ -567,11 +588,40 @@ const initData = () => {
   getRewardsAndGifts() //获取本周的礼物和奖励列表
 }
 
+// 预加载关键图片
+const preloadCriticalImages = () => {
+  const criticalImages = [
+    imageUrl('bg'),
+    imageUrl('timeBg'),
+    imageUrl('rankingBt'),
+    imageUrl('rankingBtActive'),
+    imageUrl('rewardBtActive'),
+    imageUrl('rewardsBt'),
+    imageUrl('RankingMain'),
+    imageUrl('RankingBg'),
+    imageUrl('topOne'),
+    imageUrl('topTwo'),
+    imageUrl('topThree'),
+    imageUrl('RankingItem'),
+    imageUrl('RankingBottomBorder'),
+    imageUrl('myRankingBg'),
+    imageUrl('helpInfo'),
+    imageUrl('top1RewardBg'),
+    imageUrl('top2RewardBg'),
+    imageUrl('top3RewardBg'),
+    imageUrl('giftItemBg'),
+    imageUrl('giftsBg'),
+  ]
+
+  preloadImages(criticalImages, { useSmartCache: true })
+}
+
 // 使用工具函数连接APP
 const connectToAppHandler = async () => {
   await connectToApp(() => {
     // 连接成功回调
     initData() //初始化数据
+    preloadCriticalImages() //预加载关键图片
   })
 }
 
@@ -603,7 +653,7 @@ onUnmounted(() => {
 .bg {
   width: 100vw;
   min-height: 100vh;
-  background-image: url(../../../../assets/images/Activities/UAE/IndependenceDay/bg.png);
+  background-image: var(--bg-url);
   background-size: 100% auto;
   background-repeat: no-repeat;
   position: relative;
@@ -627,7 +677,7 @@ onUnmounted(() => {
 
 .ranking-bg {
   background-color: linear-gradient(180deg, #7c0101 0%, #400000 100%), #d9d9d9;
-  background-image: url(../../../../assets/images/Activities/UAE/IndependenceDay/RankingBg.png);
+  background-image: var(--ranking-bg-url);
   background-size: 100% auto;
   background-repeat: no-repeat;