feat(充值奖励): 使用网络图片，并对接图片的缓存，预加载等功能

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="imageUrl('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="imageUrl('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="imageUrl('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="imageUrl('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('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相同的方式导入图片
+// 获取OSS图片URL的函数
-const imageModules = import.meta.glob('@/assets/images/RechargeReward/*.{jpg,png,svg}', {
+const imageUrl = (filename) => getPngUrl('Activities/RechargeReward/', filename)
-  eager: true,
-})
-// 生成文件名映射对象（自动移除路径和扩展名）
-const images = Object.fromEntries(
-  Object.entries(imageModules).map(([path, module]) => {
-    const fileName = path.split('/').pop().split('.')[0]
-    return [fileName, module.default]
-  })
-)
 
 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() //预加载关键图片
   })
 }