退出房间优化

src/pages/battle-room.vue

@@ -12,6 +12,7 @@ import BattleFooter from "@/components/BattleFooter.vue";
 import BowPower from "@/components/BowPower.vue";
 import ShootProgress from "@/components/ShootProgress.vue";
 import PlayersRow from "@/components/PlayersRow.vue";
+import SModal from "@/components/SModal.vue";
 import { getRoomAPI, destroyRoomAPI, exitRoomAPI, startRoomAPI } from "@/apis";
 import { MESSAGETYPES, roundsName } from "@/constants";
 import useStore from "@/store";
@@ -40,6 +41,7 @@ const roundResults = ref([]);
 const redPoints = ref(0);
 const bluePoints = ref(0);
 const playersScores = ref({});
+const showModal = ref(false);
 onLoad(async (options) => {
   if (options.roomNumber) {
     roomNumber.value = options.roomNumber;
@@ -211,22 +213,38 @@ async function onReceiveMessage(content) {
   });
 }
 
+const onLeaveRoom = () => {
+  if (owner.value.id === user.value.id) {
+    showModal.value = true;
+  } else {
+    uni.navigateBack();
+  }
+};
+
+const destroyRoom = async () => {
+  await destroyRoomAPI(roomNumber.value);
+  uni.navigateBack();
+};
+
+const exitRoom = async () => {
+  await exitRoomAPI(roomNumber.value);
+  uni.navigateBack();
+};
+
 onMounted(() => {
   uni.$on("socket-inbox", onReceiveMessage);
 });
 
 onUnmounted(() => {
   uni.$off("socket-inbox", onReceiveMessage);
-  if (owner.value.id === user.value.id) {
-    destroyRoomAPI(roomNumber.value);
-  } else if (roomNumber.value) {
+  if (owner.value.id !== user.value.id) {
     exitRoomAPI(roomNumber.value);
   }
 });
 </script>
 
 <template>
-  <Container title="对战">
+  <Container title="对战" :onBack="onLeaveRoom">
     <view class="standby-phase" v-if="step === 1">
       <Guide>
         <view :style="{ display: 'flex', flexDirection: 'column' }">
@@ -333,6 +351,12 @@ onUnmounted(() => {
       />
     </view>
     <Timer :seq="timerSeq" />
+    <SModal :show="showModal" :onClose="() => (showModal = false)">
+      <view class="btns">
+        <button @click="exitRoom">暂时离开</button>
+        <button @click="destroyRoom">解散房间</button>
+      </view>
+    </SModal>
   </Container>
 </template>
 
@@ -421,4 +445,20 @@ onUnmounted(() => {
   width: 20px;
   margin-right: 2px;
 }
+.btns {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.btns > button {
+  color: #000;
+  background-color: #fed847;
+  padding: 10px;
+  width: 200px;
+  border-radius: 20px;
+  font-size: 14px;
+  margin: 10px;
+}
 </style>