562 lines
16 KiB
Vue
562 lines
16 KiB
Vue
<template>
|
||
<div class="fullPage" :style="{ backgroundColor, backgroundImage }">
|
||
<!-- 哨兵元素 -->
|
||
<div ref="sentinel"></div>
|
||
|
||
<!-- 粘性布局贴顶部 -->
|
||
<div
|
||
ref="stickyHeader"
|
||
style="
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 999;
|
||
padding-bottom: 10px;
|
||
border-radius: 0 0 12px 12px;
|
||
transition: all 0.3s;
|
||
"
|
||
>
|
||
<!-- 状态栏占位区域（仅在APP中显示） -->
|
||
<div v-if="isInAppEnvironment" style="height: 30px"></div>
|
||
|
||
<!-- 顶部导航栏 -->
|
||
<div style="padding: 4px 8%">
|
||
<div style="display: flex; justify-content: space-around; position: relative">
|
||
<div
|
||
class="tab"
|
||
@click="changeType('Wealth')"
|
||
style=""
|
||
:style="{ color: rankingType == 'Wealth' ? '#FFB760' : '#fff' }"
|
||
>
|
||
Wealth
|
||
</div>
|
||
<div
|
||
class="tab"
|
||
@click="changeType('Charm')"
|
||
style=""
|
||
:style="{ color: rankingType == 'Charm' ? '#60FF83' : '#fff' }"
|
||
>
|
||
Charm
|
||
</div>
|
||
<div
|
||
class="tab"
|
||
@click="changeType('Room')"
|
||
style=""
|
||
:style="{ color: rankingType == 'Room' ? '#9B60FF' : '#fff' }"
|
||
>
|
||
Room
|
||
</div>
|
||
|
||
<!-- 推出键 -->
|
||
<img
|
||
src="../../assets/icon/arrowBack.png"
|
||
alt=""
|
||
style="position: absolute; left: 0; top: 50%; transform: translateY(-50%)"
|
||
width="6%"
|
||
@click="closePage"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 排行榜时间选择 -->
|
||
<div
|
||
style="
|
||
margin: 10px 4% 0;
|
||
padding: 4px 16px;
|
||
border-radius: 32px;
|
||
backdrop-filter: blur(32px);
|
||
|
||
display: flex;
|
||
justify-content: space-between;
|
||
"
|
||
:style="{ border, background }"
|
||
>
|
||
<div
|
||
class="tag"
|
||
:class="{ tagActive: selectedTimeTab == 'Hourly' }"
|
||
@click="changeDateType('Hourly')"
|
||
>
|
||
Hourly
|
||
</div>
|
||
<div
|
||
class="tag"
|
||
:class="{ tagActive: selectedTimeTab == 'Daily' }"
|
||
@click="changeDateType('Daily')"
|
||
>
|
||
Daily
|
||
</div>
|
||
<div
|
||
class="tag"
|
||
:class="{ tagActive: selectedTimeTab == 'Weekly' }"
|
||
@click="changeDateType('Weekly')"
|
||
>
|
||
Weekly
|
||
</div>
|
||
<div
|
||
class="tag"
|
||
:class="{ tagActive: selectedTimeTab == 'Monthly' }"
|
||
@click="changeDateType('Monthly')"
|
||
>
|
||
Monthly
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 排行榜模块 -->
|
||
<div style="padding: 10px 0">
|
||
<!-- 前3名 -->
|
||
<div style="margin: 3% 10px 0">
|
||
<!-- 第一 -->
|
||
<div style="display: flex; justify-content: center">
|
||
<TopUser
|
||
:isRoom="rankingType === 'Room'"
|
||
:isTopOne="true"
|
||
:BorderImgUrl="topBorderBg"
|
||
:avatarUrl="RankingTop3[0].avatar || ''"
|
||
:name="RankingTop3[0].nickname || ''"
|
||
:distributionValue="RankingTop3[0].quantityFormat || ''"
|
||
style="width: 40%"
|
||
/>
|
||
</div>
|
||
<!-- 第二三 -->
|
||
<div style="display: flex; justify-content: space-between; margin-top: -20%">
|
||
<TopUser
|
||
:isRoom="rankingType === 'Room'"
|
||
:BorderImgUrl="top2BorderBg"
|
||
:avatarUrl="RankingTop3[1].avatar || ''"
|
||
:name="RankingTop3[1].nickname || ''"
|
||
:distributionValue="RankingTop3[1].quantityFormat || ''"
|
||
style="width: 30%"
|
||
/>
|
||
<TopUser
|
||
:isRoom="rankingType === 'Room'"
|
||
:BorderImgUrl="top3BorderBg"
|
||
:avatarUrl="RankingTop3[2].avatar || ''"
|
||
:name="RankingTop3[2].nickname || ''"
|
||
:distributionValue="RankingTop3[2].quantityFormat || ''"
|
||
style="width: 30%"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 第四名开始 -->
|
||
<div style="margin: 3% 10px 0">
|
||
<div
|
||
v-for="(userInfo, index) in RankingFromTop4"
|
||
:key="userInfo.id"
|
||
style="
|
||
border-radius: 12px;
|
||
backdrop-filter: blur(32px);
|
||
margin: 5px 0;
|
||
padding: 12px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
"
|
||
:style="{ background: rankItemBackground, border: '1px ' + rankItemBorder }"
|
||
>
|
||
<div style="display: flex; align-items: center; width: 70%">
|
||
<div style="font-weight: 700">{{ index + 4 }}</div>
|
||
<img
|
||
:src="userInfo.avatar || ''"
|
||
alt=""
|
||
width="20%"
|
||
style="
|
||
display: block;
|
||
border-radius: 50%;
|
||
object-fit: cover;
|
||
aspect-ratio: 1/1;
|
||
margin: 0 4px;
|
||
"
|
||
:style="{ borderRadius: rankingType === 'Room' ? '0' : '50%' }"
|
||
@error="defaultAvatarUrl"
|
||
/>
|
||
<div
|
||
style="
|
||
font-weight: 700;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
"
|
||
>
|
||
{{ userInfo.nickname }}
|
||
</div>
|
||
</div>
|
||
<div style="display: flex; align-items: center; width: 30%">
|
||
<img
|
||
src="/src/assets/icon/coin.png"
|
||
alt=""
|
||
width="20%"
|
||
style="display: block; aspect-ratio: 1/1"
|
||
/>
|
||
<div
|
||
style="
|
||
font-weight: 500;
|
||
color: rgba(248, 182, 45, 1);
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
"
|
||
>
|
||
{{ userInfo.quantityFormat }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 我的排名 -->
|
||
<div
|
||
style="position: sticky; bottom: 0; z-index: 999; padding: 0 1px; width: 100%"
|
||
:style="{ backgroundColor }"
|
||
>
|
||
<div
|
||
style="
|
||
border-radius: 12px 12px 0 0;
|
||
border-top: 2px solid #ffa166;
|
||
border-right: 1px solid #ffa166;
|
||
border-left: 1px solid #ffa166;
|
||
backdrop-filter: blur(32px);
|
||
padding: 12px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
"
|
||
:style="{
|
||
background: rankItemBackground,
|
||
borderTop: '2px ' + rankItemBorder,
|
||
borderLeft: '1px ' + rankItemBorder,
|
||
borderRight: '1px ' + rankItemBorder,
|
||
}"
|
||
>
|
||
<div style="display: flex; align-items: center; width: 70%">
|
||
<div style="font-weight: 700">{{ myRanking.rank || 0 }}</div>
|
||
<img
|
||
:src="myRanking.avatar || ''"
|
||
alt=""
|
||
width="20%"
|
||
style="display: block; aspect-ratio: 1/1; margin: 0 4px"
|
||
:style="{ borderRadius: rankingType === 'Room' ? '0' : '50%' }"
|
||
@error="defaultAvatarUrl"
|
||
/>
|
||
<div
|
||
style="font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis"
|
||
>
|
||
{{ myRanking.nickname || '' }}
|
||
</div>
|
||
</div>
|
||
<div style="display: flex; align-items: center; width: 30%">
|
||
<img
|
||
src="/src/assets/icon/coin.png"
|
||
alt=""
|
||
width="20%"
|
||
style="display: block; aspect-ratio: 1/1"
|
||
/>
|
||
<div
|
||
style="
|
||
font-weight: 500;
|
||
color: rgba(248, 182, 45, 1);
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
"
|
||
>
|
||
{{ myRanking.quantityFormat || 0 }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { isInApp, closePage } from '@/utils/appBridge.js'
|
||
import { computed, onMounted, ref, watch, watchEffect } from 'vue'
|
||
import TopUser from '@/components/Ranking/topUser.vue'
|
||
import { getWealthRanking, getCharmRanking, getRoomRanking, getMyRanking } from '@/api/ranking'
|
||
import { useRoute } from 'vue-router'
|
||
const route = useRoute()
|
||
|
||
//vite动态批量导入图片
|
||
const imageModules = import.meta.glob('@/assets/images/Ranking/*.{png,jpg,svg}', { eager: true })
|
||
// 生成文件名映射对象（自动移除路径和扩展名）
|
||
const images = Object.fromEntries(
|
||
Object.entries(imageModules).map(([path, module]) => {
|
||
const fileName = path.split('/').pop().split('.')[0]
|
||
return [fileName, module.default]
|
||
})
|
||
)
|
||
|
||
const isInAppEnvironment = ref(false) // 检测是否在APP环境中
|
||
const rankingType = ref(route.query.first || 'Wealth') //榜单类型
|
||
const selectedTimeTab = ref('Hourly') //时间标签
|
||
|
||
// 接口参数
|
||
const params_type = ref('GIFTS_SEND') //排行榜类型
|
||
const params_dateType = ref('HOUR') //时间类型
|
||
|
||
const totalRanking = ref({})
|
||
const showRanking = ref([])
|
||
const myRanking = ref({}) //我的排名
|
||
|
||
const updateTimeRanking = () => {
|
||
console.log('updateTimeRanking()')
|
||
|
||
if (selectedTimeTab.value == 'Hourly' && totalRanking.value.hourly) {
|
||
showRanking.value = totalRanking.value.hourly
|
||
console.log('showRanking.value:', showRanking.value)
|
||
} else if (selectedTimeTab.value == 'Daily' && totalRanking.value.daily) {
|
||
showRanking.value = totalRanking.value.daily
|
||
} else if (selectedTimeTab.value == 'Weekly' && totalRanking.value.weekly) {
|
||
showRanking.value = totalRanking.value.weekly
|
||
} else if (selectedTimeTab.value == 'Monthly' && totalRanking.value.monthly) {
|
||
showRanking.value = totalRanking.value.monthly
|
||
}
|
||
}
|
||
|
||
// 改变排行榜类型
|
||
const changeType = (type) => {
|
||
if (rankingType.value != type) {
|
||
console.log('改变rankingType')
|
||
rankingType.value = type
|
||
selectedTimeTab.value = 'Hourly'
|
||
params_dateType.value = 'HOUR'
|
||
if (type == 'Wealth') {
|
||
params_type.value = 'GIFTS_SEND'
|
||
} else if (type == 'Charm') {
|
||
params_type.value = 'GIFTS_RECEIVED'
|
||
} else if (type == 'Room') {
|
||
params_type.value = 'ROOM_GIFTS'
|
||
}
|
||
totalRanking.value = {}
|
||
showRanking.value = []
|
||
myRanking.value = {}
|
||
getRanking() // 获取榜单
|
||
getMyRankingInfo() //获取我的排名
|
||
}
|
||
}
|
||
|
||
// 改变时间类型
|
||
const changeDateType = (dateType) => {
|
||
if (selectedTimeTab.value != dateType) {
|
||
console.log('改变rankingType')
|
||
selectedTimeTab.value = dateType
|
||
if (dateType == 'Hourly') {
|
||
params_dateType.value = 'HOUR'
|
||
} else if (dateType == 'Daily') {
|
||
params_dateType.value = 'DAY'
|
||
} else if (dateType == 'Weekly') {
|
||
params_dateType.value = 'WEEK'
|
||
} else if (dateType == 'Monthly') {
|
||
params_dateType.value = 'MONTH'
|
||
}
|
||
showRanking.value = []
|
||
myRanking.value = {}
|
||
updateTimeRanking() //刷新展示榜单
|
||
getMyRankingInfo() //获取我的排名
|
||
}
|
||
}
|
||
|
||
// 前三名榜单
|
||
const RankingTop3 = computed(() => {
|
||
console.log('刷新RankingTop3')
|
||
|
||
let RankingShow = [...showRanking.value]
|
||
if (showRanking.value.length < 3) {
|
||
let addNullUser = Array.from({ length: 3 - showRanking.value.length }, () => ({
|
||
avatar: '',
|
||
nickname: '',
|
||
quantityFormat: '',
|
||
}))
|
||
RankingShow.push(...addNullUser)
|
||
}
|
||
return RankingShow
|
||
})
|
||
|
||
// 从第四名开始榜单
|
||
const RankingFromTop4 = computed(() => {
|
||
return showRanking.value.filter((_, index) => index >= 3)
|
||
})
|
||
|
||
// 动态样式
|
||
const backgroundColor = ref('') //页面样式
|
||
const backgroundImage = ref('') //页面样式
|
||
const border = ref('') //时间标签样式
|
||
const background = ref('') //时间标签样式
|
||
const rankItemBackground = ref('') //排名项背景
|
||
const rankItemBorder = ref('') //排名项边框
|
||
|
||
const topBorderBg = ref('') //top1头像框
|
||
const top2BorderBg = ref('') //top2头像框
|
||
const top3BorderBg = ref('') //top3头像框
|
||
|
||
const sentinel = ref(null)
|
||
const stickyHeader = ref(null)
|
||
|
||
watchEffect(() => {
|
||
if (rankingType.value == 'Wealth') {
|
||
backgroundColor.value = '#230F0A'
|
||
backgroundImage.value = `url(${images.bgWealth})`
|
||
topBorderBg.value = images['top1-wealth']
|
||
top2BorderBg.value = images['top2']
|
||
top3BorderBg.value = images['top3']
|
||
border.value = '1px solid rgba(221, 114, 0, 0.39)'
|
||
background.value = 'rgba(252, 194, 147, 0.20)'
|
||
rankItemBackground.value =
|
||
'linear-gradient(97deg, rgba(50, 34, 21, 0.60) 12.03%, rgba(99, 52, 33, 0.60) 100.37%)'
|
||
rankItemBorder.value = 'solid #FFA166'
|
||
}
|
||
if (rankingType.value == 'Charm') {
|
||
backgroundColor.value = '#112C1E'
|
||
backgroundImage.value = `url(${images.bgCharm})`
|
||
topBorderBg.value = images['top1-charm']
|
||
top2BorderBg.value = images['top2']
|
||
top3BorderBg.value = images['top3']
|
||
border.value = '1px solid rgba(0, 221, 74, 0.39)'
|
||
background.value = 'rgba(147, 252, 166, 0.20)'
|
||
rankItemBackground.value =
|
||
'linear-gradient(97deg, rgba(21, 50, 22, 0.60) 12.03%, rgba(33, 99, 40, 0.60) 100.37%)'
|
||
rankItemBorder.value = 'solid #66FF82'
|
||
}
|
||
if (rankingType.value == 'Room') {
|
||
backgroundColor.value = '#211031'
|
||
backgroundImage.value = `url(${images.bgRoom})`
|
||
topBorderBg.value = images['top1-room']
|
||
top2BorderBg.value = images['top2-room']
|
||
top3BorderBg.value = images['top3-room']
|
||
border.value = '1px solid rgba(155, 0, 221, 0.39)'
|
||
background.value = 'rgba(219, 147, 252, 0.20)'
|
||
rankItemBackground.value =
|
||
'linear-gradient(97deg, rgba(33, 21, 50, 0.60) 12.03%, rgba(60, 33, 99, 0.60) 100.37%)'
|
||
rankItemBorder.value = 'solid #A366FF'
|
||
}
|
||
})
|
||
|
||
const defaultAvatarUrl = (e) => {
|
||
console.log('头像资源出错')
|
||
e.target.onerror = null //防止循环
|
||
e.target.src = new URL('/src/assets/images/WeeklyStar/defaultAvatar.png', import.meta.url).href
|
||
}
|
||
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach((entry) => {
|
||
// 哨兵元素离开视口
|
||
if (!entry.isIntersecting) {
|
||
console.log('哨兵元素离开视口')
|
||
if (stickyHeader.value) {
|
||
stickyHeader.value.classList.add('stuck')
|
||
console.log('添加stuck类')
|
||
} else {
|
||
console.log('元素未找到！')
|
||
}
|
||
} else {
|
||
stickyHeader.value.classList.remove('stuck')
|
||
}
|
||
})
|
||
})
|
||
|
||
// 获取榜单
|
||
const getRanking = async () => {
|
||
console.log('获取榜单')
|
||
|
||
let resRanking = {}
|
||
if (rankingType.value == 'Wealth') {
|
||
resRanking = await getWealthRanking()
|
||
} else if (rankingType.value == 'Charm') {
|
||
resRanking = await getCharmRanking()
|
||
} else if (rankingType.value == 'Room') {
|
||
resRanking = await getRoomRanking()
|
||
}
|
||
if (resRanking.status && resRanking.body) {
|
||
totalRanking.value = resRanking.body
|
||
updateTimeRanking()
|
||
}
|
||
}
|
||
|
||
//获取我的排名
|
||
const getMyRankingInfo = async () => {
|
||
console.log('获取我的排名')
|
||
const resMyRanking = await getMyRanking(params_type.value, params_dateType.value)
|
||
if (resMyRanking.status && resMyRanking.body) {
|
||
myRanking.value = resMyRanking.body
|
||
} else {
|
||
myRanking.value = {}
|
||
}
|
||
}
|
||
|
||
onMounted(() => {
|
||
isInAppEnvironment.value = isInApp()
|
||
|
||
observer.observe(sentinel.value)
|
||
|
||
getRanking() // 获取榜单
|
||
getMyRankingInfo() //获取我的排名
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
* {
|
||
color: #fff;
|
||
font-family: 'SF Pro';
|
||
}
|
||
|
||
.fullPage {
|
||
width: 100vw;
|
||
min-height: 100vh;
|
||
background-size: 100% auto;
|
||
background-repeat: no-repeat;
|
||
position: relative;
|
||
}
|
||
|
||
.tab {
|
||
font-weight: 700;
|
||
font-size: 1em;
|
||
}
|
||
|
||
.tag {
|
||
font-weight: 510;
|
||
padding: 4px 4%;
|
||
}
|
||
|
||
.tagActive {
|
||
color: black;
|
||
border-radius: 32px;
|
||
border: 1px solid #f5f54c;
|
||
box-sizing: border-box;
|
||
background: #fcfc93;
|
||
box-shadow: 0 0 8.6px 3px #fc8b02 inset;
|
||
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.stuck {
|
||
background-color: rgba(255, 255, 255, 0.1);
|
||
backdrop-filter: blur(32px);
|
||
}
|
||
|
||
@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>
|