1v1比赛结果页UI更新

2025-08-01 15:25:51 +08:00
parent d7306db2dd
commit 18ac484844
11 changed files with 154 additions and 45 deletions
--- a/src/pages/battle-result.vue
+++ b/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" />
-      <Avatar :src="user.avatar" :size="40" />
+      <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%;
--- a/src/pages/melee-match.vue
+++ b/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);
--- a/src/pages/team-match.vue
+++ b/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) {