139 lines
3.1 KiB
Vue
139 lines
3.1 KiB
Vue
<script setup>
|
||
import { ref, watch, onMounted, onBeforeUnmount } from "vue";
|
||
import { onShow } from "@dcloudio/uni-app";
|
||
|
||
import { getBattleAPI, getUserGameState } from "@/apis";
|
||
import { debounce } from "@/util";
|
||
|
||
import useStore from "@/store";
|
||
import { storeToRefs } from "pinia";
|
||
const store = useStore();
|
||
const { user, game } = storeToRefs(store);
|
||
const { updateGame } = store;
|
||
|
||
const props = defineProps({
|
||
signin: {
|
||
type: Function,
|
||
default: () => {},
|
||
},
|
||
});
|
||
const loading = ref(false);
|
||
|
||
/** 统一获取当前环境 token，用于守卫：无有效 token 时不发起接口请求 */
|
||
const getToken = () =>
|
||
uni.getStorageSync(`${uni.getAccountInfoSync().miniProgram.envVersion}_token`);
|
||
|
||
onShow(async () => {
|
||
if (user.value.id && getToken()) {
|
||
setTimeout(async () => {
|
||
const state = await getUserGameState();
|
||
updateGame(state.gaming, state.roomId);
|
||
}, 1000);
|
||
}
|
||
});
|
||
|
||
watch(
|
||
() => user.value,
|
||
async (value) => {
|
||
if (!value.id) {
|
||
updateGame(false, "");
|
||
} else if (getToken()) {
|
||
// 有有效 token 时才查询在局状态，避免 token 失效时反复发起无效请求
|
||
const state = await getUserGameState();
|
||
updateGame(state.gaming, state.roomId);
|
||
}
|
||
}
|
||
);
|
||
|
||
const onClick = debounce(async () => {
|
||
if (loading.value) return;
|
||
try {
|
||
loading.value = true;
|
||
const result = await getBattleAPI();
|
||
if (result && result.matchId) {
|
||
await uni.$checkAudio();
|
||
if (result.mode <= 3) {
|
||
uni.navigateTo({
|
||
url: `/pages/team-battle?battleId=${result.matchId}`,
|
||
});
|
||
} else {
|
||
uni.navigateTo({
|
||
url: `/pages/melee-battle?battleId=${result.matchId}`,
|
||
});
|
||
}
|
||
return;
|
||
}
|
||
if (game.value.roomID) {
|
||
uni.navigateTo({
|
||
url: "/pages/battle-room?roomNumber=" + game.value.roomID,
|
||
});
|
||
} else {
|
||
updateGame(false, "");
|
||
}
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
});
|
||
const gameOver = () => {
|
||
updateGame(false, "");
|
||
};
|
||
onMounted(() => {
|
||
uni.$on("game-over", gameOver);
|
||
});
|
||
onBeforeUnmount(() => {
|
||
uni.$off("game-over", gameOver);
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<view
|
||
v-if="game.inBattle || game.roomID"
|
||
class="back-to-game"
|
||
@click="onClick"
|
||
>
|
||
<image src="../static/back-to-game-bg.png" mode="widthFix" />
|
||
<block v-if="game.inBattle">
|
||
<image src="../static/pk-icon.png" mode="widthFix" />
|
||
<text>返回进行中的对局</text>
|
||
</block>
|
||
<block v-else-if="game.roomID">
|
||
<text>返回房间</text>
|
||
</block>
|
||
<image src="../static/back.png" mode="widthFix" />
|
||
</view>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.back-to-game {
|
||
position: fixed;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
width: 56vw;
|
||
left: calc(50% - 28vw);
|
||
top: 12%;
|
||
z-index: 999;
|
||
}
|
||
.back-to-game > image:first-child {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100rpx;
|
||
}
|
||
.back-to-game > image:nth-child(2) {
|
||
position: relative;
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
.back-to-game > text {
|
||
position: relative;
|
||
font-size: 14px;
|
||
}
|
||
.back-to-game > image:last-child {
|
||
position: relative;
|
||
width: 15px;
|
||
margin-left: 5px;
|
||
transform: rotate(180deg);
|
||
}
|
||
</style>
|