shoot-miniprograms/src/components/Container.vue

<script setup>
import { ref, onMounted } 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 { getCurrentGameAPI } from "@/apis";
import { debounce } from "@/util";
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,
  },
});
const isIos = ref(true);
const showHint = ref(false);
const hintType = ref(0);
const showGlobalHint = (type) => {
  hintType.value = type;
  showHint.value = true;
};
onMounted(() => {
  const deviceInfo = uni.getDeviceInfo();
  isIos.value = deviceInfo.osName === "ios";
});
onShow(() => {
  uni.$showHint = showGlobalHint;
  showHint.value = false;
});
const backToGame = debounce(async () => {
  const result = await getCurrentGameAPI();
});
</script>

<template>
  <view>
    <AppBackground :type="bgType" />
    <Header v-if="!isHome" :title="title" :onBack="onBack" />
    <view
      class="content"
      :style="{
        height: isHome ? '100vh' : `calc(100vh - ${isIos ? 98 : 95}px)`,
        overflow,
      }"
    >
      <slot></slot>
    </view>
    <ScreenHint :show="showHint">
      <view v-if="hintType === 1" class="back-to-game">
        <text>您还有正在进行中的对局，是否进入</text>
        <view>
          <button hover-class="none" @click="backToGame">进入</button>
          <button hover-class="none" @click="() => (showHint = false)">
            不进入
          </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;
}
.back-to-game {
  flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  width: 100%;
  font-size: 14px;
}
.back-to-game > view {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 50rpx;
  width: 100%;
}
.back-to-game > view > button {
  padding: 12px;
  border-radius: 20px;
  background-color: #fff6;
  color: #fff;
  width: 45%;
  font-size: 16px;
}
.back-to-game > view > button:first-child {
  background-color: #fed847;
  color: #000;
}
</style>