页面调整

src/pages/melee-match.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, onUnmounted } from "vue";
+import { ref, watch, onMounted, onUnmounted } from "vue";
 import { onLoad } from "@dcloudio/uni-app";
 import Container from "@/components/Container.vue";
 import BowTarget from "@/components/BowTarget.vue";
@@ -32,10 +32,26 @@ const tips = ref("即将开始...");
 const seq = ref(0);
 const timerSeq = ref(0);
 const players = ref([]);
+const playersSorted = ref([]);
 const playersScores = ref({});
 const halfTimeTip = ref(false);
 const onComplete = ref(null);
 
+watch(
+  () => [players.value, playersScores.value],
+  ([n_players, n_scores]) => {
+    if (n_players.length) {
+      playersSorted.value = Object.keys(n_scores)
+        .sort((a, b) => n_scores[b].length - n_scores[a].length)
+        .map((pid) => n_players.find((p) => p.id == pid));
+    }
+  },
+  {
+    deep: true, // 添加深度监听
+    immediate: true,
+  }
+);
+
 onLoad(async (options) => {
   if (options.battleId) {
     const battleInfo = uni.getStorageSync(`battle-${options.battleId}`);
@@ -188,14 +204,11 @@ onUnmounted(() => {
         <view :style="{ paddingBottom: '20px' }">
           <PlayerScore
             v-if="start"
-            v-for="(player, index) in players"
+            v-for="(player, index) in playersSorted"
             :key="index"
             :name="player.name"
             :avatar="player.avatar"
             :scores="playersScores[player.id] || []"
-            :done="
-              playersScores[player.id] && playersScores[player.id].length === 12
-            "
           />
         </view>
         <Timer :seq="timerSeq" :callBack="readyToGo" />