排位赛内容完善

src/apis.js

@@ -157,8 +157,9 @@ export const getGameAPI = async (battleId) => {
       data.players.push({
         ...item.playerBattleStats,
         arrowHistory: item.roundRecords[0].arrowHistory,
-      })
       });
+    });
+    data.players = data.players.sort((a, b) => b.totalScore - a.totalScore);
   }
   console.log("game result:", result);
   console.log("format data:", data);

src/components/BattleHeader.vue

@@ -1,9 +1,9 @@
 <script setup>
 import Avatar from "@/components/Avatar.vue";
 defineProps({
-  isMelee: {
+  players: {
-    type: Boolean,
+    type: Array,
-    default: false,
+    default: () => [],
   },
   blueTeam: {
     type: Array,
@@ -14,22 +14,30 @@ defineProps({
     default: () => [],
   },
 });
+const bgColors = ["#364469", "#692735", "#934B4B", "#A98B69", "#8268A2 "];
 </script>
 
 <template>
   <view class="container">
     <image
-      :src="`../static/battle-header${isMelee ? '-melee' : ''}.png`"
+      :src="`../static/battle-header${blueTeam.length ? '' : '-melee'}.png`"
       mode="widthFix"
     />
-    <view v-if="isMelee" class="players-melee">
+    <view v-if="!blueTeam.length" class="players-melee">
-      <view></view>
+      <view
+        v-for="(player, index) in players"
+        :key="index"
+        :style="{ backgroundColor: bgColors[index] }"
+      >
+        <Avatar :src="player.avatar" :size="40" />
+        <text class="player-name">{{ player.name }}</text>
       </view>
-    <view v-if="!isMelee" class="players">
+    </view>
+    <view v-if="blueTeam.length" class="players">
       <view>
         <block v-if="blueTeam[0]">
           <Avatar :src="blueTeam[0].avatar" frame />
-          <text>{{ blueTeam[0].name }}</text>
+          <text class="player-name">{{ blueTeam[0].name }}</text>
           <image
             v-if="blueTeam[0].winner"
             src="../static/winner-badge.png"
@@ -57,6 +65,7 @@ defineProps({
   width: 100%;
   position: relative;
   margin-bottom: 10px;
+  padding-top: 5px;
 }
 .container > image:first-child {
   position: absolute;
@@ -69,17 +78,17 @@ defineProps({
 }
 .players > view {
   width: 50%;
-  height: 80px;
+  height: 85px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   color: #fff9;
   font-size: 14px;
-  margin-top: 20px;
+  margin-top: 15px;
-  padding-top: 5px;
   overflow: hidden;
   position: relative;
+  padding-top: 5px;
 }
 .players > view:first-child {
   background-color: #364469;
@@ -87,13 +96,35 @@ defineProps({
 .players > view:last-child {
   background-color: #692735;
 }
-.players > view > text {
-  margin-top: 5px;
-}
 .players > view > image:last-child {
   position: absolute;
   width: 60px;
   right: 0;
   bottom: 0;
 }
+.players-melee {
+  display: flex;
+  height: 85px;
+  width: 100%;
+  background-color: #364469;
+  margin-top: 15px;
+}
+.players-melee > view {
+  width: 20%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #fff9;
+  font-size: 14px;
+  padding-top: 5px;
+}
+.player-name {
+  margin-top: 5px;
+  width: 80%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: center;
+}
 </style>

src/components/MeleeResult.vue

@@ -89,7 +89,7 @@ watch(
   position: fixed;
   top: 0;
   left: 0;
-  background-color: rgba(0, 0, 0, 0.8);
+  background-color: #232323;
   flex-direction: column;
   justify-content: center;
   align-items: center;

src/components/PlayerScore.vue

@@ -63,6 +63,7 @@ const rowCount = new Array(6).fill(0);
   border-radius: 50%;
   margin-right: 10px;
   margin-left: -30px;
+  flex: 0 0 auto;
 }
 .container > text:nth-child(2) {
   font-size: 14px;

src/components/TeamResult.vue

@@ -104,7 +104,7 @@ watch(
   position: fixed;
   top: 0;
   left: 0;
-  background-color: rgba(0, 0, 0, 0.8);
+  background-color: #232323;
   flex-direction: column;
   justify-content: center;
   align-items: center;

src/manifest.json

@@ -56,14 +56,7 @@
     "usingComponents": true,
     "darkmode": true,
     "themeLocation": "theme.json",
-    "permission": {
+    "permission": {}
-      "scope.userInfo": {
-        "desc": "用于完善用户资料"
-      },
-      "scope.camera": {
-        "desc": "用于扫描二维码"
-      }
-    }
   },
   "mp-alipay": {
     "usingComponents": true

src/pages/battle-result.vue

@@ -31,6 +31,10 @@ onLoad(async (options) => {
     totalPoints.value = result.redTotal;
     ifWin.value = result.winner === 1;
   }
+  if (result.mode === 2) {
+    const mine = result.players.find((p) => p.playerId === user.value.id);
+    if (mine) totalPoints.value = mine.totalScore;
+  }
 });
 function exit() {
   uni.navigateBack();
@@ -151,7 +155,6 @@ onMounted(async () => {});
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  /* z-index: -1; */
 }
 .tag {
   position: absolute;
@@ -253,7 +256,7 @@ onMounted(async () => {});
   margin: 0 20px;
 }
 .players {
-  color: #fff3;
+  color: #fff6;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -284,9 +287,9 @@ onMounted(async () => {});
   width: 100%;
   top: 0;
   left: 0;
-  z-index: -1;
 }
 .player-crown {
+  position: relative;
   width: 27px;
   margin: 0 15px;
 }
@@ -299,8 +302,10 @@ onMounted(async () => {});
   margin: 0 15px;
   color: #fff;
   background-color: #676767;
+  position: relative;
 }
 .player-title {
+  position: relative;
   display: flex;
   flex-direction: column;
   margin-left: 15px;

src/pages/melee-match.vue

@@ -4,7 +4,8 @@ import { onLoad } from "@dcloudio/uni-app";
 import Container from "@/components/Container.vue";
 import BowTarget from "@/components/BowTarget.vue";
 import ShootProgress from "@/components/ShootProgress.vue";
-import PlayersRow from "@/components/PlayersRow.vue";
+import Guide from "@/components/Guide.vue";
+import BattleHeader from "@/components/BattleHeader.vue";
 import Timer from "@/components/Timer.vue";
 import PlayerScore from "@/components/PlayerScore.vue";
 import SButton from "@/components/SButton.vue";
@@ -114,13 +115,17 @@ onUnmounted(() => {
 <template>
   <Container title="大乱斗排位赛" :bgType="1">
     <view class="container">
+      <BattleHeader v-if="!start" :players="players" />
+      <Guide noBg v-if="!start">
+        <view :style="{ display: 'flex', justifyContent: 'space-between' }">
+          <view :style="{ display: 'flex', flexDirection: 'column' }">
+            <text :style="{ color: '#fed847' }">请预先射几箭测试</text>
+            <text>请确保射击距离只有5米</text>
+          </view>
+          <BowPower :power="45" />
+        </view>
+      </Guide>
       <ShootProgress v-if="start" :tips="tips" />
-      <!-- <PlayersRow
-        v-if="start"
-        :currentShooterId="currentShooterId"
-        :blueTeam="blueTeam"
-        :redTeam="redTeam"
-      /> -->
       <BowTarget
         :avatar="user.avatarUrl"
         :power="power"