功能完善

src/pages/melee-match.vue

@@ -12,6 +12,7 @@ import SButton from "@/components/SButton.vue";
 import Avatar from "@/components/Avatar.vue";
 import ScreenHint from "@/components/ScreenHint.vue";
 import Matching from "@/components/Matching.vue";
+import SModal from "@/components/SModal.vue";
 import { matchGameAPI, readyGameAPI } from "@/apis";
 import { MESSAGETYPES, getMessageTypeName } from "@/constants";
 import useStore from "@/store";
@@ -34,6 +35,7 @@ const players = ref([]);
 const playersScores = ref({});
 const halfTimeTip = ref(false);
 const onComplete = ref(null);
+const showModal = ref(false);
 
 onLoad(async (options) => {
   gameType.value = options.gameType;
@@ -109,6 +111,16 @@ 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);
 });
@@ -121,7 +133,11 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <Container :title="battleId ? '大乱斗排位赛' : '搜索对手...'" :bgType="1">
+  <Container
+    :title="battleId ? '大乱斗排位赛' : '搜索对手...'"
+    :bgType="1"
+    :onBack="onBack"
+  >
     <view class="container">
       <block v-if="battleId">
         <BattleHeader v-if="players.length" :players="players" />
@@ -183,6 +199,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>