414 lines
15 KiB
Vue
414 lines
15 KiB
Vue
<script setup>
|
||
import {ref, onMounted, onBeforeUnmount, nextTick, watch} from "vue";
|
||
import {onLoad, onShow, onHide} from "@dcloudio/uni-app";
|
||
import Container from "@/components/Container.vue";
|
||
import BattleHeader from "@/components/BattleHeader.vue";
|
||
import BowTarget from "@/components/BowTarget.vue";
|
||
import BattleFooter from "@/components/BattleFooter.vue";
|
||
import ScreenHint from "@/components/ScreenHint.vue";
|
||
import SButton from "@/components/SButton.vue";
|
||
import RoundEndTip from "@/components/RoundEndTip.vue";
|
||
import TestDistance from "@/components/TestDistance.vue";
|
||
import TeamAvatars from "@/components/TeamAvatars.vue";
|
||
import ShootProgress2 from "@/components/ShootProgress2.vue";
|
||
import SModal from "@/components/SModal.vue";
|
||
import {laserCloseAPI, getBattleAPI} from "@/apis";
|
||
import {MESSAGETYPESV2} from "@/constants";
|
||
import audioManager from "@/audioManager";
|
||
import useStore from "@/store";
|
||
import {storeToRefs} from "pinia";
|
||
|
||
const store = useStore();
|
||
const {user, online} = storeToRefs(store);
|
||
const start = ref(null);
|
||
const tips = ref("");
|
||
const battleId = ref("");
|
||
const currentRound = ref(0);
|
||
/** 专用于 RoundEndTip 展示的轮次，与进度条的 currentRound 解耦，避免 ToSomeoneShoot 提前更新 currentRound 导致 Tip 显示错误轮次 */
|
||
const roundTipRound = ref(0);
|
||
const goldenRound = ref(0);
|
||
const currentRedPoint = ref(0);
|
||
const currentBluePoint = ref(0);
|
||
const scores = ref([]);
|
||
const blueScores = ref([]);
|
||
const redTeam = ref([]);
|
||
const blueTeam = ref([]);
|
||
const currentShooterId = ref(0);
|
||
const roundResults = ref([]);
|
||
const redPoints = ref(0);
|
||
const bluePoints = ref(0);
|
||
const showRoundTip = ref(false);
|
||
const isFinalShoot = ref(false);
|
||
const matchStatus = ref(undefined);
|
||
const updateRemainSecond = ref(0);
|
||
/** 对战来源类型（1=好友约战，2=匹配对战），用于结算页分流 */
|
||
const battleWay = ref(0);
|
||
/** 上一次处理的 ToSomeoneShoot 关键字段，用于去重过滤重复消息 */
|
||
const lastToSomeoneShootKey = ref("");
|
||
/** 控制设备离线提示弹窗的显示状态 */
|
||
const showOfflineModal = ref(false);
|
||
|
||
/**
|
||
* 监听设备在线状态，比赛进行中设备离线时弹窗提示用户
|
||
*/
|
||
watch(online, (newVal, oldVal) => {
|
||
if (!newVal && oldVal && start.value === true) {
|
||
showOfflineModal.value = true;
|
||
}
|
||
});
|
||
|
||
const recoverData = (battleInfo, {force = false, arrowOnly = false} = {}) => {
|
||
try {
|
||
battleId.value = battleInfo.matchId;
|
||
// 存储对战来源，供结算跳转分流使用
|
||
if (battleInfo.way !== undefined) battleWay.value = battleInfo.way;
|
||
|
||
// 优先使用接口返回的队伍数据，如果没有则尝试从缓存读取（应对匹配刚完成接口未就绪的情况）
|
||
const t1 = battleInfo.teams?.[1] || {};
|
||
const t2 = battleInfo.teams?.[2] || {};
|
||
|
||
if (t1.players) blueTeam.value = [...t1.players];
|
||
else {
|
||
const cached = uni.getStorageSync("blue-team");
|
||
if (cached && cached.length) blueTeam.value = cached;
|
||
}
|
||
|
||
if (t2.players) redTeam.value = [...t2.players];
|
||
else {
|
||
const cached = uni.getStorageSync("red-team");
|
||
if (cached && cached.length) redTeam.value = cached;
|
||
}
|
||
|
||
start.value = battleInfo.status !== 0;
|
||
|
||
if (battleInfo.status === 0) {
|
||
const readyRemain = (Date.now() - (battleInfo.createTime || Date.now())) / 1000;
|
||
if (readyRemain > 0 && readyRemain < 15) {
|
||
setTimeout(() => {
|
||
uni.$emit("update-timer", 15 - readyRemain - 0.2);
|
||
}, 200);
|
||
}
|
||
return;
|
||
}
|
||
if (!arrowOnly) {
|
||
// 在 ToSomeoneShoot 时同步更新当前轮次，使进度条轮次图片及时切换
|
||
currentRound.value = battleInfo.current.round || 1;
|
||
currentShooterId.value = battleInfo.current.playerId;
|
||
const redPlayer = battleInfo.teams[2].players.find(
|
||
(item) => item.id === battleInfo.current.playerId
|
||
);
|
||
let nextTips = redPlayer ? "请红队射箭" : "请蓝队射箭";
|
||
if (force) nextTips += "重回";
|
||
if (
|
||
battleInfo.current.playerId === user.value.id &&
|
||
redTeam.value.length > 1
|
||
) {
|
||
nextTips += "你";
|
||
}
|
||
// 同队连续出手时 tips 值不变，HeaderProgress watch 不触发音频
|
||
// 需在赋值前比较旧值，手动播放音频确保始终触发 onAudioEnded 启动计时器
|
||
// 注意：使用 interrupt=false 避免打断上一支箭的环数播报音频
|
||
if (tips.value === nextTips && !nextTips.includes("重回")) {
|
||
const audioKey = redPlayer ? "请红方射箭" : "请蓝方射箭";
|
||
audioManager.play(audioKey, false);
|
||
}
|
||
tips.value = nextTips;
|
||
// 同步写入 Pinia store，供 HeaderProgress 通过 immediate watch 在 onMounted 时立即读取
|
||
// 规避 WeChat 小程序 onShow 在组件 onMounted 之前触发导致 uni.$emit 事件丢失的时序问题
|
||
store.updateTips(nextTips);
|
||
// force 模式下改为在 nextTick 内发送 update-tips，规避 WeChat 小程序
|
||
// onShow 与 onMounted 时序问题导致 HeaderProgress 监听器尚未注册的边界情况
|
||
if (!force) {
|
||
uni.$emit("update-tips", nextTips);
|
||
}
|
||
// redPlayer 已在上方 find() 确认：不为 null 则当前射手在红队
|
||
const targetTeam = redPlayer ? 'red' : 'blue';
|
||
if (force) {
|
||
// force 模式下 start.value 刚由 null 变 true，Vue 异步调度渲染，
|
||
// ShootProgress2（v-if="start"）尚未挂载，update-remain 事件会被丢弃。
|
||
// 同时 HeaderProgress 对含"重回"的 tips 拦截音频，倒计时无法依赖
|
||
// onAudioEnded 驱动，需在 nextTick 后直接启动。
|
||
const elapsed = (Date.now() - battleInfo.current.startTime) / 1000;
|
||
console.log(`当前轮已进行${elapsed}秒`);
|
||
if (elapsed > 0 && elapsed < 15) {
|
||
updateRemainSecond.value = 15 - elapsed - 0.2;
|
||
}
|
||
const actualRemain = updateRemainSecond.value;
|
||
nextTick(() => {
|
||
// 在 nextTick 内统一发送，确保 ShootProgress2 和 HeaderProgress 均已挂载
|
||
uni.$emit("update-tips", nextTips);
|
||
uni.$emit("update-remain", {reset: true, value: 15, team: targetTeam});
|
||
// 重置动画完成后，直接启动倒计时（无需依赖音频结束回调）
|
||
setTimeout(() => {
|
||
uni.$emit("update-remain", {stop: false, value: actualRemain, team: targetTeam});
|
||
}, 100);
|
||
});
|
||
} else {
|
||
// ToSomeoneShoot 到达时：若进度条仍在倒计时则瞬间清零再切换满值，确保视觉连贯
|
||
uni.$emit("update-remain", {zeroThenReset: true, value: 15, team: targetTeam});
|
||
updateRemainSecond.value = battleInfo.readyTime;
|
||
}
|
||
} else {
|
||
currentRound.value = battleInfo.current.round || 1;
|
||
const latestRound = battleInfo.rounds[currentRound.value - 1];
|
||
if (latestRound) {
|
||
blueScores.value = latestRound.shoots[1];
|
||
scores.value = latestRound.shoots[2];
|
||
}
|
||
}
|
||
roundResults.value = battleInfo.rounds || [];
|
||
isFinalShoot.value = battleInfo.current.goldRound;
|
||
bluePoints.value = battleInfo.teams[1].score;
|
||
redPoints.value = battleInfo.teams[2].score;
|
||
} catch (err) {
|
||
console.log(err);
|
||
}
|
||
};
|
||
|
||
function onAudioEnded(s) {
|
||
// "请红方射箭"/"请蓝方射箭"：队友或对手轮次；"轮到你了"：用户本人轮次（HeaderProgress特殊分支）
|
||
// 三者音频结束后均需启动倒计时进度条
|
||
if (s.indexOf('请红方射箭') >= 0 || s.indexOf('请蓝方射箭') >= 0 || s.indexOf('轮到你了') >= 0) {
|
||
let team;
|
||
if (s.indexOf('请红方射箭') >= 0) team = 'red';
|
||
else if (s.indexOf('请蓝方射箭') >= 0) team = 'blue';
|
||
else team = tips.value.includes('红队') ? 'red' : 'blue'; // 轮到你了：从当前tips判断用户所在队伍
|
||
uni.$emit("update-remain", {stop: false, value: updateRemainSecond.value, team: team});
|
||
}
|
||
if (s.indexOf("比赛结束") >= 0) {
|
||
console.log("比赛结束");
|
||
onBattleEnd()
|
||
}
|
||
}
|
||
|
||
function onBattleEnd() {
|
||
if (matchStatus.value === 2) {
|
||
// 全部跳转到新结算页
|
||
uni.redirectTo({
|
||
url: `/pages/friend-battle-result?battleId=${battleId.value}`,
|
||
});
|
||
}
|
||
}
|
||
|
||
/**
|
||
* @param {object} msg - NewRound 消息
|
||
* @param {number} prevRound - 在 NewRound 消息到达时即时捕获的旧轮次，用于 Tip 展示，避免异步延迟内 currentRound 已被更新
|
||
*/
|
||
function onNewRound(msg, prevRound) {
|
||
showRoundTip.value = true;
|
||
isFinalShoot.value = msg.current.goldRound;
|
||
// 决金轮箭数不确定（平局后可能再加一箭），清零 totalShot 隐藏箭数显示
|
||
if (msg.current.goldRound) {
|
||
store.updateShotInfo(0, 0);
|
||
}
|
||
// 用传入的 prevRound（捕获时刻的旧轮次）展示结算 Tip，与进度条 currentRound 解耦
|
||
roundTipRound.value = prevRound;
|
||
const latestRound = msg.rounds[prevRound - 1];
|
||
if (latestRound) {
|
||
if (isFinalShoot.value) {
|
||
currentBluePoint.value = msg.teams[1].score;
|
||
currentRedPoint.value = msg.teams[2].score;
|
||
} else {
|
||
currentBluePoint.value = latestRound.scores[1].score;
|
||
currentRedPoint.value = latestRound.scores[2].score;
|
||
}
|
||
}
|
||
}
|
||
|
||
async function onReceiveMessage(msg) {
|
||
if (Array.isArray(msg)) return;
|
||
if (msg.type === MESSAGETYPESV2.BattleStart) {
|
||
start.value = true;
|
||
} else if (msg.type === MESSAGETYPESV2.ToSomeoneShoot) {
|
||
// 去重防护：如果 playerId + round 与上一次处理完全相同，则忽略重复推送的消息
|
||
// （防止 onBeforeUnmount 未及时 off 和页面重创建导致同一事件被处理多次）
|
||
const key = `${msg?.current?.playerId}-${msg?.current?.round}`;
|
||
if (key === lastToSomeoneShootKey.value) return;
|
||
lastToSomeoneShootKey.value = key;
|
||
recoverData(msg);
|
||
} else if (msg.type === MESSAGETYPESV2.ShootResult) {
|
||
showRoundTip.value = false;
|
||
recoverData(msg, {arrowOnly: true});
|
||
} else if (msg.type === MESSAGETYPESV2.NewRound) {
|
||
// 在进入延迟前先捕获当前轮次，供 onNewRound 使用，防止 800ms 内 ToSomeoneShoot 提前更新 currentRound 造成 Tip 展示错轮
|
||
const prevRound = currentRound.value;
|
||
setTimeout(() => {
|
||
onNewRound(msg, prevRound)
|
||
}, 800)
|
||
} else if (msg.type === MESSAGETYPESV2.BattleEnd) {
|
||
matchStatus.value = msg.status;
|
||
if (msg.status === 4) {
|
||
showRoundTip.value = true;
|
||
currentBluePoint.value = 0;
|
||
currentRedPoint.value = 0;
|
||
setTimeout(() => {
|
||
uni.navigateBack();
|
||
}, 2000);
|
||
}
|
||
}
|
||
}
|
||
|
||
onLoad(async (options) => {
|
||
if (options.battleId) battleId.value = options.battleId;
|
||
// 重置箭数和提示文案，防止因 Pinia 保留上一场比赛的旧值而错误展示
|
||
store.updateShotInfo(0, 0);
|
||
store.updateTips("");
|
||
// uni.enableAlertBeforeUnload({
|
||
// message: "离开比赛可能导致比赛失败，是否继续？",
|
||
// success: (res) => {
|
||
// console.log("已启用离开提示");
|
||
// },
|
||
// });
|
||
});
|
||
onMounted(async () => {
|
||
uni.setKeepScreenOn({
|
||
keepScreenOn: true,
|
||
});
|
||
uni.$on("socket-inbox", onReceiveMessage);
|
||
uni.$on("audioEnded", onAudioEnded);
|
||
await laserCloseAPI();
|
||
});
|
||
onBeforeUnmount(() => {
|
||
uni.setKeepScreenOn({
|
||
keepScreenOn: false,
|
||
});
|
||
// 注销所有第三方事件盓听，防止页面重创建时监听叠加导致消息重复处理
|
||
uni.$off("socket-inbox", onReceiveMessage);
|
||
uni.$off("audioEnded", onAudioEnded);
|
||
audioManager.stopAll();
|
||
});
|
||
const refreshTimer = ref(null);
|
||
onShow(async () => {
|
||
if (battleId.value) {
|
||
const result = await getBattleAPI(battleId.value);
|
||
if (!result) return;
|
||
if (result.status === 2) {
|
||
// 比赛已结束（如切后台再回来）：跳新结算页
|
||
uni.redirectTo({
|
||
url: `/pages/friend-battle-result?battleId=${result.matchId}`,
|
||
});
|
||
} else {
|
||
if (result.status !== 0) {
|
||
// 比赛进行中，从后端恢复箭数（测距阶段不展示）
|
||
// 决金轮不展示箭数；其余轮次从 indexMap 按用户 id 取已射箭数
|
||
if (result.shootNumber && !result.current?.goldRound) {
|
||
store.updateShotInfo(result.current?.indexMap?.[user.value.id] ?? 0, result.shootNumber);
|
||
}
|
||
} else {
|
||
// 测距阶段重置箭数和提示文案，防止 ImmediateWatcher 读取 Pinia 保留的旧值
|
||
store.updateShotInfo(0, 0);
|
||
// 同步清空 Pinia tips 与本地 tips，避免重新开赛时 HeaderProgress 展示上一场旧文案
|
||
store.updateTips("");
|
||
tips.value = "";
|
||
}
|
||
recoverData(result, {force: true});
|
||
}
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<Container :bgType="start ? 3 : 1">
|
||
<view class="container">
|
||
<BattleHeader
|
||
v-if="start === false"
|
||
:redTeam="redTeam"
|
||
:blueTeam="blueTeam"
|
||
/>
|
||
<TestDistance v-if="start === false" :guide="false" :isBattle="true"/>
|
||
<view v-if="start" class="players-row">
|
||
<TeamAvatars
|
||
:team="blueTeam"
|
||
:isRed="false"
|
||
:currentShooterId="currentShooterId"
|
||
/>
|
||
<ShootProgress2
|
||
:tips="tips"
|
||
:currentRound="
|
||
goldenRound > 0 ? 'gold' + goldenRound : 'round' + currentRound
|
||
"
|
||
/>
|
||
<TeamAvatars :team="redTeam" :currentShooterId="currentShooterId"/>
|
||
</view>
|
||
<BowTarget
|
||
v-if="start"
|
||
mode="team"
|
||
:scores="scores"
|
||
:blueScores="blueScores"
|
||
/>
|
||
<BattleFooter
|
||
v-if="start"
|
||
:roundResults="roundResults"
|
||
:redPoints="redPoints"
|
||
:bluePoints="bluePoints"
|
||
:goldenRound="goldenRound"
|
||
/>
|
||
<ScreenHint
|
||
:show="showRoundTip"
|
||
:mode="isFinalShoot ? 'tall' : 'normal'"
|
||
>
|
||
<RoundEndTip
|
||
v-if="showRoundTip"
|
||
:isFinal="isFinalShoot"
|
||
:round="roundTipRound"
|
||
:bluePoint="currentBluePoint"
|
||
:redPoint="currentRedPoint"
|
||
:roundData="
|
||
roundResults[roundTipRound - 1] ? roundResults[roundTipRound - 1] : []
|
||
"
|
||
:onAutoClose="()=>{ showRoundTip = false}"
|
||
/>
|
||
</ScreenHint>
|
||
<!-- 设备离线提示弹窗 -->
|
||
<SModal
|
||
:show="showOfflineModal"
|
||
:noBg="true"
|
||
height="360rpx"
|
||
:onClose="() => (showOfflineModal = false)"
|
||
>
|
||
<view class="offline-modal">
|
||
<text class="offline-title">设备已离线</text>
|
||
<text class="offline-desc">检测到设备已断开连接，请检查设备后继续比赛</text>
|
||
<SButton @click="showOfflineModal = false">我知道了</SButton>
|
||
</view>
|
||
</SModal>
|
||
</view>
|
||
</Container>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.container {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.players-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: -2%;
|
||
margin-bottom: 6%;
|
||
}
|
||
|
||
.offline-modal {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 60rpx 40rpx 40rpx;
|
||
gap: 24rpx;
|
||
}
|
||
|
||
.offline-title {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #FED847;
|
||
}
|
||
|
||
.offline-desc {
|
||
font-size: 28rpx;
|
||
color: #CCCCCC;
|
||
text-align: center;
|
||
line-height: 1.6;
|
||
}
|
||
</style>
|