Files
shoot-miniprograms/src/components/BackToGame.vue
2025-07-22 00:01:29 +08:00

80 lines
1.7 KiB
Vue

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { onShow } from "@dcloudio/uni-app";
import { isGamingAPI, getCurrentGameAPI } from "@/apis";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user } = storeToRefs(store);
const props = defineProps({
signin: {
type: Function,
default: () => {},
},
});
const show = ref(false);
onShow(async () => {
if (user.value.id) {
const isGaming = await isGamingAPI();
show.value = isGaming;
}
});
const onClick = async () => {
const isGaming = await isGamingAPI();
show.value = isGaming;
if (isGaming) {
const result = await getCurrentGameAPI();
}
};
const gameOver = () => {
show.value = false;
};
onMounted(() => {
uni.$on("game-over", gameOver);
});
onUnmounted(() => {
uni.$off("game-over", gameOver);
});
</script>
<template>
<view v-if="show" class="back-to-game" @click="onClick">
<image src="../static/back-to-game-bg.png" mode="widthFix" />
<image src="../static/pk-icon.png" mode="widthFix" />
<text>返回进行中的对局</text>
<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%;
}
.back-to-game > image:nth-child(2) {
position: relative;
width: 60px;
}
.back-to-game > text:nth-child(3) {
position: relative;
font-size: 14px;
}
.back-to-game > image:nth-child(4) {
position: relative;
width: 15px;
margin-left: 5px;
transform: rotate(180deg);
}
</style>