1v1排位数据交互完善

src/pages/battle-result.vue

@@ -4,15 +4,32 @@ import { onLoad } from "@dcloudio/uni-app";
 import { getGameAPI } from "@/apis";
 import TeamResult from "@/components/TeamResult.vue";
 import MeleeResult from "@/components/MeleeResult.vue";
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+const store = useStore();
+const { user } = storeToRefs(store);
 
 const battleId = ref("");
-const show = ref(true);
+const ifWin = ref(false);
+const data = ref({});
+const totalPoints = ref(0);
+const show = ref(false);
 
-// onLoad(async (options) => {
-//   battleId.value = options.battleId;
-//   const result = await getGameAPI(options.battleId);
-//   console.log(1111, result);
-// });
+onLoad(async (options) => {
+  battleId.value = options.battleId;
+  const result = await getGameAPI(
+    options.battleId || "BATTLE-1749386862250435325-854"
+  );
+  data.value = result;
+  if (result.redPlayers[user.value.id]) {
+    totalPoints.value = result.redTotal;
+    ifWin.value = result.winner === 0;
+  }
+  if (result.bluePlayers[user.value.id]) {
+    totalPoints.value = result.redTotal;
+    ifWin.value = result.winner === 1;
+  }
+});
 function exit() {
   uni.navigateBack();
 }
@@ -21,27 +38,32 @@ onMounted(async () => {});
 
 <template>
   <view class="container">
-    <image class="tag" src="../static/winner-yellow.png" mode="widthFix" />
+    <image
+      :style="{ opacity: ifWin ? '1' : '0' }"
+      class="tag"
+      src="../static/winner-yellow.png"
+      mode="widthFix"
+    />
     <view>
       <image src="../static/battle-result.png" mode="widthFix" />
     </view>
     <view>
       <image src="../static/shining-bg.png" mode="widthFix" />
       <image src="../static/throphy.png" mode="widthFix" />
-      <text>蓝队获胜</text>
+      <text>{{ ifWin && data.winner === 1 ? "蓝队" : "红队" }}获胜</text>
       <text>强势登顶，荣耀加冕</text>
     </view>
     <view>
       <image src="../static/row-yellow-bg.png" mode="widthFix" />
-      <text>经验 +20</text>
+      <text>经验 +{{ totalPoints }}</text>
     </view>
     <text>你是朋友中的佼佼者哦</text>
     <view>
       <view @click="() => (show = true)">查看靶纸</view>
       <view @click="exit">退出</view>
     </view>
-    <!-- <TeamResult :show="show" :onClose="() => (show = false)" /> -->
-    <MeleeResult :show="show" :onClose="() => (show = false)" />
+    <TeamResult :show="show" :onClose="() => (show = false)" :data="data" />
+    <!-- <MeleeResult :show="show" :onClose="() => (show = false)" /> -->
   </view>
 </template>
 

src/pages/ranking.vue

@@ -1,6 +1,11 @@
 <script setup>
 import Container from "@/components/Container.vue";
+import Avatar from "@/components/Avatar.vue";
 import { ref } from "vue";
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+const store = useStore();
+const { user } = storeToRefs(store);
 
 const selectedIndex = ref(0);
 
@@ -27,11 +32,8 @@ const toMeleeMatchPage = (gameType, teamSize) => {
       <view class="ranking-my-data">
         <view>
           <view class="user-info">
-            <view class="avatar" @click="toUserPage">
-              <image src="../static/avatar-frame.png" mode="widthFix" />
-              <image src="../static/avatar.png" mode="widthFix" />
-            </view>
-            <text>打酱油·路过</text>
+            <Avatar :src="user.avatarUrl" frame :size="30" />
+            <text>{{ user.nickName }}</text>
           </view>
           <view class="ranking-season">
             <text>第14赛季</text>
@@ -166,22 +168,8 @@ const toMeleeMatchPage = (gameType, teamSize) => {
   color: #fff;
   font-size: 14px;
 }
-.avatar {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 15px;
-}
-.avatar > image:first-child {
-  position: absolute;
-  width: 40px;
-  height: 40px;
-}
-.avatar > image {
-  width: 30px;
-  height: 30px;
-  border-radius: 50%;
+.user-info > text {
+  margin-left: 15px;
 }
 .ranking-season {
   display: flex;

src/pages/team-match.vue

@@ -2,6 +2,8 @@
 import { ref, onMounted, onUnmounted } from "vue";
 import { onLoad } from "@dcloudio/uni-app";
 import Container from "@/components/Container.vue";
+import BattleHeader from "@/components/BattleHeader.vue";
+import Guide from "@/components/Guide.vue";
 import BowTarget from "@/components/BowTarget.vue";
 import ShootProgress from "@/components/ShootProgress.vue";
 import PlayersRow from "@/components/PlayersRow.vue";
@@ -10,6 +12,10 @@ 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);
@@ -31,6 +37,8 @@ const roundResults = ref([
   //   redArrows: [{ ring: 2 }, { ring: 3 }],
   // },
 ]);
+const redPoints = ref(0);
+const bluePoints = ref(0);
 
 onLoad((options) => {
   gameType.value = options.gameType;
@@ -38,6 +46,7 @@ onLoad((options) => {
 });
 async function startMatch() {
   if (gameType.value && teamSize.value) {
+    scores.value = [];
     await matchGameAPI(true, gameType.value, teamSize.value);
     startMatch.value = true;
   }
@@ -82,6 +91,7 @@ async function onReceiveMessage(content) {
     if (msg.constructor === MESSAGETYPES.AllReady) {
       start.value = true;
       timerSeq.value = 0;
+      scores.value = [];
     }
     if (msg.constructor === MESSAGETYPES.ToSomeoneShoot) {
       scores.value = [];
@@ -96,6 +106,10 @@ async function onReceiveMessage(content) {
     if (msg.constructor === MESSAGETYPES.ShootResult) {
       scores.value = [msg.target];
     }
+    if (msg.constructor === MESSAGETYPES.RoundPoint) {
+      bluePoints.value += msg.blueScore;
+      redPoints.value += msg.redScore;
+    }
     if (msg.constructor === MESSAGETYPES.CurrentRoundEnded) {
       const result = msg.preRoundResult;
       scores.value = [];
@@ -108,7 +122,7 @@ async function onReceiveMessage(content) {
     }
     if (msg.constructor === MESSAGETYPES.MatchOver) {
       uni.redirectTo({
-        url: "/pages/battle-result?battleId=" + msg.id,
+        url: `/pages/battle-result?battleId=${msg.id}&winner=${msg.endStatus.winner}`,
       });
     }
   });
@@ -127,6 +141,16 @@ onUnmounted(() => {
 <template>
   <Container title="排位赛" :bgType="1">
     <view class="container">
+      <BattleHeader v-if="!start" :redTeam="redTeam" :blueTeam="blueTeam" />
+      <Guide noBg v-if="!start">
+        <view :style="{ display: 'flex', justifyContent: 'space-between' }">
+          <view :style="{ display: 'flex', flexDirection: 'column' }">
+            <text :style="{ color: '#fed847' }">请预先射几箭测试</text>
+            <text>请确保射击距离只有5米</text>
+          </view>
+          <BowPower :power="45" />
+        </view>
+      </Guide>
       <ShootProgress v-if="start" :tips="tips" :seq="seq" />
       <PlayersRow
         v-if="start"
@@ -135,7 +159,8 @@ onUnmounted(() => {
         :redTeam="redTeam"
       />
       <BowTarget
-        :power="power"
+        :showE="start && user.id === currentShooterId"
+        :power="start ? power : 0"
         :currentRound="currentRound"
         :totalRound="totalRounds"
         :scores="scores"
@@ -148,8 +173,10 @@ onUnmounted(() => {
         "
       />
       <BattleFooter
-        v-if="roundResults.length > 0"
+        v-if="start"
         :roundResults="roundResults"
+        :redPoints="redPoints"
+        :bluePoints="bluePoints"
       />
       <Timer :seq="timerSeq" :callBack="readyToGo" />
     </view>