feat(新常驻活动页): 游戏榜单页面
This commit is contained in:
hzj
parent
fe87ac9010
commit
1e4c2a7249
@ -349,6 +349,12 @@ const router = createRouter({
|
||||
component: () => import('../views/Ranking/Overall/Ranking.vue'),
|
||||
meta: { requiresAuth: true },
|
||||
},
|
||||
{
|
||||
path: '/games-king',
|
||||
name: 'games-king',
|
||||
component: () => import('../views/Ranking/GamesKing/index.vue'),
|
||||
meta: { requiresAuth: true },
|
||||
},
|
||||
|
||||
// 限时活动
|
||||
{
|
||||
|
||||
@ -49,6 +49,7 @@ const RANKING_PAGES = [
|
||||
'/top-list', //排行榜
|
||||
'/weekly-star', //每周明星
|
||||
'/ranking', //总排行榜
|
||||
'/games-king', //游戏排行榜
|
||||
]
|
||||
|
||||
// 活动页面
|
||||
|
||||
@ -400,6 +400,7 @@ class RouteGuard {
|
||||
'/top-list', //排行榜
|
||||
'/weekly-star', //每周明星
|
||||
'/ranking', //总排行榜
|
||||
'/games-king', //游戏排行榜
|
||||
]
|
||||
|
||||
// 活动页面
|
||||
|
||||
232
src/views/Ranking/GamesKing/components/topUser.vue
Normal file
232
src/views/Ranking/GamesKing/components/topUser.vue
Normal file
@ -0,0 +1,232 @@
|
||||
<template>
|
||||
<div style="width: 100%">
|
||||
<div style="position: relative">
|
||||
<img
|
||||
v-smart-img
|
||||
:src="BorderImgUrl"
|
||||
alt=""
|
||||
width="100%"
|
||||
style="display: block; position: relative; z-index: 2"
|
||||
/>
|
||||
<!-- 头像 -->
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
:style="{ height: avatarContainerHeight }"
|
||||
>
|
||||
<div :style="{ width: avatarWidth }">
|
||||
<img
|
||||
v-smart-img
|
||||
:src="avatarUrl || ''"
|
||||
alt=""
|
||||
width="100%"
|
||||
style="display: block; border-radius: 50%; aspect-ratio: 1/1; object-fit: cover"
|
||||
@error="handleAvatarImageError"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 用户名和贡献值 -->
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
"
|
||||
:style="{ height: bottomSectionHeight }"
|
||||
>
|
||||
<div
|
||||
style="display: flex; justify-content: center; align-items: center"
|
||||
:style="usernameAreaStyle"
|
||||
>
|
||||
<div style="font-weight: 700" class="showText" :class="textSizeClass">
|
||||
{{ name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { handleAvatarImageError } from '@/utils/imageHandler.js'
|
||||
|
||||
const props = defineProps({
|
||||
// 排名
|
||||
ranking: {
|
||||
type: String,
|
||||
default: '1',
|
||||
},
|
||||
|
||||
// 头像
|
||||
avatarUrl: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
|
||||
// 头像框
|
||||
BorderImgUrl: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
|
||||
// 名字
|
||||
name: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
|
||||
// 贡献值
|
||||
distributionValue: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
})
|
||||
|
||||
// 头像容器高度
|
||||
const avatarContainerHeight = computed(() => {
|
||||
switch (props.ranking) {
|
||||
case '1':
|
||||
return '93%'
|
||||
case '2':
|
||||
return '93%'
|
||||
case '3':
|
||||
return '90%'
|
||||
case '4':
|
||||
return '90%'
|
||||
case '5-7':
|
||||
return '85%'
|
||||
case '8-10':
|
||||
return '85%'
|
||||
default:
|
||||
return '90%'
|
||||
}
|
||||
})
|
||||
|
||||
// 头像宽度
|
||||
const avatarWidth = computed(() => {
|
||||
switch (props.ranking) {
|
||||
case '1':
|
||||
return '36%'
|
||||
case '2':
|
||||
return '50%'
|
||||
case '3':
|
||||
return '41%'
|
||||
case '4':
|
||||
return '41%'
|
||||
case '5-7':
|
||||
return '45%'
|
||||
case '8-10':
|
||||
return '45%'
|
||||
default:
|
||||
return '48%'
|
||||
}
|
||||
})
|
||||
|
||||
// 底部信息区域高度
|
||||
const bottomSectionHeight = computed(() => {
|
||||
switch (props.ranking) {
|
||||
case '1':
|
||||
return '23%'
|
||||
case '2':
|
||||
return '37%'
|
||||
case '3':
|
||||
return '39%'
|
||||
case '4':
|
||||
return '39%'
|
||||
case '5-7':
|
||||
return '43%'
|
||||
case '8-10':
|
||||
return '41%'
|
||||
default:
|
||||
return '30%'
|
||||
}
|
||||
})
|
||||
|
||||
// 用户名区域样式
|
||||
const usernameAreaStyle = computed(() => {
|
||||
switch (props.ranking) {
|
||||
case '1':
|
||||
return 'height: 50%; width: 36%;'
|
||||
case '2':
|
||||
return 'height: 39%; width: 90%;'
|
||||
case '3':
|
||||
return 'height: 26%; width: 75%;'
|
||||
case '4':
|
||||
return 'height: 26%; width: 75%;'
|
||||
case '5-7':
|
||||
return 'height: 23%; width: 78%;'
|
||||
case '8-10':
|
||||
return 'height: 27%; width: 78%;'
|
||||
default:
|
||||
return 'height: 30%; width: 40%;'
|
||||
}
|
||||
})
|
||||
|
||||
// 文字大小类
|
||||
const textSizeClass = computed(() => {
|
||||
return props.ranking === '1' ? 'top1Text' : 'text'
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
* {
|
||||
font-family: 'SF Pro';
|
||||
color: black;
|
||||
}
|
||||
|
||||
.showText {
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.top1Text {
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 0.6em;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 360px) {
|
||||
* {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 360px) {
|
||||
* {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
* {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
* {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
941
src/views/Ranking/GamesKing/index.vue
Normal file
941
src/views/Ranking/GamesKing/index.vue
Normal file
@ -0,0 +1,941 @@
|
||||
<!-- src/views/Activities/Game/index.vue -->
|
||||
<template>
|
||||
<div class="fullPage">
|
||||
<!-- 新增的背景图层 -->
|
||||
<div class="background-overlay" :style="{ '--bg2-url': `url(${imageUrl('bg2')})` }"></div>
|
||||
|
||||
<div class="bg" :style="{ '--bg-url': `url(${imageUrl('bg')})` }">
|
||||
<!-- 状态栏占位区域（仅在APP中显示） -->
|
||||
<div v-if="isInAppEnvironment" style="height: 30px"></div>
|
||||
|
||||
<!-- 第一名 -->
|
||||
<div style="display: flex; justify-content: center; margin-top: 11vw">
|
||||
<TopUser
|
||||
ranking="1"
|
||||
:BorderImgUrl="imageUrl('top1')"
|
||||
:avatarUrl="RankingHasTop10[0].avatar"
|
||||
:name="RankingHasTop10[0].nickname"
|
||||
style="width: 55%"
|
||||
@click="viewUserInfo(RankingHasTop10[0].userId)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 按钮 -->
|
||||
<div style="margin-top: 6vw; display: flex; justify-content: flex-end; align-items: center">
|
||||
<!-- 帮助按钮 -->
|
||||
<img
|
||||
v-smart-img
|
||||
src="/src/assets/icon/helpAct.png"
|
||||
alt=""
|
||||
style="display: block; position: relative; width: 8vw; margin-right: 4vw"
|
||||
@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
|
||||
class="ranking-bg"
|
||||
:style="{ '--ranking-bg-url': `url(${imageUrl('RankingBg')})` }"
|
||||
></div> -->
|
||||
|
||||
<div style="position: relative; z-index: 1">
|
||||
<!-- 第2-4名 -->
|
||||
<itemCenter
|
||||
:imgUrl="imageUrl(getImgName('RankingMain'))"
|
||||
:contentStyle="`padding: 25% 4% 0;flex-direction: column;`"
|
||||
>
|
||||
<div>
|
||||
<!-- 第2名 -->
|
||||
<div style="display: flex; justify-content: center">
|
||||
<TopUser
|
||||
ranking="2"
|
||||
:BorderImgUrl="imageUrl('top2')"
|
||||
:avatarUrl="RankingHasTop10[1].avatar"
|
||||
:name="RankingHasTop10[1].nickname"
|
||||
style="width: 40%"
|
||||
@click="viewUserInfo(RankingHasTop10[1].userId)"
|
||||
/>
|
||||
</div>
|
||||
<!-- 第3-4名 -->
|
||||
<div style="display: flex; justify-content: space-between; margin-top: -5vw">
|
||||
<TopUser
|
||||
ranking="3"
|
||||
:BorderImgUrl="imageUrl('top3')"
|
||||
:avatarUrl="RankingHasTop10[2].avatar"
|
||||
:name="RankingHasTop10[2].nickname"
|
||||
style="width: 38%"
|
||||
@click="viewUserInfo(RankingHasTop10[2].userId)"
|
||||
/>
|
||||
<TopUser
|
||||
ranking="4"
|
||||
:BorderImgUrl="imageUrl('top4')"
|
||||
:avatarUrl="RankingHasTop10[3].avatar"
|
||||
:name="RankingHasTop10[3].nickname"
|
||||
style="width: 38%"
|
||||
@click="viewUserInfo(RankingHasTop10[3].userId)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</itemCenter>
|
||||
|
||||
<!-- 第5-10名 -->
|
||||
<itemCenter
|
||||
:imgUrl="imageUrl('RankingCenterBg')"
|
||||
:contentStyle="`padding: 0 5%;flex-direction: column;justify-content: space-around;`"
|
||||
>
|
||||
<!-- 5-7 -->
|
||||
<div style="width: 100%; display: flex; justify-content: space-between">
|
||||
<TopUser
|
||||
v-for="topUser in RankingHasTop10.slice(4, 7)"
|
||||
:key="topUser.userId"
|
||||
ranking="5-7"
|
||||
:BorderImgUrl="imageUrl('top5_7')"
|
||||
:avatarUrl="topUser.avatar"
|
||||
:name="topUser.nickname"
|
||||
style="width: 30%"
|
||||
@click="viewUserInfo(topUser.userId)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 8-10 -->
|
||||
<div style="width: 100%; display: flex; justify-content: space-between">
|
||||
<TopUser
|
||||
v-for="topUser in RankingHasTop10.slice(7, 10)"
|
||||
:key="topUser.userId"
|
||||
ranking="8-10"
|
||||
:BorderImgUrl="imageUrl('top8_10')"
|
||||
:avatarUrl="topUser.avatar"
|
||||
:name="topUser.nickname"
|
||||
style="width: 30%"
|
||||
@click="viewUserInfo(topUser.userId)"
|
||||
/>
|
||||
</div>
|
||||
</itemCenter>
|
||||
|
||||
<!-- 第11名开始 -->
|
||||
<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 10%`"
|
||||
:lazy="true"
|
||||
:immediate="index < 2"
|
||||
@click="viewUserInfo(listItem.userId)"
|
||||
>
|
||||
<!-- 基本信息 -->
|
||||
<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">
|
||||
{{ listItem?.rank }}
|
||||
</div>
|
||||
|
||||
<!-- 头像 -->
|
||||
<img
|
||||
v-smart-img
|
||||
:src="listItem?.avatar || ''"
|
||||
alt=""
|
||||
style="
|
||||
display: block;
|
||||
width: 13vw;
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
"
|
||||
@error="handleAvatarImageError"
|
||||
/>
|
||||
|
||||
<!-- 名称、id -->
|
||||
<div
|
||||
style="
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
align-self: stretch;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
"
|
||||
>
|
||||
<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
|
||||
style="
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
|
||||
display: flex;
|
||||
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: -6vw; position: relative; z-index: 2"
|
||||
/>
|
||||
</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
|
||||
v-if="top == 0"
|
||||
:imgUrl="topImg[0]"
|
||||
:contentStyle="`display: grid;grid-template-columns: repeat(2, 1fr);gap: 2vw;padding: 28vw 4vw 8vw 37vw;`"
|
||||
>
|
||||
<div
|
||||
v-for="(reward, rewardIndex) in rewardsTop.rewards"
|
||||
:key="rewardIndex"
|
||||
style="
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
align-self: stretch;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
width: 100%;
|
||||
aspect-ratio: 1/1;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<!-- 奖励图片 -->
|
||||
<img
|
||||
v-smart-img
|
||||
:src="reward.cover || ''"
|
||||
alt=""
|
||||
style="display: block; width: 70%; object-fit: cover"
|
||||
@error="(e) => handleRewardImageError(e, reward.type)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 数值 -->
|
||||
<div
|
||||
style="
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
min-width: 0;
|
||||
color: #f9e447;
|
||||
text-align: center;
|
||||
font-size: 1.2em;
|
||||
font-weight: 900;
|
||||
font-family: Atma;
|
||||
"
|
||||
>
|
||||
{{ showDetail(reward.type, reward) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 启动时间 -->
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
left: 3.5vw;
|
||||
bottom: 10vw;
|
||||
width: 28vw;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<div style="color: #f9e447; text-align: center; font-size: 1.2em; font-weight: 900">
|
||||
7Days
|
||||
</div>
|
||||
</div>
|
||||
</itemCenter>
|
||||
|
||||
<!-- 第2-4、5-7、8-10名奖励 -->
|
||||
<itemCenter
|
||||
v-else
|
||||
:imgUrl="topImg[Number(rewardsTop.rankRange) - 1]"
|
||||
:contentStyle="`display: grid;grid-template-columns: repeat(3, 1fr);gap: 4vw;padding: 28vw 3vw 10vw;`"
|
||||
>
|
||||
<div
|
||||
v-for="(reward, rewardIndex) in rewardsTop.rewards"
|
||||
:key="rewardIndex"
|
||||
style="width: 100%"
|
||||
:style="rewardIndex == 3 ? `grid-row: 2;grid-column: 2;` : ''"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
width: 100%;
|
||||
aspect-ratio: 1/1;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<!-- 奖励图片 -->
|
||||
<img
|
||||
v-smart-img
|
||||
:src="reward.cover || ''"
|
||||
alt=""
|
||||
style="display: block; width: 70%; object-fit: cover"
|
||||
@error="(e) => handleRewardImageError(e, reward.type)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 数值 -->
|
||||
<div
|
||||
style="
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
min-width: 0;
|
||||
color: #f9e447;
|
||||
text-align: center;
|
||||
font-size: 1.2em;
|
||||
font-weight: 900;
|
||||
font-family: Atma;
|
||||
"
|
||||
>
|
||||
{{ showDetail(reward.type, reward) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</itemCenter>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 我的排名占位 -->
|
||||
<div style="height: 25vw"></div>
|
||||
|
||||
<!-- 我的排名 -->
|
||||
<itemCenter
|
||||
style="position: fixed; bottom: 0; z-index: 2"
|
||||
:imgUrl="imageUrl('myRankingBg')"
|
||||
:contentStyle="`padding: 0 8%`"
|
||||
>
|
||||
<!-- 基本信息 -->
|
||||
<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: 15vw;
|
||||
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="
|
||||
color: #fff;
|
||||
font-weight: 860;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
"
|
||||
class="UserNickname"
|
||||
>
|
||||
{{ myRanking.nickname }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 贡献值 -->
|
||||
<div
|
||||
style="
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
|
||||
display: flex;
|
||||
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">
|
||||
{{ myRanking.quantity || 0 }}
|
||||
</div>
|
||||
</div>
|
||||
</itemCenter>
|
||||
|
||||
<!-- 弹窗遮罩层 -->
|
||||
<maskLayer :maskLayerShow="maskLayerShow" @click="maskLayerShow = false">
|
||||
<!-- help弹窗 -->
|
||||
<div style="margin: 20% 0" @click.stop>
|
||||
<img
|
||||
v-smart-img
|
||||
:src="imageUrl(getImgName('helpInfo'))"
|
||||
alt=""
|
||||
style="display: block; width: 100%"
|
||||
/>
|
||||
</div>
|
||||
</maskLayer>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue'
|
||||
import { isInApp, viewUserInfo } from '@/utils/appBridge.js'
|
||||
import { connectToApp } from '@/utils/appConnector.js'
|
||||
import { useLangStore } from '@/stores/lang'
|
||||
import { getPngUrl } from '@/config/imagePaths.js'
|
||||
import { preloadImages } from '@/utils/imagePreloader.js'
|
||||
import { handleAvatarImageError, handleRewardImageError } from '@/utils/imageHandler.js'
|
||||
|
||||
import { getThisWeekRewardsAndGifts, getRankingListAndMyRanking } from '@/api/activity.js'
|
||||
|
||||
import itemCenter from '@/components/itemCenter.vue'
|
||||
import TopUser from './components/topUser.vue'
|
||||
import maskLayer from '@/components/MaskLayer.vue'
|
||||
|
||||
const isInAppEnvironment = ref(false) // 检测是否在APP环境中
|
||||
const maskLayerShow = ref(false) //帮助模块
|
||||
|
||||
const current = ref(1) //排行榜第几页
|
||||
const RankingLoadmore = ref(null) //触底模块
|
||||
const showRankingLoading = ref(true) //触底加载功能
|
||||
|
||||
const langStore = useLangStore()
|
||||
// 当前语言类型
|
||||
const currentLangType = computed(() => {
|
||||
return langStore.selectedLang?.type || 'en'
|
||||
})
|
||||
|
||||
// 获取OSS图片URL的函数
|
||||
const imageUrl = (filename) => getPngUrl('Ranking/GamesKing/', filename)
|
||||
|
||||
// 根据语言获取图片名
|
||||
const getImgName = (filename) => {
|
||||
return currentLangType.value === 'ar' ? `${filename}_ar` : filename
|
||||
}
|
||||
|
||||
// 倒计时
|
||||
const Days = ref(0)
|
||||
const Hours = ref(0)
|
||||
const Minutes = ref(0)
|
||||
const Second = ref(0)
|
||||
let timer = null
|
||||
|
||||
// 模块切换展示
|
||||
const rankingShow = ref(true) //排行榜
|
||||
|
||||
const Ranking = ref([]) // 排行榜
|
||||
const myRanking = ref({}) // 我的排名
|
||||
const rewardsList = ref([]) // 奖励列表
|
||||
|
||||
const topImg = ref([
|
||||
imageUrl('top1RewardBg'),
|
||||
imageUrl('top2_4RewardBg'),
|
||||
imageUrl('top5_7RewardBg'),
|
||||
imageUrl('top8_10RewardBg'),
|
||||
]) // top奖励背景
|
||||
|
||||
// 处理排行榜小于10人时的情况
|
||||
const RankingHasTop10 = computed(() => {
|
||||
let RankingShow = [...Ranking.value]
|
||||
if (Ranking.value.length < 10) {
|
||||
let addNullUser = Array.from({ length: 10 - Ranking.value.length }, () => ({
|
||||
avatar: '',
|
||||
nickname: '',
|
||||
quantity: '',
|
||||
}))
|
||||
RankingShow.push(...addNullUser)
|
||||
}
|
||||
return RankingShow
|
||||
})
|
||||
|
||||
// 展示用的榜单
|
||||
const showRanking = computed(() => {
|
||||
return Ranking.value.filter((_, index) => index >= 10)
|
||||
// return []
|
||||
})
|
||||
|
||||
// 获取北京时间下周一早上5点的时间戳
|
||||
const getNextMondayInBeijing = () => {
|
||||
const now = new Date()
|
||||
const beijingDay = (now.getUTCDay() + 6) % 7
|
||||
// UTC 时间的星期几 (0=周日, 1=周一, ..., 6=周六)转换为北京时间的星期几 (0=周一, 6=周日)
|
||||
|
||||
// 计算到下周一的所需天数
|
||||
const daysToAdd = beijingDay === 0 ? 7 : 7 - beijingDay
|
||||
const nextMondayBeijing = new Date(now)
|
||||
|
||||
// 增加到下周一
|
||||
nextMondayBeijing.setUTCDate(now.getUTCDate() + daysToAdd)
|
||||
|
||||
// 设置为北京时间下周一早上5点 (UTC时间是前一天21点)
|
||||
nextMondayBeijing.setUTCHours(21, 0, 0, 0)
|
||||
|
||||
return nextMondayBeijing.getTime()
|
||||
}
|
||||
|
||||
const targetTime = ref(getNextMondayInBeijing()) // 闭包保存目标时间 (核心修正)
|
||||
|
||||
// 格式化时间
|
||||
const formatTime = (value) => {
|
||||
return value < 10 ? `0${value}` : value
|
||||
}
|
||||
|
||||
// 倒计时
|
||||
const getCountdown = () => {
|
||||
const now = Date.now()
|
||||
let diff = targetTime.value - now
|
||||
|
||||
if (diff <= 0) {
|
||||
// 初始化数据
|
||||
initData()
|
||||
resetPage()
|
||||
|
||||
targetTime.value += 7 * 86400000 // +7天 (更新闭包变量)
|
||||
diff = targetTime.value - now
|
||||
}
|
||||
|
||||
const totalSeconds = Math.floor(diff / 1000)
|
||||
Days.value = Math.floor(totalSeconds / (24 * 3600))
|
||||
Hours.value = formatTime(Math.floor((totalSeconds % (24 * 3600)) / 3600))
|
||||
Minutes.value = formatTime(Math.floor((totalSeconds % 3600) / 60))
|
||||
Second.value = formatTime(Math.floor(totalSeconds % 60))
|
||||
}
|
||||
|
||||
// 重置数据
|
||||
const resetPage = () => {
|
||||
current.value = 1 //排行榜第几页
|
||||
showRankingLoading.value = true //触底加载功能
|
||||
Ranking.value = [] // 排行榜
|
||||
}
|
||||
|
||||
// 格式化奖励的展示信息
|
||||
const showDetail = (type, reward) => {
|
||||
let showamount = ['GOLD', 'DIAMOND', 'GIFT', 'FRAGMENTS']
|
||||
if (showamount.includes(type)) {
|
||||
return reward.content
|
||||
} else if (type === 'DOLLARS') {
|
||||
return `$${reward.content}`
|
||||
} else {
|
||||
return `${reward.quantity}Days`
|
||||
}
|
||||
}
|
||||
|
||||
// 获取排行榜和我的排名
|
||||
const getListAndMy = async () => {
|
||||
let data = {
|
||||
activityType: 9999,
|
||||
}
|
||||
const resMyWeekStarRanking = await getRankingListAndMyRanking(data)
|
||||
console.log('resMyWeekStarRanking:', resMyWeekStarRanking)
|
||||
if (resMyWeekStarRanking.status && resMyWeekStarRanking.body) {
|
||||
myRanking.value = resMyWeekStarRanking.body.currentUserRank
|
||||
Ranking.value = resMyWeekStarRanking.body.rankingList
|
||||
}
|
||||
}
|
||||
|
||||
// 获取每周奖励列表和礼物
|
||||
const getRewardsAndGifts = async () => {
|
||||
const resRewardsAndGifts = await getThisWeekRewardsAndGifts('1996796468800196610')
|
||||
if (resRewardsAndGifts.status && resRewardsAndGifts.body) {
|
||||
rewardsList.value = resRewardsAndGifts.body.butOneRewards
|
||||
if (rewardsList.value[0]) {
|
||||
rewardsList.value[0].rewards.push({
|
||||
type: 'DOLLARS',
|
||||
content: 50,
|
||||
})
|
||||
}
|
||||
|
||||
if (rewardsList.value[1]) {
|
||||
rewardsList.value[1].rewards.push({
|
||||
type: 'DOLLARS',
|
||||
content: 30,
|
||||
})
|
||||
}
|
||||
|
||||
if (rewardsList.value[2]) {
|
||||
rewardsList.value[2].rewards.push({
|
||||
type: 'DOLLARS',
|
||||
content: 10,
|
||||
})
|
||||
}
|
||||
|
||||
// 补齐第四名奖励
|
||||
if (!rewardsList.value[3]) {
|
||||
rewardsList.value[3] = rewardsList.value[2]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 刷新页面数据
|
||||
const initData = () => {
|
||||
getListAndMy() // 获取排行榜和我的排名
|
||||
getRewardsAndGifts() //获取本周的礼物和奖励列表
|
||||
}
|
||||
|
||||
// 预加载关键图片
|
||||
const preloadCriticalImages = () => {
|
||||
const criticalImages = [
|
||||
imageUrl('bg'),
|
||||
imageUrl('bg2'),
|
||||
imageUrl('helpInfo'),
|
||||
imageUrl('myRankingBg'),
|
||||
imageUrl('RankingBottomBorder'),
|
||||
imageUrl('rankingBt'),
|
||||
imageUrl('rankingBtActive'),
|
||||
imageUrl('RankingCenterBg'),
|
||||
imageUrl('RankingItem'),
|
||||
imageUrl('RankingMain'),
|
||||
imageUrl('rewardBtActive'),
|
||||
imageUrl('rewardsBt'),
|
||||
imageUrl('timeBg'),
|
||||
imageUrl('top1RewardBg'),
|
||||
imageUrl('top2_4RewardBg'),
|
||||
imageUrl('top5_7RewardBg'),
|
||||
imageUrl('top8_10RewardBg'),
|
||||
imageUrl('top1'),
|
||||
imageUrl('top2'),
|
||||
imageUrl('top3'),
|
||||
imageUrl('top4'),
|
||||
imageUrl('top5_7'),
|
||||
imageUrl('top8_10'),
|
||||
]
|
||||
|
||||
const criticalImages_ar = [
|
||||
imageUrl('bg'),
|
||||
imageUrl('bg2'),
|
||||
imageUrl('helpInfo_ar'),
|
||||
imageUrl('myRankingBg'),
|
||||
imageUrl('RankingBottomBorder'),
|
||||
imageUrl('rankingBt_ar'),
|
||||
imageUrl('rankingBtActive_ar'),
|
||||
imageUrl('RankingCenterBg'),
|
||||
imageUrl('RankingItem'),
|
||||
imageUrl('RankingMain_ar'),
|
||||
imageUrl('rewardBtActive_ar'),
|
||||
imageUrl('rewardsBt_ar'),
|
||||
imageUrl('timeBg'),
|
||||
imageUrl('top1RewardBg'),
|
||||
imageUrl('top2_4RewardBg'),
|
||||
imageUrl('top5_7RewardBg'),
|
||||
imageUrl('top8_10RewardBg'),
|
||||
imageUrl('top1'),
|
||||
imageUrl('top2'),
|
||||
imageUrl('top3'),
|
||||
imageUrl('top4'),
|
||||
imageUrl('top5_7'),
|
||||
imageUrl('top8_10'),
|
||||
]
|
||||
|
||||
if (currentLangType.value == 'en') {
|
||||
preloadImages(criticalImages)
|
||||
} else if (currentLangType.value == 'ar') {
|
||||
preloadImages(criticalImages_ar)
|
||||
}
|
||||
}
|
||||
|
||||
// 使用工具函数连接APP
|
||||
const connectToAppHandler = async () => {
|
||||
await connectToApp(() => {
|
||||
// 连接成功回调
|
||||
initData() //初始化数据
|
||||
preloadCriticalImages() //预加载关键图片
|
||||
})
|
||||
}
|
||||
|
||||
// 组件挂载时检测环境
|
||||
onMounted(() => {
|
||||
connectToAppHandler()
|
||||
isInAppEnvironment.value = isInApp()
|
||||
|
||||
getCountdown()
|
||||
timer = setInterval(getCountdown, 1000) //倒计时每秒更新
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
clearInterval(timer) //摧毁计时器
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
* {
|
||||
color: #fff;
|
||||
font-family: 'SF Pro';
|
||||
}
|
||||
|
||||
.fullPage {
|
||||
position: relative;
|
||||
background: #5d0c00;
|
||||
}
|
||||
|
||||
.bg {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
background-image: var(--bg-url);
|
||||
background-size: 100% auto;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.background-overlay {
|
||||
position: absolute;
|
||||
inset: 80vw 0 0;
|
||||
background-image: var(--bg2-url);
|
||||
background-repeat: repeat-y;
|
||||
background-position: top center;
|
||||
background-size: 100% auto;
|
||||
z-index: 0; /* 确保在.bg之下 */
|
||||
}
|
||||
|
||||
.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;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.timeGap {
|
||||
width: 6px;
|
||||
align-self: stretch;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btTitle {
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.topTitle {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.history-name {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.history-time {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.UserNickname {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.timeBox {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 10vw;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 360px) {
|
||||
* {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 360px) {
|
||||
* {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
* {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
* {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
[dir='rtl'] .timeBox {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user