feat(新页面): 排行榜
This commit is contained in:
hzj
parent
9e82f2c93d
commit
f2c71c1597
37
src/api/ranking.js
Normal file
37
src/api/ranking.js
Normal file
@ -0,0 +1,37 @@
|
||||
import { get, post } from '../utils/http.js'
|
||||
|
||||
// 获取财富榜
|
||||
export const getWealthRanking = async () => {
|
||||
try {
|
||||
const response = await get(`/activity/leaderboard/gifts-send`)
|
||||
return response
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch get wealth ranking:', error)
|
||||
console.error('error:' + error.response.errorMsg)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
// 获取魅力榜
|
||||
export const getCharmRanking = async () => {
|
||||
try {
|
||||
const response = await get(`/activity/leaderboard/gifts-received`)
|
||||
return response
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch get charm ranking:', error)
|
||||
console.error('error:' + error.response.errorMsg)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
// 获取房间榜
|
||||
export const getRoomRanking = async () => {
|
||||
try {
|
||||
const response = await get(`/activity/leaderboard/room-gifts`)
|
||||
return response
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch get room ranking:', error)
|
||||
console.error('error:' + error.response.errorMsg)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="fullPage" :style="{ backgroundColor, backgroundImage }">
|
||||
<div ref="sentinel"></div>
|
||||
<!-- 哨兵元素 -->
|
||||
<div ref="sentinel"></div>
|
||||
|
||||
<!-- 粘性布局贴顶部 -->
|
||||
<div
|
||||
@ -102,7 +102,7 @@
|
||||
</div>
|
||||
|
||||
<!-- 排行榜模块 -->
|
||||
<div>
|
||||
<div style="padding: 10px 0">
|
||||
<!-- 前3名 -->
|
||||
<div style="margin: 3% 10px 0">
|
||||
<!-- 第一 -->
|
||||
@ -111,9 +111,9 @@
|
||||
:isRoom="rankingType === 'Room'"
|
||||
:isTopOne="true"
|
||||
:BorderImgUrl="topBorderBg"
|
||||
avatarUrl=""
|
||||
name="aaaa"
|
||||
distributionValue="11111"
|
||||
:avatarUrl="RankingTop3[0].avatar || ''"
|
||||
:name="RankingTop3[0].nickname || ''"
|
||||
:distributionValue="RankingTop3[0].quantityFormat || ''"
|
||||
style="width: 40%"
|
||||
/>
|
||||
</div>
|
||||
@ -122,17 +122,17 @@
|
||||
<TopUser
|
||||
:isRoom="rankingType === 'Room'"
|
||||
:BorderImgUrl="top2BorderBg"
|
||||
avatarUrl=""
|
||||
name="aaaa"
|
||||
distributionValue="11111"
|
||||
:avatarUrl="RankingTop3[1].avatar || ''"
|
||||
:name="RankingTop3[1].nickname || ''"
|
||||
:distributionValue="RankingTop3[1].quantityFormat || ''"
|
||||
style="width: 30%"
|
||||
/>
|
||||
<TopUser
|
||||
:isRoom="rankingType === 'Room'"
|
||||
:BorderImgUrl="top3BorderBg"
|
||||
avatarUrl=""
|
||||
name="aaaa"
|
||||
distributionValue="11111"
|
||||
:avatarUrl="RankingTop3[2].avatar || ''"
|
||||
:name="RankingTop3[2].nickname || ''"
|
||||
:distributionValue="RankingTop3[2].quantityFormat || ''"
|
||||
style="width: 30%"
|
||||
/>
|
||||
</div>
|
||||
@ -141,7 +141,8 @@
|
||||
<!-- 第四名开始 -->
|
||||
<div style="margin: 3% 10px 0">
|
||||
<div
|
||||
v-for="value in 9"
|
||||
v-for="(userInfo, index) in RankingFromTop4"
|
||||
:key="userInfo.id"
|
||||
style="
|
||||
border-radius: 12px;
|
||||
backdrop-filter: blur(32px);
|
||||
@ -154,12 +155,18 @@
|
||||
:style="{ background: rankItemBackground, border: '1px ' + rankItemBorder }"
|
||||
>
|
||||
<div style="display: flex; align-items: center; width: 70%">
|
||||
<div style="font-weight: 700">999</div>
|
||||
<div style="font-weight: 700">{{ index + 4 }}</div>
|
||||
<img
|
||||
src=""
|
||||
:src="userInfo.avatar"
|
||||
alt=""
|
||||
width="20%"
|
||||
style="display: block; aspect-ratio: 1/1; margin: 0 4px"
|
||||
style="
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
aspect-ratio: 1/1;
|
||||
margin: 0 4px;
|
||||
"
|
||||
:style="{ borderRadius: rankingType === 'Room' ? '0' : '50%' }"
|
||||
@error="defaultAvatarUrl"
|
||||
/>
|
||||
@ -171,7 +178,7 @@
|
||||
text-overflow: ellipsis;
|
||||
"
|
||||
>
|
||||
aaaaaaaaaaaa
|
||||
{{ userInfo.nickname }}
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; width: 30%">
|
||||
@ -190,67 +197,70 @@
|
||||
text-overflow: ellipsis;
|
||||
"
|
||||
>
|
||||
123456789
|
||||
{{ userInfo.quantityFormat }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 我的排名 -->
|
||||
<div style="position: sticky; bottom: 0; z-index: 999; padding: 0 1px; width: 100%">
|
||||
<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">999</div>
|
||||
<img
|
||||
src=""
|
||||
alt=""
|
||||
width="20%"
|
||||
style="display: block; aspect-ratio: 1/1; margin: 0 4px"
|
||||
@error="defaultAvatarUrl"
|
||||
/>
|
||||
<div
|
||||
style="font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis"
|
||||
>
|
||||
aaaaaaaaaaaa
|
||||
</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">999</div>
|
||||
<img
|
||||
src=""
|
||||
alt=""
|
||||
width="20%"
|
||||
style="display: block; aspect-ratio: 1/1; margin: 0 4px"
|
||||
@error="defaultAvatarUrl"
|
||||
/>
|
||||
<div
|
||||
style="font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis"
|
||||
>
|
||||
aaaaaaaaaaaa
|
||||
</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;
|
||||
"
|
||||
>
|
||||
123456789
|
||||
</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;
|
||||
"
|
||||
>
|
||||
123456789
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -261,6 +271,7 @@
|
||||
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 } from '@/api/ranking'
|
||||
|
||||
//vite动态批量导入图片
|
||||
const imageModules = import.meta.glob('@/assets/images/Ranking/*.{png,jpg,svg}', { eager: true })
|
||||
@ -276,6 +287,65 @@ const isInAppEnvironment = ref(false) // 检测是否在APP环境中
|
||||
const rankingType = ref('Wealth') //榜单类型
|
||||
const selectedTimeTab = ref('Hourly') //时间标签
|
||||
|
||||
const totalRanking = ref({})
|
||||
const showRanking = 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
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => rankingType.value,
|
||||
() => {
|
||||
console.log('监听到rankingType.value变化')
|
||||
totalRanking.value = {}
|
||||
showRanking.value = []
|
||||
// 获取榜单
|
||||
getRanking()
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => selectedTimeTab.value,
|
||||
() => {
|
||||
console.log('监听到selectedTimeTab.value变化')
|
||||
showRanking.value = []
|
||||
updateTimeRanking() //刷新展示榜单
|
||||
}
|
||||
)
|
||||
|
||||
// 前三名榜单
|
||||
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('') //页面
|
||||
@ -351,10 +421,30 @@ const observer = new IntersectionObserver((entries) => {
|
||||
})
|
||||
})
|
||||
|
||||
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()
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
isInAppEnvironment.value = isInApp()
|
||||
|
||||
observer.observe(sentinel.value)
|
||||
|
||||
// 获取榜单
|
||||
getRanking()
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user