退出房间优化

src/components/Container.vue

@@ -11,6 +11,10 @@ defineProps({
     type: Number,
     default: 0,
   },
+  onBack: {
+    type: Function,
+    default: null,
+  },
 });
 const isIos = ref(true);
 onMounted(() => {
@@ -22,7 +26,7 @@ onMounted(() => {
 <template>
   <view>
     <AppBackground :type="bgType" />
-    <Header :title="title" />
+    <Header :title="title" :onBack="onBack" />
     <view
       class="content"
       :style="{ height: `calc(100vh - ${isIos ? 105 : 95}px)` }"

src/components/Header.vue

@@ -7,11 +7,15 @@ const store = useStore();
 const { device } = storeToRefs(store);
 const isIos = ref(true);
 
-defineProps({
+const props = defineProps({
   title: {
     type: String,
     default: "",
   },
+  onBack: {
+    type: Function,
+    default: null,
+  },
 });
 
 const simulShoot = async () => {
@@ -20,6 +24,11 @@ const simulShoot = async () => {
   }
 };
 
+const onClick = () => {
+  if (props.onBack) props.onBack();
+  else uni.navigateBack();
+};
+
 onMounted(() => {
   const deviceInfo = uni.getDeviceInfo();
   isIos.value = deviceInfo.osName === "ios";
@@ -28,9 +37,9 @@ onMounted(() => {
 
 <template>
   <view class="container" :style="{ paddingTop: isIos ? '35px' : '25px' }">
-    <navigator open-type="navigateBack" class="back-btn">
+    <view class="back-btn" @click="onClick">
       <image src="../static/back.png" mode="widthFix" />
-    </navigator>
+    </view>
     <text>{{ title }}</text>
     <view class="simul" @click="simulShoot">模拟射箭</view>
   </view>

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>