From 6f14020d6f5e81c82a0b13f2552f618dafd9a1ac Mon Sep 17 00:00:00 2001 From: hzj <1304805162@qq.com> Date: Thu, 25 Dec 2025 15:27:40 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E5=91=A8=E6=98=9F=E6=8E=92=E8=A1=8C?= =?UTF-8?q?=E6=A6=9C=E9=A1=B5):=20=E6=96=B0=E5=A2=9E=E5=9B=BE=E7=89=87?= =?UTF-8?q?=E9=A2=84=E5=8A=A0=E8=BD=BD=E7=BC=93=E5=86=B2=E5=8A=A8=E7=94=BB?= =?UTF-8?q?=EF=BC=8C=E5=B9=B6=E4=BF=AE=E5=A4=8D=E5=88=87=E6=8D=A2=E6=8C=89?= =?UTF-8?q?=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/Ranking/WeeklyStar/WeeklyStar.vue | 1441 ++++++++++--------- 1 file changed, 752 insertions(+), 689 deletions(-) diff --git a/src/views/Ranking/WeeklyStar/WeeklyStar.vue b/src/views/Ranking/WeeklyStar/WeeklyStar.vue index ae70cfa..7ed9f50 100644 --- a/src/views/Ranking/WeeklyStar/WeeklyStar.vue +++ b/src/views/Ranking/WeeklyStar/WeeklyStar.vue @@ -1,207 +1,277 @@ @@ -804,6 +822,9 @@ import itemCenter from '@/components/itemCenter.vue' import maskLayer from '@/components/MaskLayer.vue' import TopUser from './components/topUser.vue' +// 预加载状态 +const isLoading = ref(true) + // 获取OSS图片URL的函数 const imageUrl = (filename) => getPngUrl('Ranking/WeeklyStar/', filename) @@ -811,9 +832,7 @@ const imageUrl = (filename) => getPngUrl('Ranking/WeeklyStar/', filename) const connectToAppHandler = async () => { await connectToApp(() => { // 连接成功回调 - getUserInfo() - updatePageData() // 刷新页面数据 - preloadCriticalImages() // 预加载关键图片 + completePreloading() // 完成预加载 }) } @@ -1097,19 +1116,20 @@ const getThisWeekMyFragment = async () => { } // 刷新页面数据 -const updatePageData = () => { - getThisWeekRanking() // 获取本周排名 - getHistoryRankingTop1() // 获取历史top1 - - getThisWeekRewards() // 获取本周奖励 - getThisWeekGifts() // 获取本周礼物 - getThisWeekExchangeGoods() // 获取本周可兑换商品 +const updatePageData = async () => { + await Promise.all([ + getThisWeekRanking(), // 获取本周排名 + getHistoryRankingTop1(), // 获取历史top1 + getThisWeekRewards(), // 获取本周奖励 + getThisWeekGifts(), // 获取本周礼物 + getThisWeekExchangeGoods(), // 获取本周可兑换商品 + ]) } // 预加载关键图片 -const preloadCriticalImages = () => { +const preloadCriticalImages = async () => { const criticalImages = [ - imageUrl('bg'), + // imageUrl('bg'), imageUrl('history'), imageUrl('gifts'), imageUrl('dayBg'), @@ -1140,7 +1160,7 @@ const preloadCriticalImages = () => { imageUrl('timeNext'), ] - preloadImages(criticalImages) + await preloadImages(criticalImages) } const debouceGetThisWeekRanking = useThrottle(() => { @@ -1158,6 +1178,19 @@ const observer = new IntersectionObserver((entries) => { }) }) +// 完成预加载 +const completePreloading = async () => { + try { + // 执行所有初始化操作 + await Promise.all([getUserInfo(), updatePageData(), preloadCriticalImages()]) + } catch (error) { + console.error('预加载过程中发生错误:', error) + } finally { + // 无论成功或失败都结束加载状态 + isLoading.value = false + } +} + // 组件挂载时检测环境 onMounted(() => { connectToAppHandler() @@ -1226,6 +1259,36 @@ onUnmounted(() => { font-size: 0.8em; } +/* 添加加载动画样式 */ +.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; +} + +@keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + @media screen and (max-width: 360px) { * { font-size: 10px;