细节调整

src/pages/team-match.vue

@@ -9,6 +9,7 @@ import ShootProgress from "@/components/ShootProgress.vue";
 import PlayersRow from "@/components/PlayersRow.vue";
 import Timer from "@/components/Timer.vue";
 import BattleFooter from "@/components/BattleFooter.vue";
+import ScreenHint from "@/components/ScreenHint.vue";
 import SButton from "@/components/SButton.vue";
 import { matchGameAPI, readyGameAPI } from "@/apis";
 import { MESSAGETYPES, roundsName, getMessageTypeName } from "@/constants";
@@ -22,6 +23,8 @@ const matching = ref(false);
 const start = ref(false);
 const battleId = ref("");
 const currentRound = ref(1);
+const currentRedPoint = ref(0);
+const currentBluePoint = ref(0);
 const totalRounds = ref(0);
 const power = ref(0);
 const scores = ref([]);
@@ -39,6 +42,7 @@ const roundResults = ref([
 ]);
 const redPoints = ref(0);
 const bluePoints = ref(0);
+const showRoundTip = ref(false);
 
 onLoad((options) => {
   gameType.value = options.gameType;
@@ -48,13 +52,13 @@ async function startMatch() {
   if (gameType.value && teamSize.value) {
     scores.value = [];
     await matchGameAPI(true, gameType.value, teamSize.value);
-    startMatch.value = true;
+    matching.value = true;
   }
 }
 async function stopMatch() {
   if (gameType.value && teamSize.value) {
     await matchGameAPI(false, gameType.value, teamSize.value);
-    startMatch.value = false;
+    matching.value = false;
   }
 }
 async function readyToGo() {
@@ -65,8 +69,7 @@ async function readyToGo() {
   }
 }
 
-async function onReceiveMessage(content) {
-  const messages = JSON.parse(content).data.updates || [];
+async function onReceiveMessage(messages = []) {
   messages.forEach((msg) => {
     if (
       !msg.id ||
@@ -114,11 +117,12 @@ async function onReceiveMessage(content) {
       const result = msg.preRoundResult;
       scores.value = [];
       currentShooterId.value = 0;
-      if (result.currentRound > 0 && result.currentRound < totalRounds.value) {
-        // 开始下一轮;
-        roundResults.value = result.roundResults;
-        currentRound.value = result.currentRound + 1;
-      }
+      currentBluePoint.value = result.blueScore;
+      currentRedPoint.value = result.redScore;
+      showRoundTip.value = true;
+      // 开始下一轮;
+      roundResults.value = result.roundResults;
+      currentRound.value = result.currentRound + 1;
     }
     if (msg.constructor === MESSAGETYPES.MatchOver) {
       uni.redirectTo({
@@ -132,7 +136,7 @@ onMounted(() => {
 });
 onUnmounted(() => {
   uni.$off("socket-inbox", onReceiveMessage);
-  if (startMatch.value) {
+  if (matching.value) {
     matchGameAPI(false, gameType.value, teamSize.value);
   }
 });
@@ -146,7 +150,7 @@ onUnmounted(() => {
         :redTeam="redTeam"
         :blueTeam="blueTeam"
       />
-      <Guide noBg v-if="!start && startMatch.value">
+      <Guide noBg v-if="!start && matching">
         <view :style="{ display: 'flex', justifyContent: 'space-between' }">
           <view :style="{ display: 'flex', flexDirection: 'column' }">
             <text :style="{ color: '#fed847' }">请预先射几箭测试</text>
@@ -163,7 +167,7 @@ onUnmounted(() => {
         :redTeam="redTeam"
       />
       <BowTarget
-        v-if="startMatch.value"
+        v-if="matching"
         :showE="start && user.id === currentShooterId"
         :power="start ? power : 0"
         :currentRound="currentRound"
@@ -184,6 +188,20 @@ onUnmounted(() => {
         :bluePoints="bluePoints"
       />
       <Timer :seq="timerSeq" :callBack="readyToGo" />
+      <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>
+          <!-- <text>同分僵局！最后一箭定江山</text>
+          <text>10 秒后蓝红双方 决金箭 一箭决胜负</text> -->
+        </view>
+      </ScreenHint>
     </view>
     <view :style="{ marginBottom: '20px' }">
       <SButton v-if="!battleId" :onClick="matching ? stopMatch : startMatch">{{
@@ -198,4 +216,31 @@ onUnmounted(() => {
 .container {
   width: 100%;
 }
+.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;
+}
 </style>