1v1比赛结果页UI更新

src/apis.js

@@ -234,6 +234,7 @@ export const getGameAPI = async (battleId) => {
     goldenRoundRecords = [],
   } = result;
   const data = {
+    battleId,
     mode: battleStats.mode, // 1.几V几 2.大乱斗
     gameMode: battleStats.gameMode, // 1.约战 2.排位
   };

src/constants.js

@@ -101,16 +101,22 @@ export const getBattleResultTips = (
     if (mode === 1) {
       if (win) {
         const tests = [
-          "你是朋友中的佼佼者哟!",
-          "你成功击败好友，成为大赢家!",
-          "你将好友“一举拿下”，超神无疑!",
+          "https://api.shelingxingqiu.com/attachment/2025-08-01/dbqq1fglywucyoh9zn.png",
+          "https://api.shelingxingqiu.com/attachment/2025-08-01/dbqq1fgls1trzqneeh.png",
+          "https://api.shelingxingqiu.com/attachment/2025-08-01/dbqq1fgm4fmv0tqico.png",
+          // "你是朋友中的佼佼者哟!",
+          // "你成功击败好友，成为大赢家!",
+          // "你将好友“一举拿下”，超神无疑!",
         ];
         return tests[getRandomIndex(3)];
       } else {
         const tests = [
-          "失误啦失误啦，再多来几局吧~",
-          "惜败好友，下次再战定能反超!",
-          "友谊第一，下场胜利属于你!",
+          "https://api.shelingxingqiu.com/attachment/2025-08-01/dbqq0gmb12vjkonvzm.png",
+          "https://api.shelingxingqiu.com/attachment/2025-08-01/dbqq0gmo5gpiecqqgu.png",
+          "https://api.shelingxingqiu.com/attachment/2025-08-01/dbqq0gmtk8hjwqoecz.png",
+          // "失误啦失误啦，再多来几局吧~",
+          // "惜败好友，下次再战定能反超!",
+          // "友谊第一，下场胜利属于你!",
         ];
         return tests[getRandomIndex(3)];
       }
@@ -129,16 +135,22 @@ export const getBattleResultTips = (
     if (mode === 1) {
       if (win) {
         const tests = [
-          "你已经奔跑在通向王者的路上了!",
-          "射灵星球最闪耀的前进者!",
-          "赞!你真是越战越勇",
+          "https://api.shelingxingqiu.com/attachment/2025-08-01/dbqq1fgtb29jbdus4g.png",
+          "https://api.shelingxingqiu.com/attachment/2025-08-01/dbqq1fgtbu8fzpbh3z.png",
+          "https://api.shelingxingqiu.com/attachment/2025-08-01/dbqq1fgtbu8fzpbh3z.png",
+          // "你已经奔跑在通向王者的路上了!",
+          // "射灵星球最闪耀的前进者!",
+          // "赞!你真是越战越勇",
         ];
         return tests[getRandomIndex(3)];
       } else {
         const tests = [
-          "失败是成功之母，儿子在等你!",
-          "人生得意须尽欢，不过此关心不甘!",
-          "这回一定是打开方式不对。再来!",
+          "https://api.shelingxingqiu.com/attachment/2025-08-01/dbqq0gmovnd33hz5yj.png",
+          "https://api.shelingxingqiu.com/attachment/2025-08-01/dbqq0gmtu558juplj9.png",
+          "https://api.shelingxingqiu.com/attachment/2025-08-01/dbqq0gmuhb5aofghg4.png",
+          // "失败是成功之母，儿子在等你!",
+          // "人生得意须尽欢，不过此关心不甘!",
+          // "这回一定是打开方式不对。再来!",
         ];
         return tests[getRandomIndex(3)];
       }

src/pages.json

@@ -3,6 +3,9 @@
     {
       "path": "pages/index"
     },
+    {
+      "path": "pages/battle-result"
+    },
     {
       "path": "pages/match-page"
     },
@@ -75,9 +78,6 @@
     {
       "path": "pages/match-detail"
     },
-    {
-      "path": "pages/battle-result"
-    },
     {
       "path": "pages/team-bow-data"
     },

src/pages/battle-result.vue

@@ -21,23 +21,25 @@ function exit() {
 }
 
 onLoad(async (options) => {
+  const myId = user.value.id;
   if (options.battleId) {
     const result = await getGameAPI(
-      options.battleId || "BATTLE-1753787456813171958-86"
-      // options.battleId || "BATTLE-1753239612271030113-788"
+      options.battleId || "BATTLE-1753426540845671675-932"
     );
-    const battleInfo = uni.getStorageSync("last-battle");
     data.value = {
       ...result,
-      id: options.battleId,
+      redPlayers: Object.values(result.redPlayers),
+      bluePlayers: Object.values(result.bluePlayers),
       battleMode: result.gameMode,
     };
-    if (result.mode === 1 && result.redPlayers[user.value.id]) {
-      totalPoints.value = result.redPlayers[user.value.id].totalScore;
+    if (result.mode === 1 && result.redPlayers[myId]) {
+      totalPoints.value = result.redPlayers[myId].totalScore;
+      data.value.myTeam = result.redPlayers[myId].team;
       ifWin.value = result.winner === 0;
     }
-    if (result.mode === 1 && result.bluePlayers[user.value.id]) {
-      totalPoints.value = result.bluePlayers[user.value.id].totalScore;
+    if (result.mode === 1 && result.bluePlayers[myId]) {
+      totalPoints.value = result.bluePlayers[myId].totalScore;
+      data.value.myTeam = result.bluePlayers[myId].team;
       ifWin.value = result.winner === 1;
     }
     if (result.mode === 2) {
@@ -45,19 +47,27 @@ onLoad(async (options) => {
         ...p,
         id: p.playerId,
       }));
-      const mine = result.players.find((p) => p.playerId === user.value.id);
+      const mine = result.players.find((p) => p.playerId === myId);
       if (mine) totalPoints.value = mine.totalScore;
-      rank.value =
-        result.players.findIndex((p) => p.playerId === user.value.id) + 1;
+      rank.value = result.players.findIndex((p) => p.playerId === myId) + 1;
     }
   } else {
     const battleInfo = uni.getStorageSync("last-battle");
     if (!battleInfo) return;
     data.value = battleInfo;
-    const mine = battleInfo.playerStats.find((p) => p.id === user.value.id);
-    rank.value =
-      battleInfo.playerStats.findIndex((p) => p.id === user.value.id) + 1;
+    if (battleInfo.mode === 1) {
+      battleInfo.playerStats.forEach((p) => {
+        if (p.team === 1) data.value.bluePlayers = [p];
+        if (p.team === 0) data.value.redPlayers = [p];
+      });
+    }
+    rank.value = 0;
+    const mine = battleInfo.playerStats.find((p, index) => {
+      rank.value = index + 1;
+      return p.id === myId;
+    });
     if (mine) {
+      data.value.myTeam = mine.team;
       totalPoints.value = mine.totalScore;
       ifWin.value = battleInfo.mode === 1 && mine.team === battleInfo.winner;
     }
@@ -73,21 +83,55 @@ const checkBowData = () => {
 
 <template>
   <view class="container">
-    <image
+    <!-- <image
       :style="{ opacity: ifWin ? '1' : '0' }"
       class="tag"
       src="../static/winner-yellow.png"
       mode="widthFix"
-    />
+    /> -->
     <block v-if="data.mode === 1">
       <view class="header-team" :style="{ marginTop: '25%' }">
         <image src="../static/battle-result.png" mode="widthFix" />
+        <view>
+          <text
+            :style="{
+              background:
+                data.winner === 1
+                  ? 'linear-gradient(270deg, #3597ff 0%, rgba(0,0,0,0) 100%);'
+                  : 'linear-gradient(270deg, #fd4444 0%, rgba(0, 0, 0, 0) 100%)',
+            }"
+            >{{ data.winner === 1 ? "蓝队" : "红队" }}获胜</text
+          >
+          <Avatar
+            :size="32"
+            :src="
+              data.winner === 1
+                ? data.bluePlayers[0].avatar
+                : data.redPlayers[0].avatar
+            "
+            :borderColor="data.winner === 1 ? '#5FADFF' : '#FF5656'"
+            mode="widthFix"
+          />
+        </view>
       </view>
       <view class="battle-winner">
         <image src="../static/shining-bg.png" mode="widthFix" />
-        <image src="../static/throphy.png" mode="widthFix" />
-        <text>{{ data.winner === 1 ? "蓝队" : "红队" }}获胜</text>
-        <text>强势登顶，荣耀加冕</text>
+        <image
+          :src="ifWin ? '../static/you-win.png' : '../static/you-lost.png'"
+          mode="widthFix"
+          class="scale-in"
+        />
+        <image
+          :src="
+            getBattleResultTips(data.battleMode, data.mode, {
+              win: ifWin,
+            })
+          "
+          class="scale-in"
+          mode="widthFix"
+        />
+        <!-- <text>{{ data.winner === 1 ? "蓝队" : "红队" }}获胜</text> -->
+        <!-- <text>强势登顶，荣耀加冕</text> -->
       </view>
     </block>
     <block v-if="data.mode === 2">
@@ -162,17 +206,28 @@ const checkBowData = () => {
         </view>
       </view>
     </block>
-    <view class="battle-e">
+    <view
+      class="battle-e"
+      :style="{ marginTop: data.battleMode === 2 ? '20px' : '20vw' }"
+    >
       <image src="../static/row-yellow-bg.png" mode="widthFix" />
+      <view :style="{ borderColor: data.myTeam === 1 ? '#5fadff' : '#ff6060' }">
         <Avatar :src="user.avatar" :size="40" />
+        <text :style="{ backgroundColor: '#5fadff' }" v-if="data.myTeam === 1"
+          >蓝队</text
+        >
+        <text :style="{ backgroundColor: '#ff6060' }" v-if="data.myTeam === 0"
+          >红队</text
+        >
+      </view>
       <text v-if="data.battleMode === 1">
-        经验 {{ totalPoints > 0 ? "+" + totalPoints : totalPoints }}
+        你的经验 {{ totalPoints > 0 ? "+" + totalPoints : totalPoints }}
       </text>
       <text v-if="data.battleMode === 2">
-        积分 {{ totalPoints > 0 ? "+" + totalPoints : totalPoints }}
+        你的积分 {{ totalPoints > 0 ? "+" + totalPoints : totalPoints }}
       </text>
     </view>
-    <text class="description">
+    <text v-if="data.battleMode === 2" class="description">
       {{
         getBattleResultTips(data.battleMode, data.mode, {
           win: ifWin,
@@ -210,12 +265,26 @@ const checkBowData = () => {
   position: relative;
 }
 .header-team {
-  width: 80%;
+  width: 82%;
   margin: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #fff;
 }
 .header-team > image {
   width: 20vw;
 }
+.header-team > view {
+  font-size: 14px;
+  display: flex;
+  align-items: flex-end;
+}
+.header-team > view > text {
+  padding: 5px 20px;
+  padding-left: 24px;
+  transform: translateX(15px);
+}
 .battle-winner {
   width: 100%;
   height: 38%;
@@ -232,7 +301,16 @@ const checkBowData = () => {
   top: 0;
   left: 0;
 }
+.battle-winner > image:first-child {
+  animation: rotate 10s linear infinite;
+}
 .battle-winner > image:nth-child(2) {
+  top: 10%;
+}
+.battle-winner > image:nth-child(3) {
+  top: 75%;
+}
+/* .battle-winner > image:nth-child(2) {
   top: 6vw;
 }
 .battle-winner > text:nth-child(3) {
@@ -243,19 +321,35 @@ const checkBowData = () => {
 }
 .battle-winner > text:nth-child(4) {
   margin-bottom: 10px;
-}
+} */
 .battle-e {
   width: 100%;
   height: 60px;
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-top: 20px;
 }
 .battle-e > image {
   position: absolute;
   width: 100vw;
 }
+.battle-e > view:nth-child(2) {
+  position: relative;
+  border: 1px solid;
+  overflow: hidden;
+  width: 40px;
+  height: 40px;
+  box-sizing: border-box;
+  border-radius: 50%;
+}
+.battle-e > view:nth-child(2) > text {
+  font-size: 7px;
+  text-align: center;
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  color: #fff;
+}
 .battle-e > text {
   position: relative;
   font-size: 30px;
@@ -263,16 +357,18 @@ const checkBowData = () => {
   margin-left: 10px;
 }
 .description {
-  margin: 50px 0;
+  margin-top: 50px;
   font-size: 14px;
   color: #fed847;
   width: 100%;
   text-align: center;
+  margin-bottom: 10px;
 }
 .op-btn {
   width: 100%;
   display: flex;
   justify-content: center;
+  margin-top: 30px;
 }
 .op-btn > view {
   width: 36%;

src/pages/melee-match.vue

@@ -144,7 +144,7 @@ async function onReceiveMessage(messages = []) {
         uni.redirectTo({
           url: "/pages/battle-result",
         });
-      }, 3000);
+      }, 1000);
     }
     if (msg.constructor === MESSAGETYPES.BackToGame) {
       uni.$emit("update-header-loading", false);

src/pages/team-match.vue

@@ -235,7 +235,7 @@ async function onReceiveMessage(messages = []) {
           uni.redirectTo({
             url: "/pages/battle-result",
           });
-        }, 1500);
+        }, 1000);
       }
     }
     if (msg.constructor === MESSAGETYPES.BackToGame) {