UI优化

src/pages/team-bow-data.vue

@@ -0,0 +1,180 @@
+<script setup>
+import { ref } from "vue";
+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";
+const selected = ref(0);
+const redScores = ref([]);
+const blueScores = ref([]);
+const tabs = ref(["所有轮次"]);
+const players = ref([]);
+const allRoundsScore = ref({});
+const data = ref({});
+onLoad(async (options) => {
+  if (options.battleId) {
+    const result = await getGameAPI(options.battleId);
+    data.value = result;
+    if (result.winner === 0) {
+      players.value = [
+        ...Object.values(result.redPlayers),
+        ...Object.values(result.bluePlayers),
+      ];
+    } else if (result.winner === 1) {
+      players.value = [
+        ...Object.values(result.bluePlayers),
+        ...Object.values(result.redPlayers),
+      ];
+    }
+    Object.keys(result.roundsData).forEach((key) => {
+      tabs.value.push(`第${roundsName[key]}轮`);
+    });
+    onClickTab(0);
+  }
+});
+const onClickTab = (index) => {
+  selected.value = index;
+  redScores.value = [];
+  blueScores.value = [];
+  const { bluePlayers, redPlayers, roundsData } = data.value;
+  if (index === 0) {
+    Object.keys(bluePlayers).forEach((p) => {
+      allRoundsScore.value[p] = [];
+      Object.values(roundsData).forEach((round) => {
+        allRoundsScore.value[p].push(
+          round[p].reduce((last, next) => last + next.ring, 0)
+        );
+        round[p].forEach((arrow) => {
+          blueScores.value.push(arrow);
+        });
+      });
+    });
+    Object.keys(redPlayers).forEach((p) => {
+      allRoundsScore.value[p] = [];
+      Object.values(roundsData).forEach((round) => {
+        allRoundsScore.value[p].push(
+          round[p].reduce((last, next) => last + next.ring, 0)
+        );
+        round[p].forEach((arrow) => {
+          redScores.value.push(arrow);
+        });
+      });
+    });
+  } else {
+    Object.keys(bluePlayers).forEach((p) => {
+      roundsData[index][p].forEach((arrow) => {
+        blueScores.value.push(arrow);
+      });
+    });
+    Object.keys(redPlayers).forEach((p) => {
+      roundsData[index][p].forEach((arrow) => {
+        redScores.value.push(arrow);
+      });
+    });
+  }
+};
+</script>
+
+<template>
+  <Container title="1v1排位赛 - 靶纸">
+    <view class="container">
+      <view>
+        <view
+          v-for="(tab, index) in tabs"
+          :key="index"
+          @click="() => onClickTab(index)"
+          :class="selected === index ? 'selected-tab' : ''"
+        >
+          {{ tab }}
+        </view>
+      </view>
+      <view :style="{ margin: '20px 0' }">
+        <BowTarget
+          :scores="redScores"
+          :blueScores="blueScores"
+          :showLatestArrow="false"
+        />
+      </view>
+      <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-if="selected === 0"
+          v-for="(ring, index) in allRoundsScore[player.playerId]"
+          :key="index"
+          class="score-item"
+          :style="{ width: '13vw', height: '13vw' }"
+        >
+          {{ ring }}
+        </view>
+        <view
+          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.ring }}
+        </view>
+      </view>
+    </view>
+  </Container>
+</template>
+
+<style scoped>
+.container {
+  width: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.container > view:nth-child(1) {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: calc(100% - 20px);
+  color: #fff9;
+  padding: 10px;
+  overflow-x: auto;
+}
+.container > view:nth-child(1)::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  color: transparent;
+}
+.container > view:nth-child(1) > view {
+  border: 1px solid #fff9;
+  border-radius: 20px;
+  padding: 7px 10px;
+  margin: 0 5px;
+  font-size: 14px;
+  flex: 0 0 auto;
+}
+.selected-tab {
+  background-color: #fed847;
+  border-color: #fed847 !important;
+  color: #000;
+}
+.score-row {
+  margin: 10px 20px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+.score-item {
+  background-image: url("../static/score-bg.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  color: #fed847;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 24px;
+  margin-left: 10px;
+}
+</style>