diff --git a/src/pages/friend-battle-result.vue b/src/pages/friend-battle-result.vue index b287525..ba27555 100644 --- a/src/pages/friend-battle-result.vue +++ b/src/pages/friend-battle-result.vue @@ -12,6 +12,8 @@ import { storeToRefs } from "pinia"; const store = useStore(); const { user } = storeToRefs(store); +/** 通过 store action 获取段位名称(rank_lvl → 显示文字) */ +const { getLvlName } = store; /** 结算图片资源 CDN 前缀 */ const RESULT_CDN = "https://static.shelingxingqiu.com/shootmini/static/friend-battle-result"; @@ -102,32 +104,43 @@ const expPercent = computed(() => Math.min((expCurrent.value / expTotal.value) * 100, 100) ); -// ---- 大乱斗专属 Mock 数据(后期对接接口后替换)---- +/** + * 是否为大乱斗模式(mode > 3) + */ +const isMeleeMode = computed(() => data.value.mode > 3); /** - * 大乱斗排行榜模拟数据(7 条,第 7 条半显示提示可滚动) - * isSelf: true 表示当前登录用户所在行;后期改为与 user.value.id 比对 + * 大乱斗排行榜列表(从接口 teams["0"].players + resultList 构建) + * - 以 teams["0"].players 为全量玩家基础(包含未射击的玩家) + * - 从 resultList 中按 userId 匹配获取得分;未命中则 totalRing 为 0 + * - 按 totalRing 降序排列后注入 rank + * @returns {{ id, rank, avatar, name, lvlName, totalRing, isSelf }[]} */ -const mockMeleeRankList = ref([ - { id: 1001, rank: 1, avatar: "", name: "打酱油大声路过", lvlName: "钻石三级", totalRing: 100, isSelf: false }, - { id: 1002, rank: 2, avatar: "", name: "打酱油大声路过", lvlName: "钻石三级", totalRing: 100, isSelf: false }, - { id: 1003, rank: 3, avatar: "", name: "打酱油大声路过", lvlName: "钻石三级", totalRing: 100, isSelf: false }, - { id: 1004, rank: 4, avatar: "", name: "打酱油大声路过", lvlName: "钻石三级", totalRing: 100, isSelf: true }, - { id: 1005, rank: 5, avatar: "", name: "打酱油大声路过", lvlName: "钻石三级", totalRing: 100, isSelf: false }, - { id: 1006, rank: 6, avatar: "", name: "打酱油大声路过", lvlName: "钻石三级", totalRing: 100, isSelf: false }, - { id: 1007, rank: 7, avatar: "", name: "打酱油大声路过", lvlName: "钻石三级", totalRing: 100, isSelf: false }, -]); +const meleeRankList = computed(() => { + const resultList = data.value.resultList || []; + const teamPlayers = data.value.teams?.[0]?.players || []; + if (!teamPlayers.length) return []; -/** - * 大乱斗模式开发预览开关(true = 始终展示大乱斗态,方便不传 battleId 时预览样式) - * 对接接口后将此 ref 删除,isMeleeMode 改为只依赖 data.value.mode - */ -const isMeleePreview = ref(true); + // 以 players 为基础,merge resultList 得分数据 + const list = teamPlayers.map((p) => { + const resultItem = resultList.find((r) => r.userId === p.id) || {}; + return { + id: p.id, + avatar: p.avatar || "", + name: p.name || "", + // rank_lvl 字段可能缺失,缺失时显示空字符串,避免 getLvlName(undefined) 返回错误段位名 + lvlName: p.rank_lvl != null ? getLvlName(p.rank_lvl) : "", + totalRing: resultItem.totalRing ?? 0, + isSelf: String(p.id) === String(user.value.id), + }; + }); -/** - * 是否为大乱斗模式(mode > 3 或开发预览开关开启) - */ -const isMeleeMode = computed(() => isMeleePreview.value || data.value.mode > 3); + // 按总环数降序排列,环数相同时按 id 升序保证顺序稳定 + list.sort((a, b) => b.totalRing - a.totalRing || a.id - b.id); + + // 注入名次(从1开始) + return list.map((item, index) => ({ ...item, rank: index + 1 })); +}); /** * 获取前三名行背景装饰 SVG 路径 @@ -152,10 +165,16 @@ function getMeleeAvatarBorderColor(rank) { // ---- 生命周期 ---- onLoad(async (options) => { - if (!options.battleId) return; + // TODO: 调试用固定 battleId,联调完成后删除 fallback + const battleId = options.battleId || "92368717727535104"; + if (!battleId) return; - const result = await getBattleAPI(options.battleId); + const result = await getBattleAPI(battleId); data.value = result; + // DEBUG: 打印接口原始数据,联调完成后删除 + console.log("[friend-battle-result] raw result:", JSON.stringify(result)); + console.log("[friend-battle-result] mode:", result.mode, "resultList:", result.resultList, "teams keys:", result.teams ? Object.keys(result.teams) : null); + console.log("[friend-battle-result] current user.id:", user.value.id, "type:", typeof user.value.id); // 判断当前用户是否在胜利队伍中 // 优先使用接口返回的 winTeam 字段;若缺失则以队伍得分高低作为兜底判断 @@ -342,7 +361,7 @@ function goBack() {