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-25 14:22:27 +08:00
parent e4d532af3e
commit 268adf5c31
1 changed files with 563 additions and 518 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
src/views/Ranking/GamesKing/index.vue
View File

@ -1,6 +1,14 @@
<!-- src/views/Activities/Game/index.vue -->
<template>
<div class="fullPage">
<!-- 预加载状态 -->
<div v-if="isLoading" class="loading-container">
<div class="loading-spinner"></div>
<p>{{ $t('loading') }}...</p>
</div>
<!-- 主要内容 -->
<div v-else>
<!-- 新增的背景图层 -->
<img
v-smart-img
@ -78,42 +86,42 @@
<div>
<div style="display: flex; justify-content: space-around; margin-top: 2vw">
<!-- 排行榜按钮 -->
<div style="width: 40%; position: relative">
<div style="width: 40%; position: relative" @click="rankingShow = true">
<img
v-show="!rankingShow"
v-smart-img
class="toggle-image"
:src="imageUrl(getImgName('rankingBt'))"
alt=""
style="display: block; width: 100%"
:style="{ opacity: rankingShow ? 0 : 1 }"
@click="rankingShow = true"
/>
<img
v-show="rankingShow"
v-smart-img
class="toggle-image"
:src="imageUrl(getImgName('rankingBtActive'))"
alt=""
style="display: block; width: 100%; position: absolute; top: 0; left: 0"
:style="{ opacity: rankingShow ? 1 : 0 }"
@click="rankingShow = true"
style="display: block; width: 100%"
/>
</div>
<!-- 奖励按钮 -->
<div style="width: 40%; position: relative">
<div style="width: 40%; position: relative" @click="rankingShow = false">
<img
v-show="rankingShow"
v-smart-img
class="toggle-image"
:src="imageUrl(getImgName('rewardsBt'))"
alt=""
style="display: block; width: 100%"
:style="{ opacity: rankingShow ? 1 : 0 }"
@click="rankingShow = false"
/>
<img
v-show="!rankingShow"
v-smart-img
class="toggle-image"
:src="imageUrl(getImgName('rewardBtActive'))"
alt=""
style="display: block; width: 100%; position: absolute; top: 0; left: 0"
:style="{ opacity: rankingShow ? 0 : 1 }"
@click="rankingShow = false"
style="display: block; width: 100%"
/>
</div>
</div>
@ -122,13 +130,7 @@
<!-- 展示内容 -->
<div>
<!-- Ranking -->
<div v-show="rankingShow" style="position: relative; width: 100%">
<!-- 背景图 -->
<!-- <div
class="ranking-bg"
:style="{ '--ranking-bg-url': `url(${imageUrl('RankingBg')})` }"
></div> -->
<div v-show="rankingShow" style="position: relative; width: 100%; margin: 10px 0">
<div style="position: relative; z-index: 1">
<!-- 第2-4名 -->
<itemCenter
@ -404,7 +406,9 @@
align-items: center;
"
>
<div style="color: #f9e447; text-align: center; font-size: 1.2em; font-weight: 900">
<div
style="color: #f9e447; text-align: center; font-size: 1.2em; font-weight: 900"
>
7Days
</div>
</div>
@ -571,6 +575,7 @@
</maskLayer>
</div>
</div>
</div>
</template>
<script setup>
@ -591,6 +596,9 @@ import maskLayer from '@/components/MaskLayer.vue'
const isInAppEnvironment = ref(false) // 检测是否在APP环境中
const maskLayerShow = ref(false) //帮助模块
// 预加载状态
const isLoading = ref(true)
const langStore = useLangStore()
// 当前语言类型
const currentLangType = computed(() => {
@ -741,13 +749,15 @@ const getRewardsAndGifts = async () => {
}
// 刷新页面数据
const initData = () => {
getListAndMy() // 获取排行榜和我的排名
getRewardsAndGifts() //获取本周的礼物和奖励列表
const initData = async () => {
await Promise.all([
getListAndMy(), // 获取排行榜和我的排名
getRewardsAndGifts(), //获取本周的礼物和奖励列表
])
}
// 预加载关键图片
const preloadCriticalImages = () => {
const preloadCriticalImages = async () => {
const criticalImages = [
imageUrl('bg'),
imageUrl('bg2'),
@ -803,9 +813,22 @@ const preloadCriticalImages = () => {
]
if (currentLangType.value == 'en') {
preloadImages(criticalImages)
await preloadImages(criticalImages)
} else if (currentLangType.value == 'ar') {
preloadImages(criticalImages_ar)
await preloadImages(criticalImages_ar)
}
}
// 完成预加载
const completePreloading = async () => {
try {
// 执行所有初始化操作
await Promise.all([initData(), preloadCriticalImages()])
} catch (error) {
console.error('预加载过程中发生错误:', error)
} finally {
// 无论成功或失败都结束加载状态
isLoading.value = false
}
}
@ -813,8 +836,7 @@ const preloadCriticalImages = () => {
const connectToAppHandler = async () => {
await connectToApp(() => {
// 连接成功回调
initData() //初始化数据
preloadCriticalImages() //预加载关键图片
completePreloading() // 完成预加载
})
}
@ -850,17 +872,6 @@ onUnmounted(() => {
z-index: 1;
}
.ranking-bg {
background-color: #400000;
background-image: var(--ranking-bg-url);
background-size: 100% auto;
background-repeat: no-repeat;
position: absolute;
inset: 10vw 2% 1vw;
z-index: 1;
}
.timeText {
color: #fff;
font-weight: 590;
@ -903,6 +914,40 @@ onUnmounted(() => {
margin-top: 10vw;
}
/* 添加加载动画样式 */
.loading-container {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #666;
}
.loading-spinner {
width: 32px;
height: 32px;
border: 3px solid #f3f3f3;
border-top: 3px solid #f59e0b;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-bottom: 12px;
}
.toggle-image {
transition: opacity 0.3s ease-in-out;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@media screen and (max-width: 360px) {
* {
font-size: 10px;