From 1bc454319ab27f323f6f5c028bb24f73765285e3 Mon Sep 17 00:00:00 2001 From: hzj <1304805162@qq.com> Date: Fri, 12 Sep 2025 19:51:21 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E6=B4=BB=E5=8A=A8=E9=A1=B5):=20=E5=AF=B9?= =?UTF-8?q?=E6=8E=A5=E6=8E=A5=E5=8F=A3=E6=95=B0=E6=8D=AE=EF=BC=8C=E5=AE=8C?= =?UTF-8?q?=E5=96=84=E7=82=B9=E5=87=BB=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/topList.js | 51 ++ src/components/MaskLayer.vue | 6 +- src/components/TopList/borderImg.vue | 26 +- src/views/TopList/TopList.vue | 724 ++++++++++++++++----------- 4 files changed, 523 insertions(+), 284 deletions(-) create mode 100644 src/api/topList.js diff --git a/src/api/topList.js b/src/api/topList.js new file mode 100644 index 0000000..b643031 --- /dev/null +++ b/src/api/topList.js @@ -0,0 +1,51 @@ +import { get, post } from '../utils/http.js' + +// 获取国王/女王榜单 +export const getWeekTopList = async (data) => { + try { + const response = await get( + `/activity/king-queen/ranking?type=${data.type}&kingQueenType=${data.kingQueenType}¤t=${data.current}&size=${data.size}` + ) + return response + } catch (error) { + console.error('Failed to get week top list:', error) + console.error('error:' + error.response.errorMsg) + throw error + } +} + +// 获取我本周贡献 +export const getWeekMyContribution = async () => { + try { + const response = await get(`/activity/king-queen/user-contribute`) + return response + } catch (error) { + console.error('Failed to get week my contribution:', error) + console.error('error:' + error.response.errorMsg) + throw error + } +} + +// 获取本周奖励和礼物 +export const getThisWeekRewardsAndGifts = async () => { + try { + const response = await get(`/activity/king-queen/effective`) + return response + } catch (error) { + console.error('Failed to get this week rewards and gifts:', error) + console.error('error:' + error.response.errorMsg) + throw error + } +} + +// 获取历史榜首 +export const getHistoryTopOne = async () => { + try { + const response = await get(`/activity/king-queen/history`) + return response + } catch (error) { + console.error('Failed to get history top one:', error) + console.error('error:' + error.response.errorMsg) + throw error + } +} diff --git a/src/components/MaskLayer.vue b/src/components/MaskLayer.vue index 2082d56..3a34a53 100644 --- a/src/components/MaskLayer.vue +++ b/src/components/MaskLayer.vue @@ -28,4 +28,8 @@ const props = defineProps({ }) - + diff --git a/src/components/TopList/borderImg.vue b/src/components/TopList/borderImg.vue index 3e57e64..47998fd 100644 --- a/src/components/TopList/borderImg.vue +++ b/src/components/TopList/borderImg.vue @@ -23,7 +23,7 @@
+ diff --git a/src/views/TopList/TopList.vue b/src/views/TopList/TopList.vue index 0d3f28f..4de849d 100644 --- a/src/views/TopList/TopList.vue +++ b/src/views/TopList/TopList.vue @@ -20,12 +20,13 @@ @click="historyShow = true" /> +
-
+
- +
- +
- Sukabuliete -
-
-
ID:123456
-
-
-
- - - -
- -
-
- Sukabuliete +
+ {{ topUser.userInfo.userNickname }} +
ID:123456
@@ -152,13 +119,29 @@ >
- +
+ +
+ +
+
- ddd + {{ gift.giftCandy }}
@@ -166,7 +149,7 @@
- +
@@ -222,13 +205,13 @@ padding: 0 15%; " > -
+
- {{ index + 100 }} + {{ listItem.rank }}
-
-
- {{ listItem.name }} +
+
+ {{ listItem.userNickname }}
-
ID:{{ listItem.id }}
+
ID:{{ listItem.account }}
- {{ listItem.recharge }} + {{ listItem.quantity }}
+ +
+ +
- - -
- - -
-
-
- {{ myRanking.ranking }} -
-
- -
- -
-
- {{ myRanking.name }} -
-
ID:{{ myRanking.id }}
-
-
- -
- -
- {{ myRanking.recharge }} -
-
-
-
@@ -371,7 +294,11 @@
-
+
- +
- +
- Sukabuliete -
-
-
ID:123456
-
-
-
- - - -
- -
-
- Sukabuliete +
+ {{ topOne.userInfo.userNickname }} +
-
ID:123456
+
+ ID:{{ topOne.userInfo.account }} +
- 2025-09-05 + {{ showTopOne.group }}
@@ -570,30 +471,61 @@
-
- +
+
-
- {{ reward.goodsId }} +
+ +
+ +
+
+ +
+ {{ reward.name }} +
@@ -604,6 +536,86 @@
+ + +
+ + +
+
+
+ + 100 +
+
+ +
+ +
+
+ {{ myRanking.userNickname }} +
+
+
+ +
+ + +
+ {{ myRanking.wealthQuantity }} +
+
+ {{ myRanking.charmQuantity }} +
+
+
+
@@ -612,84 +624,96 @@ import { isInApp } from '../../utils/appBridge.js' import { computed, onMounted, ref } from 'vue' import borderImg from '../../components/TopList/borderImg.vue' import maskLayer from '../../components/MaskLayer.vue' +import { + getWeekTopList, + getWeekMyContribution, + getThisWeekRewardsAndGifts, + getHistoryTopOne, +} from '@/api/topList.js' +import { useDebounce, useThrottle } from '@/utils/useDebounce' const visibleKingList = ref(true) -// 检测是否在APP环境中 -const isInAppEnvironment = ref(false) +const isInAppEnvironment = ref(false) // 检测是否在APP环境中 -// 榜首历史记录 -const historyList = ref([ - { - time: '2025-9-5', - topUser: [{}], - }, -]) - -// 我的排名 -const myRanking = ref({ - id: '666', - name: 'aaa', - recharge: '12345', - ranking: '999', +const historyList = ref([]) // 榜首历史记录 +const showTopOne = computed(() => { + return { + group: historyList.value[historyIndex.value].group, + top: [ + { + type: 'topKing', + Frame: '/src/assets/images/TopList/kingFrame.png', + userInfo: historyList.value[historyIndex.value].wealth, + }, + { + type: 'topQueen', + Frame: '/src/assets/images/TopList/queenFrame.png', + userInfo: historyList.value[historyIndex.value].charm, + }, + ], + } }) +const historyIndex = ref(0) -// 国王榜 -const kingList = ref( - Array.from({ length: 12 }, () => { - return { id: '666', name: 'aaa', recharge: '12345' } - }) -) +const changeHistoryIndex = (num) => { + let index = historyIndex.value + num + let length = historyList.value.length + if (index >= 0 && index < length) { + historyIndex.value = index + } +} -// 女王榜 -const queenList = ref( - Array.from({ length: 12 }, () => { - return { id: '888', name: 'bbb', recharge: '45678' } - }) -) +const myRanking = ref({}) // 我的排名 +const kingListCurrent = ref(1) //国王榜第几页 +const kingListParams = computed(() => ({ + type: 'THIS_WEEK', + kingQueenType: 'WEALTH', + current: kingListCurrent.value, + size: 10, +})) +const kingList = ref([]) // 国王榜 +const queenListCurrent = ref(1) //女王榜第几页 +const queenListParams = computed(() => ({ + type: 'THIS_WEEK', + kingQueenType: 'CHARM', + current: queenListCurrent.value, + size: 10, +})) +const queenList = ref([]) // 女王榜 +const listTop = ref([ + { + type: 'topKing', + Frame: '/src/assets/images/TopList/kingFrame.png', + userInfo: {}, + }, + { + type: 'topQueen', + Frame: '/src/assets/images/TopList/queenFrame.png', + userInfo: {}, + }, +]) //本周的top1国王和女王 // 展示用排行榜 const topList = computed(() => { return visibleKingList.value ? kingList.value : queenList.value }) -// 展示奖励榜标签 -const visibleKingRewards = ref(true) +const showKingLoading = ref(true) //触底加载功能 +const showQueenLoading = ref(true) //触底加载功能 -// top图片 const topImg = ref([ '/src/assets/images/TopList/top1.png', '/src/assets/images/TopList/top2.png', '/src/assets/images/TopList/top3.png', -]) - -const kingRewards = ref([ - Array.from({ length: 6 }, () => { - return { goodsId: '111', name: 'aaa' } - }), - Array.from({ length: 6 }, () => { - return { goodsId: '222', name: 'aaa' } - }), - Array.from({ length: 3 }, () => { - return { goodsId: '333', name: 'aaa' } - }), -]) - -const queenRewards = ref([ - Array.from({ length: 3 }, () => { - return { goodsId: '444', name: 'aaa' } - }), - Array.from({ length: 3 }, () => { - return { goodsId: '555', name: 'aaa' } - }), - Array.from({ length: 3 }, () => { - return { goodsId: '666', name: 'aaa' } - }), -]) +]) // top图片 +const visibleKingRewards = ref(true) // 展示奖励榜标签 +const kingRewards = ref([]) //国王奖励列表 +const queenRewards = ref([]) //女王奖励列表 const rewardsList = computed(() => { return visibleKingRewards.value ? kingRewards.value : queenRewards.value -}) +}) //展示奖励列表 const maskLayerShow = computed(() => { return helpInfoShow.value || historyShow.value || rewardsShow.value @@ -698,6 +722,65 @@ const helpInfoShow = ref(false) const historyShow = ref(false) const rewardsShow = ref(false) +// 获取底部加载div +const kingListLoadmore = ref(null) +const queenListloadmore = ref(null) + +const debouceGetKingList = useThrottle(() => { + getTopList(kingListParams.value) +}, 1000) +const debouceGetQueenList = useThrottle(() => { + getTopList(queenListParams.value) +}, 1000) + +const gifts = ref([]) + +// 获取俩榜单 +const getTopList = async (params) => { + const resWeekTopList = await getWeekTopList(params) + if (resWeekTopList.status && resWeekTopList.body) { + if (params.kingQueenType == 'WEALTH') { + if (kingList.value.length == 0) listTop.value[0].userInfo = resWeekTopList.body.records[0] //首次加载获取king榜首 + kingList.value.push(...resWeekTopList.body.records) + if (params.current * params.size >= resWeekTopList.body.total) showKingLoading.value = false + } else { + if (queenList.value.length == 0) listTop.value[1].userInfo = resWeekTopList.body.records[0] //首次加载获取king榜首 + queenList.value.push(...resWeekTopList.body.records) + if (params.current * params.size >= resWeekTopList.body.total) showQueenLoading.value = false + } + } +} + +// 获取我的贡献 +const getMyContribution = async () => { + const resWeekMyContribution = await getWeekMyContribution() + console.log('resWeekMyContribution:', resWeekMyContribution) + + if (resWeekMyContribution.status && resWeekMyContribution.body) { + myRanking.value = resWeekMyContribution.body + } +} + +// 获取每周奖励列表和礼物 +const getRewardsAndGifts = async () => { + const resRewardsAndGifts = await getThisWeekRewardsAndGifts() + if (resRewardsAndGifts.status && resRewardsAndGifts.body) { + gifts.value = resRewardsAndGifts.body.gifts + kingRewards.value = resRewardsAndGifts.body.butOneRewards + queenRewards.value = resRewardsAndGifts.body.butTwoRewards + + console.log('kingRewards:', kingRewards.value) + console.log('queenRewards:', queenRewards.value) + } +} + +const getAllTopOne = async () => { + const resHistoryTopOne = await getHistoryTopOne() + if (resHistoryTopOne.status && resHistoryTopOne.body) { + historyList.value = resHistoryTopOne.body + } +} + // 关闭弹窗 const closedPopup = () => { helpInfoShow.value = false @@ -705,15 +788,50 @@ const closedPopup = () => { rewardsShow.value = false } +// IntersectionObserver配置 +const observer = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (entry.intersectionRatio > 0) { + console.log('监控到底部') + if (entry.target == kingListLoadmore.value && kingList.value.length != 0) { + console.log('kingListLoadmore') + kingListCurrent.value++ + debouceGetKingList() + } + if (entry.target == queenListloadmore.value && queenList.value.length != 0) { + console.log('queenListloadmore') + queenListCurrent.value++ + debouceGetQueenList() + } + } + }) +}) + // 组件挂载时检测环境 onMounted(() => { isInAppEnvironment.value = isInApp() + + getTopList(kingListParams.value) // 获取国王榜单 + getTopList(queenListParams.value) // 获取女王榜单 + getMyContribution() // 获取我的贡献 + getRewardsAndGifts() //获取本周的礼物和国王和皇后top奖励列表 + getAllTopOne() //获取近几个月的榜首国王女王 + + if (kingListLoadmore.value) { + observer.observe(kingListLoadmore.value) + } //监控国王加载标志 + + if (queenListloadmore.value) { + observer.observe(queenListloadmore.value) + } //监控女王加载标志 })