From 7bd2299fafb7ea93ded2d249f5a013ea82139456 Mon Sep 17 00:00:00 2001 From: hzj <1304805162@qq.com> Date: Mon, 19 Jan 2026 18:38:05 +0800 Subject: [PATCH] =?UTF-8?q?feat(cp=E6=A6=9C=E5=8D=95=E9=A1=B5):=20?= =?UTF-8?q?=E5=AF=B9=E6=8E=A5=E6=8E=A5=E5=8F=A3=E6=95=B0=E6=8D=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/stores/couple.js | 7 + .../Ranking/Couple/GamePlay/Gameplay.vue | 74 ++- src/views/Ranking/Couple/Ranking.vue | 222 ++++++- .../Ranking/Couple/components/topUser.vue | 571 +++++++++++------- src/views/Ranking/Couple/index.vue | 349 ++++++++++- 5 files changed, 956 insertions(+), 267 deletions(-) diff --git a/src/stores/couple.js b/src/stores/couple.js index 2d660b2..ef51a8e 100644 --- a/src/stores/couple.js +++ b/src/stores/couple.js @@ -2,6 +2,13 @@ import { defineStore } from 'pinia' export const useCoupleStore = defineStore('couple', { state: () => ({ + helpShow: false, //帮助展示 + + topRewardShow: false, // 前三名奖励展示 + topReward: {}, //前三名奖励项 + + myRanking: {}, // 我的排名 + TipsShow: false, // 金币不足提示 needCheckInTipsShow: false, // 需要补签提示 signInSuccessShow: false, // 签到成功提示 diff --git a/src/views/Ranking/Couple/GamePlay/Gameplay.vue b/src/views/Ranking/Couple/GamePlay/Gameplay.vue index 679dcfb..cc368c6 100644 --- a/src/views/Ranking/Couple/GamePlay/Gameplay.vue +++ b/src/views/Ranking/Couple/GamePlay/Gameplay.vue @@ -12,27 +12,59 @@ gap: 2vw; " > - - - + +
+ + +
+ + +
+ + +
+ + +
+ + +
diff --git a/src/views/Ranking/Couple/Ranking.vue b/src/views/Ranking/Couple/Ranking.vue index f25251e..1f7f245 100644 --- a/src/views/Ranking/Couple/Ranking.vue +++ b/src/views/Ranking/Couple/Ranking.vue @@ -12,27 +12,159 @@ gap: 10vw; " > - - + +
+ + +
+ + +
+ + +
-
+
+ + + + + + +
+ +
+ + +
+
+ + + + +
+
+ + +
+
+ {{ item.userNickname || '' }} +
+
+ {{ item.cpUserNickname || '' }} +
+
+ + +
+ +
{{ item.total || '0' }}
+
+
@@ -50,11 +182,13 @@ import { preloadImages } from '@/utils/imagePreloader.js' import { formatUTCCustom } from '@/utils/utcFormat.js' import { showError, showSuccess } from '@/utils/toast.js' import { handleAvatarImageError, handleRewardImageError } from '@/utils/imageHandler.js' +import { useCoupleStore } from '@/stores/couple' import { useThrottle } from '@/utils/useDebounce.js' import { storeToRefs } from 'pinia' import { apiGetCpRanking, // 获取cp排行榜 + apiGetCpRewardPool, // 获取cp奖励池(前三名) } from '@/api/couple.js' import TopUser from './components/topUser.vue' @@ -64,6 +198,7 @@ import maskLayer from '@/components/MaskLayer.vue' const { t } = useI18n() const router = useRouter() const route = useRoute() +const coupleStore = useCoupleStore() const langStore = useLangStore() // 当前语言类型 @@ -81,6 +216,11 @@ const getImgName = (filename) => { return currentLangType.value === 'ar' ? `${filename}_ar` : filename } +const { + helpShow, // 帮助按钮 + myRanking, // 我的排名 +} = storeToRefs(coupleStore) + const weeklyShow = ref(true) //本周数据 const seasonShow = ref(false) //季度数据 @@ -91,16 +231,20 @@ const changeTag = (module) => { weeklyShow.value = true seasonShow.value = false apiGetRanking() // 获取排行榜 + apiGetTop3Rewards() // 获取前三名奖励 break case 'season': if (seasonShow.value) return weeklyShow.value = false seasonShow.value = true apiGetRanking() // 获取排行榜 + apiGetTop3Rewards() // 获取前三名奖励 break } } +const rewardsTop3 = ref([]) // 前三名奖励列表 + const RankingLoadmore = ref(null) //触底模块 const rankingPageNo = ref(1) //分页页码 const Ranking = ref([]) //原始排行榜 @@ -109,16 +253,26 @@ const rankingAdd = ref([]) //加载排行榜项 const rankingTotal = computed(() => { return [...Ranking.value, ...rankingAdd.value] }) -const myRanking = ref({}) //我的排名 // 处理排行榜小于3人时的情况 const RankingHasTop3 = computed(() => { let RankingShow = [...Ranking.value] if (Ranking.value.length < 3) { let addNullUser = Array.from({ length: 3 - Ranking.value.length }, () => ({ - avatar: '', - nickname: '', - quantity: '', + rank: '', + + userAvatar: '', + userId: '', + userNickname: '', + userSex: '', + + cpUserAvatar: '', + cpUserId: '', + cpUserNickname: '', + cpUserSex: '', + + total: '0', + totalNumber: '0', })) RankingShow.push(...addNullUser) } @@ -127,10 +281,24 @@ const RankingHasTop3 = computed(() => { // 展示用的榜单 const showRanking = computed(() => { - return Ranking.value.filter((_, index) => index >= 10) + return Ranking.value.filter((_, index) => index >= 3) // return [] }) +// 获取排名数字的各个位数 +const getRankDigits = (rank) => { + return String(rank).split('') +} + +// 获取数字图片URL +const getDigitImageUrl = (digit) => { + if (/^[0-9]$/.test(digit)) { + return imageUrl(`num${digit}`) // 假设数字图片在相同目录下 + } + return '' +} + +// 获取榜单 const apiGetRanking = async () => { let type = weeklyShow.value ? 'WEEK' : 'SEASON' try { @@ -144,6 +312,19 @@ const apiGetRanking = async () => { } } +// 获取前三名奖励 +const apiGetTop3Rewards = async () => { + let type = weeklyShow.value ? 'WEEK_CP_GIFT' : 'SEASON_CP_GIFT' + try { + const response = await apiGetCpRewardPool(type) + if (response.status && response.body) { + rewardsTop3.value = response.body || [] // 前三名奖励 + } + } catch (error) { + showError(error.message) + } +} + // 触发节流获取排行榜 const debouceGetRanking = useThrottle(() => { // getRanking() //加载新的排行榜项 @@ -162,6 +343,7 @@ const observer = new IntersectionObserver((entries) => { // 组件挂载时检测环境 onMounted(() => { apiGetRanking() // 获取排行榜 + apiGetTop3Rewards() // 获取前三名奖励 // 监听加载模块 if (RankingLoadmore.value) { diff --git a/src/views/Ranking/Couple/components/topUser.vue b/src/views/Ranking/Couple/components/topUser.vue index 1bedc8e..0d0e260 100644 --- a/src/views/Ranking/Couple/components/topUser.vue +++ b/src/views/Ranking/Couple/components/topUser.vue @@ -1,123 +1,346 @@