修改回合得分显示

2025-07-02 15:57:58 +08:00
parent d2aa87e91c
commit 997e2ee756
7 changed files with 179 additions and 54 deletions
--- a/src/App.vue
+++ b/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;
--- a/src/components/RoundEndTip.vue
+++ b/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>
--- a/src/components/ScreenHint.vue
+++ b/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;
--- a/src/pages/battle-result.vue
+++ b/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
    >
--- a/src/pages/battle-room.vue
+++ b/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">
-        <text>第{{ currentRound - 1 }}轮射击结束</text>
-        <view>
-          <text>蓝队</text>
-          <text>{{ currentBluePoint }}</text>
-          <text>分，红队</text>
-          <text>{{ currentRedPoint }}</text>
-          <text>分</text>
-        </view>
-      </view>
+      <RoundEndTip
+        :round="currentRound - 1"
+        :bluePoint="currentBluePoint"
+        :redPoint="currentRedPoint"
+        :roundData="roundResults[roundResults.length - 1]"
+      />
    </ScreenHint>
    <ScreenHint
      :show="halfTimeTip"
--- a/src/pages/ranking.vue
+++ b/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)),
        };
      }
    });
--- a/src/pages/team-match.vue
+++ b/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">
-            <text>第{{ currentRound - 1 }}轮射击结束</text>
-            <view>
-              <text>蓝队</text>
-              <text>{{ currentBluePoint }}</text>
-              <text>分，红队</text>
-              <text>{{ currentRedPoint }}</text>
-              <text>分</text>
-            </view>
-            <!-- <text>同分僵局！最后一箭定江山</text>
-          <text>10 秒后蓝红双方 决金箭 一箭决胜负</text> -->
-          </view>
+          <RoundEndTip
+            :round="currentRound - 1"
+            :bluePoint="currentBluePoint"
+            :redPoint="currentRedPoint"
+            :roundData="roundResults[roundResults.length - 1]"
+          />
        </ScreenHint>
      </block>
      <block v-else>