feat(游戏王): 添加日榜和日榜奖励
This commit is contained in:
hzj
parent
235825de89
commit
bf01ea8811
296
src/views/Ranking/GamesKing/components/topUserDaily.vue
Normal file
296
src/views/Ranking/GamesKing/components/topUserDaily.vue
Normal file
@ -0,0 +1,296 @@
|
||||
<template>
|
||||
<div style="width: 100%">
|
||||
<div style="position: relative" :style="{ minHeight: ranking == '1' ? '46vw' : '33vw' }">
|
||||
<!-- 头像 -->
|
||||
<div
|
||||
style="
|
||||
position: relative;
|
||||
z-index: -1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
:style="{ height: avatarContainerHeight }"
|
||||
>
|
||||
<div :style="{ width: avatarWidth }">
|
||||
<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: 1vw;
|
||||
"
|
||||
:style="{ height: bottomSectionHeight }"
|
||||
>
|
||||
<div
|
||||
style="display: flex; justify-content: center; align-items: center"
|
||||
:style="{
|
||||
width: nameValueWidth,
|
||||
height: nameValueHeight,
|
||||
}"
|
||||
>
|
||||
<div
|
||||
style="direction: ltr; font-weight: 700"
|
||||
class="showText"
|
||||
:class="isTopOne ? 'top1Text' : 'text'"
|
||||
>
|
||||
{{ name }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 贡献值 -->
|
||||
<div
|
||||
style="
|
||||
border-radius: 40px;
|
||||
box-shadow: 0 0 2.558px 0 rgba(0, 0, 0, 0.4) inset;
|
||||
border: 0.64px solid #ffdf36;
|
||||
padding: 1px 2px;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
:style="{
|
||||
width: distributionValueWidth,
|
||||
background:
|
||||
ranking == '1'
|
||||
? `linear-gradient(270deg, #3A0607 0%, #D8494B 47.45%, #3A0607 100%)`
|
||||
: ranking == '2'
|
||||
? `linear-gradient(270deg, #D1A3FD 0%, #801DBD 50%, #D0A3FD 100%)`
|
||||
: `linear-gradient(270deg, #A3FDB7 0%, #1DBD3A 50%, #A3FDB2 100%)`,
|
||||
}"
|
||||
>
|
||||
<img
|
||||
v-smart-img
|
||||
src="/src/assets/icon/coin.png"
|
||||
alt=""
|
||||
style="display: block"
|
||||
:style="{ width: coinWidth }"
|
||||
/>
|
||||
<div
|
||||
style="font-weight: 590"
|
||||
class="showText"
|
||||
:class="isTopOne ? 'top1Text' : 'text'"
|
||||
:style="{
|
||||
color: ranking == '1' ? `#FFE601` : '#FFF',
|
||||
}"
|
||||
>
|
||||
{{ distributionValue }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { handleAvatarImageError } from '@/utils/image/imageHandler.js'
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
ranking: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
|
||||
avatarUrl: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
|
||||
name: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
|
||||
rankingType: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
|
||||
distributionValue: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
})
|
||||
|
||||
// 是否为第一名
|
||||
const isTopOne = computed(() => {
|
||||
return props.ranking === '1'
|
||||
})
|
||||
|
||||
// 头像容器高度
|
||||
const avatarContainerHeight = computed(() => {
|
||||
switch (props.ranking) {
|
||||
case '1':
|
||||
return '85%'
|
||||
case '2':
|
||||
return '78%'
|
||||
case '3':
|
||||
return '78%'
|
||||
default:
|
||||
return '78%'
|
||||
}
|
||||
})
|
||||
|
||||
// 头像宽度
|
||||
const avatarWidth = computed(() => {
|
||||
switch (props.ranking) {
|
||||
case '1':
|
||||
return '80%'
|
||||
case '2':
|
||||
return '60%'
|
||||
case '3':
|
||||
return '60%'
|
||||
default:
|
||||
return '38%'
|
||||
}
|
||||
})
|
||||
|
||||
// 底部信息区域高度
|
||||
const bottomSectionHeight = computed(() => {
|
||||
switch (props.ranking) {
|
||||
case '1':
|
||||
return '31%'
|
||||
case '2':
|
||||
return '32%'
|
||||
case '3':
|
||||
return '29%'
|
||||
default:
|
||||
return '29%'
|
||||
}
|
||||
})
|
||||
|
||||
// 名称高度
|
||||
const nameValueHeight = computed(() => {
|
||||
switch (props.ranking) {
|
||||
case '1':
|
||||
return '40%'
|
||||
case '2':
|
||||
return '39%'
|
||||
case '3':
|
||||
return '43%'
|
||||
default:
|
||||
return '38%'
|
||||
}
|
||||
})
|
||||
|
||||
// 名称宽度
|
||||
const nameValueWidth = computed(() => {
|
||||
switch (props.ranking) {
|
||||
case '1':
|
||||
return '70%'
|
||||
case '2':
|
||||
return '70%'
|
||||
case '3':
|
||||
return '70%'
|
||||
default:
|
||||
return '40%'
|
||||
}
|
||||
})
|
||||
|
||||
// 贡献值高度
|
||||
const distributionValueHeight = computed(() => {
|
||||
switch (props.ranking) {
|
||||
case '1':
|
||||
return '26%'
|
||||
case '2':
|
||||
return '38%'
|
||||
case '3':
|
||||
return '38%'
|
||||
default:
|
||||
return '38%'
|
||||
}
|
||||
})
|
||||
|
||||
// 贡献值宽度
|
||||
const distributionValueWidth = computed(() => {
|
||||
switch (props.ranking) {
|
||||
case '1':
|
||||
return '60%'
|
||||
case '2':
|
||||
return '50%'
|
||||
case '3':
|
||||
return '50%'
|
||||
default:
|
||||
return '40%'
|
||||
}
|
||||
})
|
||||
|
||||
// 金币图标宽度
|
||||
const coinWidth = computed(() => {
|
||||
switch (props.ranking) {
|
||||
case '1':
|
||||
return '1em'
|
||||
case '2':
|
||||
return '0.9em'
|
||||
case '3':
|
||||
return '0.9em'
|
||||
default:
|
||||
return '0.9em'
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
* {
|
||||
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: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
* {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
* {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -102,17 +102,12 @@
|
||||
<!-- 历史模块按钮 -->
|
||||
<div style="width: 30%; position: relative" @click="changeModule('history')">
|
||||
<img
|
||||
v-show="!historyShow"
|
||||
v-smart-img
|
||||
:src="imageUrl(getImgName('historyBt'))"
|
||||
alt=""
|
||||
style="display: block; width: 100%"
|
||||
/>
|
||||
<img
|
||||
v-show="historyShow"
|
||||
v-smart-img
|
||||
:src="imageUrl(getImgName('historyBtActive'))"
|
||||
alt=""
|
||||
:class="{
|
||||
'grayscale-container': !historyShow,
|
||||
}"
|
||||
style="display: block; width: 100%"
|
||||
/>
|
||||
</div>
|
||||
@ -120,17 +115,12 @@
|
||||
<!-- 排行榜模块按钮 -->
|
||||
<div style="width: 30%; position: relative" @click="changeModule('ranking')">
|
||||
<img
|
||||
v-show="!rankingShow"
|
||||
v-smart-img
|
||||
:src="imageUrl(getImgName('rankingBt'))"
|
||||
alt=""
|
||||
style="display: block; width: 100%"
|
||||
/>
|
||||
<img
|
||||
v-show="rankingShow"
|
||||
v-smart-img
|
||||
:src="imageUrl(getImgName('rankingBtActive'))"
|
||||
alt=""
|
||||
:class="{
|
||||
'grayscale-container': !rankingShow,
|
||||
}"
|
||||
style="display: block; width: 100%"
|
||||
/>
|
||||
</div>
|
||||
@ -138,17 +128,12 @@
|
||||
<!-- 奖励模块按钮 -->
|
||||
<div style="width: 30%; position: relative" @click="changeModule('rewards')">
|
||||
<img
|
||||
v-show="!rewardsShow"
|
||||
v-smart-img
|
||||
:src="imageUrl(getImgName('rewardsBt'))"
|
||||
alt=""
|
||||
style="display: block; width: 100%"
|
||||
/>
|
||||
<img
|
||||
v-show="rewardsShow"
|
||||
v-smart-img
|
||||
:src="imageUrl(getImgName('rewardBtActive'))"
|
||||
alt=""
|
||||
:class="{
|
||||
'grayscale-container': !rewardsShow,
|
||||
}"
|
||||
style="display: block; width: 100%"
|
||||
/>
|
||||
</div>
|
||||
@ -267,193 +252,384 @@
|
||||
</div>
|
||||
|
||||
<!-- Ranking -->
|
||||
<div v-show="rankingShow" style="position: relative; width: 100%; margin: 10px 0">
|
||||
<div style="position: relative; z-index: 1">
|
||||
<!-- 第2-4名 -->
|
||||
<itemCenter
|
||||
style="min-height: 132.2vw"
|
||||
: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"
|
||||
:distributionValue="RankingHasTop10[1].quantity || ''"
|
||||
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"
|
||||
:distributionValue="RankingHasTop10[2].quantity || ''"
|
||||
style="width: 38%"
|
||||
@click="viewUserInfo(RankingHasTop10[2].userId)"
|
||||
/>
|
||||
<TopUser
|
||||
ranking="4"
|
||||
:BorderImgUrl="imageUrl('top4')"
|
||||
:avatarUrl="RankingHasTop10[3].avatar"
|
||||
:name="RankingHasTop10[3].nickname"
|
||||
:distributionValue="RankingHasTop10[3].quantity || ''"
|
||||
style="width: 38%"
|
||||
@click="viewUserInfo(RankingHasTop10[3].userId)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</itemCenter>
|
||||
<div v-show="rankingShow">
|
||||
<!-- 切换按钮 -->
|
||||
<div style="display: flex; justify-content: space-around; margin-top: 2vw">
|
||||
<!-- 周榜模块按钮 -->
|
||||
<div style="width: 40%; position: relative" @click="changeRanking('week')">
|
||||
<img
|
||||
v-smart-img
|
||||
:src="imageUrl('rankWeeklyBt')"
|
||||
alt=""
|
||||
:class="{
|
||||
'grayscale-container': !weekShow,
|
||||
}"
|
||||
style="display: block; width: 100%"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 第5-10名 -->
|
||||
<itemCenter
|
||||
style="min-height: 90.13vw"
|
||||
: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"
|
||||
:distributionValue="topUser.quantity || ''"
|
||||
style="width: 30%"
|
||||
@click="viewUserInfo(topUser.userId)"
|
||||
/>
|
||||
</div>
|
||||
<!-- 日榜模块按钮 -->
|
||||
<div style="width: 40%; position: relative" @click="changeRanking('daily')">
|
||||
<img
|
||||
v-smart-img
|
||||
:src="imageUrl('rankDailyBt')"
|
||||
alt=""
|
||||
:class="{
|
||||
'grayscale-container': !dailyShow,
|
||||
}"
|
||||
style="display: block; width: 100%"
|
||||
/>
|
||||
</div>
|
||||
</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"
|
||||
:distributionValue="topUser.quantity || ''"
|
||||
style="width: 30%"
|
||||
@click="viewUserInfo(topUser.userId)"
|
||||
/>
|
||||
</div>
|
||||
</itemCenter>
|
||||
|
||||
<!-- 第11名开始 -->
|
||||
<div v-if="showRanking.length > 0" style="position: relative; z-index: 2">
|
||||
<!-- 周榜 -->
|
||||
<div v-show="weekShow" style="position: relative; width: 100%; margin: 10px 0">
|
||||
<div style="position: relative; z-index: 1">
|
||||
<!-- 第2-4名 -->
|
||||
<itemCenter
|
||||
style="min-height: 26.4vw"
|
||||
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)"
|
||||
style="min-height: 132.2vw"
|
||||
:imgUrl="imageUrl(getImgName('RankingMain'))"
|
||||
:contentStyle="`padding: 25% 4% 0;flex-direction: column;`"
|
||||
>
|
||||
<!-- 基本信息 -->
|
||||
<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>
|
||||
<!-- 第2名 -->
|
||||
<div style="display: flex; justify-content: center">
|
||||
<TopUser
|
||||
ranking="2"
|
||||
:BorderImgUrl="imageUrl('top2')"
|
||||
:avatarUrl="RankingHasTop10[1].avatar"
|
||||
:name="RankingHasTop10[1].nickname"
|
||||
:distributionValue="RankingHasTop10[1].quantity || ''"
|
||||
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"
|
||||
:distributionValue="RankingHasTop10[2].quantity || ''"
|
||||
style="width: 38%"
|
||||
@click="viewUserInfo(RankingHasTop10[2].userId)"
|
||||
/>
|
||||
<TopUser
|
||||
ranking="4"
|
||||
:BorderImgUrl="imageUrl('top4')"
|
||||
:avatarUrl="RankingHasTop10[3].avatar"
|
||||
:name="RankingHasTop10[3].nickname"
|
||||
:distributionValue="RankingHasTop10[3].quantity || ''"
|
||||
style="width: 38%"
|
||||
@click="viewUserInfo(RankingHasTop10[3].userId)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</itemCenter>
|
||||
|
||||
<!-- 头像 -->
|
||||
<img
|
||||
:src="listItem?.avatar || ''"
|
||||
alt=""
|
||||
style="
|
||||
display: block;
|
||||
width: 13vw;
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
"
|
||||
@error="handleAvatarImageError"
|
||||
<!-- 第5-10名 -->
|
||||
<itemCenter
|
||||
style="min-height: 90.13vw"
|
||||
: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"
|
||||
:distributionValue="topUser.quantity || ''"
|
||||
style="width: 30%"
|
||||
@click="viewUserInfo(topUser.userId)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 名称、id -->
|
||||
<!-- 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"
|
||||
:distributionValue="topUser.quantity || ''"
|
||||
style="width: 30%"
|
||||
@click="viewUserInfo(topUser.userId)"
|
||||
/>
|
||||
</div>
|
||||
</itemCenter>
|
||||
|
||||
<!-- 第11名开始 -->
|
||||
<div v-if="showRanking.length > 0" style="position: relative; z-index: 2">
|
||||
<itemCenter
|
||||
style="min-height: 26.4vw"
|
||||
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;
|
||||
align-self: stretch;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
gap: 8px;
|
||||
"
|
||||
>
|
||||
<!-- 排名 -->
|
||||
<div style="color: #ffe601; font-weight: 700">
|
||||
{{ listItem?.rank }}
|
||||
</div>
|
||||
|
||||
<!-- 头像 -->
|
||||
<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="
|
||||
color: #fff;
|
||||
font-weight: 860;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
align-self: stretch;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
"
|
||||
class="UserNickname"
|
||||
>
|
||||
{{ listItem?.nickname }}
|
||||
</div>
|
||||
<div style="color: #fff; font-weight: 590" class="UserNickname">
|
||||
{{ $t('user_id_prefix') }} {{ listItem?.account }}
|
||||
<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>
|
||||
|
||||
<!-- 贡献值 -->
|
||||
<div
|
||||
style="
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
<!-- 贡献值 -->
|
||||
<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 }}
|
||||
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>
|
||||
</div>
|
||||
</itemCenter>
|
||||
</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>
|
||||
|
||||
<!-- 底框 -->
|
||||
<img
|
||||
v-smart-img
|
||||
:src="imageUrl('RankingBottomBorder')"
|
||||
alt=""
|
||||
width="100%"
|
||||
style="display: block; margin-top: -6vw; position: relative; z-index: 2"
|
||||
/>
|
||||
<!-- 日榜 -->
|
||||
<div v-show="dailyShow" style="position: relative; width: 100%; margin: 10px 0">
|
||||
<div style="position: relative; z-index: 1">
|
||||
<!-- 头部 -->
|
||||
<itemCenter
|
||||
style="min-height: 132.2vw"
|
||||
:imgUrl="imageUrl(getImgName('RankingMain'))"
|
||||
:contentStyle="`padding: 25% 0 0;flex-direction: column;`"
|
||||
>
|
||||
<!-- 前3名 -->
|
||||
<itemCenter
|
||||
style="z-index: 0"
|
||||
:imgUrl="imageUrl('top1-3FrameDaily')"
|
||||
:contentStyle="`flex-direction: column;padding: 17vw 9.5vw 7vw 10.2vw;justify-content: space-between;`"
|
||||
>
|
||||
<!-- 第1名 -->
|
||||
<div style="display: flex; justify-content: center">
|
||||
<TopUserDaily
|
||||
ranking="1"
|
||||
:avatarUrl="RankingDailyHasTop3[0].avatar"
|
||||
:name="RankingDailyHasTop3[0].nickname"
|
||||
:distributionValue="RankingDailyHasTop3[0].quantity || ''"
|
||||
style="width: 40%"
|
||||
@click="viewUserInfo(RankingDailyHasTop3[0].userId)"
|
||||
/>
|
||||
</div>
|
||||
<!-- 第2-3名 -->
|
||||
<div style="display: flex; justify-content: space-between; margin-top: -5vw">
|
||||
<TopUserDaily
|
||||
ranking="2"
|
||||
:avatarUrl="RankingDailyHasTop3[1].avatar"
|
||||
:name="RankingDailyHasTop3[1].nickname"
|
||||
:distributionValue="RankingDailyHasTop3[1].quantity || ''"
|
||||
style="width: 38%"
|
||||
@click="viewUserInfo(RankingDailyHasTop3[1].userId)"
|
||||
/>
|
||||
<TopUserDaily
|
||||
ranking="3"
|
||||
:avatarUrl="RankingDailyHasTop3[2].avatar"
|
||||
:name="RankingDailyHasTop3[2].nickname"
|
||||
:distributionValue="RankingDailyHasTop3[2].quantity || ''"
|
||||
style="width: 38%"
|
||||
@click="viewUserInfo(RankingDailyHasTop3[2].userId)"
|
||||
/>
|
||||
</div>
|
||||
</itemCenter>
|
||||
</itemCenter>
|
||||
|
||||
<!-- 第4名开始 -->
|
||||
<div
|
||||
v-if="showRankingDaily.length > 0"
|
||||
style="margin-top: -2vw; position: relative; z-index: -1"
|
||||
>
|
||||
<itemCenter
|
||||
style="min-height: 26.4vw"
|
||||
v-for="(listItem, index) in showRankingDaily"
|
||||
: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
|
||||
: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>
|
||||
</div>
|
||||
|
||||
@ -462,7 +638,38 @@
|
||||
v-show="rewardsShow"
|
||||
style="display: flex; flex-direction: column; align-items: center"
|
||||
>
|
||||
<!-- 切换按钮 -->
|
||||
<div style="display: flex; justify-content: space-around; margin-top: 2vw">
|
||||
<!-- 周榜奖励模块按钮 -->
|
||||
<div style="width: 40%; position: relative" @click="changeRanking('week')">
|
||||
<img
|
||||
v-smart-img
|
||||
:src="imageUrl('rewardWeeklyBt')"
|
||||
alt=""
|
||||
:class="{
|
||||
'grayscale-container': !weekShow,
|
||||
}"
|
||||
style="display: block; width: 100%"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 日榜奖励模块按钮 -->
|
||||
<div style="width: 40%; position: relative" @click="changeRanking('daily')">
|
||||
<img
|
||||
v-smart-img
|
||||
:src="imageUrl('rewardDailyBt')"
|
||||
alt=""
|
||||
:class="{
|
||||
'grayscale-container': !dailyShow,
|
||||
}"
|
||||
style="display: block; width: 100%"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 周榜奖励模块 -->
|
||||
<div
|
||||
v-show="weekShow"
|
||||
v-for="(rewardsTop, top) in rewardsList"
|
||||
:key="top"
|
||||
style="position: relative; width: 100%; margin: 10px 0"
|
||||
@ -609,6 +816,14 @@
|
||||
</div>
|
||||
</itemCenter>
|
||||
</div>
|
||||
|
||||
<!-- 日榜奖励模块 -->
|
||||
<img
|
||||
v-for="(value, index) in 3"
|
||||
:src="imageUrl(`top${index + 1}RewardDaily`)"
|
||||
alt=""
|
||||
style="width: 100%; margin: 10px 0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -766,6 +981,7 @@ import {
|
||||
import BackgroundLayer from '@/components/BackgroundLayer.vue'
|
||||
import itemCenter from '@/components/itemCenter.vue'
|
||||
import TopUser from './components/topUser.vue'
|
||||
import TopUserDaily from './components/topUserDaily.vue'
|
||||
import maskLayer from '@/components/MaskLayer.vue'
|
||||
|
||||
const gamesKingStore = useGamesKingStore()
|
||||
@ -873,10 +1089,33 @@ const changeModule = (module) => {
|
||||
const historyTopList = ref([]) // 历史榜首
|
||||
const historyTopIndex = ref(0)
|
||||
|
||||
const Ranking = ref([]) // 排行榜
|
||||
const myRanking = ref({}) // 我的排名
|
||||
const weekShow = ref(true) // 周榜展示
|
||||
const dailyShow = ref(false) // 日榜展示
|
||||
const RankingWeek = ref([]) // 周榜
|
||||
const RankingDaily = ref([]) // 日榜
|
||||
const myWeekRanking = ref({}) // 我的周排名
|
||||
const myDailyRanking = ref({}) // 我的日排名
|
||||
const rewardsList = ref([]) // 奖励列表
|
||||
// const specialReward = ref({}) // 奖励列表
|
||||
const myRanking = computed(() => {
|
||||
if (weekShow.value) {
|
||||
return myWeekRanking.value
|
||||
}
|
||||
return myDailyRanking.value
|
||||
}) // 我的排名
|
||||
|
||||
// 榜单切换
|
||||
const changeRanking = (type) => {
|
||||
switch (type) {
|
||||
case 'week':
|
||||
weekShow.value = true
|
||||
dailyShow.value = false
|
||||
break
|
||||
case 'daily':
|
||||
weekShow.value = false
|
||||
dailyShow.value = true
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
const topImg = ref([
|
||||
imageUrl('top1RewardBg'),
|
||||
@ -885,11 +1124,11 @@ const topImg = ref([
|
||||
imageUrl('top8_10RewardBg'),
|
||||
]) // top奖励背景
|
||||
|
||||
// 处理排行榜小于10人时的情况
|
||||
// 处理周榜小于10人时的情况
|
||||
const RankingHasTop10 = computed(() => {
|
||||
let RankingShow = [...Ranking.value]
|
||||
if (Ranking.value.length < 10) {
|
||||
let addNullUser = Array.from({ length: 10 - Ranking.value.length }, () => ({
|
||||
let RankingShow = [...RankingWeek.value]
|
||||
if (RankingWeek.value.length < 10) {
|
||||
let addNullUser = Array.from({ length: 10 - RankingWeek.value.length }, () => ({
|
||||
avatar: '',
|
||||
nickname: '',
|
||||
quantity: '',
|
||||
@ -899,9 +1138,29 @@ const RankingHasTop10 = computed(() => {
|
||||
return RankingShow
|
||||
})
|
||||
|
||||
// 展示用的榜单
|
||||
// 展示用的周榜
|
||||
const showRanking = computed(() => {
|
||||
return Ranking.value.filter((_, index) => index >= 10)
|
||||
return RankingWeek.value.filter((_, index) => index >= 10)
|
||||
// return []
|
||||
})
|
||||
|
||||
// 处理日榜小于3人时的情况
|
||||
const RankingDailyHasTop3 = computed(() => {
|
||||
let RankingShow = [...RankingDaily.value]
|
||||
if (RankingDaily.value.length < 3) {
|
||||
let addNullUser = Array.from({ length: 3 - RankingDaily.value.length }, () => ({
|
||||
avatar: '',
|
||||
nickname: '',
|
||||
quantity: '',
|
||||
}))
|
||||
RankingShow.push(...addNullUser)
|
||||
}
|
||||
return RankingShow
|
||||
})
|
||||
|
||||
// 展示用的日榜
|
||||
const showRankingDaily = computed(() => {
|
||||
return RankingDaily.value.filter((_, index) => index >= 3)
|
||||
// return []
|
||||
})
|
||||
|
||||
@ -986,16 +1245,30 @@ const getAllTopOne = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
// 获取排行榜和我的排名
|
||||
const getListAndMy = async () => {
|
||||
// 获取周排行榜和我的排名
|
||||
const getWeekListAndMy = async () => {
|
||||
let data = {
|
||||
activityType: 10,
|
||||
}
|
||||
const resMyWeekStarRanking = await getRankingListAndMyRanking(data)
|
||||
console.log('resMyWeekStarRanking:', resMyWeekStarRanking)
|
||||
if (resMyWeekStarRanking.status && resMyWeekStarRanking.body) {
|
||||
myRanking.value = resMyWeekStarRanking.body.currentUserRank
|
||||
Ranking.value = resMyWeekStarRanking.body.rankingList
|
||||
myWeekRanking.value = resMyWeekStarRanking.body.currentUserRank
|
||||
RankingWeek.value = resMyWeekStarRanking.body.rankingList
|
||||
}
|
||||
}
|
||||
|
||||
// 获取日排行榜和我的排名
|
||||
const getDailyListAndMy = async () => {
|
||||
let data = {
|
||||
activityType: 15,
|
||||
cycleType: 1,
|
||||
}
|
||||
const resDailyListAndMy = await getRankingListAndMyRanking(data)
|
||||
console.log('resDailyListAndMy:', resDailyListAndMy)
|
||||
if (resDailyListAndMy.status && resDailyListAndMy.body) {
|
||||
myDailyRanking.value = resDailyListAndMy.body.currentUserRank
|
||||
RankingDaily.value = resDailyListAndMy.body.rankingList
|
||||
}
|
||||
}
|
||||
|
||||
@ -1007,25 +1280,13 @@ const getRewardsAndGifts = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
// 获取指定类型活动资源
|
||||
const getActivityResource = async () => {
|
||||
let data = {
|
||||
sysOrigin: 'LIKEI',
|
||||
activityType: 'GAME_KING',
|
||||
}
|
||||
const resActivityResource = await activityResource(data)
|
||||
if (resActivityResource.status && resActivityResource.body) {
|
||||
specialReward.value = resActivityResource.body?.[0]?.propsGroup?.activityRewardProps?.[0]
|
||||
}
|
||||
}
|
||||
|
||||
// 刷新页面数据
|
||||
const initData = async () => {
|
||||
await Promise.all([
|
||||
getAllTopOne(), // 获取历史榜首
|
||||
getListAndMy(), // 获取排行榜和我的排名
|
||||
getWeekListAndMy(), // 获取周榜和我的排名
|
||||
getDailyListAndMy(), // 获取日榜和我的排名
|
||||
getRewardsAndGifts(), // 获取本周的礼物和奖励列表
|
||||
// getActivityResource(), // 获取指定类型活动资源
|
||||
])
|
||||
}
|
||||
|
||||
@ -1038,17 +1299,21 @@ const preloadCriticalImages = async () => {
|
||||
imageUrl(getImgName('dailyPopUpNew')),
|
||||
imageUrl('helpBt'),
|
||||
imageUrl(getImgName('helpInfo')),
|
||||
imageUrl(getImgName('historyBt')),
|
||||
imageUrl(getImgName('historyBtActive')),
|
||||
imageUrl('myRankingBg'),
|
||||
imageUrl(getImgName('rankingBt')),
|
||||
imageUrl(getImgName('rankingBtActive')),
|
||||
imageUrl(getImgName('rewardBtActive')),
|
||||
imageUrl(getImgName('rewardsBt')),
|
||||
imageUrl('rankDailyBt'),
|
||||
imageUrl('rankWeeklyBt'),
|
||||
imageUrl('RankingBottomBorder'),
|
||||
imageUrl('RankingCenterBg'),
|
||||
imageUrl('RankingItem'),
|
||||
imageUrl(getImgName('RankingMain')),
|
||||
imageUrl('rewardDailyBt'),
|
||||
imageUrl('rewardWeeklyBt'),
|
||||
imageUrl('top1RewardDaily'),
|
||||
imageUrl('top2RewardDaily'),
|
||||
imageUrl('top3RewardDaily'),
|
||||
imageUrl('timeBg'),
|
||||
imageUrl('topBackBt'),
|
||||
imageUrl('topNextBt'),
|
||||
@ -1058,6 +1323,7 @@ const preloadCriticalImages = async () => {
|
||||
imageUrl('top4'),
|
||||
imageUrl('top5_7'),
|
||||
imageUrl('top8_10'),
|
||||
imageUrl('top1-3FrameDaily'),
|
||||
]
|
||||
|
||||
await preloadImages(criticalImages)
|
||||
@ -1147,6 +1413,10 @@ onUnmounted(() => {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.grayscale-container {
|
||||
filter: grayscale(100%) brightness(100%);
|
||||
}
|
||||
|
||||
.btTitle {
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user