feat(排行榜): 对接我的排名接口
This commit is contained in:
hzj
parent
78ef3c7874
commit
9f762b1d48
@ -37,9 +37,9 @@ export const getRoomRanking = async () => {
|
||||
}
|
||||
|
||||
// 获取我的排名
|
||||
export const getMyRanking = async () => {
|
||||
export const getMyRanking = async (type, dateType) => {
|
||||
try {
|
||||
const response = await get(`/activity/leaderboard/my-rank`)
|
||||
const response = await get(`/activity/leaderboard/my-rank?type=${type}&dateType=${dateType}`)
|
||||
return response
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch get my ranking:', error)
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
<div style="display: flex; justify-content: space-around; position: relative">
|
||||
<div
|
||||
class="tab"
|
||||
@click="rankingType = 'Wealth'"
|
||||
@click="changeType('Wealth')"
|
||||
style=""
|
||||
:style="{ color: rankingType == 'Wealth' ? '#FFB760' : '#fff' }"
|
||||
>
|
||||
@ -31,7 +31,7 @@
|
||||
</div>
|
||||
<div
|
||||
class="tab"
|
||||
@click="rankingType = 'Charm'"
|
||||
@click="changeType('Charm')"
|
||||
style=""
|
||||
:style="{ color: rankingType == 'Charm' ? '#60FF83' : '#fff' }"
|
||||
>
|
||||
@ -39,7 +39,7 @@
|
||||
</div>
|
||||
<div
|
||||
class="tab"
|
||||
@click="rankingType = 'Room'"
|
||||
@click="changeType('Room')"
|
||||
style=""
|
||||
:style="{ color: rankingType == 'Room' ? '#9B60FF' : '#fff' }"
|
||||
>
|
||||
@ -73,28 +73,28 @@
|
||||
<div
|
||||
class="tag"
|
||||
:class="{ tagActive: selectedTimeTab == 'Hourly' }"
|
||||
@click="selectedTimeTab = 'Hourly'"
|
||||
@click="changeDateType('Hourly')"
|
||||
>
|
||||
Hourly
|
||||
</div>
|
||||
<div
|
||||
class="tag"
|
||||
:class="{ tagActive: selectedTimeTab == 'Daily' }"
|
||||
@click="selectedTimeTab = 'Daily'"
|
||||
@click="changeDateType('Daily')"
|
||||
>
|
||||
Daily
|
||||
</div>
|
||||
<div
|
||||
class="tag"
|
||||
:class="{ tagActive: selectedTimeTab == 'Weekly' }"
|
||||
@click="selectedTimeTab = 'Weekly'"
|
||||
@click="changeDateType('Weekly')"
|
||||
>
|
||||
Weekly
|
||||
</div>
|
||||
<div
|
||||
class="tag"
|
||||
:class="{ tagActive: selectedTimeTab == 'Monthly' }"
|
||||
@click="selectedTimeTab = 'Monthly'"
|
||||
@click="changeDateType('Monthly')"
|
||||
>
|
||||
Monthly
|
||||
</div>
|
||||
@ -157,7 +157,7 @@
|
||||
<div style="display: flex; align-items: center; width: 70%">
|
||||
<div style="font-weight: 700">{{ index + 4 }}</div>
|
||||
<img
|
||||
:src="userInfo.avatar"
|
||||
:src="userInfo.avatar || ''"
|
||||
alt=""
|
||||
width="20%"
|
||||
style="
|
||||
@ -230,18 +230,19 @@
|
||||
}"
|
||||
>
|
||||
<div style="display: flex; align-items: center; width: 70%">
|
||||
<div style="font-weight: 700">999</div>
|
||||
<div style="font-weight: 700">{{ myRanking.rank || 0 }}</div>
|
||||
<img
|
||||
src=""
|
||||
: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"
|
||||
>
|
||||
aaaaaaaaaaaa
|
||||
{{ myRanking.nickname || '' }}
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; width: 30%">
|
||||
@ -260,7 +261,7 @@
|
||||
text-overflow: ellipsis;
|
||||
"
|
||||
>
|
||||
123456789
|
||||
{{ myRanking.quantityFormat || 0 }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -287,6 +288,10 @@ const isInAppEnvironment = ref(false) // 检测是否在APP环境中
|
||||
const rankingType = ref('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({}) //我的排名
|
||||
@ -306,25 +311,48 @@ const updateTimeRanking = () => {
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => rankingType.value,
|
||||
() => {
|
||||
console.log('监听到rankingType.value变化')
|
||||
// 改变排行榜类型
|
||||
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 = []
|
||||
// 获取榜单
|
||||
getRanking()
|
||||
myRanking.value = {}
|
||||
getRanking() // 获取榜单
|
||||
getMyRankingInfo() //获取我的排名
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
watch(
|
||||
() => selectedTimeTab.value,
|
||||
() => {
|
||||
console.log('监听到selectedTimeTab.value变化')
|
||||
// 改变时间类型
|
||||
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(() => {
|
||||
@ -348,15 +376,17 @@ const RankingFromTop4 = computed(() => {
|
||||
})
|
||||
|
||||
// 动态样式
|
||||
const backgroundColor = ref('') //页面
|
||||
const backgroundImage = ref('') //页面
|
||||
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 border = ref('') //时间标签
|
||||
const background = ref('') //时间标签
|
||||
const rankItemBackground = ref('') //排名项背景
|
||||
const rankItemBorder = ref('') //排名项边框
|
||||
|
||||
const sentinel = ref(null)
|
||||
const stickyHeader = ref(null)
|
||||
|
||||
@ -422,6 +452,7 @@ const observer = new IntersectionObserver((entries) => {
|
||||
})
|
||||
})
|
||||
|
||||
// 获取榜单
|
||||
const getRanking = async () => {
|
||||
console.log('获取榜单')
|
||||
|
||||
@ -439,13 +470,24 @@ const getRanking = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
//获取我的排名
|
||||
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() // 获取榜单
|
||||
getMyRanking() //获取我的排名
|
||||
getMyRankingInfo() //获取我的排名
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user