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-03 10:10:23 +08:00
parent f6f4aca4de
commit 078871804e
2 changed files with 94 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
src/views/Ranking/WeeklyStar/WeeklyStar.vue
View File

@ -1,5 +1,6 @@
<!-- src/views/Ranking/WeeklyStar/WeeklyStar.vue -->
<template> <template>
<div class="fullPage"> <div class="fullPage" :style="{ '--bg-url': `url(${imageUrl('bg')})` }">
<!-- 状态栏占位区域（仅在APP中显示） --> <!-- 状态栏占位区域（仅在APP中显示） -->
<div v-if="isInAppEnvironment" style="height: 30px"></div> <div v-if="isInAppEnvironment" style="height: 30px"></div>
@ -15,7 +16,7 @@
<!-- history按钮 --> <!-- history按钮 -->
<img <img
v-smart-img v-smart-img
:src="images.history" :src="imageUrl('history')"
alt="" alt=""
style="width: 20%; margin-top: 20px" style="width: 20%; margin-top: 20px"
@click="historyShow = true" @click="historyShow = true"
@ -30,31 +31,37 @@
: 'calc(65vw - 10vw - 10vw - 20px)', : 'calc(65vw - 10vw - 10vw - 20px)',
}" }"
> >
<img v-smart-img :src="images.gifts" alt="" style="width: 20%" @click="giftsShow = true" /> <img
v-smart-img
:src="imageUrl('gifts')"
alt=""
style="width: 20%"
@click="giftsShow = true"
/>
</div> </div>
<!-- 倒计时 --> <!-- 倒计时 -->
<div style="display: flex; justify-content: center; margin-top: -10%"> <div style="display: flex; justify-content: center; margin-top: -10%">
<div style="width: 15%"> <div style="width: 15%">
<itemCenter :imgUrl="images.dayBg"> <itemCenter :imgUrl="imageUrl('dayBg')">
<div class="timeText">{{ Days }}D</div> <div class="timeText">{{ Days }}D</div>
</itemCenter> </itemCenter>
</div> </div>
<div class="timeText timeGap" style="width: 6px"></div> <div class="timeText timeGap" style="width: 6px"></div>
<div style="width: 15%"> <div style="width: 15%">
<itemCenter :imgUrl="images.hourAndMinBg"> <itemCenter :imgUrl="imageUrl('hourAndMinBg')">
<div class="timeText">{{ Hours }}</div> <div class="timeText">{{ Hours }}</div>
</itemCenter> </itemCenter>
</div> </div>
<div class="timeText timeGap">:</div> <div class="timeText timeGap">:</div>
<div style="width: 15%"> <div style="width: 15%">
<itemCenter :imgUrl="images.hourAndMinBg"> <itemCenter :imgUrl="imageUrl('hourAndMinBg')">
<div class="timeText">{{ Minutes }}</div> <div class="timeText">{{ Minutes }}</div>
</itemCenter> </itemCenter>
</div> </div>
<div class="timeText timeGap">:</div> <div class="timeText timeGap">:</div>
<div style="width: 15%"> <div style="width: 15%">
<itemCenter :imgUrl="images.secBg"> <itemCenter :imgUrl="imageUrl('secBg')">
<div class="timeText">{{ Second }}</div> <div class="timeText">{{ Second }}</div>
</itemCenter> </itemCenter>
</div> </div>
@ -63,17 +70,17 @@
<!-- 切换按钮 --> <!-- 切换按钮 -->
<div style="margin: 22% 0 8% 0; display: flex; justify-content: space-around"> <div style="margin: 22% 0 8% 0; display: flex; justify-content: space-around">
<div style="width: 30%" @click="handleBt('Ranking')"> <div style="width: 30%" @click="handleBt('Ranking')">
<itemCenter :imgUrl="rankingShow ? images.btActive : images.btNoActive"> <itemCenter :imgUrl="rankingShow ? imageUrl('btActive') : imageUrl('btNoActive')">
<div class="btTitle">Ranking</div> <div class="btTitle">Ranking</div>
</itemCenter> </itemCenter>
</div> </div>
<div style="width: 30%" @click="handleBt('Rewards')"> <div style="width: 30%" @click="handleBt('Rewards')">
<itemCenter :imgUrl="rewardShow ? images.btActive : images.btNoActive"> <itemCenter :imgUrl="rewardShow ? imageUrl('btActive') : imageUrl('btNoActive')">
<div class="btTitle">Rewards</div> <div class="btTitle">Rewards</div>
</itemCenter> </itemCenter>
</div> </div>
<div style="width: 30%" @click="handleBt('Exchange')"> <div style="width: 30%" @click="handleBt('Exchange')">
<itemCenter :imgUrl="exchargeShow ? images.btActive : images.btNoActive"> <itemCenter :imgUrl="exchargeShow ? imageUrl('btActive') : imageUrl('btNoActive')">
<div class="btTitle">Exchange</div> <div class="btTitle">Exchange</div>
</itemCenter> </itemCenter>
</div> </div>
@ -88,10 +95,16 @@
> >
<!-- 背景板 --> <!-- 背景板 -->
<div> <div>
<img v-smart-img :src="images.RankingMain" alt="" width="100%" style="display: block" />
<img <img
v-smart-img v-smart-img
:src="images.RankingItem" :src="imageUrl('RankingMain')"
alt=""
width="100%"
style="display: block"
/>
<img
v-smart-img
:src="imageUrl('RankingItem')"
alt="" alt=""
width="100%" width="100%"
style="display: block; margin-top: -2px" style="display: block; margin-top: -2px"
@ -100,7 +113,7 @@
/> />
<img <img
v-smart-img v-smart-img
:src="images.RankingBottomBorder" :src="imageUrl('RankingBottomBorder')"
alt="" alt=""
width="100%" width="100%"
style="display: block; margin-top: -12%" style="display: block; margin-top: -12%"
@ -114,7 +127,7 @@
<!-- 第一 --> <!-- 第一 -->
<div style="display: flex; justify-content: center"> <div style="display: flex; justify-content: center">
<TopUser <TopUser
:BorderImgUrl="images.topOne" :BorderImgUrl="imageUrl('topOne')"
:avatarUrl="RankingHasTop3[0].userAvatar" :avatarUrl="RankingHasTop3[0].userAvatar"
:name="RankingHasTop3[0].userNickname" :name="RankingHasTop3[0].userNickname"
:distributionValue="RankingHasTop3[0].quantity" :distributionValue="RankingHasTop3[0].quantity"
@ -126,7 +139,7 @@
<div style="display: flex; justify-content: space-between; margin-top: -20%"> <div style="display: flex; justify-content: space-between; margin-top: -20%">
<TopUser <TopUser
:isTopOne="false" :isTopOne="false"
:BorderImgUrl="images.topTwo" :BorderImgUrl="imageUrl('topTwo')"
:avatarUrl="RankingHasTop3[1].userAvatar" :avatarUrl="RankingHasTop3[1].userAvatar"
:name="RankingHasTop3[1].userNickname" :name="RankingHasTop3[1].userNickname"
:distributionValue="RankingHasTop3[1].quantity" :distributionValue="RankingHasTop3[1].quantity"
@ -135,7 +148,7 @@
/> />
<TopUser <TopUser
:isTopOne="false" :isTopOne="false"
:BorderImgUrl="images.topThree" :BorderImgUrl="imageUrl('topThree')"
:avatarUrl="RankingHasTop3[2].userAvatar" :avatarUrl="RankingHasTop3[2].userAvatar"
:name="RankingHasTop3[2].userNickname" :name="RankingHasTop3[2].userNickname"
:distributionValue="RankingHasTop3[2].quantity" :distributionValue="RankingHasTop3[2].quantity"
@ -150,7 +163,7 @@
v-for="listItem in showRanking" v-for="listItem in showRanking"
style="margin-top: 3%; position: relative" style="margin-top: 3%; position: relative"
@click="viewUserInfo(listItem.userId)" @click="viewUserInfo(listItem.userId)"
:imgUrl="images.itemUser" :imgUrl="imageUrl('itemUser')"
:contentStyle="`justify-content: flex-start;padding: 0 3%;gap: 4px;`" :contentStyle="`justify-content: flex-start;padding: 0 3%;gap: 4px;`"
> >
<!-- 基本信息 --> <!-- 基本信息 -->
@ -232,7 +245,7 @@
<!-- top模块 --> <!-- top模块 -->
<div v-for="(topItem, topIndex) in rewardsList" style="position: relative; width: 90%"> <div v-for="(topItem, topIndex) in rewardsList" style="position: relative; width: 90%">
<!-- top背景图 --> <!-- top背景图 -->
<img v-smart-img :src="images.topBg" alt="" style="width: 100%; display: block" /> <img v-smart-img :src="imageUrl('topBg')" alt="" style="width: 100%; display: block" />
<!-- 标题 --> <!-- 标题 -->
<div <div
style=" style="
@ -265,7 +278,7 @@
v-for="gift in topItem.propsGroup.activityRewardProps" v-for="gift in topItem.propsGroup.activityRewardProps"
style="display: flex; flex-direction: column; align-items: center" style="display: flex; flex-direction: column; align-items: center"
> >
<itemCenter :imgUrl="images.giftItemBg" style="width: 90%; margin-bottom: 3px"> <itemCenter :imgUrl="imageUrl('giftItemBg')" style="width: 90%; margin-bottom: 3px">
<!-- gift图 --> <!-- gift图 -->
<img <img
v-smart-img v-smart-img
@ -276,7 +289,7 @@
/> />
</itemCenter> </itemCenter>
<itemCenter :imgUrl="images.btBg" style="width: 75%"> <itemCenter :imgUrl="imageUrl('btBg')" style="width: 75%">
<div style="font-weight: 700"> <div style="font-weight: 700">
{{ showDetail(gift.type, gift.quantity) }} {{ showDetail(gift.type, gift.quantity) }}
</div> </div>
@ -290,7 +303,7 @@
<div v-show="exchargeShow" style="display: flex; justify-content: center"> <div v-show="exchargeShow" style="display: flex; justify-content: center">
<div style="position: relative; width: 90%"> <div style="position: relative; width: 90%">
<!-- 背景图 --> <!-- 背景图 -->
<img v-smart-img :src="images.longBg" alt="" style="width: 100%; display: block" /> <img v-smart-img :src="imageUrl('longBg')" alt="" style="width: 100%; display: block" />
<!-- 标题 --> <!-- 标题 -->
<div <div
style=" style="
@ -326,7 +339,7 @@
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<img <img
v-smart-img v-smart-img
:src="images.debris" :src="imageUrl('debris')"
alt="" alt=""
style="width: 15%; display: block; margin-right: 5px" style="width: 15%; display: block; margin-right: 5px"
/> />
@ -340,7 +353,7 @@
:key="goodsIndex" :key="goodsIndex"
style="display: flex; flex-direction: column; align-items: center" style="display: flex; flex-direction: column; align-items: center"
> >
<itemCenter :imgUrl="images.giftItemBg"> <itemCenter :imgUrl="imageUrl('giftItemBg')">
<!-- gift图 --> <!-- gift图 -->
<img <img
v-smart-img v-smart-img
@ -353,7 +366,11 @@
Permanent/{{ JSON.parse(goods.rule.jsonData).need_fragments }} Star Permanent/{{ JSON.parse(goods.rule.jsonData).need_fragments }} Star
</div> </div>
<itemCenter style="width: 75%" @click="selectGood(goods)" :imgUrl="images.btBg"> <itemCenter
style="width: 75%"
@click="selectGood(goods)"
:imgUrl="imageUrl('btBg')"
>
<div style="font-weight: 700" class="needDebris">Redeem</div> <div style="font-weight: 700" class="needDebris">Redeem</div>
</itemCenter> </itemCenter>
</div> </div>
@ -381,7 +398,7 @@
> >
<img <img
v-smart-img v-smart-img
:src="images.myRankingBg" :src="imageUrl('myRankingBg')"
alt="" alt=""
style="width: calc(100% - 1px); display: block" style="width: calc(100% - 1px); display: block"
/> />
@ -469,13 +486,13 @@
<maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup"> <maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
<!-- help弹窗 --> <!-- help弹窗 -->
<div v-show="helpInfoShow" style="margin: 20% 0" @click.stop> <div v-show="helpInfoShow" style="margin: 20% 0" @click.stop>
<img v-smart-img :src="images.helpInfo" alt="" style="width: 100%" /> <img v-smart-img :src="imageUrl('helpInfo')" alt="" style="width: 100%" />
</div> </div>
<!-- history弹窗 --> <!-- history弹窗 -->
<div v-show="historyShow" style="position: relative; margin: 20% 0" @click.stop> <div v-show="historyShow" style="position: relative; margin: 20% 0" @click.stop>
<!-- 背景图 --> <!-- 背景图 -->
<img v-smart-img :src="images.mediumBg" alt="" style="width: 100%; display: block" /> <img v-smart-img :src="imageUrl('mediumBg')" alt="" style="width: 100%; display: block" />
<!-- 标题 --> <!-- 标题 -->
<div <div
style=" style="
@ -514,7 +531,7 @@
<!-- 头像框 --> <!-- 头像框 -->
<img <img
v-smart-img v-smart-img
:src="images.topOneHistory" :src="imageUrl('topOneHistory')"
alt="" alt=""
style="width: 100%; display: block; position: relative; z-index: 1" style="width: 100%; display: block; position: relative; z-index: 1"
/> />
@ -542,7 +559,7 @@
<!-- 名字 --> <!-- 名字 -->
<div style="position: relative; width: 25%"> <div style="position: relative; width: 25%">
<!-- 背景图 --> <!-- 背景图 -->
<img v-smart-img :src="images.nameBg" alt="" style="width: 100%; display: block" /> <img v-smart-img :src="imageUrl('nameBg')" alt="" style="width: 100%; display: block" />
<div <div
style=" style="
position: absolute; position: absolute;
@ -616,13 +633,13 @@
v-show="giftsShow" v-show="giftsShow"
style="margin: 20% 0" style="margin: 20% 0"
@click.stop @click.stop
:imgUrl="images.giftsBg" :imgUrl="imageUrl('giftsBg')"
:contentStyle="`padding: 30% 5% 12%;display: flex;justify-content: space-between;`" :contentStyle="`padding: 30% 5% 12%;display: flex;justify-content: space-between;`"
> >
<!-- 礼物单元 --> <!-- 礼物单元 -->
<div style="width: 30%" v-for="gift in gifts" :key="gift.id"> <div style="width: 30%" v-for="gift in gifts" :key="gift.id">
<!-- 礼物背景 --> <!-- 礼物背景 -->
<itemCenter :imgUrl="images.giftItemBg"> <itemCenter :imgUrl="imageUrl('giftItemBg')">
<!-- 礼物 --> <!-- 礼物 -->
<img <img
v-smart-img v-smart-img
@ -650,7 +667,7 @@
<!-- 交易商品弹窗 --> <!-- 交易商品弹窗 -->
<div v-if="exchargeGoodsShow" style="position: relative; margin: 20% 0" @click.stop> <div v-if="exchargeGoodsShow" style="position: relative; margin: 20% 0" @click.stop>
<!-- 背景图 --> <!-- 背景图 -->
<img v-smart-img :src="images.mediumBg" alt="" style="width: 100%; display: block" /> <img v-smart-img :src="imageUrl('mediumBg')" alt="" style="width: 100%; display: block" />
<!-- 标题 --> <!-- 标题 -->
<div <div
style=" style="
@ -693,7 +710,7 @@
<div>Permanent/{{ JSON.parse(selectedGood.rule.jsonData).need_fragments }} Star</div> <div>Permanent/{{ JSON.parse(selectedGood.rule.jsonData).need_fragments }} Star</div>
<img <img
v-smart-img v-smart-img
:src="images.ConfirmBt" :src="imageUrl('ConfirmBt')"
alt="" alt=""
style="width: 30%; display: block" style="width: 30%; display: block"
@click="exchangeSelectedGood(selectedGood.rule.id)" @click="exchangeSelectedGood(selectedGood.rule.id)"
@ -710,6 +727,8 @@ import { isInApp, viewUserInfo } from '@/utils/appBridge.js'
import { connectToApp } from '@/utils/appConnector.js' import { connectToApp } from '@/utils/appConnector.js'
import { useThrottle } from '@/utils/useDebounce' import { useThrottle } from '@/utils/useDebounce'
import { showWarning } from '@/utils/toast.js' import { showWarning } from '@/utils/toast.js'
import { getPngUrl } from '@/config/imagePaths.js'
import { preloadImages } from '@/utils/imagePreloader.js'
import { getMemberProfile } from '@/api/wallet' import { getMemberProfile } from '@/api/wallet'
import { import {
@ -727,15 +746,8 @@ import itemCenter from '@/components/itemCenter.vue'
import maskLayer from '@/components/MaskLayer.vue' import maskLayer from '@/components/MaskLayer.vue'
import TopUser from './components/topUser.vue' import TopUser from './components/topUser.vue'
//vite动态批量导入图片 // 获取OSS图片URL的函数
const imageModules = import.meta.glob('@/assets/images/WeeklyStar/*.{png,jpg,svg}', { eager: true }) const imageUrl = (filename) => getPngUrl('Ranking/WeeklyStar/', filename)
// 生成文件名映射对象（自动移除路径和扩展名）
const images = Object.fromEntries(
Object.entries(imageModules).map(([Path2D, module]) => {
const fileName = Path2D.split('/').pop().split('.')[0]
return [fileName, module.default]
})
)
// 使用工具函数连接APP // 使用工具函数连接APP
const connectToAppHandler = async () => { const connectToAppHandler = async () => {
@ -743,6 +755,7 @@ const connectToAppHandler = async () => {
// 连接成功回调 // 连接成功回调
getUserInfo() getUserInfo()
updatePageData() // 刷新页面数据 updatePageData() // 刷新页面数据
preloadCriticalImages() // 预加载关键图片
}) })
} }
@ -1050,6 +1063,41 @@ const updatePageData = () => {
getThisWeekExchangeGoods() // 获取本周可兑换商品 getThisWeekExchangeGoods() // 获取本周可兑换商品
} }
// 预加载关键图片
const preloadCriticalImages = () => {
const criticalImages = [
imageUrl('bg'),
imageUrl('history'),
imageUrl('gifts'),
imageUrl('dayBg'),
imageUrl('hourAndMinBg'),
imageUrl('secBg'),
imageUrl('btActive'),
imageUrl('btNoActive'),
imageUrl('RankingMain'),
imageUrl('RankingItem'),
imageUrl('RankingBottomBorder'),
imageUrl('topOne'),
imageUrl('topTwo'),
imageUrl('topThree'),
imageUrl('itemUser'),
imageUrl('topBg'),
imageUrl('giftItemBg'),
imageUrl('btBg'),
imageUrl('longBg'),
imageUrl('debris'),
imageUrl('myRankingBg'),
imageUrl('helpInfo'),
imageUrl('mediumBg'),
imageUrl('topOneHistory'),
imageUrl('nameBg'),
imageUrl('giftsBg'),
imageUrl('ConfirmBt'),
]
preloadImages(criticalImages, { useSmartCache: true })
}
const debouceGetThisWeekRanking = useThrottle(() => { const debouceGetThisWeekRanking = useThrottle(() => {
getThisWeekRanking() getThisWeekRanking()
}, 1000) }, 1000)
@ -1094,7 +1142,7 @@ onUnmounted(() => {
width: 100vw; width: 100vw;
min-height: 100vh; min-height: 100vh;
background-color: #311300; background-color: #311300;
background-image: url('@/assets/images/WeeklyStar/bg.png'); background-image: var(--bg-url);
background-size: 100% auto; background-size: 100% auto;
background-repeat: no-repeat; background-repeat: no-repeat;
position: relative; position: relative;

3
src/views/Ranking/WeeklyStar/components/topUser.vue
View File

@ -1,3 +1,4 @@
<!-- src/views/Ranking/WeeklyStar/components/topUser.vue -->
<template> <template>
<div style="width: 100%"> <div style="width: 100%">
<div style="position: relative"> <div style="position: relative">
@ -74,6 +75,8 @@
</template> </template>
<script setup> <script setup>
import { getPngUrl } from '@/config/imagePaths.js'
const props = defineProps({ const props = defineProps({
isTopOne: { isTopOne: {
type: Boolean, type: Boolean,