排位房间内容完善

src/apis.js

@@ -119,3 +119,9 @@ export const readyGameAPI = (battleId) => {
     battleId,
   });
 };
+
+export const getGameAPI = (battleId) => {
+  return request("POST", "/user/battle/detail", {
+    id: battleId,
+  });
+};

src/components/BattleFooter.vue

@@ -1,21 +1,10 @@
 <script setup>
-import { ref } from "vue";
-import CoachComment from "@/components/CoachComment.vue";
 defineProps({
-  blueTeam: {
-    type: Array,
-    default: () => [],
-  },
-  redTeam: {
+  roundResults: {
     type: Array,
     default: () => [],
   },
 });
-
-const showComment = ref(false);
-setTimeout(() => {
-  showComment.value = true;
-}, 2000);
 </script>
 
 <template>
@@ -23,27 +12,30 @@ setTimeout(() => {
     <image src="../static/battle-header.png" mode="widthFix" />
     <view class="players">
       <view>
-        <view v-for="(score, index) in blueTeam" :key="index">
+        <view v-for="(result, index) in roundResults" :key="index">
           <text>Round {{ index + 1 }}</text>
           <view>
-            <text>{{ score }}</text>
+            <text>{{
+              result.blueArrows
+                .map((item) => item.ring)
+                .reduce((last, next) => last + next, 0)
+            }}</text>
             <text>环</text>
           </view>
         </view>
       </view>
       <view>
-        <view v-for="(score, index) in redTeam" :key="index">
+        <view v-for="(result, index) in roundResults" :key="index">
           <text>Round {{ index + 1 }}</text>
           <view>
-            <text>{{ score }}</text>
+            <text>{{ result.redArrows
+                .map((item) => item.ring)
+                .reduce((last, next) => last + next, 0) }}</text>
             <text>环</text>
           </view>
         </view>
       </view>
     </view>
-    <CoachComment :show="showComment" :onClose="() => (showComment = false)">
-      第三轮射击结束
-    </CoachComment>
   </view>
 </template>
 
@@ -92,6 +84,7 @@ setTimeout(() => {
   font-size: 14px;
 }
 .players > view > view > view:last-child {
+  font-size: 14px;
   padding-right: 20px;
 }
 .players > view > view > view:last-child > text:first-child {

src/components/Container.vue

@@ -25,9 +25,10 @@ defineProps({
 
 <style scoped>
 .content {
-  width: 100%;
+  width: 100vw;
   height: calc(100vh - 116px);
-  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
   display: flex;
   flex-direction: column;
   align-items: center;

src/components/PlayersRow.vue

@@ -114,6 +114,7 @@ defineProps({
   margin: 0 10px;
   overflow: hidden;
   width: 100px;
+  transition: all 0.3s linear;
 }
 .avatar {
   width: 40px;

src/pages/battle-result.vue

@@ -1,6 +1,7 @@
 <script setup>
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import { onLoad } from "@dcloudio/uni-app";
+import { getGameAPI } from "@/apis";
 
 const battleId = ref("");
 
@@ -10,6 +11,10 @@ onLoad((options) => {
 function exit() {
   uni.navigateBack();
 }
+onMounted(async () => {
+  const result = await getGameAPI("BATTLE-1749121128909437828-799");
+  conosle.log(1111, result);
+});
 </script>
 
 <template>
@@ -50,7 +55,7 @@ function exit() {
 .tag {
   position: absolute;
   width: 32vw;
-  top: 4%;
+  top: 0;
   right: 0;
 }
 .container > view {

src/pages/match-room.vue

@@ -6,14 +6,10 @@ import BowTarget from "@/components/BowTarget.vue";
 import ShootProgress from "@/components/ShootProgress.vue";
 import PlayersRow from "@/components/PlayersRow.vue";
 import Timer from "@/components/Timer.vue";
-import PlayerScore from "@/components/PlayerScore.vue";
+import BattleFooter from "@/components/BattleFooter.vue";
 import SButton from "@/components/SButton.vue";
 import { matchGameAPI, readyGameAPI } from "@/apis";
 import { MESSAGETYPES, roundsName } from "@/constants";
-import useStore from "@/store";
-import { storeToRefs } from "pinia";
-const store = useStore();
-const { user } = storeToRefs(store);
 const gameType = ref(0);
 const teamSize = ref(0);
 const matching = ref(false);
@@ -29,6 +25,12 @@ const currentShooterId = ref(0);
 const tips = ref("即将开始...");
 const seq = ref(0);
 const timerSeq = ref(0);
+const roundResults = ref([
+  // {
+  //   blueArrows: [{ ring: 2 }, { ring: 2 }],
+  //   redArrows: [{ ring: 2 }, { ring: 3 }],
+  // },
+]);
 
 onLoad((options) => {
   gameType.value = options.gameType;
@@ -91,14 +93,13 @@ async function onReceiveMessage(content) {
       scores.value = [msg.target];
     }
     if (msg.constructor === MESSAGETYPES.CurrentRoundEnded) {
+      const result = msg.preRoundResult;
       scores.value = [];
       currentShooterId.value = 0;
-      if (
-        msg.preRoundResult.currentRound > 0 &&
-        msg.preRoundResult.currentRound < totalRounds.value
-      ) {
+      if (result.currentRound > 0 && result.currentRound < totalRounds.value) {
         // 开始下一轮;
-        currentRound.value = msg.preRoundResult.currentRound + 1;
+        roundResults.value = result.roundResults;
+        currentRound.value = result.currentRound + 1;
       }
     }
     if (msg.constructor === MESSAGETYPES.MatchOver) {
@@ -136,19 +137,16 @@ onUnmounted(() => {
         :totalRound="totalRounds"
         :scores="scores"
       />
-      <!-- <PlayerScore
-        name="某某选手"
-        avatar="../static/avatar.png"
-        :scores="[1, 4, 7, 4, 2, 2, 4, 4, 5, 8]"
-      /> -->
+      <BattleFooter
+        v-if="roundResults.length > 0"
+        :roundResults="roundResults"
+      />
       <Timer :seq="timerSeq" :callBack="readyToGo" />
     </view>
-    <view class="footer">
     <SButton v-if="!battleId" :onClick="matching ? stopMatch : startMatch">{{
       matching ? "取消匹配" : "开始匹配"
     }}</SButton>
     <SButton v-if="battleId && !start" :onClick="readyToGo">准备完毕</SButton>
-    </view>
   </Container>
 </template>
 
@@ -156,7 +154,4 @@ onUnmounted(() => {
 .container {
   width: 100%;
 }
-.footer {
-  margin: 25px 0;
-}
 </style>