From e4d532af3ee5a50d49baefac7c2e8666e1238eeb Mon Sep 17 00:00:00 2001 From: hzj <1304805162@qq.com> Date: Thu, 25 Dec 2025 14:13:43 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E5=B9=B8=E8=BF=90=E5=86=A0=E5=86=9B?= =?UTF-8?q?=E6=B4=BB=E5=8A=A8=E9=A1=B5):=20=E6=96=B0=E5=A2=9E=E5=9B=BE?= =?UTF-8?q?=E7=89=87=E9=A2=84=E5=8A=A0=E8=BD=BD=E7=BC=93=E5=86=B2=E5=8A=A8?= =?UTF-8?q?=E7=94=BB=EF=BC=8C=E5=B9=B6=E4=BF=AE=E5=A4=8D=E5=88=87=E6=8D=A2?= =?UTF-8?q?=E6=8C=89=E9=92=AE=E7=9A=84=E6=98=BE=E7=A4=BA=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/Activities/LuckyChampion/index.vue | 883 ++++++++++--------- 1 file changed, 472 insertions(+), 411 deletions(-) diff --git a/src/views/Activities/LuckyChampion/index.vue b/src/views/Activities/LuckyChampion/index.vue index 227e43e..6a79f9f 100644 --- a/src/views/Activities/LuckyChampion/index.vue +++ b/src/views/Activities/LuckyChampion/index.vue @@ -1,439 +1,452 @@ @@ -456,6 +469,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(() => { @@ -600,21 +616,23 @@ 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('giftItemBg'), imageUrl('helpBt'), imageUrl('helpInfo'), imageUrl('myRankingBg'), - imageUrl('RankingBg'), + // imageUrl('RankingBg'), imageUrl('RankingBottomBorder'), imageUrl('rankingBt'), imageUrl('rankingBtActive'), @@ -633,12 +651,12 @@ const preloadCriticalImages = () => { const criticalImages_ar = [ imageUrl('bg'), - imageUrl('bg2'), + // imageUrl('bg2'), imageUrl('giftItemBg'), imageUrl('helpBt'), imageUrl('helpInfo_ar'), imageUrl('myRankingBg'), - imageUrl('RankingBg'), + // imageUrl('RankingBg'), imageUrl('RankingBottomBorder'), imageUrl('rankingBt_ar'), imageUrl('rankingBtActive_ar'), @@ -656,9 +674,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 } } @@ -666,8 +697,7 @@ const preloadCriticalImages = () => { const connectToAppHandler = async () => { await connectToApp(() => { // 连接成功回调 - initData() //初始化数据 - preloadCriticalImages() //预加载关键图片 + completePreloading() // 完成预加载 }) } @@ -699,9 +729,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; } @@ -770,6 +797,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;