大乱斗详情UI更新

src/components/BattleHeader.vue

@@ -1,5 +1,6 @@
 <script setup>
 import Avatar from "@/components/Avatar.vue";
+import { meleeAvatarColors } from "@/constants";
 defineProps({
   players: {
     type: Array,
@@ -22,7 +23,6 @@ defineProps({
     default: 2,
   },
 });
-const bgColors = ["#364469", "#692735", "#934B4B", "#A98B69", "#8268A2"];
 </script>
 
 <template>
@@ -35,7 +35,10 @@ const bgColors = ["#364469", "#692735", "#934B4B", "#A98B69", "#8268A2"];
       <view
         v-for="(player, index) in players"
         :key="index"
-        :style="{ backgroundColor: bgColors[index] }"
+        :style="{
+          backgroundColor: meleeAvatarColors[index],
+          width: `${Math.max(100 / players.length, 18)}vw`,
+        }"
       >
         <Avatar
           :src="player.avatar"
@@ -114,11 +117,10 @@ const bgColors = ["#364469", "#692735", "#934B4B", "#A98B69", "#8268A2"];
   display: flex;
   height: 85px;
   width: 100%;
-  background-color: #364469;
   margin-top: 15px;
+  overflow-x: auto;
 }
 .players-melee > view {
-  width: 20%;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -126,6 +128,7 @@ const bgColors = ["#364469", "#692735", "#934B4B", "#A98B69", "#8268A2"];
   color: #fff9;
   font-size: 12px;
   padding-top: 5px;
+  flex: 0 0 auto;
 }
 .player-name {
   margin-top: 5px;

src/pages/match-detail.vue

@@ -20,8 +20,8 @@ const data = ref({
 
 onLoad(async (options) => {
   if (options.id) {
-    battleId.value = options.id;
+    battleId.value = options.id || "BATTLE-1750946182966867665-941";
-    const result = await getGameAPI(options.id);
+    const result = await getGameAPI(battleId.value);
     data.value = result;
     if (result.mode === 1) {
       blueTeam.value = Object.values(result.bluePlayers || {});

src/pages/melee-bow-data.vue

@@ -4,7 +4,6 @@ import { onLoad } from "@dcloudio/uni-app";
 import Container from "@/components/Container.vue";
 import BowTarget from "@/components/BowTarget.vue";
 import Avatar from "@/components/Avatar.vue";
-import { roundsName } from "@/constants";
 import { getGameAPI } from "@/apis";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
@@ -13,17 +12,6 @@ const { user } = storeToRefs(store);
 const scores = ref([]);
 const currentUser = ref({});
 const data = ref({});
-onLoad(async (options) => {
-  if (options.battleId) {
-    const result = await getGameAPI(options.battleId);
-    data.value = result;
-    const mine = result.players.find((p) => p.playerId === user.value.id);
-    currentUser.value = mine;
-    if (mine && mine.arrowHistory) {
-      scores.value = mine.arrowHistory;
-    }
-  }
-});
 const onSelect = (userId) => {
   const user = data.value.players.find((p) => p.playerId === userId);
   currentUser.value = user;
@@ -31,54 +19,42 @@ const onSelect = (userId) => {
     scores.value = user.arrowHistory;
   }
 };
+onLoad(async (options) => {
+  if (options.battleId) {
+    const result = await getGameAPI(options.battleId);
+    data.value = result;
+    if (result.players && result.players[0]) {
+      onSelect(result.players[0].playerId);
+    }
+  }
+});
 </script>
 
 <template>
   <Container title="5人大乱斗 - 靶纸">
     <view class="container">
-      <view class="rank-rows">
+      <view class="players" v-if="data.players">
         <view
           v-for="(player, index) in data.players"
           :key="index"
+          :style="{
+            width: `${Math.max(100 / data.players.length, 18)}vw`,
+            backgroundColor:
+              player.playerId === currentUser.playerId ? '#aba57a' : '',
+            color: player.playerId === currentUser.playerId ? '#000' : '#fff9',
+          }"
           @click="() => onSelect(player.playerId)"
         >
-          <image
+          <Avatar
-            v-if="index === 0"
+            :src="player.avatar"
-            src="../static/champ1.png"
+            :size="40"
-            mode="widthFix"
+            :rank="showRank ? index + 1 : 0"
           />
-          <image
+          <text>{{ player.name }}</text>
-            v-if="index === 1"
-            src="../static/champ2.png"
-            mode="widthFix"
-          />
-          <image
-            v-if="index === 2"
-            src="../static/champ3.png"
-            mode="widthFix"
-          />
-          <view v-if="index > 2" class="rank-view">{{ index + 1 }}</view>
-          <Avatar :src="player.avatar" :size="24" />
-          <text
-            >积分
-            {{
-              player.totalScore > 0
-                ? "+" + player.totalScore
-                : player.totalScore
-            }}分</text
-          >
-          <text>{{ player.totalRings }}环</text>
-          <text v-for="(arrow, index2) in player.arrowHistory" :key="index2">
-            {{ arrow.ring }}环
-          </text>
         </view>
       </view>
-      <view :style="{ margin: '20px 0' }">
+      <view :style="{ marginTop: '10px' }">
-        <BowTarget
+        <BowTarget :scores="scores" :showLatestArrow="false" />
-          :scores="scores"
-          :showLatestArrow="false"
-          :avatar="currentUser ? currentUser.avatar : ''"
-        />
       </view>
       <view class="score-text"
         ><text :style="{ color: '#fed847' }">{{ scores.length }}</text
@@ -108,12 +84,36 @@ const onSelect = (userId) => {
   justify-content: center;
   align-items: center;
 }
+.players {
+  display: flex;
+  height: 85px;
+  width: 100%;
+  overflow-x: auto;
+  background-color: #fff3;
+}
+.players > view {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  padding-top: 5px;
+  flex: 0 0 auto;
+}
+.players > view > text {
+  margin-top: 5px;
+  width: 80%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: center;
+}
 .score-text {
   width: 100%;
   color: #fff;
   text-align: center;
   font-size: 16px;
-  margin-bottom: 6px;
+  margin-bottom: 20px;
 }
 .score-row {
   margin: 10px;
@@ -134,54 +134,4 @@ const onSelect = (userId) => {
   font-size: 24px;
   margin: 3px;
 }
-.rank-rows {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  border-top: 1px solid #fff3;
-}
-.rank-rows > view {
-  width: clac(100% - 20px);
-  color: #fff9;
-  border-bottom: 1px solid #fff3;
-  padding: 7px 10px;
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-  overflow-x: auto;
-}
-.rank-rows > view::-webkit-scrollbar {
-  width: 0;
-  height: 0;
-  color: transparent;
-}
-.rank-rows > view > image:first-child,
-.rank-rows > view > view:first-child {
-  width: 20px;
-  height: 20px;
-  line-height: 20px;
-  text-align: center;
-  font-size: 12px;
-  margin-right: 10px;
-  flex: 0 0 auto;
-}
-.rank-rows > view > view:first-child {
-  background-color: #6d6d6d;
-  border-radius: 50%;
-}
-.rank-rows > view > text {
-  margin-left: 10px;
-  flex: 0 0 auto;
-  display: block;
-  width: 25px;
-}
-.rank-rows > view > text:nth-child(3) {
-  width: 80px;
-}
-.rank-rows > view > text:nth-child(4) {
-  color: #fed847;
-  padding-right: 10px;
-  border-right: 1px solid #fff3;
-  width: 32px;
-}
 </style>