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 12:25:30 +08:00
parent 1c96f421ac
commit dcea805840
1 changed files with 459 additions and 398 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
src/views/Activities/JackPot/index.vue
View File

@ -1,15 +1,26 @@
<!-- 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>
<!-- 新增的背景图层 -->
<div class="background-overlay" :style="{ '--bg2-url': `url(${imageUrl('bg2')})` }"></div>
<div class="bg" :style="{ '--bg-url': `url(${imageUrl('bg')})` }">
<div class="bg">
<itemCenter :imgUrl="imageUrl('bg')" :contentStyle="`display: block;`">
<!-- 状态栏占位区域（仅在APP中显示） -->
<div v-if="isInAppEnvironment" style="height: 30px"></div>
<!-- <div v-if="isInAppEnvironment" style="height: 30px"></div> -->
<!-- 按钮 -->
<div style="margin-top: 79vw; display: flex; justify-content: flex-end; align-items: center">
<div
style="margin-top: 89vw; display: flex; justify-content: flex-end; align-items: center"
>
<!-- 帮助按钮 -->
<img
v-smart-img
@ -19,6 +30,7 @@
@click="maskLayerShow = true"
/>
</div>
</itemCenter>
<!-- 倒计时 -->
<div class="timeBox">
@ -51,42 +63,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>
@ -95,7 +107,7 @@
<!-- 展示内容 -->
<div>
<!-- Ranking -->
<div v-show="rankingShow" style="position: relative; width: 100%">
<div v-show="rankingShow" style="position: relative; width: 100%; margin: 10px 0">
<!-- 背景图 -->
<div
class="ranking-bg"
@ -421,6 +433,7 @@
</maskLayer>
</div>
</div>
</div>
</template>
<script setup>
@ -441,6 +454,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(() => {
@ -586,19 +602,21 @@ 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'),
// imageUrl('bg2'),
imageUrl('helpInfo'),
imageUrl('myRankingBg'),
imageUrl('RankingBg'),
// imageUrl('RankingBg'),
imageUrl('RankingBottomBorder'),
imageUrl('rankingBt'),
imageUrl('rankingBtActive'),
@ -620,10 +638,10 @@ const preloadCriticalImages = () => {
const criticalImages_ar = [
imageUrl('bg'),
imageUrl('bg2'),
// imageUrl('bg2'),
imageUrl('helpInfo_ar'),
imageUrl('myRankingBg'),
imageUrl('RankingBg'),
// imageUrl('RankingBg'),
imageUrl('RankingBottomBorder'),
imageUrl('rankingBt_ar'),
imageUrl('rankingBtActive_ar'),
@ -644,9 +662,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
}
}
@ -654,8 +685,7 @@ const preloadCriticalImages = () => {
const connectToAppHandler = async () => {
await connectToApp(() => {
// 连接成功回调
initData() //初始化数据
preloadCriticalImages() //预加载关键图片
completePreloading() // 完成预加载
})
}
@ -687,9 +717,6 @@ onUnmounted(() => {
.bg {
width: 100vw;
min-height: 100vh;
background-image: var(--bg-url);
background-size: 100% auto;
background-repeat: no-repeat;
position: relative;
z-index: 1;
}
@ -755,7 +782,41 @@ onUnmounted(() => {
.timeBox {
display: flex;
justify-content: center;
margin-top: 13vw;
margin-top: -23vw;
}
/* 添加加载动画样式 */
.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) {