From 9bbe7fe31370e0610a582ea2b3b546aab722fb28 Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Wed, 3 Dec 2025 11:41:39 +0800
Subject: [PATCH] =?UTF-8?q?chore(=E6=81=A2=E5=A4=8D=E8=BF=87=E6=9C=9F?=
 =?UTF-8?q?=E6=B4=BB=E5=8A=A8):=20=E6=9A=82=E6=97=B6=E4=BF=9D=E7=95=99?=
 =?UTF-8?q?=E4=BB=A5=E4=BE=BF=E6=9F=A5=E7=9C=8B=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Activities/Oman/NationalDay/index.vue     | 108 +++++++-----------
 1 file changed, 41 insertions(+), 67 deletions(-)

diff --git a/src/views/Activities/Oman/NationalDay/index.vue b/src/views/Activities/Oman/NationalDay/index.vue
index 0a130e3..65c52d0 100644
--- a/src/views/Activities/Oman/NationalDay/index.vue
+++ b/src/views/Activities/Oman/NationalDay/index.vue
@@ -1,10 +1,10 @@
-<!-- src/views/Activities/Oman/NationalDay/index.vue -->
+<!-- src/views/Activities/heroesDay/index.vue -->
 <template>
   <div class="fullPage">
     <!-- 新增的背景图层 -->
     <div class="background-overlay"></div>
 
-    <div class="bg" :style="{ '--bg-url': `url(${imageUrl('bg')})` }">
+    <div class="bg">
       <!-- 状态栏占位区域（仅在APP中显示） -->
       <div v-if="isInAppEnvironment" style="height: 30px"></div>
 
@@ -23,25 +23,25 @@
       <!-- 倒计时 -->
       <div style="display: flex; justify-content: center; gap: 4px; margin-top: 1vw">
         <div style="width: 20%">
-          <itemCenter :imgUrl="imageUrl('timeDayBg')">
+          <itemCenter :imgUrl="images.timeDayBg">
             <div class="timeText" style="margin-bottom: 20%">{{ Days }}D</div>
           </itemCenter>
         </div>
         <div class="timeText timeGap" style="width: 6px"></div>
         <div style="width: 20%">
-          <itemCenter :imgUrl="imageUrl('timeHourBg')">
+          <itemCenter :imgUrl="images.timeHourBg">
             <div class="timeText" style="margin-bottom: 20%">{{ Hours }}</div>
           </itemCenter>
         </div>
         <div class="timeText timeGap">:</div>
         <div style="width: 20%">
-          <itemCenter :imgUrl="imageUrl('timeMinBg')">
+          <itemCenter :imgUrl="images.timeMinBg">
             <div class="timeText" style="margin-bottom: 20%">{{ Minutes }}</div>
           </itemCenter>
         </div>
         <div class="timeText timeGap">:</div>
         <div style="width: 20%">
-          <itemCenter :imgUrl="imageUrl('timeSecBg')">
+          <itemCenter :imgUrl="images.timeSecBg">
             <div class="timeText" style="margin-bottom: 20%">{{ Second }}</div>
           </itemCenter>
         </div>
@@ -49,22 +49,21 @@
 
       <!-- 每周礼物 -->
       <div style="display: flex; justify-content: center; margin-top: 10px">
-        <itemCenter :imgUrl="imageUrl('giftsBg')" :contentStyle="'paddingTop: 10%;'">
+        <itemCenter :imgUrl="images.giftsBg" :contentStyle="'paddingTop: 10%;'">
           <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="imageUrl('giftItemBg')">
-                <img
+              <itemCenter :imgUrl="images.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
@@ -85,14 +84,14 @@
       <div style="display: flex; justify-content: space-around">
         <img
           v-smart-img
-          :src="rankingShow ? imageUrl('rankingBtActive') : imageUrl('rankingBt')"
+          :src="rankingShow ? images.rankingBtActive : images.rankingBt"
           alt=""
           style="display: block; width: 40%"
           @click="rankingShow = true"
         />
         <img
           v-smart-img
-          :src="!rankingShow ? imageUrl('rewardBtActive') : imageUrl('rewardsBt')"
+          :src="!rankingShow ? images.rewardBtActive : images.rewardsBt"
           alt=""
           style="display: block; width: 40%"
           @click="rankingShow = false"
@@ -114,12 +113,12 @@
           ></div>
           <div style="position: relative; z-index: 1">
             <!-- 前三名 -->
-            <itemCenter :imgUrl="imageUrl('RankingMain')" :contentStyle="`padding: 25% 7% 10%`">
+            <itemCenter :imgUrl="images.RankingMain" :contentStyle="`padding: 25% 7% 10%`">
               <div style="margin-top: 13%">
                 <!-- 第一 -->
                 <div style="display: flex; justify-content: center">
                   <TopUser
-                    :BorderImgUrl="imageUrl('topOne')"
+                    :BorderImgUrl="images.topOne"
                     :avatarUrl="RankingHasTop3[0].avatar"
                     :name="RankingHasTop3[0].nickname"
                     :distributionValue="RankingHasTop3[0].quantity"
@@ -132,7 +131,7 @@
                   <TopUser
                     :isTopOne="false"
                     ranking="2"
-                    :BorderImgUrl="imageUrl('topTwo')"
+                    :BorderImgUrl="images.topTwo"
                     :avatarUrl="RankingHasTop3[1].avatar"
                     :name="RankingHasTop3[1].nickname"
                     :distributionValue="RankingHasTop3[1].quantity"
@@ -142,7 +141,7 @@
                   <TopUser
                     :isTopOne="false"
                     ranking="3"
-                    :BorderImgUrl="imageUrl('topThree')"
+                    :BorderImgUrl="images.topThree"
                     :avatarUrl="RankingHasTop3[2].avatar"
                     :name="RankingHasTop3[2].nickname"
                     :distributionValue="RankingHasTop3[2].quantity"
@@ -157,11 +156,8 @@
             <div v-if="showRanking.length > 0" style="margin-bottom: 6vw; margin-top: -10vw">
               <itemCenter
                 v-for="listItem in showRanking"
-                :key="listItem.userId"
-                :imgUrl="imageUrl('RankingItem')"
+                :imgUrl="images.RankingItem"
                 :contentStyle="`padding: 0 10%`"
-                :lazy="true"
-                :immediate="index < 2"
                 @click="viewUserInfo(listItem.userId)"
               >
                 <div style="width: 75%; min-width: 0; display: flex; align-items: center">
@@ -227,7 +223,7 @@
             <!-- 底框 -->
             <img
               v-smart-img
-              :src="imageUrl('RankingBottomBorder')"
+              :src="images.RankingBottomBorder"
               alt=""
               width="100%"
               style="display: block; margin-top: -22vw; position: relative; z-index: 9"
@@ -254,7 +250,7 @@
                 :key="rewardIndex"
                 style="width: 100%"
               >
-                <itemCenter :imgUrl="imageUrl('giftItemBg')">
+                <itemCenter :imgUrl="images.giftItemBg">
                   <img
                     v-smart-img
                     :src="reward.cover || ''"
@@ -288,7 +284,7 @@
           background: linear-gradient(0deg, #6e1116 0%, #6e1116 100%), #d9d9d9;
           z-index: 2;
         "
-        :imgUrl="imageUrl('myRankingBg')"
+        :imgUrl="images.myRankingBg"
         :contentStyle="`padding: 2% 5% 0`"
       >
         <div
@@ -364,7 +360,7 @@
       <maskLayer :maskLayerShow="maskLayerShow" @click="maskLayerShow = false">
         <!-- help弹窗 -->
         <div style="margin: 20% 0" @click.stop>
-          <img v-smart-img :src="imageUrl('helpInfo')" alt="" style="display: block; width: 100%" />
+          <img v-smart-img :src="images.helpInfo" alt="" style="display: block; width: 100%" />
         </div>
       </maskLayer>
     </div>
@@ -372,20 +368,28 @@
 </template>
 
 <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 { computed, onMounted, onUnmounted, ref } from 'vue'
 import itemCenter from '@/components/itemCenter.vue'
 import TopUser from './components/topUser.vue'
 import maskLayer from '@/components/MaskLayer.vue'
+import { getThisWeekRewardsAndGifts, getRankingListAndMyRanking } from '@/api/activity.js'
+import { connectToApp } from '@/utils/appConnector.js'
 
-// 获取OSS图片URL的函数
-const imageUrl = (filename) => getPngUrl('Activities/Oman/NationalDay/', filename)
+// vite动态批量导入图片
+const imageModules = import.meta.glob(
+  '@/assets/images/Activities/Oman/NationalDay/*.{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]
+  })
+)
 
 const isInAppEnvironment = ref(false) // 检测是否在APP环境中
 const maskLayerShow = ref(false) //帮助模块
@@ -405,7 +409,7 @@ const myRanking = ref({}) // 我的排名
 const rewardsList = ref([]) // 奖励列表
 const gifts = ref([]) // 本周礼物
 
-const topImg = ref([imageUrl('top1RewardBg'), imageUrl('top2RewardBg'), imageUrl('top3RewardBg')]) // top图片
+const topImg = ref([images.top1RewardBg, images.top2RewardBg, images.top3RewardBg]) // top图片
 
 // 处理排行榜小于3人时的情况
 const RankingHasTop3 = computed(() => {
@@ -424,6 +428,7 @@ const RankingHasTop3 = computed(() => {
 // 展示用的榜单
 const showRanking = computed(() => {
   return Ranking.value.filter((_, index) => index >= 3)
+  // return []
 })
 
 // 奖励图片资源出错处理
@@ -517,42 +522,11 @@ const initData = () => {
   getRewardsAndGifts() //获取本周的礼物和奖励列表
 }
 
-// 预加载关键图片
-const preloadCriticalImages = () => {
-  const criticalImages = [
-    imageUrl('bg'),
-    imageUrl('timeDayBg'),
-    imageUrl('timeHourBg'),
-    imageUrl('timeMinBg'),
-    imageUrl('timeSecBg'),
-    imageUrl('giftsBg'),
-    imageUrl('giftItemBg'),
-    imageUrl('rankingBt'),
-    imageUrl('rankingBtActive'),
-    imageUrl('rewardBtActive'),
-    imageUrl('rewardsBt'),
-    imageUrl('RankingMain'),
-    imageUrl('topOne'),
-    imageUrl('topTwo'),
-    imageUrl('topThree'),
-    imageUrl('RankingItem'),
-    imageUrl('RankingBottomBorder'),
-    imageUrl('myRankingBg'),
-    imageUrl('helpInfo'),
-    imageUrl('top1RewardBg'),
-    imageUrl('top2RewardBg'),
-    imageUrl('top3RewardBg'),
-  ]
-
-  preloadImages(criticalImages, { useSmartCache: true })
-}
-
 // 使用工具函数连接APP
 const connectToAppHandler = async () => {
   await connectToApp(() => {
     // 连接成功回调
     initData() //初始化数据
-    preloadCriticalImages() //预加载关键图片
   })
 }
 
@@ -594,7 +568,7 @@ onUnmounted(() => {
 .bg {
   width: 100vw;
   min-height: 100vh;
-  background-image: var(--bg-url);
+  background-image: url(../../../../assets/images/Activities/Oman/NationalDay/bg.png);
   background-size: 100% auto;
   background-repeat: no-repeat;
   position: relative;