1v1排位数据交互完善

src/components/BattleFooter.vue

@@ -4,12 +4,24 @@ defineProps({
     type: Array,
     default: () => [],
   },
+  bluePoints: {
+    type: Number,
+    default: 0,
+  },
+  redPoints: {
+    type: Number,
+    default: 0,
+  },
 });
 </script>
 
 <template>
   <view class="container">
-    <image src="../static/battle-header.png" mode="widthFix" />
+    <view>
+      <image src="../static/battle-header-melee.png" mode="widthFix" />
+      <text>蓝队({{ bluePoints }})</text>
+      <text>红队({{ redPoints }})</text>
+    </view>
     <view class="players">
       <view>
         <view v-for="(result, index) in roundResults" :key="index">
@@ -28,9 +40,11 @@ defineProps({
         <view v-for="(result, index) in roundResults" :key="index">
           <text>Round {{ index + 1 }}</text>
           <view>
-            <text>{{ result.redArrows
+            <text>{{
+              result.redArrows
                 .map((item) => item.ring)
-                .reduce((last, next) => last + next, 0) }}</text>
+                .reduce((last, next) => last + next, 0)
+            }}</text>
             <text>环</text>
           </view>
         </view>
@@ -42,13 +56,29 @@ defineProps({
 <style scoped>
 .container {
   width: 100%;
-  position: relative;
   margin-top: 20px;
 }
-.container > image:first-child {
+.container > view:first-child {
+  position: relative;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  font-size: 13px;
+}
+.container > view:first-child > image:first-child {
   position: absolute;
   width: 100%;
-  top: -10px;
+  top: -6px;
+}
+.container > view:first-child > text {
+  z-index: 1;
+  margin-top: 2px;
+}
+.container > view:first-child > text:nth-child(2) {
+  color: #364469;
+}
+.container > view:first-child > text:nth-child(3) {
+  color: #692735;
 }
 .players {
   display: flex;
@@ -60,7 +90,7 @@ defineProps({
   align-items: center;
   justify-content: center;
   color: #fff;
-  padding-top: 20px;
+  padding-top: 5px;
 }
 .players > view:first-child {
   background-color: #364469;

src/components/BattleHeader.vue

@@ -27,22 +27,26 @@ defineProps({
     </view>
     <view v-if="!isMelee" class="players">
       <view>
-        <Avatar v-if="blueTeam[0]" :src="blueTeam[0].avatar" frame />
-        <text>{{ blueTeam[0].name }}</text>
-        <image
-          v-if="blueTeam[0].winner"
-          src="../static/winner-badge.png"
-          mode="widthFix"
-        />
+        <block v-if="blueTeam[0]">
+          <Avatar :src="blueTeam[0].avatar" frame />
+          <text>{{ blueTeam[0].name }}</text>
+          <image
+            v-if="blueTeam[0].winner"
+            src="../static/winner-badge.png"
+            mode="widthFix"
+          />
+        </block>
       </view>
       <view>
-        <Avatar v-if="redTeam[0]" :src="redTeam[0].avatar" frame />
-        <text>{{ redTeam[0].name }}</text>
-        <image
-          v-if="redTeam[0].winner"
-          src="../static/winner-badge.png"
-          mode="widthFix"
-        />
+        <block v-if="redTeam[0]">
+          <Avatar v-if="redTeam[0]" :src="redTeam[0].avatar" frame />
+          <text>{{ redTeam[0].name }}</text>
+          <image
+            v-if="redTeam[0].winner"
+            src="../static/winner-badge.png"
+            mode="widthFix"
+          />
+        </block>
       </view>
     </view>
   </view>

src/components/BowTarget.vue

@@ -30,6 +30,10 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
+  showE: {
+    type: Boolean,
+    default: true,
+  },
 });
 
 const showRoundTips = ref(false);
@@ -71,10 +75,14 @@ function calcRealY(num) {
       <BowPower v-if="power > 0" :power="power" />
     </view>
     <view class="target">
-      <view v-if="scores.length && showRoundTips" class="e-value fade-in"
+      <view
+        v-if="scores.length && showRoundTips && showE"
+        class="e-value fade-in"
         >经验 +1</view
       >
-      <view v-if="scores.length && showRoundTips" class="round-tip fade-in"
+      <view
+        v-if="scores.length && showRoundTips && scores[scores.length - 1].ring"
+        class="round-tip fade-in"
         >{{ scores[scores.length - 1].ring }}<text>环</text></view
       >
       <image
@@ -152,7 +160,6 @@ function calcRealY(num) {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 20px;
 }
 .header > image:first-child {
   width: 40px;

src/components/PlayersRow.vue

@@ -113,7 +113,7 @@ defineProps({
 .container > view > view > text {
   margin: 0 10px;
   overflow: hidden;
-  width: 100px;
+  width: 120px;
   transition: all 0.3s linear;
 }
 .avatar {

src/components/TeamResult.vue

@@ -1,7 +1,8 @@
 <script setup>
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import BowTarget from "@/components/BowTarget.vue";
 import Avatar from "@/components/Avatar.vue";
+import { roundsName } from "@/constants";
 const props = defineProps({
   show: {
     type: Boolean,
@@ -11,9 +12,50 @@ const props = defineProps({
     type: Function,
     default: () => {},
   },
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
 });
 const selected = ref(0);
-const tabs = ["所有轮次", "决金箭", "第三轮", "第二轮", "第一轮"];
+const scores = ref([]);
+const tabs = ref(["所有轮次"]);
+const players = ref([]);
+const onClickTab = (index) => {
+  selected.value = index;
+  scores.value = [];
+  if (index === 0) {
+    Object.values(props.data.roundsData).forEach((round) => {
+      Object.values(round).forEach((arrows) => {
+        scores.value = [...scores.value, ...Object.values(arrows)];
+      });
+    });
+  } else {
+    Object.values(props.data.roundsData[index]).forEach((arrows) => {
+      scores.value = [...scores.value, ...Object.values(arrows)];
+    });
+  }
+};
+watch(
+  () => props.data,
+  (value) => {
+    if (value.winner === 0) {
+      players.value = [
+        ...Object.values(value.redPlayers),
+        ...Object.values(value.bluePlayers),
+      ];
+    } else if (value.winner === 1) {
+      players.value = [
+        ...Object.values(value.bluePlayers),
+        ...Object.values(value.redPlayers),
+      ];
+    }
+    Object.keys(value.roundsData).forEach((key) => {
+      tabs.value.push(`第${roundsName[key]}轮`);
+    });
+    onClickTab(0);
+  }
+);
 </script>
 
 <template>
@@ -28,35 +70,28 @@ const tabs = ["所有轮次", "决金箭", "第三轮", "第二轮", "第一轮"
       <view
         v-for="(tab, index) in tabs"
         :key="index"
-        @click="() => (selected = index)"
+        @click="() => onClickTab(index)"
         :class="selected === index ? 'selected-tab' : ''"
       >
         {{ tab }}
       </view>
     </view>
     <view :style="{ width: '95%' }">
-      <BowTarget />
+      <BowTarget :scores="scores" :showE="false" />
     </view>
-    <view class="score-row">
-      <Avatar src="../static/avatar.png" :borderColor="1" />
+    <view class="score-row" v-for="(player, index) in players" :key="index">
+      <Avatar
+        :src="player.avatar"
+        :borderColor="data.bluePlayers[player.playerId] ? 1 : 2"
+      />
       <view
-        v-for="(score, index) in [7, 9, 7, 3, 8]"
+        v-if="selected > 0"
+        v-for="(score, index) in data.roundsData[selected][player.playerId]"
         :key="index"
         class="score-item"
         :style="{ width: '13vw', height: '13vw' }"
       >
-        {{ score }}
-      </view>
-    </view>
-    <view class="score-row">
-      <Avatar src="../static/avatar.png" :borderColor="2" />
-      <view
-        v-for="(score, index) in [7, 9, 7, 3, 8]"
-        :key="index"
-        class="score-item"
-        :style="{ width: '13vw', height: '13vw' }"
-      >
-        {{ score }}
+        {{ score.ringScore }}
       </view>
     </view>
   </view>
@@ -88,7 +123,7 @@ const tabs = ["所有轮次", "决金箭", "第三轮", "第二轮", "第一轮"
 .container > view:first-child > view:last-child {
   position: absolute;
   right: 5px;
-  top:32px;
+  top: 32px;
 }
 .container > view:first-child > view:last-child > image {
   width: 40px;
@@ -97,9 +132,15 @@ const tabs = ["所有轮次", "决金箭", "第三轮", "第二轮", "第一轮"
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  width: 100%;
+  width: calc(100% - 20px);
   color: #fff9;
-  padding-left: 15px;
+  padding: 0 10px;
+  overflow-x: auto;
+}
+.container > view:nth-child(2)::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  color: transparent;
 }
 .container > view:nth-child(2) > view {
   border: 1px solid #fff9;
@@ -107,6 +148,7 @@ const tabs = ["所有轮次", "决金箭", "第三轮", "第二轮", "第一轮"
   padding: 7px 10px;
   margin: 0 5px;
   font-size: 14px;
+  flex: 0 0 auto;
 }
 .selected-tab {
   background-color: #fed847;