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

---
 .../Activities/Reward/RechargeReward.vue      | 56 ++++++++++++-------
 1 file changed, 35 insertions(+), 21 deletions(-)

diff --git a/src/views/Activities/Reward/RechargeReward.vue b/src/views/Activities/Reward/RechargeReward.vue
index 9767f1e..cab4d42 100644
--- a/src/views/Activities/Reward/RechargeReward.vue
+++ b/src/views/Activities/Reward/RechargeReward.vue
@@ -1,12 +1,13 @@
+<!-- src/views/Activities/Reward/RechargeReward.vue -->
 <template>
   <div>
     <!-- Rewards0.png 使用相对定位容器 -->
     <div style="position: relative">
-      <img :src="images.Rewards0" alt="" style="width: 100%; display: block" />
+      <img v-smart-img :src="imageUrl('Rewards0')" alt="" style="width: 100%; display: block" />
       <!-- 帮助按钮 -->
       <img
         v-smart-img
-        :src="images.help"
+        :src="imageUrl('help')"
         alt=""
         style="
           position: absolute;
@@ -35,7 +36,8 @@
         <div style="display: grid; grid-template-columns: 4fr 6fr">
           <div style="width: 100%; aspect-ratio: 1/1; position: relative">
             <img
-              :src="images.frame"
+              v-smart-img
+              :src="imageUrl('frame')"
               alt=""
               style="width: 100%; display: block; aspect-ratio: 1/1; position: relative; z-index: 1"
             />
@@ -50,6 +52,7 @@
               "
             >
               <img
+                v-smart-img
                 :src="userInfo.userAvatar || ''"
                 alt=""
                 style="
@@ -109,41 +112,34 @@
     </div>
 
     <!-- 其他图片直接引入 -->
-    <img v-smart-img :src="images.Rewards1" alt="" style="width: 100%; display: block" />
-    <img v-smart-img :src="images.Rewards2" alt="" style="width: 100%; display: block" />
-    <img v-smart-img :src="images.Rewards3" alt="" style="width: 100%; display: block" />
-    <img v-smart-img :src="images.Rewards4" alt="" style="width: 100%; display: block" />
-    <img v-smart-img :src="images.Rewards5" alt="" style="width: 100%; display: block" />
+    <img v-smart-img :src="imageUrl('Rewards1')" alt="" style="width: 100%; display: block" />
+    <img v-smart-img :src="imageUrl('Rewards2')" alt="" style="width: 100%; display: block" />
+    <img v-smart-img :src="imageUrl('Rewards3')" alt="" style="width: 100%; display: block" />
+    <img v-smart-img :src="imageUrl('Rewards4')" alt="" style="width: 100%; display: block" />
+    <img v-smart-img :src="imageUrl('Rewards5')" alt="" style="width: 100%; display: block" />
 
     <!-- 弹窗遮罩层 -->
     <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>
 </template>
 
 <script setup>
-import { ref, watch, onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
 import { connectToApp } from '@/utils/appConnector.js'
+import { getPngUrl } from '@/config/imagePaths.js'
+import { preloadImages } from '@/utils/imagePreloader.js'
 
 import { getMemberProfile, getTotalRecharge } from '@/api/wallet'
 
 import maskLayer from '@/components/MaskLayer.vue'
 
-// 使用与Lottery.vue相同的方式导入图片
-const imageModules = import.meta.glob('@/assets/images/RechargeReward/*.{jpg,png,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/RechargeReward/', filename)
 
 const maskLayerShow = ref(false) //帮助模块
 
@@ -181,10 +177,28 @@ const defaultAvatarUrl = (e) => {
   e.target.src = new URL('/src/assets/icon/defaultAvatar.png', import.meta.url).href
 }
 
+// 预加载关键图片
+const preloadCriticalImages = () => {
+  const criticalImages = [
+    imageUrl('Rewards0'),
+    imageUrl('Rewards1'),
+    imageUrl('Rewards2'),
+    imageUrl('Rewards3'),
+    imageUrl('Rewards4'),
+    imageUrl('Rewards5'),
+    imageUrl('help'),
+    imageUrl('helpInfo'),
+    imageUrl('frame'),
+  ]
+
+  preloadImages(criticalImages, { useSmartCache: true })
+}
+
 // 使用工具函数连接APP
 const connectToAppHandler = async () => {
   await connectToApp(() => {
     getTotalRechargeInfo() //获取累积充值信息
+    preloadCriticalImages() //预加载关键图片
   })
 }