fix:大乱斗比赛页面结束跳转到新结算页面

This commit is contained in:
2026-05-09 15:23:58 +08:00
parent c4ad44b02a
commit 45cb785ba4
2 changed files with 45 additions and 31 deletions

View File

@@ -165,16 +165,10 @@ function getMeleeAvatarBorderColor(rank) {
// ---- 生命周期 ---- // ---- 生命周期 ----
onLoad(async (options) => { onLoad(async (options) => {
// TODO: 调试用固定 battleId联调完成后删除 fallback if (!options.battleId) return;
const battleId = options.battleId || "92368717727535104";
if (!battleId) return;
const result = await getBattleAPI(battleId); const result = await getBattleAPI(options.battleId);
data.value = result; 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 字段;若缺失则以队伍得分高低作为兜底判断 // 优先使用接口返回的 winTeam 字段;若缺失则以队伍得分高低作为兜底判断
@@ -361,9 +355,9 @@ function goBack() {
<!-- 排行榜滚动列表显示 6.5 7 条半显示提示可滚动--> <!-- 排行榜滚动列表显示 6.5 7 条半显示提示可滚动-->
<scroll-view class="melee-rank-scroll" scroll-y> <scroll-view class="melee-rank-scroll" scroll-y>
<view <view
v-for="item in meleeRankList" v-for="(item, index) in meleeRankList"
:key="item.id" :key="item.id"
:class="['rank-item', item.isSelf ? 'rank-item-self' : '']" :class="['rank-item', item.isSelf ? 'rank-item-self' : '', index % 2 !== 0 ? 'rank-item-light' : '']"
> >
<!-- 前三名左侧渐变背景装饰绝对定位于内容层之下--> <!-- 前三名左侧渐变背景装饰绝对定位于内容层之下-->
<image <image
@@ -400,7 +394,7 @@ function goBack() {
<!-- 总环数 --> <!-- 总环数 -->
<view class="rank-score"> <view class="rank-score">
<text class="rank-score-num">{{ item.totalRing }}</text> <text class="rank-score-num">{{ item.totalRing }}</text>
<text class="rank-score-unit"> </text> <text class="rank-score-unit"></text>
</view> </view>
</view> </view>
</view> </view>
@@ -737,8 +731,9 @@ function goBack() {
.exp-gained { .exp-gained {
display: block; display: block;
text-align: center; text-align: center;
color: #FFD700; color: #FAE6BC;
font-size: 24rpx; font-size: 20rpx;
font-weight: 400;
margin-bottom: 12rpx; margin-bottom: 12rpx;
} }
@@ -757,17 +752,19 @@ function goBack() {
.exp-bar-bg { .exp-bar-bg {
flex: 1; flex: 1;
height: 16rpx; height: 10rpx;
background: rgba(255, 255, 255, 0.15); background: #454545;
border-radius: 8rpx; border-radius: 5rpx;
overflow: hidden; overflow: hidden;
} }
.exp-bar-fg { .exp-bar-fg {
height: 100%; height: 100%;
background: linear-gradient(90deg, #FF8C00 0%, #FFD200 100%); background: linear-gradient(90deg, #DD7B13 0%, #DD7B13 75%, rgba(244, 255, 176, 0.84) 100%);
border-radius: 8rpx; border-radius: 5rpx;
transition: width 0.8s ease-out; transition: width 0.8s ease-out;
/* 发光效果:近似 rgba(244,255,176,0.84) + blur 7.7px 叠加层 */
box-shadow: 0 0 14rpx rgba(244, 255, 176, 0.84);
} }
.exp-progress { .exp-progress {
@@ -936,22 +933,25 @@ function goBack() {
display: flex; display: flex;
align-items: center; align-items: center;
height: 116rpx; height: 116rpx;
box-sizing: border-box;
background: rgba(35, 33, 30, 0.85); background: rgba(35, 33, 30, 0.85);
/* 透明边框占位,避免 isSelf 时撑开布局 */
border: 2rpx solid transparent;
/* 相对定位,使背景装饰图可绝对定位于行内 */ /* 相对定位,使背景装饰图可绝对定位于行内 */
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
/* 当前用户所在行:红色边框高亮 */ /* 当前用户所在行:内嵌阴影高亮,不影响尺寸与相邻条目间距 */
.rank-item-self { .rank-item-self {
border-color: #ff4d4d; box-shadow: inset 0 0 0 2rpx #ff4d4d;
}
/* 斑马色块侸数行rank 1/3/5...):白色 5% 透明底 */
.rank-item-light {
background: rgba(255, 255, 255, 0.05);
} }
/* 前三名行背景装饰图SVG 设计尺寸 156×58@2x = 312×116rpx左对齐绝对定位*/ /* 前三名行背景装饰图SVG 设计尺寸 156×58@2x = 312×116rpx左对齐绝对定位*/
.rank-bg-deco { .rank-bg-deco {
display: block; /* 消除 image 默认 inline-block 行高撑开导致的条目间缝隙 */
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
@@ -1033,19 +1033,22 @@ function goBack() {
/* 总环数(靠右对齐,与用户信息区对比)*/ /* 总环数(靠右对齐,与用户信息区对比)*/
.rank-score { .rank-score {
display: flex; display: flex;
align-items: baseline; align-items: center;
gap: 2rpx; gap: 8rpx;
flex-shrink: 0; flex-shrink: 0;
} }
.rank-score-num { .rank-score-num {
font-size: 36rpx; font-size: 26rpx;
font-weight: 700; font-weight: 400;
color: #ffffff; color: #ffffff;
line-height: 1;
} }
.rank-score-unit { .rank-score-unit {
font-size: 22rpx; font-size: 22rpx;
color: rgba(255, 255, 255, 0.65); font-weight: 400;
color: rgba(255, 255, 255, 0.5);
line-height: 1;
} }
</style> </style>

View File

@@ -20,6 +20,8 @@ const { user } = storeToRefs(store);
const title = ref(""); const title = ref("");
const start = ref(null); const start = ref(null);
const battleId = ref(""); const battleId = ref("");
/** 对战模式1=好友约战 2=排位赛,用于结算页跳转判断 */
const way = ref(0);
const currentRound = ref(1); const currentRound = ref(1);
const tips = ref("即将开始..."); const tips = ref("即将开始...");
const players = ref([]); const players = ref([]);
@@ -37,6 +39,8 @@ function recoverData(battleInfo, { force = false } = {}) {
try { try {
if (battleInfo.way === 1) title.value = "好友约战 - 大乱斗"; if (battleInfo.way === 1) title.value = "好友约战 - 大乱斗";
if (battleInfo.way === 2) title.value = "排位赛 - 大乱斗"; if (battleInfo.way === 2) title.value = "排位赛 - 大乱斗";
// 保存 way 供结算跳转时使用
way.value = battleInfo.way ?? 0;
// 优先使用接口数据,否则使用缓存 // 优先使用接口数据,否则使用缓存
if (battleInfo.teams?.[0]?.players) { if (battleInfo.teams?.[0]?.players) {
@@ -122,9 +126,16 @@ async function onReceiveMessage(msg) {
tips.value = "准备下半场"; tips.value = "准备下半场";
} else if (msg.type === MESSAGETYPESV2.BattleEnd) { } else if (msg.type === MESSAGETYPESV2.BattleEnd) {
setTimeout(() => { setTimeout(() => {
uni.redirectTo({ // 好友约战way=1跳转新结算页其余跳旧结算页
url: "/pages/battle-result?battleId=" + msg.matchId, if (way.value === 1) {
}); uni.redirectTo({
url: "/pages/friend-battle-result?battleId=" + msg.matchId,
});
} else {
uni.redirectTo({
url: "/pages/battle-result?battleId=" + msg.matchId,
});
}
}, 1000); }, 1000);
} }
} }