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:26:48 +08:00
parent 22bd6a106d
commit ce99c7978e
1 changed files with 109 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

166
src/views/Activities/Yemen/IndependenceDay/index.vue
View File

@ -1,7 +1,7 @@
<!-- src/views/Activities/heroesDay/index.vue -->
<!-- src/views/Activities/Yemen/IndependenceDay/index.vue -->
<template>
<div class="fullPage">
<div class="bg">
<div class="bg" :style="{ '--bg-url': `url(${imageUrl('bg')})` }">
<!-- 状态栏占位区域（仅在APP中显示） -->
<div v-if="isInAppEnvironment" style="height: 30px"></div>
@ -20,25 +20,25 @@
<!-- 倒计时 -->
<div style="display: flex; justify-content: center; margin-top: 0vw">
<div style="width: 20%">
<itemCenter :imgUrl="images.timeBg">
<itemCenter :imgUrl="imageUrl('timeBg')">
<div class="timeText" style="">{{ Days }}D</div>
</itemCenter>
</div>
<div class="timeText timeGap"></div>
<div style="width: 20%">
<itemCenter :imgUrl="images.timeBg">
<itemCenter :imgUrl="imageUrl('timeBg')">
<div class="timeText" style="">{{ Hours }}</div>
</itemCenter>
</div>
<div class="timeText timeGap">:</div>
<div style="width: 20%">
<itemCenter :imgUrl="images.timeBg">
<itemCenter :imgUrl="imageUrl('timeBg')">
<div class="timeText" style="">{{ Minutes }}</div>
</itemCenter>
</div>
<div class="timeText timeGap">:</div>
<div style="width: 20%">
<itemCenter :imgUrl="images.timeBg">
<itemCenter :imgUrl="imageUrl('timeBg')">
<div class="timeText" style="">{{ Second }}</div>
</itemCenter>
</div>
@ -46,21 +46,22 @@
<!-- 每周礼物 -->
<div style="display: flex; justify-content: center; margin-top: 10px">
<itemCenter :imgUrl="images.giftsBg" :contentStyle="'paddingTop: 5%;'">
<itemCenter :imgUrl="imageUrl('giftsBg')" :contentStyle="'paddingTop: 5%;'">
<div style="width: 85%; display: flex; justify-content: space-around; margin-top: 10%">
<div
v-for="(gift, index) in gifts"
:key="index"
style="width: 30%; display: flex; flex-direction: column"
>
<itemCenter :imgUrl="images.giftItemBg"
><img
<itemCenter :imgUrl="imageUrl('giftItemBg')">
<img
v-smart-img
:src="gift.giftPhoto"
alt=""
width="70%"
style="display: block; object-fit: cover"
/></itemCenter>
/>
</itemCenter>
<div style="display: flex; justify-content: center; align-items: center; gap: 5px">
<img
v-smart-img
@ -78,21 +79,46 @@
</div>
<!-- 切换按钮 -->
<div style="display: flex; justify-content: space-around">
<img
v-smart-img
:src="rankingShow ? images.rankingBtActive : images.rankingBt"
alt=""
style="display: block; width: 40%"
@click="rankingShow = true"
/>
<img
v-smart-img
:src="!rankingShow ? images.rewardBtActive : images.rewardsBt"
alt=""
style="display: block; width: 40%"
@click="rankingShow = false"
/>
<div style="display: flex; justify-content: space-around; margin-top: 2vw">
<!-- 排行榜按钮 -->
<div style="width: 40%; position: relative">
<img
v-smart-img
:src="imageUrl('rankingBt')"
alt=""
style="display: block; width: 100%"
:style="{ opacity: rankingShow ? 0 : 1 }"
@click="rankingShow = true"
/>
<img
v-smart-img
:src="imageUrl('rankingBtActive')"
alt=""
style="display: block; width: 100%; position: absolute; top: 0; left: 0"
:style="{ opacity: rankingShow ? 1 : 0 }"
@click="rankingShow = true"
/>
</div>
<!-- 奖励按钮 -->
<div style="width: 40%; position: relative">
<img
v-smart-img
:src="imageUrl('rewardsBt')"
alt=""
style="display: block; width: 100%"
:style="{ opacity: rankingShow ? 1 : 0 }"
@click="rankingShow = false"
/>
<img
v-smart-img
:src="imageUrl('rewardBtActive')"
alt=""
style="display: block; width: 100%; position: absolute; top: 0; left: 0"
:style="{ opacity: rankingShow ? 0 : 1 }"
@click="rankingShow = false"
/>
</div>
</div>
<!-- 展示内容 -->
@ -100,19 +126,22 @@
<!-- Ranking -->
<div v-show="rankingShow" style="position: relative; width: 100%">
<!-- 背景图 -->
<div class="ranking-bg"></div>
<div
class="ranking-bg"
:style="{ '--ranking-bg-url': `url(${imageUrl('RankingBg')})` }"
></div>
<div style="position: relative; z-index: 1">
<!-- 前三名 -->
<itemCenter
:imgUrl="images.RankingMain"
:imgUrl="imageUrl('RankingMain')"
:contentStyle="`padding: 20% 5% 0;flex-direction: column;`"
>
<div>
<!-- 第一 -->
<div style="display: flex; justify-content: center">
<TopUser
:BorderImgUrl="images.topOne"
:BorderImgUrl="imageUrl('topOne')"
:avatarUrl="RankingHasTop3[0].avatar"
:name="RankingHasTop3[0].nickname"
:distributionValue="RankingHasTop3[0].quantity"
@ -125,7 +154,7 @@
<TopUser
:isTopOne="false"
ranking="2"
:BorderImgUrl="images.topTwo"
:BorderImgUrl="imageUrl('topTwo')"
:avatarUrl="RankingHasTop3[1].avatar"
:name="RankingHasTop3[1].nickname"
:distributionValue="RankingHasTop3[1].quantity"
@ -135,7 +164,7 @@
<TopUser
:isTopOne="false"
ranking="3"
:BorderImgUrl="images.topThree"
:BorderImgUrl="imageUrl('topThree')"
:avatarUrl="RankingHasTop3[2].avatar"
:name="RankingHasTop3[2].nickname"
:distributionValue="RankingHasTop3[2].quantity"
@ -149,9 +178,12 @@
<!-- 第四名开始 -->
<div v-if="showRanking.length > 0" style="margin-bottom: 6vw">
<itemCenter
v-for="listItem in showRanking"
:imgUrl="images.RankingItem"
v-for="(listItem, index) in showRanking"
:key="listItem.userId"
:imgUrl="imageUrl('RankingItem')"
:contentStyle="`padding: 0 10%`"
:lazy="true"
:immediate="index < 2"
@click="viewUserInfo(listItem.userId)"
>
<!-- 基本信息 -->
@ -234,7 +266,7 @@
<!-- 底框 -->
<img
v-smart-img
:src="images.RankingBottomBorder"
:src="imageUrl('RankingBottomBorder')"
alt=""
width="100%"
style="display: block; margin-top: -22vw; position: relative; z-index: 9"
@ -261,7 +293,7 @@
:key="rewardIndex"
style="width: 100%"
>
<itemCenter :imgUrl="images.giftItemBg">
<itemCenter :imgUrl="imageUrl('giftItemBg')">
<img
v-smart-img
:src="reward.cover || ''"
@ -271,7 +303,7 @@
@error="(e) => handleImageError(e, reward.type)"
/>
</itemCenter>
<div class="valueBg" style="position: relative">
<div class="valueBg" :style="{ '--value-bg-url': `url(${imageUrl('valueBg')})` }">
<div
style="
text-align: center;
@ -307,7 +339,7 @@
<!-- 我的排名 -->
<itemCenter
style="position: fixed; bottom: 0; z-index: 2"
:imgUrl="images.myRankingBg"
:imgUrl="imageUrl('myRankingBg')"
:contentStyle="`padding: 2% 7% 0`"
>
<!-- 基本信息 -->
@ -386,7 +418,7 @@
<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>
@ -396,28 +428,18 @@
<script setup>
import { computed, onMounted, onUnmounted, ref } from 'vue'
import { isInApp, viewUserInfo } from '@/utils/appBridge.js'
import { connectToApp } from '@/utils/appConnector.js'
import { getPngUrl } from '@/config/imagePaths.js'
import { preloadImages } from '@/utils/imagePreloader.js'
import { getThisWeekRewardsAndGifts, getRankingListAndMyRanking } from '@/api/activity.js'
import { connectToApp } from '@/utils/appConnector.js'
import itemCenter from '@/components/itemCenter.vue'
import TopUser from './components/topUser.vue'
import maskLayer from '@/components/MaskLayer.vue'
// vite动态批量导入图片
const imageModules = import.meta.glob(
'@/assets/images/Activities/Yemen/IndependenceDay/*.{png,jpg,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/Yemen/IndependenceDay/', filename)
const isInAppEnvironment = ref(false) // 检测是否在APP环境中
const maskLayerShow = ref(false) //帮助模块
@ -437,7 +459,7 @@ const myRanking = ref({}) // 我的排名
const rewardsList = ref([]) // 奖励列表
const gifts = ref([]) // 本周礼物
const topImg = ref([images.top1RewardBg, images.top2RewardBg, images.top3RewardBg]) // top图片
const topImg = ref([imageUrl('top1RewardBg'), imageUrl('top2RewardBg'), imageUrl('top3RewardBg')]) // top图片
// 处理排行榜小于3人时的情况
const RankingHasTop3 = computed(() => {
@ -456,7 +478,6 @@ const RankingHasTop3 = computed(() => {
// 展示用的榜单
const showRanking = computed(() => {
return Ranking.value.filter((_, index) => index >= 3)
// return []
})
// 奖励图片资源出错处理
@ -553,11 +574,41 @@ const initData = () => {
getRewardsAndGifts() //获取本周的礼物和奖励列表
}
// 预加载关键图片
const preloadCriticalImages = () => {
const criticalImages = [
imageUrl('bg'),
imageUrl('timeBg'),
imageUrl('rankingBt'),
imageUrl('rankingBtActive'),
imageUrl('rewardBtActive'),
imageUrl('rewardsBt'),
imageUrl('RankingMain'),
imageUrl('RankingBg'),
imageUrl('topOne'),
imageUrl('topTwo'),
imageUrl('topThree'),
imageUrl('RankingItem'),
imageUrl('RankingBottomBorder'),
imageUrl('myRankingBg'),
imageUrl('helpInfo'),
imageUrl('top1RewardBg'),
imageUrl('top2RewardBg'),
imageUrl('top3RewardBg'),
imageUrl('giftItemBg'),
imageUrl('giftsBg'),
imageUrl('valueBg'),
]
preloadImages(criticalImages, { useSmartCache: true })
}
// 使用工具函数连接APP
const connectToAppHandler = async () => {
await connectToApp(() => {
// 连接成功回调
initData() //初始化数据
preloadCriticalImages() //预加载关键图片
})
}
@ -589,7 +640,7 @@ onUnmounted(() => {
.bg {
width: 100vw;
min-height: 100vh;
background-image: url(../../../../assets/images/Activities/Yemen/IndependenceDay/bg.png);
background-image: var(--bg-url);
background-size: 100% auto;
background-repeat: no-repeat;
position: relative;
@ -597,10 +648,11 @@ onUnmounted(() => {
}
.valueBg {
background-image: url(../../../../assets/images/Activities/Yemen/IndependenceDay/valueBg.png);
background-image: var(--value-bg-url);
background-size: auto 100%;
background-repeat: no-repeat;
background-position: center center;
position: relative;
}
.timeText {
@ -621,7 +673,7 @@ onUnmounted(() => {
.ranking-bg {
background-color: linear-gradient(180deg, #7c0101 0%, #400000 100%), #d9d9d9;
background-image: url(../../../../assets/images/Activities/Yemen/IndependenceDay/RankingBg.png);
background-image: var(--ranking-bg-url);
background-size: 100% auto;
background-repeat: no-repeat;