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 19:24:38 +08:00
parent 63ec2371b7
commit 78883d8d5d
2 changed files with 81 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
src/views/Ranking/KingAndQueen/TopList.vue
View File

@ -1,13 +1,14 @@
<!-- src/views/Ranking/KingAndQueen/TopList.vue -->
<template> <template>
<div class="fullPage"> <div class="fullPage">
<div class="bg"> <div class="bg" :style="{ '--bg-url': `url(${imageUrl('bg')})` }">
<!-- 状态栏占位区域（仅在APP中显示） --> <!-- 状态栏占位区域（仅在APP中显示） -->
<div v-if="isInAppEnvironment" style="height: 30px"></div> <div v-if="isInAppEnvironment" style="height: 30px"></div>
<!-- 帮助按钮 --> <!-- 帮助按钮 -->
<img <img
v-smart-img v-smart-img
:src="images.help" :src="imageUrl('help')"
alt="" alt=""
style="width: 10%; position: absolute; top: 48px; right: 8px; z-index: 4" style="width: 10%; position: absolute; top: 48px; right: 8px; z-index: 4"
@click="helpInfoShow = true" @click="helpInfoShow = true"
@ -16,7 +17,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"
@ -25,7 +26,7 @@
<!-- 每周榜首 --> <!-- 每周榜首 -->
<div style="display: flex; flex-direction: column; align-items: center"> <div style="display: flex; flex-direction: column; align-items: center">
<!-- 主标题 --> <!-- 主标题 -->
<img v-smart-img :src="images.listTitle" alt="" style="width: 90%" /> <img v-smart-img :src="imageUrl('listTitle')" alt="" style="width: 90%" />
<!-- 榜首 --> <!-- 榜首 -->
<div style="width: 100%; display: flex; justify-content: space-around; margin-top: 16px"> <div style="width: 100%; display: flex; justify-content: space-around; margin-top: 16px">
<div <div
@ -103,12 +104,12 @@
<!-- 刷新倒计时 --> <!-- 刷新倒计时 -->
<div style="display: flex; justify-content: center; margin-top: 20px"> <div style="display: flex; justify-content: center; margin-top: 20px">
<!-- 天数 --> <!-- 天数 -->
<itemCenter :imgUrl="images.dayBg" style="width: 10%; margin-right: 10px"> <itemCenter :imgUrl="imageUrl('dayBg')" style="width: 10%; margin-right: 10px">
<div class="time">{{ Days }}D</div> <div class="time">{{ Days }}D</div>
</itemCenter> </itemCenter>
<!-- 当天时间倒计时 --> <!-- 当天时间倒计时 -->
<itemCenter :imgUrl="images.timeBg" style="width: 23.75%"> <itemCenter :imgUrl="imageUrl('timeBg')" style="width: 23.75%">
<div class="time">{{ Hours }} : {{ Minutes }} : {{ Second }}</div> <div class="time">{{ Hours }} : {{ Minutes }} : {{ Second }}</div>
</itemCenter> </itemCenter>
</div> </div>
@ -117,7 +118,7 @@
<div style="display: flex; justify-content: flex-end; margin-top: -8%"> <div style="display: flex; justify-content: flex-end; margin-top: -8%">
<img <img
v-smart-img v-smart-img
:src="images.rewards" :src="imageUrl('rewards')"
alt="" alt=""
style="width: 20%" style="width: 20%"
@click="rewardsShow = true" @click="rewardsShow = true"
@ -126,15 +127,15 @@
<!-- 每周礼物 --> <!-- 每周礼物 -->
<div style="display: flex; justify-content: center"> <div style="display: flex; justify-content: center">
<itemCenter :imgUrl="images.eventGifts"> <itemCenter :imgUrl="imageUrl('eventGifts')">
<div style="width: 80%; display: flex; justify-content: space-around; margin-top: 10%"> <div style="width: 80%; display: flex; justify-content: space-around; margin-top: 10%">
<div <div
v-for="(gift, index) in gifts" v-for="(gift, index) in gifts"
:key="index" :key="index"
style="width: 30%; display: flex; flex-direction: column" style="width: 30%; display: flex; flex-direction: column"
> >
<itemCenter :imgUrl="images.gift"> <itemCenter :imgUrl="imageUrl('gift')">
<img :src="gift.giftPhoto" alt="" width="50%" /> <img v-smart-img :src="gift.giftPhoto" alt="" width="50%" />
</itemCenter> </itemCenter>
<div style="display: flex; justify-content: center; align-items: center; gap: 5px"> <div style="display: flex; justify-content: center; align-items: center; gap: 5px">
<img <img
@ -160,10 +161,10 @@
v-show="visibleKingList" v-show="visibleKingList"
style="width: 100%; display: flex; justify-content: space-around" style="width: 100%; display: flex; justify-content: space-around"
> >
<img v-smart-img :src="images.kingBtActive" alt="" style="width: 40%" /> <img v-smart-img :src="imageUrl('kingBtActive')" alt="" style="width: 40%" />
<img <img
v-smart-img v-smart-img
:src="images.queenBt" :src="imageUrl('queenBt')"
alt="" alt=""
style="width: 40%" style="width: 40%"
@click="visibleKingList = false" @click="visibleKingList = false"
@ -176,12 +177,12 @@
> >
<img <img
v-smart-img v-smart-img
:src="images.kingBt" :src="imageUrl('kingBt')"
alt="" alt=""
style="width: 40%" style="width: 40%"
@click="visibleKingList = true" @click="visibleKingList = true"
/> />
<img v-smart-img :src="images.queenBtActive" alt="" style="width: 40%" /> <img v-smart-img :src="imageUrl('queenBtActive')" alt="" style="width: 40%" />
</div> </div>
</div> </div>
@ -189,7 +190,7 @@
<div style="width: 100%"> <div style="width: 100%">
<borderImg title="Ranking"> <borderImg title="Ranking">
<itemCenter <itemCenter
:imgUrl="images['border-item-user']" :imgUrl="imageUrl('border-item-user')"
style="margin: -2px 0" style="margin: -2px 0"
:contentStyle="`justify-content: flex-start;padding: 0 15%;gap: 4px;`" :contentStyle="`justify-content: flex-start;padding: 0 15%;gap: 4px;`"
v-for="(listItem, index) in topList" v-for="(listItem, index) in topList"
@ -300,7 +301,7 @@
<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弹窗 -->
@ -314,7 +315,7 @@
margin: -10px 0; margin: -10px 0;
padding: 10px 10%; padding: 10px 10%;
" "
:style="{ backgroundImage: `url(${images['border-item']})` }" :style="{ backgroundImage: `url(${imageUrl('border-item')})` }"
> >
<!-- 内容 --> <!-- 内容 -->
<div <div
@ -405,7 +406,7 @@
> >
<img <img
v-smart-img v-smart-img
:src="images.timeBack" :src="imageUrl('timeBack')"
alt="" alt=""
width="18px" width="18px"
height="18px" height="18px"
@ -431,7 +432,7 @@
</div> </div>
<img <img
v-smart-img v-smart-img
:src="images.timeNext" :src="imageUrl('timeNext')"
alt="" alt=""
width="18px" width="18px"
height="18px" height="18px"
@ -449,7 +450,7 @@
<!-- 取消按钮 --> <!-- 取消按钮 -->
<img <img
v-smart-img v-smart-img
:src="images.cancel" :src="imageUrl('cancel')"
alt="" alt=""
style="width: 7%; position: absolute; top: 0; right: 6%; z-index: 99" style="width: 7%; position: absolute; top: 0; right: 6%; z-index: 99"
@click="closedPopup" @click="closedPopup"
@ -463,7 +464,7 @@
margin: -20px 0; margin: -20px 0;
padding: 20px 10%; padding: 20px 10%;
" "
:style="{ backgroundImage: `url(${images['border-item']})` }" :style="{ backgroundImage: `url(${imageUrl('border-item')})` }"
> >
<!-- 奖励榜切换按钮 --> <!-- 奖励榜切换按钮 -->
<div style="width: 100%"> <div style="width: 100%">
@ -471,10 +472,10 @@
v-show="visibleKingRewards" v-show="visibleKingRewards"
style="width: 100%; display: flex; justify-content: space-around" style="width: 100%; display: flex; justify-content: space-around"
> >
<img v-smart-img :src="images.kingBtActive" alt="" style="width: 40%" /> <img v-smart-img :src="imageUrl('kingBtActive')" alt="" style="width: 40%" />
<img <img
v-smart-img v-smart-img
:src="images.queenBt" :src="imageUrl('queenBt')"
alt="" alt=""
style="width: 40%" style="width: 40%"
@click="visibleKingRewards = false" @click="visibleKingRewards = false"
@ -486,12 +487,12 @@
> >
<img <img
v-smart-img v-smart-img
:src="images.kingBt" :src="imageUrl('kingBt')"
alt="" alt=""
style="width: 40%" style="width: 40%"
@click="visibleKingRewards = true" @click="visibleKingRewards = true"
/> />
<img v-smart-img :src="images.queenBtActive" alt="" style="width: 40%" /> <img v-smart-img :src="imageUrl('queenBtActive')" alt="" style="width: 40%" />
</div> </div>
</div> </div>
@ -521,7 +522,7 @@
:key="rewardIndex" :key="rewardIndex"
style="width: 100%" style="width: 100%"
> >
<itemCenter :imgUrl="images.gift"> <itemCenter :imgUrl="imageUrl('gift')">
<img <img
v-smart-img v-smart-img
:src="reward.cover || ''" :src="reward.cover || ''"
@ -569,7 +570,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"
/> />
@ -678,6 +679,8 @@ import { computed, onMounted, onUnmounted, ref } from 'vue'
import { isInApp, viewUserInfo } from '@/utils/appBridge.js' import { isInApp, viewUserInfo } from '@/utils/appBridge.js'
import { useDebounce, useThrottle } from '@/utils/useDebounce' import { useDebounce, useThrottle } from '@/utils/useDebounce'
import { connectToApp } from '@/utils/appConnector.js' import { connectToApp } from '@/utils/appConnector.js'
import { getPngUrl } from '@/config/imagePaths.js'
import { preloadImages } from '@/utils/imagePreloader.js'
import { import {
getWeekTopList, getWeekTopList,
@ -691,15 +694,8 @@ import borderImg from './components/borderImg.vue'
import itemCenter from '@/components/itemCenter.vue' import itemCenter from '@/components/itemCenter.vue'
import maskLayer from '@/components/MaskLayer.vue' import maskLayer from '@/components/MaskLayer.vue'
//vite动态批量导入图片 // 获取OSS图片URL的函数
const imageModules = import.meta.glob('@/assets/images/TopList/*.{png,jpg,svg}', { eager: true }) const imageUrl = (filename) => getPngUrl('Ranking/KingQueen/', filename)
// 生成文件名映射对象（自动移除路径和扩展名）
const images = Object.fromEntries(
Object.entries(imageModules).map(([path, module]) => {
const fileName = path.split('/').pop().split('.')[0]
return [fileName, module.default]
})
)
// 使用工具函数连接APP // 使用工具函数连接APP
const connectToAppHandler = async () => { const connectToAppHandler = async () => {
@ -707,6 +703,7 @@ const connectToAppHandler = async () => {
// 连接成功回调 // 连接成功回调
getUserInfo() getUserInfo()
updatePageData() // 刷新页面数据 updatePageData() // 刷新页面数据
preloadCriticalImages() // 预加载关键图片
}) })
} }
@ -722,13 +719,13 @@ const showTopOne = computed(() => {
if (historyList.value[historyIndex.value]?.wealth) if (historyList.value[historyIndex.value]?.wealth)
topNew.push({ topNew.push({
type: 'topKing', type: 'topKing',
Frame: images.kingFrame, Frame: imageUrl('kingFrame'),
userInfo: historyList.value[historyIndex.value].wealth || {}, userInfo: historyList.value[historyIndex.value].wealth || {},
}) })
if (historyList.value[historyIndex.value]?.charm) { if (historyList.value[historyIndex.value]?.charm) {
topNew.push({ topNew.push({
type: 'topQueen', type: 'topQueen',
Frame: images.queenFrame, Frame: imageUrl('queenFrame'),
userInfo: historyList.value[historyIndex.value].charm || {}, userInfo: historyList.value[historyIndex.value].charm || {},
}) })
} }
@ -770,12 +767,12 @@ const queenList = ref([]) // 女王榜
const listTop = ref([ const listTop = ref([
{ {
type: 'topKing', type: 'topKing',
Frame: images.kingFrame, Frame: imageUrl('kingFrame'),
userInfo: {}, userInfo: {},
}, },
{ {
type: 'topQueen', type: 'topQueen',
Frame: images.queenFrame, Frame: imageUrl('queenFrame'),
userInfo: {}, userInfo: {},
}, },
]) //本周的top1国王和女王 ]) //本周的top1国王和女王
@ -788,7 +785,7 @@ const topList = computed(() => {
const showKingLoading = ref(true) //触底加载功能 const showKingLoading = ref(true) //触底加载功能
const showQueenLoading = ref(true) //触底加载功能 const showQueenLoading = ref(true) //触底加载功能
const topImg = ref([images.top1, images.top2, images.top3]) // top图片 const topImg = ref([imageUrl('top1'), imageUrl('top2'), imageUrl('top3')]) // top图片
const visibleKingRewards = ref(true) // 展示奖励榜标签 const visibleKingRewards = ref(true) // 展示奖励榜标签
const kingRewards = ref([]) //国王奖励列表 const kingRewards = ref([]) //国王奖励列表
@ -987,6 +984,39 @@ const updatePageData = () => {
getAllTopOne() //获取近几个月的榜首国王女王 getAllTopOne() //获取近几个月的榜首国王女王
} }
// 预加载关键图片
const preloadCriticalImages = () => {
const criticalImages = [
imageUrl('bg'),
imageUrl('help'),
imageUrl('history'),
imageUrl('listTitle'),
imageUrl('dayBg'),
imageUrl('timeBg'),
imageUrl('rewards'),
imageUrl('eventGifts'),
imageUrl('gift'),
imageUrl('kingBtActive'),
imageUrl('queenBt'),
imageUrl('kingBt'),
imageUrl('queenBtActive'),
imageUrl('border-item-user'),
imageUrl('helpInfo'),
imageUrl('border-item'),
imageUrl('timeBack'),
imageUrl('timeNext'),
imageUrl('cancel'),
imageUrl('myRankingBg'),
imageUrl('kingFrame'),
imageUrl('queenFrame'),
imageUrl('top1'),
imageUrl('top2'),
imageUrl('top3'),
]
preloadImages(criticalImages, { useSmartCache: true })
}
// 组件挂载时检测环境 // 组件挂载时检测环境
onMounted(() => { onMounted(() => {
isInAppEnvironment.value = isInApp() isInAppEnvironment.value = isInApp()
@ -1023,7 +1053,7 @@ onUnmounted(() => {
.bg { .bg {
width: 100vw; width: 100vw;
background-image: url('@/assets/images/TopList/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;

21
src/views/Ranking/KingAndQueen/components/borderImg.vue
View File

@ -1,13 +1,9 @@
<!-- src/views/Ranking/KingAndQueen/components/borderImg.vue -->
<template> <template>
<div style="width: 100%"> <div style="width: 100%">
<!-- 头部 --> <!-- 头部 -->
<div style="position: relative; margin-bottom: -2px"> <div style="position: relative; margin-bottom: -2px">
<img <img v-smart-img :src="borderTopUrl" alt="" style="width: 100%; display: block" />
v-smart-img
src="/src/assets/images/TopList/border-top.png"
alt=""
style="width: 100%; display: block"
/>
<div <div
style=" style="
position: absolute; position: absolute;
@ -40,16 +36,17 @@
<slot></slot> <slot></slot>
<!-- 尾部 --> <!-- 尾部 -->
<img <img v-smart-img :src="borderBottomUrl" alt="" style="width: 100%; display: block" />
v-smart-img
src="/src/assets/images/TopList/border-bottom.png"
alt=""
style="width: 100%; display: block"
/>
</div> </div>
</template> </template>
<script setup> <script setup>
import { getPngUrl } from '@/config/imagePaths.js'
// 获取OSS图片URL的函数
const borderTopUrl = getPngUrl('Ranking/KingQueen/', 'border-top')
const borderBottomUrl = getPngUrl('Ranking/KingQueen/', 'border-bottom')
const props = defineProps({ const props = defineProps({
title: { title: {
type: String, type: String,