feat(幸运冠军活动页): 新增图片预加载缓冲动画，并修复切换按钮的显示问题
This commit is contained in:
hzj
parent
dcea805840
commit
e4d532af3e
@ -1,439 +1,452 @@
|
|||||||
<!-- src/views/Activities/Game/index.vue -->
|
<!-- src/views/Activities/Game/index.vue -->
|
||||||
<template>
|
<template>
|
||||||
<div class="fullPage">
|
<div class="fullPage">
|
||||||
<!-- 新增的背景图层 -->
|
<!-- 预加载状态 -->
|
||||||
<div class="background-overlay" :style="{ '--bg2-url': `url(${imageUrl('bg2')})` }"></div>
|
<div v-if="isLoading" class="loading-container">
|
||||||
|
<div class="loading-spinner"></div>
|
||||||
|
<p>{{ $t('loading') }}...</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="bg" :style="{ '--bg-url': `url(${imageUrl('bg')})` }">
|
<!-- 主要内容 -->
|
||||||
<!-- 状态栏占位区域（仅在APP中显示） -->
|
<div v-else>
|
||||||
<div v-if="isInAppEnvironment" style="height: 30px"></div>
|
<!-- 新增的背景图层 -->
|
||||||
|
<div class="background-overlay" :style="{ '--bg2-url': `url(${imageUrl('bg2')})` }"></div>
|
||||||
|
|
||||||
<!-- 按钮 -->
|
<div class="bg">
|
||||||
<div style="margin-top: 72vw; display: flex; justify-content: flex-end; align-items: center">
|
<itemCenter :imgUrl="imageUrl('bg')" :contentStyle="`display: block;`">
|
||||||
<!-- 帮助按钮 -->
|
<!-- 状态栏占位区域（仅在APP中显示） -->
|
||||||
<img
|
<!-- <div v-if="isInAppEnvironment" style="height: 30px"></div> -->
|
||||||
v-smart-img
|
|
||||||
:src="imageUrl('helpBt')"
|
|
||||||
alt=""
|
|
||||||
style="display: block; position: relative; width: 12vw; margin-right: 8px"
|
|
||||||
@click="maskLayerShow = true"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 倒计时 -->
|
<!-- 按钮 -->
|
||||||
<div class="timeBox">
|
|
||||||
<div style="width: 20%">
|
|
||||||
<itemCenter :imgUrl="imageUrl('timeBg')">
|
|
||||||
<div class="timeText" style="">{{ Days }}D</div>
|
|
||||||
</itemCenter>
|
|
||||||
</div>
|
|
||||||
<div class="timeText timeGap"></div>
|
|
||||||
<div style="width: 20%">
|
|
||||||
<itemCenter :imgUrl="imageUrl('timeBg')">
|
|
||||||
<div class="timeText" style="">{{ Hours }}</div>
|
|
||||||
</itemCenter>
|
|
||||||
</div>
|
|
||||||
<div class="timeText timeGap">:</div>
|
|
||||||
<div style="width: 20%">
|
|
||||||
<itemCenter :imgUrl="imageUrl('timeBg')">
|
|
||||||
<div class="timeText" style="">{{ Minutes }}</div>
|
|
||||||
</itemCenter>
|
|
||||||
</div>
|
|
||||||
<div class="timeText timeGap">:</div>
|
|
||||||
<div style="width: 20%">
|
|
||||||
<itemCenter :imgUrl="imageUrl('timeBg')">
|
|
||||||
<div class="timeText" style="">{{ Second }}</div>
|
|
||||||
</itemCenter>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 切换按钮 -->
|
|
||||||
<div>
|
|
||||||
<div style="display: flex; justify-content: space-around; margin-top: 2vw">
|
|
||||||
<!-- 排行榜按钮 -->
|
|
||||||
<div style="width: 40%; position: relative">
|
|
||||||
<img
|
|
||||||
v-smart-img
|
|
||||||
:src="imageUrl(getImgName('rankingBt'))"
|
|
||||||
alt=""
|
|
||||||
style="display: block; width: 100%"
|
|
||||||
:style="{ opacity: rankingShow ? 0 : 1 }"
|
|
||||||
@click="rankingShow = true"
|
|
||||||
/>
|
|
||||||
<img
|
|
||||||
v-smart-img
|
|
||||||
:src="imageUrl(getImgName('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(getImgName('rewardsBt'))"
|
|
||||||
alt=""
|
|
||||||
style="display: block; width: 100%"
|
|
||||||
:style="{ opacity: rankingShow ? 1 : 0 }"
|
|
||||||
@click="rankingShow = false"
|
|
||||||
/>
|
|
||||||
<img
|
|
||||||
v-smart-img
|
|
||||||
:src="imageUrl(getImgName('rewardBtActive'))"
|
|
||||||
alt=""
|
|
||||||
style="display: block; width: 100%; position: absolute; top: 0; left: 0"
|
|
||||||
:style="{ opacity: rankingShow ? 0 : 1 }"
|
|
||||||
@click="rankingShow = false"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 展示内容 -->
|
|
||||||
<div>
|
|
||||||
<!-- Ranking -->
|
|
||||||
<div v-show="rankingShow" style="position: relative; width: 100%">
|
|
||||||
<!-- 背景图 -->
|
|
||||||
<div
|
<div
|
||||||
class="ranking-bg"
|
style="margin-top: 72vw; display: flex; justify-content: flex-end; align-items: center"
|
||||||
:style="{ '--ranking-bg-url': `url(${imageUrl('RankingBg')})` }"
|
>
|
||||||
></div>
|
<!-- 帮助按钮 -->
|
||||||
|
<img
|
||||||
|
v-smart-img
|
||||||
|
:src="imageUrl('helpBt')"
|
||||||
|
alt=""
|
||||||
|
style="display: block; position: relative; width: 12vw; margin-right: 8px"
|
||||||
|
@click="maskLayerShow = true"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</itemCenter>
|
||||||
|
|
||||||
<div style="position: relative; z-index: 1">
|
<!-- 倒计时 -->
|
||||||
<!-- 前三名 -->
|
<div class="timeBox">
|
||||||
<itemCenter
|
<div style="width: 20%">
|
||||||
:imgUrl="imageUrl(getImgName('RankingMain'))"
|
<itemCenter :imgUrl="imageUrl('timeBg')">
|
||||||
:contentStyle="`padding: 21% 5% 0;flex-direction: column;`"
|
<div class="timeText" style="">{{ Days }}D</div>
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<!-- 第一 -->
|
|
||||||
<div style="display: flex; justify-content: center">
|
|
||||||
<TopUser
|
|
||||||
:BorderImgUrl="imageUrl('topOne')"
|
|
||||||
:avatarUrl="RankingHasTop3[0].avatar"
|
|
||||||
:name="RankingHasTop3[0].nickname"
|
|
||||||
:distributionValue="RankingHasTop3[0].quantity"
|
|
||||||
style="width: 60%"
|
|
||||||
@click="viewUserInfo(RankingHasTop3[0].userId)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<!-- 第二三 -->
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
position: relative;
|
|
||||||
z-index: 3;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-top: -23%;
|
|
||||||
pointer-events: none;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style="pointer-events: auto; width: 36%"
|
|
||||||
@click.stop="viewUserInfo(RankingHasTop3[1].userId)"
|
|
||||||
>
|
|
||||||
<TopUser
|
|
||||||
:isTopOne="false"
|
|
||||||
ranking="2"
|
|
||||||
:BorderImgUrl="imageUrl('topTwo')"
|
|
||||||
:avatarUrl="RankingHasTop3[1].avatar"
|
|
||||||
:name="RankingHasTop3[1].nickname"
|
|
||||||
:distributionValue="RankingHasTop3[1].quantity"
|
|
||||||
style="width: 100%"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="pointer-events: auto; width: 36%"
|
|
||||||
@click.stop="viewUserInfo(RankingHasTop3[2].userId)"
|
|
||||||
>
|
|
||||||
<TopUser
|
|
||||||
:isTopOne="false"
|
|
||||||
ranking="3"
|
|
||||||
:BorderImgUrl="imageUrl('topThree')"
|
|
||||||
:avatarUrl="RankingHasTop3[2].avatar"
|
|
||||||
:name="RankingHasTop3[2].nickname"
|
|
||||||
:distributionValue="RankingHasTop3[2].quantity"
|
|
||||||
style="width: 100%"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</itemCenter>
|
</itemCenter>
|
||||||
|
</div>
|
||||||
|
<div class="timeText timeGap"></div>
|
||||||
|
<div style="width: 20%">
|
||||||
|
<itemCenter :imgUrl="imageUrl('timeBg')">
|
||||||
|
<div class="timeText" style="">{{ Hours }}</div>
|
||||||
|
</itemCenter>
|
||||||
|
</div>
|
||||||
|
<div class="timeText timeGap">:</div>
|
||||||
|
<div style="width: 20%">
|
||||||
|
<itemCenter :imgUrl="imageUrl('timeBg')">
|
||||||
|
<div class="timeText" style="">{{ Minutes }}</div>
|
||||||
|
</itemCenter>
|
||||||
|
</div>
|
||||||
|
<div class="timeText timeGap">:</div>
|
||||||
|
<div style="width: 20%">
|
||||||
|
<itemCenter :imgUrl="imageUrl('timeBg')">
|
||||||
|
<div class="timeText" style="">{{ Second }}</div>
|
||||||
|
</itemCenter>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- 第四名开始 -->
|
<!-- 切换按钮 -->
|
||||||
<div v-if="showRanking.length > 0" style="position: relative; z-index: 2">
|
<div>
|
||||||
|
<div style="display: flex; justify-content: space-around; margin-top: 2vw">
|
||||||
|
<!-- 排行榜按钮 -->
|
||||||
|
<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%"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
v-show="rankingShow"
|
||||||
|
v-smart-img
|
||||||
|
class="toggle-image"
|
||||||
|
:src="imageUrl(getImgName('rankingBtActive'))"
|
||||||
|
alt=""
|
||||||
|
style="display: block; width: 100%"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 奖励按钮 -->
|
||||||
|
<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%"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
v-show="!rankingShow"
|
||||||
|
v-smart-img
|
||||||
|
class="toggle-image"
|
||||||
|
:src="imageUrl(getImgName('rewardBtActive'))"
|
||||||
|
alt=""
|
||||||
|
style="display: block; width: 100%"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 展示内容 -->
|
||||||
|
<div>
|
||||||
|
<!-- Ranking -->
|
||||||
|
<div v-show="rankingShow" style="position: relative; width: 100%; margin: 10px 0">
|
||||||
|
<!-- 背景图 -->
|
||||||
|
<div
|
||||||
|
class="ranking-bg"
|
||||||
|
:style="{ '--ranking-bg-url': `url(${imageUrl('RankingBg')})` }"
|
||||||
|
></div>
|
||||||
|
|
||||||
|
<div style="position: relative; z-index: 1">
|
||||||
|
<!-- 前三名 -->
|
||||||
<itemCenter
|
<itemCenter
|
||||||
v-for="(listItem, index) in showRanking"
|
:imgUrl="imageUrl(getImgName('RankingMain'))"
|
||||||
:key="listItem.userId"
|
:contentStyle="`padding: 21% 5% 0;flex-direction: column;`"
|
||||||
:imgUrl="imageUrl('RankingItem')"
|
|
||||||
:contentStyle="`padding: 0 13%`"
|
|
||||||
:lazy="true"
|
|
||||||
:immediate="index < 2"
|
|
||||||
@click="viewUserInfo(listItem.userId)"
|
|
||||||
>
|
>
|
||||||
<!-- 基本信息 -->
|
<div>
|
||||||
<div
|
<!-- 第一 -->
|
||||||
style="
|
<div style="display: flex; justify-content: center">
|
||||||
flex: 1;
|
<TopUser
|
||||||
min-width: 0;
|
:BorderImgUrl="imageUrl('topOne')"
|
||||||
|
:avatarUrl="RankingHasTop3[0].avatar"
|
||||||
|
:name="RankingHasTop3[0].nickname"
|
||||||
|
:distributionValue="RankingHasTop3[0].quantity"
|
||||||
|
style="width: 60%"
|
||||||
|
@click="viewUserInfo(RankingHasTop3[0].userId)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<!-- 第二三 -->
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
position: relative;
|
||||||
|
z-index: 3;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
justify-content: space-between;
|
||||||
align-items: center;
|
margin-top: -23%;
|
||||||
|
pointer-events: none;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style="pointer-events: auto; width: 36%"
|
||||||
|
@click.stop="viewUserInfo(RankingHasTop3[1].userId)"
|
||||||
|
>
|
||||||
|
<TopUser
|
||||||
|
:isTopOne="false"
|
||||||
|
ranking="2"
|
||||||
|
:BorderImgUrl="imageUrl('topTwo')"
|
||||||
|
:avatarUrl="RankingHasTop3[1].avatar"
|
||||||
|
:name="RankingHasTop3[1].nickname"
|
||||||
|
:distributionValue="RankingHasTop3[1].quantity"
|
||||||
|
style="width: 100%"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
gap: 4px;
|
<div
|
||||||
"
|
style="pointer-events: auto; width: 36%"
|
||||||
|
@click.stop="viewUserInfo(RankingHasTop3[2].userId)"
|
||||||
|
>
|
||||||
|
<TopUser
|
||||||
|
:isTopOne="false"
|
||||||
|
ranking="3"
|
||||||
|
:BorderImgUrl="imageUrl('topThree')"
|
||||||
|
:avatarUrl="RankingHasTop3[2].avatar"
|
||||||
|
:name="RankingHasTop3[2].nickname"
|
||||||
|
:distributionValue="RankingHasTop3[2].quantity"
|
||||||
|
style="width: 100%"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</itemCenter>
|
||||||
|
|
||||||
|
<!-- 第四名开始 -->
|
||||||
|
<div v-if="showRanking.length > 0" style="position: relative; z-index: 2">
|
||||||
|
<itemCenter
|
||||||
|
v-for="(listItem, index) in showRanking"
|
||||||
|
:key="listItem.userId"
|
||||||
|
:imgUrl="imageUrl('RankingItem')"
|
||||||
|
:contentStyle="`padding: 0 13%`"
|
||||||
|
:lazy="true"
|
||||||
|
:immediate="index < 2"
|
||||||
|
@click="viewUserInfo(listItem.userId)"
|
||||||
>
|
>
|
||||||
<!-- 排名 -->
|
<!-- 基本信息 -->
|
||||||
<div style="color: #ffe601; font-weight: 700">
|
<div
|
||||||
{{ listItem?.rank }}
|
style="
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
gap: 4px;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<!-- 排名 -->
|
||||||
|
<div style="color: #ffe601; font-weight: 700">
|
||||||
|
{{ listItem?.rank }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 头像 -->
|
||||||
|
<img
|
||||||
|
v-smart-img
|
||||||
|
:src="listItem?.avatar || ''"
|
||||||
|
alt=""
|
||||||
|
style="
|
||||||
|
display: block;
|
||||||
|
width: 3.5em;
|
||||||
|
margin: 0 2%;
|
||||||
|
aspect-ratio: 1/1;
|
||||||
|
border-radius: 50%;
|
||||||
|
object-fit: cover;
|
||||||
|
"
|
||||||
|
@error="handleAvatarImageError"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- 名称、id -->
|
||||||
|
<div style="flex: 1; min-width: 0; display: flex; flex-direction: column">
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 860;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
"
|
||||||
|
class="UserNickname"
|
||||||
|
>
|
||||||
|
{{ listItem?.nickname }}
|
||||||
|
</div>
|
||||||
|
<div style="color: #fff; font-weight: 590" class="UserNickname">
|
||||||
|
{{ $t('user_id_prefix') }} {{ listItem?.account }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 头像 -->
|
<!-- 贡献值 -->
|
||||||
<img
|
<div
|
||||||
v-smart-img
|
|
||||||
:src="listItem?.avatar || ''"
|
|
||||||
alt=""
|
|
||||||
style="
|
style="
|
||||||
display: block;
|
width: auto;
|
||||||
width: 3.5em;
|
min-width: 0;
|
||||||
margin: 0 2%;
|
|
||||||
aspect-ratio: 1/1;
|
|
||||||
border-radius: 50%;
|
|
||||||
object-fit: cover;
|
|
||||||
"
|
|
||||||
@error="handleAvatarImageError"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- 名称、id -->
|
display: flex;
|
||||||
<div style="flex: 1; min-width: 0; display: flex; flex-direction: column">
|
align-items: center;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
v-smart-img
|
||||||
|
src="/src/assets/icon/coin.png"
|
||||||
|
alt=""
|
||||||
|
style="display: block; width: 1.5em; aspect-ratio: 1/1; object-fit: cover"
|
||||||
|
/>
|
||||||
|
<div style="color: #ffe601; font-weight: 700" class="UserNickname">
|
||||||
|
{{ listItem?.quantity }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</itemCenter>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 底框 -->
|
||||||
|
<img
|
||||||
|
v-smart-img
|
||||||
|
:src="imageUrl('RankingBottomBorder')"
|
||||||
|
alt=""
|
||||||
|
width="100%"
|
||||||
|
style="display: block; margin-top: -13vw; position: relative; z-index: 1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Rewards -->
|
||||||
|
<div
|
||||||
|
v-show="!rankingShow"
|
||||||
|
style="display: flex; flex-direction: column; align-items: center"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
v-for="(rewardsTop, top) in rewardsList"
|
||||||
|
:key="top"
|
||||||
|
style="position: relative; width: 100%; margin: 10px 0"
|
||||||
|
>
|
||||||
|
<itemCenter
|
||||||
|
:imgUrl="topImg[Number(rewardsTop.rankRange) - 1]"
|
||||||
|
:contentStyle="`display: grid;grid-template-columns: repeat(2, 1fr);gap: 12px;padding: 20vw 8vw 8vw;`"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
v-for="(reward, rewardIndex) in rewardsTop.rewards"
|
||||||
|
:key="rewardIndex"
|
||||||
|
style="width: 100%"
|
||||||
|
>
|
||||||
|
<div style="position: relative">
|
||||||
|
<itemCenter
|
||||||
|
:imgUrl="imageUrl('giftItemBg')"
|
||||||
|
:contentStyle="`padding-bottom: 15%;`"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
v-smart-img
|
||||||
|
:src="reward.cover || ''"
|
||||||
|
alt=""
|
||||||
|
style="display: block; width: 70%; object-fit: cover"
|
||||||
|
@error="(e) => handleRewardImageError(e, reward.type)"
|
||||||
|
/>
|
||||||
|
</itemCenter>
|
||||||
<div
|
<div
|
||||||
style="
|
style="
|
||||||
color: #fff;
|
position: absolute;
|
||||||
font-weight: 860;
|
bottom: 8%;
|
||||||
overflow: hidden;
|
left: 0;
|
||||||
white-space: nowrap;
|
width: 100%;
|
||||||
text-overflow: ellipsis;
|
height: 16%;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
"
|
"
|
||||||
class="UserNickname"
|
|
||||||
>
|
>
|
||||||
{{ listItem?.nickname }}
|
<div
|
||||||
</div>
|
style="
|
||||||
<div style="color: #fff; font-weight: 590" class="UserNickname">
|
min-width: 0;
|
||||||
{{ $t('user_id_prefix') }} {{ listItem?.account }}
|
padding: 0 1vw;
|
||||||
</div>
|
text-align: center;
|
||||||
</div>
|
font-size: 1.2em;
|
||||||
</div>
|
font-weight: 900;
|
||||||
|
font-style: italic;
|
||||||
|
background: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
#fff677 6.36%,
|
||||||
|
#d39f1e 26%,
|
||||||
|
#fff891 49.56%,
|
||||||
|
#ffc93e 70.51%,
|
||||||
|
#ffc 93.64%
|
||||||
|
);
|
||||||
|
|
||||||
<!-- 贡献值 -->
|
background-clip: text;
|
||||||
<div
|
-webkit-background-clip: text;
|
||||||
style="
|
-webkit-text-fill-color: transparent;
|
||||||
width: auto;
|
"
|
||||||
min-width: 0;
|
>
|
||||||
|
{{ showDetail(reward.type, reward) }}
|
||||||
display: flex;
|
</div>
|
||||||
align-items: center;
|
</div>
|
||||||
"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
v-smart-img
|
|
||||||
src="/src/assets/icon/coin.png"
|
|
||||||
alt=""
|
|
||||||
style="display: block; width: 1.5em; aspect-ratio: 1/1; object-fit: cover"
|
|
||||||
/>
|
|
||||||
<div style="color: #ffe601; font-weight: 700" class="UserNickname">
|
|
||||||
{{ listItem?.quantity }}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</itemCenter>
|
</itemCenter>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- 底框 -->
|
<!-- 我的排名占位 -->
|
||||||
|
<div style="height: 30vw"></div>
|
||||||
|
|
||||||
|
<!-- 我的排名 -->
|
||||||
|
<itemCenter
|
||||||
|
style="position: fixed; bottom: 0; z-index: 2"
|
||||||
|
:imgUrl="imageUrl('myRankingBg')"
|
||||||
|
:contentStyle="`padding: 2% 8% 0`"
|
||||||
|
>
|
||||||
|
<!-- 基本信息 -->
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
gap: 8px;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<!-- 排名 -->
|
||||||
|
<div style="color: #ffe601; font-weight: 700">
|
||||||
|
{{ myRanking.rank || 999 }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 头像 -->
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
v-smart-img
|
||||||
:src="imageUrl('RankingBottomBorder')"
|
:src="myRanking.avatar || ''"
|
||||||
alt=""
|
alt=""
|
||||||
width="100%"
|
|
||||||
style="display: block; margin-top: -13vw; position: relative; z-index: 1"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Rewards -->
|
|
||||||
<div
|
|
||||||
v-show="!rankingShow"
|
|
||||||
style="display: flex; flex-direction: column; align-items: center"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
v-for="(rewardsTop, top) in rewardsList"
|
|
||||||
:key="top"
|
|
||||||
style="position: relative; width: 100%; margin: 10px 0"
|
|
||||||
>
|
|
||||||
<itemCenter
|
|
||||||
:imgUrl="topImg[Number(rewardsTop.rankRange) - 1]"
|
|
||||||
:contentStyle="`display: grid;grid-template-columns: repeat(2, 1fr);gap: 12px;padding: 20vw 8vw 8vw;`"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
v-for="(reward, rewardIndex) in rewardsTop.rewards"
|
|
||||||
:key="rewardIndex"
|
|
||||||
style="width: 100%"
|
|
||||||
>
|
|
||||||
<div style="position: relative">
|
|
||||||
<itemCenter
|
|
||||||
:imgUrl="imageUrl('giftItemBg')"
|
|
||||||
:contentStyle="`padding-bottom: 15%;`"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
v-smart-img
|
|
||||||
:src="reward.cover || ''"
|
|
||||||
alt=""
|
|
||||||
style="display: block; width: 70%; object-fit: cover"
|
|
||||||
@error="(e) => handleRewardImageError(e, reward.type)"
|
|
||||||
/>
|
|
||||||
</itemCenter>
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
position: absolute;
|
|
||||||
bottom: 8%;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 16%;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
min-width: 0;
|
|
||||||
padding: 0 1vw;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 1.2em;
|
|
||||||
font-weight: 900;
|
|
||||||
font-style: italic;
|
|
||||||
background: linear-gradient(
|
|
||||||
90deg,
|
|
||||||
#fff677 6.36%,
|
|
||||||
#d39f1e 26%,
|
|
||||||
#fff891 49.56%,
|
|
||||||
#ffc93e 70.51%,
|
|
||||||
#ffc 93.64%
|
|
||||||
);
|
|
||||||
|
|
||||||
background-clip: text;
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
{{ showDetail(reward.type, reward) }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</itemCenter>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 我的排名占位 -->
|
|
||||||
<div style="height: 30vw"></div>
|
|
||||||
|
|
||||||
<!-- 我的排名 -->
|
|
||||||
<itemCenter
|
|
||||||
style="position: fixed; bottom: 0; z-index: 2"
|
|
||||||
:imgUrl="imageUrl('myRankingBg')"
|
|
||||||
:contentStyle="`padding: 2% 8% 0`"
|
|
||||||
>
|
|
||||||
<!-- 基本信息 -->
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
gap: 8px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<!-- 排名 -->
|
|
||||||
<div style="color: #ffe601; font-weight: 700">
|
|
||||||
{{ myRanking.rank || 999 }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 头像 -->
|
|
||||||
<img
|
|
||||||
v-smart-img
|
|
||||||
:src="myRanking.avatar || ''"
|
|
||||||
alt=""
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
width: 4em;
|
|
||||||
aspect-ratio: 1/1;
|
|
||||||
border-radius: 50%;
|
|
||||||
object-fit: cover;
|
|
||||||
"
|
|
||||||
@error="handleAvatarImageError"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- 名称 -->
|
|
||||||
<div style="flex: 1; min-width: 0; display: flex; flex-direction: column">
|
|
||||||
<div
|
|
||||||
style="
|
style="
|
||||||
color: #fff;
|
display: block;
|
||||||
font-weight: 860;
|
width: 4em;
|
||||||
overflow: hidden;
|
aspect-ratio: 1/1;
|
||||||
white-space: nowrap;
|
border-radius: 50%;
|
||||||
text-overflow: ellipsis;
|
object-fit: cover;
|
||||||
"
|
"
|
||||||
class="UserNickname"
|
@error="handleAvatarImageError"
|
||||||
>
|
/>
|
||||||
{{ myRanking.nickname }}
|
|
||||||
|
<!-- 名称 -->
|
||||||
|
<div style="flex: 1; min-width: 0; display: flex; flex-direction: column">
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 860;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
"
|
||||||
|
class="UserNickname"
|
||||||
|
>
|
||||||
|
{{ myRanking.nickname }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 贡献值 -->
|
<!-- 贡献值 -->
|
||||||
<div
|
<div
|
||||||
style="
|
style="
|
||||||
width: auto;
|
width: auto;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
v-smart-img
|
||||||
src="/src/assets/icon/coin.png"
|
src="/src/assets/icon/coin.png"
|
||||||
alt=""
|
alt=""
|
||||||
style="display: block; width: 1.5em; aspect-ratio: 1/1; object-fit: cover"
|
style="display: block; width: 1.5em; aspect-ratio: 1/1; object-fit: cover"
|
||||||
/>
|
/>
|
||||||
<div style="color: #ffe601; font-weight: 700">
|
<div style="color: #ffe601; font-weight: 700">
|
||||||
{{ myRanking.quantity || 0 }}
|
{{ myRanking.quantity || 0 }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</itemCenter>
|
||||||
</itemCenter>
|
|
||||||
|
|
||||||
<!-- 弹窗遮罩层 -->
|
<!-- 弹窗遮罩层 -->
|
||||||
<maskLayer :maskLayerShow="maskLayerShow" @click="maskLayerShow = false">
|
<maskLayer :maskLayerShow="maskLayerShow" @click="maskLayerShow = false">
|
||||||
<!-- help弹窗 -->
|
<!-- help弹窗 -->
|
||||||
<div style="margin: 20% 0" @click.stop>
|
<div style="margin: 20% 0" @click.stop>
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
v-smart-img
|
||||||
:src="imageUrl(getImgName('helpInfo'))"
|
:src="imageUrl(getImgName('helpInfo'))"
|
||||||
alt=""
|
alt=""
|
||||||
style="display: block; width: 100%"
|
style="display: block; width: 100%"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</maskLayer>
|
</maskLayer>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -456,6 +469,9 @@ import maskLayer from '@/components/MaskLayer.vue'
|
|||||||
const isInAppEnvironment = ref(false) // 检测是否在APP环境中
|
const isInAppEnvironment = ref(false) // 检测是否在APP环境中
|
||||||
const maskLayerShow = ref(false) //帮助模块
|
const maskLayerShow = ref(false) //帮助模块
|
||||||
|
|
||||||
|
// 预加载状态
|
||||||
|
const isLoading = ref(true)
|
||||||
|
|
||||||
const langStore = useLangStore()
|
const langStore = useLangStore()
|
||||||
// 当前语言类型
|
// 当前语言类型
|
||||||
const currentLangType = computed(() => {
|
const currentLangType = computed(() => {
|
||||||
@ -600,21 +616,23 @@ const getRewardsAndGifts = async () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 刷新页面数据
|
// 刷新页面数据
|
||||||
const initData = () => {
|
const initData = async () => {
|
||||||
getListAndMy() // 获取排行榜和我的排名
|
await Promise.all([
|
||||||
getRewardsAndGifts() //获取本周的礼物和奖励列表
|
getListAndMy(), // 获取排行榜和我的排名
|
||||||
|
getRewardsAndGifts(), //获取本周的礼物和奖励列表
|
||||||
|
])
|
||||||
}
|
}
|
||||||
|
|
||||||
// 预加载关键图片
|
// 预加载关键图片
|
||||||
const preloadCriticalImages = () => {
|
const preloadCriticalImages = async () => {
|
||||||
const criticalImages = [
|
const criticalImages = [
|
||||||
imageUrl('bg'),
|
imageUrl('bg'),
|
||||||
imageUrl('bg2'),
|
// imageUrl('bg2'),
|
||||||
imageUrl('giftItemBg'),
|
imageUrl('giftItemBg'),
|
||||||
imageUrl('helpBt'),
|
imageUrl('helpBt'),
|
||||||
imageUrl('helpInfo'),
|
imageUrl('helpInfo'),
|
||||||
imageUrl('myRankingBg'),
|
imageUrl('myRankingBg'),
|
||||||
imageUrl('RankingBg'),
|
// imageUrl('RankingBg'),
|
||||||
imageUrl('RankingBottomBorder'),
|
imageUrl('RankingBottomBorder'),
|
||||||
imageUrl('rankingBt'),
|
imageUrl('rankingBt'),
|
||||||
imageUrl('rankingBtActive'),
|
imageUrl('rankingBtActive'),
|
||||||
@ -633,12 +651,12 @@ const preloadCriticalImages = () => {
|
|||||||
|
|
||||||
const criticalImages_ar = [
|
const criticalImages_ar = [
|
||||||
imageUrl('bg'),
|
imageUrl('bg'),
|
||||||
imageUrl('bg2'),
|
// imageUrl('bg2'),
|
||||||
imageUrl('giftItemBg'),
|
imageUrl('giftItemBg'),
|
||||||
imageUrl('helpBt'),
|
imageUrl('helpBt'),
|
||||||
imageUrl('helpInfo_ar'),
|
imageUrl('helpInfo_ar'),
|
||||||
imageUrl('myRankingBg'),
|
imageUrl('myRankingBg'),
|
||||||
imageUrl('RankingBg'),
|
// imageUrl('RankingBg'),
|
||||||
imageUrl('RankingBottomBorder'),
|
imageUrl('RankingBottomBorder'),
|
||||||
imageUrl('rankingBt_ar'),
|
imageUrl('rankingBt_ar'),
|
||||||
imageUrl('rankingBtActive_ar'),
|
imageUrl('rankingBtActive_ar'),
|
||||||
@ -656,9 +674,22 @@ const preloadCriticalImages = () => {
|
|||||||
]
|
]
|
||||||
|
|
||||||
if (currentLangType.value == 'en') {
|
if (currentLangType.value == 'en') {
|
||||||
preloadImages(criticalImages)
|
await preloadImages(criticalImages)
|
||||||
} else if (currentLangType.value == 'ar') {
|
} 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 () => {
|
const connectToAppHandler = async () => {
|
||||||
await connectToApp(() => {
|
await connectToApp(() => {
|
||||||
// 连接成功回调
|
// 连接成功回调
|
||||||
initData() //初始化数据
|
completePreloading() // 完成预加载
|
||||||
preloadCriticalImages() //预加载关键图片
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -699,9 +729,6 @@ onUnmounted(() => {
|
|||||||
.bg {
|
.bg {
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
background-image: var(--bg-url);
|
|
||||||
background-size: 100% auto;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
@ -770,6 +797,40 @@ onUnmounted(() => {
|
|||||||
margin-top: 10vw;
|
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) {
|
@media screen and (max-width: 360px) {
|
||||||
* {
|
* {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user