172 lines
4.1 KiB
Vue
172 lines
4.1 KiB
Vue
<script setup>
|
||
import { ref, onMounted, onBeforeUnmount } from "vue";
|
||
import { onShow } from "@dcloudio/uni-app";
|
||
import AppBackground from "@/components/AppBackground.vue";
|
||
import Header from "@/components/Header.vue";
|
||
import ScreenHint from "@/components/ScreenHint.vue";
|
||
import BackToGame from "@/components/BackToGame.vue";
|
||
import { getCurrentGameAPI } from "@/apis";
|
||
import { debounce } from "@/util";
|
||
const props = defineProps({
|
||
title: {
|
||
type: String,
|
||
default: "",
|
||
},
|
||
bgType: {
|
||
type: Number,
|
||
default: 0,
|
||
},
|
||
onBack: {
|
||
type: Function,
|
||
default: null,
|
||
},
|
||
overflow: {
|
||
type: String,
|
||
default: "auto",
|
||
},
|
||
isHome: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
showBackToGame: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
bgColor: {
|
||
type: String,
|
||
default: "#050b19",
|
||
},
|
||
whiteBackArrow: {
|
||
type: Boolean,
|
||
default: true,
|
||
},
|
||
});
|
||
const showHint = ref(false);
|
||
const hintType = ref(0);
|
||
const capsuleHeight = ref(0);
|
||
const showGlobalHint = (type) => {
|
||
hintType.value = type;
|
||
showHint.value = true;
|
||
};
|
||
const hideGlobalHint = () => {
|
||
showHint.value = false;
|
||
};
|
||
onMounted(() => {
|
||
const menuBtnInfo = uni.getMenuButtonBoundingClientRect();
|
||
capsuleHeight.value = menuBtnInfo.top - 9;
|
||
});
|
||
onBeforeUnmount(() => {
|
||
// const pages = getCurrentPages();
|
||
// const currentPage = pages[pages.length - 1];
|
||
// uni.setStorageSync("last-route", currentPage.route);
|
||
});
|
||
onShow(() => {
|
||
uni.$showHint = showGlobalHint;
|
||
uni.$hideHint = hideGlobalHint;
|
||
showHint.value = false;
|
||
});
|
||
const backToGame = debounce(async () => {
|
||
const result = await getCurrentGameAPI();
|
||
});
|
||
const goBack = () => {
|
||
uni.navigateBack();
|
||
};
|
||
</script>
|
||
|
||
<template>
|
||
<view :style="{ paddingTop: capsuleHeight + 'px' }">
|
||
<AppBackground :type="bgType" :bgColor="bgColor" />
|
||
<Header
|
||
v-if="!isHome"
|
||
:title="title"
|
||
:onBack="onBack"
|
||
:whiteBackArrow="whiteBackArrow"
|
||
/>
|
||
<BackToGame v-if="showBackToGame" />
|
||
<view
|
||
class="content"
|
||
:style="{
|
||
height: `calc(100vh - ${capsuleHeight + (isHome ? 0 : 50)}px)`,
|
||
overflow,
|
||
}"
|
||
>
|
||
<slot></slot>
|
||
</view>
|
||
<ScreenHint :show="showHint">
|
||
<view v-if="hintType === 1" class="tip-content">
|
||
<text>完成进行中的对局才能开启新的。</text>
|
||
<text>您有正在进行中的对局，是否进入?</text>
|
||
<view>
|
||
<button hover-class="none" @click="() => (showHint = false)">
|
||
不进入
|
||
</button>
|
||
<button hover-class="none" @click="backToGame">进入</button>
|
||
</view>
|
||
</view>
|
||
<view v-if="hintType === 2" class="tip-content">
|
||
<text>离开比赛可能会导致比赛失败，</text>
|
||
<text>确认离开吗？</text>
|
||
<view>
|
||
<button hover-class="none" @click="goBack">离开比赛</button>
|
||
<button hover-class="none" @click="() => (showHint = false)">
|
||
继续比赛
|
||
</button>
|
||
</view>
|
||
</view>
|
||
<view v-if="hintType === 3" class="tip-content">
|
||
<text>今天不玩了吗？</text>
|
||
<view>
|
||
<button hover-class="none" @click="() => (showHint = false)">
|
||
取消
|
||
</button>
|
||
<button hover-class="none" @click="goBack">确认</button>
|
||
</view>
|
||
</view>
|
||
</ScreenHint>
|
||
</view>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.content {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
overflow-x: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
overflow-x: hidden;
|
||
}
|
||
.tip-content {
|
||
flex-direction: column;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
width: 100%;
|
||
font-size: 14px;
|
||
}
|
||
.tip-content > text {
|
||
text-align: center;
|
||
}
|
||
.tip-content > view {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
margin-top: 50rpx;
|
||
width: 100%;
|
||
}
|
||
.tip-content > view > button {
|
||
padding: 12px;
|
||
border-radius: 20px;
|
||
background-color: #fff6;
|
||
color: #fff;
|
||
width: 45%;
|
||
font-size: 16px;
|
||
}
|
||
.tip-content > view > button:last-child {
|
||
background-color: #fed847;
|
||
color: #000;
|
||
}
|
||
</style>
|