UI优化

src/components/Container.vue

@@ -3,6 +3,7 @@ import { ref, onMounted } from "vue";
 import AppBackground from "@/components/AppBackground.vue";
 import Header from "@/components/Header.vue";
 import ScreenHint from "@/components/ScreenHint.vue";
+import { getCurrentGameAPI } from "@/apis";
 defineProps({
   title: {
     type: String,
@@ -27,16 +28,21 @@ defineProps({
 });
 const isIos = ref(true);
 const showHint = ref(false);
-const hintMessage = ref("");
+const hintType = ref(0);
 onMounted(() => {
   const deviceInfo = uni.getDeviceInfo();
   isIos.value = deviceInfo.osName === "ios";
 });
-const showGlobalHint = (message) => {
-  hintMessage.value = message;
+const showGlobalHint = (type) => {
+  hintType.value = type;
   showHint.value = true;
 };
 uni.$showHint = showGlobalHint;
+
+const backToGame = async () => {
+  const result = await getCurrentGameAPI();
+  console.log(111, result);
+};
 </script>
 
 <template>
@@ -45,12 +51,23 @@ uni.$showHint = showGlobalHint;
     <Header v-if="!isHome" :title="title" :onBack="onBack" />
     <view
       class="content"
-      :style="{ height: isHome ? '100vh' : `calc(100vh - ${isIos ? 98 : 95}px)`, overflow }"
+      :style="{
+        height: isHome ? '100vh' : `calc(100vh - ${isIos ? 98 : 95}px)`,
+        overflow,
+      }"
     >
       <slot></slot>
     </view>
-    <ScreenHint :show="showHint" :onClose="() => (showHint = false)">
-      {{ hintMessage }}
+    <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>
@@ -66,4 +83,32 @@ uni.$showHint = showGlobalHint;
   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>