修改回合得分显示

src/App.vue

@@ -166,33 +166,7 @@ button::after {
   top: -1000px;
   left: 0;
 }
-.round-end-tip {
+
-  width: 100%;
-  color: #fff;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-.round-end-tip > view:nth-child(2) {
-  margin: 15px 0;
-  font-size: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.round-end-tip > view:nth-child(2) > text:nth-child(2),
-.round-end-tip > view:nth-child(2) > text:nth-child(4) {
-  color: #fed847;
-  width: 30px;
-  text-align: center;
-  font-size: 30px;
-}
-.round-end-tip > text:nth-child(3),
-.round-end-tip > text:nth-child(4) {
-  color: #fff9;
-  font-size: 14px;
-  margin-bottom: 10px;
-}
 .truncate {
   white-space: nowrap;
   overflow: hidden;

src/components/RoundEndTip.vue

@@ -0,0 +1,156 @@
+<script setup>
+import { ref, onMounted, onUnmounted } from "vue";
+const props = defineProps({
+  type: {
+    type: Number,
+    default: 0,
+  },
+  round: {
+    type: Number,
+    default: 0,
+  },
+  bluePoint: {
+    type: Number,
+    default: 0,
+  },
+  redPoint: {
+    type: Number,
+    default: 0,
+  },
+  roundData: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+const count = ref(10);
+const tiemr = ref(null);
+onMounted(() => {
+  if (tiemr.value) clearInterval(tiemr.value);
+  tiemr.value = setInterval(() => {
+    if (count.value === 0) clearInterval(tiemr.value);
+    else count.value -= 1;
+  }, 1000);
+});
+onUnmounted(() => {
+  if (tiemr.value) clearInterval(tiemr.value);
+});
+</script>
+
+<template>
+  <view class="round-end-tip">
+    <text>第{{ round }}轮射击结束</text>
+    <block v-if="type === 0">
+      <view class="point-view1">
+        <text>本轮红队</text>
+        <text>{{
+          (roundData.redArrows || []).reduce(
+            (last, next) => last + next.ring,
+            0
+          )
+        }}</text>
+        <text>环，蓝队</text>
+        <text>{{
+          (roundData.blueArrows || []).reduce(
+            (last, next) => last + next.ring,
+            0
+          )
+        }}</text>
+        <text>环</text>
+      </view>
+      <text v-if="bluePoint === redPoint">
+        红队、蓝队各得<text :style="{ color: '#fed847', margin: '0 5px' }">{{
+          redPoint
+        }}</text
+        >分
+      </text>
+      <text v-if="bluePoint > redPoint">
+        蓝队获胜，得<text :style="{ color: '#fed847', margin: '0 5px' }">{{
+          bluePoint
+        }}</text
+        >分
+      </text>
+      <text v-if="bluePoint < redPoint">
+        红队获胜，得<text :style="{ color: '#fed847', margin: '0 5px' }">{{
+          redPoint
+        }}</text
+        >分
+      </text>
+    </block>
+    <block v-if="type === 1">
+      <view class="point-view2">
+        <text>蓝队</text>
+        <text>{{ bluePoint }}</text>
+        <text>分，红队</text>
+        <text>{{ redPoint }}</text>
+        <text>分</text>
+      </view>
+      <text>同分僵局！最后一箭定江山</text>
+      <view class="final-shoot">
+        <text>{{ count }}</text>
+        <text>秒后蓝红双方</text>
+        <text>决金箭</text>
+        <text>一箭决胜负</text>
+      </view>
+    </block>
+  </view>
+</template>
+
+<style scoped>
+.round-end-tip {
+  width: 100%;
+  color: #fff9;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: 16px;
+}
+.round-end-tip > text:first-child {
+  font-size: 18px;
+  color: #fff;
+}
+.point-view1 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 20px;
+  margin-bottom: 3px;
+}
+.point-view1 > text:nth-child(2),
+.point-view1 > text:nth-child(4) {
+  color: #fed847;
+  margin: 0 5px;
+}
+.point-view2 {
+  margin: 12px 0;
+  font-size: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+}
+.point-view2 > text:nth-child(2),
+.point-view2 > text:nth-child(4) {
+  color: #fed847;
+  width: 30px;
+  text-align: center;
+  font-size: 30px;
+}
+.final-shoot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 10px;
+  font-size: 14px;
+}
+.final-shoot > text:nth-child(1) {
+  width: 20px;
+  text-align: right;
+}
+.final-shoot > text:nth-child(1),
+.final-shoot > text:nth-child(3) {
+  font-size: 18px;
+  color: #fed847;
+  margin-left: 10px;
+  margin-right: 5px;
+}
+</style>

src/components/ScreenHint.vue

@@ -61,6 +61,7 @@ const props = defineProps({
 .container > view:first-child {
   display: flex;
   align-items: center;
+  justify-content: center;
   position: relative;
   width: 70vw;
   min-height: 22vh;

src/pages/battle-result.vue

@@ -8,7 +8,7 @@ import useStore from "@/store";
 import { storeToRefs } from "pinia";
 const store = useStore();
 const { user } = storeToRefs(store);
-const { updateUser } = store;
+const { updateUser, getLvlName } = store;
 
 const battleId = ref("");
 const ifWin = ref(false);
@@ -133,7 +133,7 @@ const checkBowData = () => {
           />
           <view class="player-title">
             <text>{{ player.name }}</text>
-            <text>钻石三级</text>
+            <text>{{ getLvlName(player.totalScore) }}</text>
           </view>
           <text
             ><text :style="{ color: '#fff' }">{{ player.totalRings }}</text>
@@ -152,7 +152,9 @@ const checkBowData = () => {
         >积分 {{ totalPoints > 0 ? "+" + totalPoints : totalPoints }}</text
       >
     </view>
-    <text v-if="data.mode === 1" class="description">你是朋友中的佼佼者哦</text>
+    <text v-if="data.mode === 1" class="description">{{
+      ifWin ? "你已经奔跑在通向王者的路上了！" : "失败是成功之母，儿子在等你！"
+    }}</text>
     <text v-if="data.mode === 2" class="description"
       >好成绩！全国排位赛等着你！</text
     >

src/pages/battle-room.vue

@@ -14,6 +14,7 @@ import ShootProgress from "@/components/ShootProgress.vue";
 import PlayersRow from "@/components/PlayersRow.vue";
 import SModal from "@/components/SModal.vue";
 import ScreenHint from "@/components/ScreenHint.vue";
+import RoundEndTip from "@/components/RoundEndTip.vue";
 import { getRoomAPI, destroyRoomAPI, exitRoomAPI, startRoomAPI } from "@/apis";
 import { checkConnection } from "@/util";
 import { MESSAGETYPES, roundsName, getMessageTypeName } from "@/constants";
@@ -404,16 +405,12 @@ onUnmounted(() => {
     </view>
     <Timer :seq="timerSeq" />
     <ScreenHint :show="showRoundTip" :onClose="() => (showRoundTip = false)">
-      <view class="round-end-tip">
+      <RoundEndTip
-        <text>第{{ currentRound - 1 }}轮射击结束</text>
+        :round="currentRound - 1"
-        <view>
+        :bluePoint="currentBluePoint"
-          <text>蓝队</text>
+        :redPoint="currentRedPoint"
-          <text>{{ currentBluePoint }}</text>
+        :roundData="roundResults[roundResults.length - 1]"
-          <text>分，红队</text>
+      />
-          <text>{{ currentRedPoint }}</text>
-          <text>分</text>
-        </view>
-      </view>
     </ScreenHint>
     <ScreenHint
       :show="halfTimeTip"

src/pages/ranking.vue

@@ -56,10 +56,10 @@ onMounted(async () => {
       if (item.gameType === 2 && item.teamSize === 5) keyName = "5m";
       if (item.gameType === 2 && item.teamSize === 10) keyName = "10m";
       if (keyName) {
-        currentSeasonData.value["1v1"] = {
+        currentSeasonData.value[keyName] = {
           totalGames: item.totalGames,
           winCount: item.winCount,
-          winRate: (item.winCount / item.totalGames) * 100,
+          winRate: Number(((item.winCount / item.totalGames) * 100).toFixed(2)),
         };
       }
     });

src/pages/team-match.vue

@@ -13,6 +13,7 @@ import ScreenHint from "@/components/ScreenHint.vue";
 import SButton from "@/components/SButton.vue";
 import Matching from "@/components/Matching.vue";
 import SModal from "@/components/SModal.vue";
+import RoundEndTip from "@/components/RoundEndTip.vue";
 import { matchGameAPI, readyGameAPI } from "@/apis";
 import { MESSAGETYPES, roundsName, getMessageTypeName } from "@/constants";
 import useStore from "@/store";
@@ -209,18 +210,12 @@ onUnmounted(() => {
           :show="showRoundTip"
           :onClose="() => (showRoundTip = false)"
         >
-          <view class="round-end-tip">
+          <RoundEndTip
-            <text>第{{ currentRound - 1 }}轮射击结束</text>
+            :round="currentRound - 1"
-            <view>
+            :bluePoint="currentBluePoint"
-              <text>蓝队</text>
+            :redPoint="currentRedPoint"
-              <text>{{ currentBluePoint }}</text>
+            :roundData="roundResults[roundResults.length - 1]"
-              <text>分，红队</text>
+          />
-              <text>{{ currentRedPoint }}</text>
-              <text>分</text>
-            </view>
-            <!-- <text>同分僵局！最后一箭定江山</text>
-          <text>10 秒后蓝红双方 决金箭 一箭决胜负</text> -->
-          </view>
         </ScreenHint>
       </block>
       <block v-else>