hy/aslan-h5
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
hzj 2025-12-02 17:48:25 +08:00
parent 2933224f18
commit e47f2b9299
1 changed files with 35 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/views/Activities/Reward/RechargeReward.vue
View File

@ -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() //预加载关键图片
})
}