流程完善

src/pages/battle-result.vue

@@ -19,7 +19,7 @@ onLoad(async (options) => {
   battleId.value = options.battleId;
   const result = await getGameAPI(
     // options.battleId || "BATTLE-1750867490990424058-718"
-    options.battleId || "BATTLE-1750688536849458226-518"
+    options.battleId || "BATTLE-1752563964391008873-624"
   );
   data.value = result;
   if (result.mode === 1 && result.redPlayers[user.value.id]) {
@@ -285,8 +285,8 @@ const checkBowData = () => {
   margin: 0 20px;
 }
 .players {
-  flex-wrap: wrap;
   display: flex;
+  flex-direction: column;
   overflow: auto;
   width: calc(100% - 60px);
   color: #fff6;

src/pages/battle-room.vue

@@ -16,6 +16,7 @@ import SModal from "@/components/SModal.vue";
 import ScreenHint from "@/components/ScreenHint.vue";
 import RoundEndTip from "@/components/RoundEndTip.vue";
 import TestDistance from "@/components/TestDistance.vue";
+import PlayerScore from "@/components/PlayerScore.vue";
 import { getRoomAPI, destroyRoomAPI, exitRoomAPI, startRoomAPI } from "@/apis";
 import { MESSAGETYPES, roundsName, getMessageTypeName } from "@/constants";
 import useStore from "@/store";
@@ -53,7 +54,7 @@ const playersScores = ref({});
 const showModal = ref(false);
 const halfTimeTip = ref(false);
 const isFinalShoot = ref(false);
-const total = ref(90);
+const total = ref(15);
 
 watch(
   () => [players.value, playersScores.value],
@@ -132,7 +133,7 @@ onLoad(async (options) => {
             }, 300);
           } else if (remain > 90 && remain <= 110) {
             halfTimeTip.value = true;
-            countDown.value = 20;
+            total.value = 20;
             tips.value = "准备下半场";
             setTimeout(() => {
               uni.$emit("update-ramain", 110 - remain);
@@ -162,7 +163,6 @@ onLoad(async (options) => {
       return false;
     });
     if (result.battleType === 1) {
-      total.value = 15;
       if (user.value.id !== owner.value.id) {
         opponent.value = {
           id: user.value.id,
@@ -183,12 +183,21 @@ onLoad(async (options) => {
         });
       }
     } else if (result.battleType === 2) {
-      result.members.forEach((m) => {
-        players.value.push(m.userInfo);
+      const ownerIndex = result.members.findIndex(
+        (m) => m.userInfo.id === result.creator
+      );
+      if (ownerIndex !== -1) {
+        players.value.push(result.members[ownerIndex].userInfo);
+      } else {
+        players.value.push({});
+      }
+      result.members.forEach((m, index) => {
+        if (ownerIndex !== index) players.value.push(m.userInfo);
       });
     }
   }
 });
+
 const startGame = async () => {
   const result = await startRoomAPI(room.value.number);
   timerSeq.value += 1;
@@ -208,11 +217,19 @@ async function onReceiveMessage(messages = []) {
       // 这里会掉多次;
       timerSeq.value += 1;
       battleId.value = msg.id;
+      step.value = 2;
       if (room.value.battleType === 1) {
         redTeam.value = msg.groupUserStatus.redTeam;
         blueTeam.value = msg.groupUserStatus.blueTeam;
+      } else if (room.value.battleType === 2) {
+        players.value = [
+          ...msg.groupUserStatus.redTeam,
+          ...msg.groupUserStatus.blueTeam,
+        ];
+        players.value.forEach((p) => {
+          playersScores.value[p.id] = [];
+        });
       }
-      step.value = 2;
     }
     if (msg.roomNumber === roomNumber.value) {
       if (msg.constructor === MESSAGETYPES.UserEnterRoom) {
@@ -232,11 +249,19 @@ async function onReceiveMessage(messages = []) {
           }
         }
         if (room.value.battleType === 2) {
-          players.value.push({
-            id: msg.userId,
-            name: msg.name,
-            avatar: msg.avatar,
-          });
+          if (room.value.creator === msg.userId) {
+            players.value[0] = {
+              id: msg.userId,
+              name: msg.name,
+              avatar: msg.avatar,
+            };
+          } else {
+            players.value.push({
+              id: msg.userId,
+              name: msg.name,
+              avatar: msg.avatar,
+            });
+          }
         }
       }
       if (!start.value && msg.constructor === MESSAGETYPES.UserExitRoom) {
@@ -281,14 +306,17 @@ async function onReceiveMessage(messages = []) {
           redArrows: [],
           blueArrows: [],
         });
+        total.value = 15;
       }
       if (msg.constructor === MESSAGETYPES.MeleeAllReady) {
         start.value = true;
         startCount.value = true;
+        step.value = 3;
         seq.value += 1;
         timerSeq.value = 0;
         tips.value = "请连续射出6支箭";
         scores.value = [];
+        total.value = 90;
       }
       if (msg.constructor === MESSAGETYPES.ToSomeoneShoot) {
         if (room.value.battleType === 1) {
@@ -373,6 +401,7 @@ async function onReceiveMessage(messages = []) {
       }
       if (msg.constructor === MESSAGETYPES.HalfTimeOver) {
         startCount.value = false;
+        total.value = 20;
         halfTimeTip.value = true;
         tips.value = "准备下半场";
       }
@@ -488,7 +517,7 @@ onUnmounted(() => {
         >
         <SButton
           v-if="user.id === owner.id && room.battleType === 2"
-          :disabled="players.length < 2"
+          :disabled="players.length < 3"
           :onClick="startGame"
           >进入大乱斗</SButton
         >
@@ -504,7 +533,7 @@ onUnmounted(() => {
       />
       <TestDistance :guide="false" />
     </view>
-    <view v-if="step === 3">
+    <view v-if="step === 3" :style="{ width: '100%' }">
       <ShootProgress
         :tips="tips"
         :seq="seq"
@@ -512,6 +541,7 @@ onUnmounted(() => {
         :total="total"
         :currentRound="currentRound"
         :battleId="battleId"
+        :melee="room.battleType === 2"
       />
       <PlayersRow
         v-if="room.battleType === 1"
@@ -529,13 +559,13 @@ onUnmounted(() => {
         :blueScores="blueScores"
       />
       <BattleFooter
-        v-if="room.battleType === 1"
+        v-if="roundResults.length"
         :roundResults="roundResults"
         :redPoints="redPoints"
         :bluePoints="bluePoints"
       />
       <PlayerScore
-        v-if="room.battleType === 2"
+        v-if="playersSorted.length"
         v-for="(player, index) in playersSorted"
         :key="index"
         :name="player.name"

src/pages/melee-match.vue

@@ -195,6 +195,7 @@ onUnmounted(() => {
           :start="start"
           :tips="tips"
           :total="countDown"
+          :melee="true"
         />
         <view v-if="start" class="user-row">
           <Avatar :src="user.avatar" :size="35" />
@@ -248,15 +249,4 @@ onUnmounted(() => {
   width: 100%;
   height: 100%;
 }
-.half-time-tip {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-.half-time-tip > text:last-child {
-  margin-top: 20px;
-  color: #fff9;
-}
 </style>