功能完善

src/pages/team-match.vue

@@ -12,6 +12,7 @@ import BattleFooter from "@/components/BattleFooter.vue";
 import ScreenHint from "@/components/ScreenHint.vue";
 import SButton from "@/components/SButton.vue";
 import Matching from "@/components/Matching.vue";
+import SModal from "@/components/SModal.vue";
 import { matchGameAPI, readyGameAPI } from "@/apis";
 import { MESSAGETYPES, roundsName, getMessageTypeName } from "@/constants";
 import useStore from "@/store";
@@ -40,6 +41,7 @@ const redPoints = ref(0);
 const bluePoints = ref(0);
 const showRoundTip = ref(false);
 const onComplete = ref(null);
+const showModal = ref(false);
 
 onLoad(async (options) => {
   gameType.value = options.gameType;
@@ -130,19 +132,33 @@ async function onReceiveMessage(messages = []) {
     }
   });
 }
+const onBack = () => {
+  if (battleId.value) {
+    showModal.value = true;
+  } else {
+    uni.navigateBack();
+  }
+};
+const exitRoom = async () => {
+  uni.navigateBack();
+};
 onMounted(() => {
   uni.$on("socket-inbox", onReceiveMessage);
 });
 onUnmounted(() => {
   uni.$off("socket-inbox", onReceiveMessage);
-  if (gameType.value && teamSize.value) {
-    matchGameAPI(true, gameType.value, teamSize.value);
+  if (gameType.value && teamSize.value && !battleId.value) {
+    matchGameAPI(false, gameType.value, teamSize.value);
   }
 });
 </script>
 
 <template>
-  <Container :title="battleId ? '1V1排位赛' : '搜索对手...'" :bgType="1">
+  <Container
+    :title="battleId ? '1V1排位赛' : '搜索对手...'"
+    :bgType="1"
+    :onBack="onBack"
+  >
     <view class="container">
       <block v-if="battleId">
         <BattleHeader
@@ -214,6 +230,13 @@ onUnmounted(() => {
           :onComplete="onComplete"
         />
       </block>
+      <SModal :show="showModal" :onClose="() => (showModal = false)">
+        <view class="modal">
+          <SButton :onClick="exitRoom" width="200px" :rounded="20">
+            退出比赛
+          </SButton>
+        </view>
+      </SModal>
     </view>
     <view :style="{ marginBottom: '20px' }">
       <SButton v-if="battleId && !start" :onClick="readyToGo">准备完毕</SButton>
@@ -226,4 +249,11 @@ onUnmounted(() => {
   width: 100%;
   height: 100%;
 }
+.modal {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
 </style>