完成用户升级交互

2025-07-23 20:47:31 +08:00
parent 76e85501d5
commit b1874ba830
6 changed files with 124 additions and 72 deletions
--- a/src/components/UserUpgrade.vue
+++ b/src/components/UserUpgrade.vue
@@ -1,49 +1,75 @@
 <script setup>
-import { onMounted } from "vue";
+import { ref, onMounted, onUnmounted } from "vue";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
 const store = useStore();
 const { user } = storeToRefs(store);
-const { updateUser } = store;
-const props = defineProps({
-  lvl: {
-    type: Number,
-    default: 0,
-  },
-  show: {
-    type: Boolean,
-    default: false,
-  },
-  onClose: {
-    type: Function,
-    default: () => {},
-  },
-});
-onMounted(() => {
-  if (props.lvl > user.value.lvl) {
-    updateUser({ ...user.value, lvl: props.lvl });
+const { updateUser, getLvlName, getLvlImage } = store;
+const show = ref(false);
+const showRank = ref(false);
+const showGrade = ref(false);
+const nextRankTitle = ref("");
+const nextRankImage = ref("");
+const lvl = ref(0);
+const timer = ref(null);
+
+onMounted(async () => {
+  timer.value = setTimeout(() => {
+    let latestRank = 0;
+    let latestLvl = 0;
+    latestRank = parseInt(uni.getStorageSync("latestRank") || 0);
+    latestLvl = parseInt(uni.getStorageSync("latestLvl") || 0);
+    let timeout = 0;
+    if (latestRank > user.value.rankLvl) {
+      nextRankTitle.value = getLvlName(latestRank);
+      nextRankImage.value = getLvlImage(latestRank);
+      show.value = true;
+      showRank.value = true;
+      timeout += 2000;
+      updateUser({ ...user.value, rankLvl: latestRank });
+    }
+    if (latestLvl > user.value.lvl) {
+      lvl.value = latestLvl;
+      show.value = true;
+      setTimeout(() => {
+        showRank.value = false;
+        showGrade.value = true;
+      }, timeout);
+      timeout += 2000;
+      updateUser({ ...user.value, lvl: latestLvl });
    }
    setTimeout(() => {
-    props.onClose();
-  }, 1500);
+      show.value = false;
+    }, timeout);
+  }, 1000);
+});
+
+onUnmounted(() => {
+  if (timer.value) clearTimeout(timer.value);
 });
 </script>

 <template>
  <view class="content" :style="{ display: show ? 'flex' : 'none' }">
-    <view>
+    <view v-if="showRank" class="up-rank">
+      <image :src="user.avatar || '../static/user-icon.png'" mode="widthFix" />
+      <image :src="nextRankImage" mode="widthFix" />
+      <image class="bg-effect" src="../static/shining-bg.png" mode="widthFix" />
+      <image
+        class="bg-effect"
+        src="../static/gold-shining.png"
+        mode="widthFix"
+      />
+    </view>
+    <view v-if="showGrade" class="up-grade">
      <image
        class="scale-in"
        src="../static/user-upgrade.png"
        mode="widthFix"
      />
+      <image class="bg-effect" src="../static/shining-bg.png" mode="widthFix" />
      <image
-        class="scale-in bg-effect"
-        src="../static/shining-bg.png"
-        mode="widthFix"
-      />
-      <image
-        class="scale-in bg-effect"
+        class="bg-effect"
        src="../static/gold-shining.png"
        mode="widthFix"
      />
@@ -51,7 +77,7 @@ onMounted(() => {
    <view class="text-content">
      <image src="../static/update-text-bg.png" />
      <text>恭喜你升级到</text>
-      <text>射灵{{ lvl }}级</text>
+      <text>{{ showRank ? nextRankTitle : `射灵${lvl}级` }}</text>
      <text>!</text>
    </view>
    <!-- <button @click="onClose" hover-class="none">关闭</button> -->
@@ -72,33 +98,51 @@ onMounted(() => {
  z-index: 10;
  color: red;
 }
-.content > view:first-child {
+.up-rank {
+  position: relative;
+  height: 50vw;
+  height: 80vw;
+}
+.up-rank > image:first-child {
+  position: absolute;
+  width: 36vw;
+  left: calc(50% - 18vw);
+  top: calc(50% - 18vw);
+  border-radius: 50%;
+}
+.up-rank > image:nth-child(2) {
+  position: absolute;
+  width: 44vw;
+  left: calc(50% - 22vw);
+  top: calc(50% - 22vw);
+}
+.up-grade {
  position: relative;
 }
-
-.content > view:first-child > image:first-child {
+.up-grade > image:first-child {
  animation: scaleIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
 }
-.content > view:first-child > image:first-child {
+.up-grade > image:first-child {
  width: 50vw;
-  margin: 20vw;
+  margin: 18vw;
 }
 .bg-effect {
  position: absolute;
  width: 80vw;
  left: calc(50% - 40vw);
  z-index: -1;
-  transform: scale(0);
-  opacity: 0;
+  /* transform: scale(0); */
+  /* opacity: 0; */
+  animation: rotate 10s linear infinite;
 }
 .text-content {
  color: #fff;
  display: flex;
  font-size: 20px;
  font-weight: bold;
-  margin-top: -6vw;
  position: relative;
  line-height: 60px;
+  margin-bottom: 20vw;
 }
 .text-content > image:first-child {
  position: absolute;
--- a/src/pages/battle-result.vue
+++ b/src/pages/battle-result.vue
@@ -15,21 +15,33 @@ const ifWin = ref(false);
 const data = ref({});
 const totalPoints = ref(0);
 const rank = ref(0);
-const showUpgrade = ref(false);
-const timer = ref(null);
-const latestLvl = ref(0);

 function exit() {
  uni.navigateBack();
 }

-const checkBowData = () => {
-  uni.navigateTo({
-    url: `/pages/match-detail?id=${data.value.id}`,
-  });
-};
-onMounted(async () => {
+onLoad(async (options) => {
+  if (options.battleId) {
+    battleId.value = options.battleId;
+    const result = await getGameAPI(
+      options.battleId || "BATTLE-1752563964391008873-624"
+    );
+    data.value = result;
+    // if (result.mode === 1 && result.redPlayers[user.value.id]) {
+    //   totalPoints.value = result.redPlayers[user.value.id].totalScore;
+    //   ifWin.value = result.winner === 0;
+    // }
+    // if (result.mode === 1 && result.bluePlayers[user.value.id]) {
+    //   totalPoints.value = result.bluePlayers[user.value.id].totalScore;
+    //   ifWin.value = result.winner === 1;
+    // }
+    // if (result.mode === 2) {
+    //   const mine = result.players.find((p) => p.playerId === user.value.id);
+    //   if (mine) totalPoints.value = mine.totalScore;
+    // }
+  } 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 =
@@ -38,16 +50,15 @@ onMounted(async () => {
      totalPoints.value = mine.totalScore;
      ifWin.value = battleInfo.mode === 1 && mine.team === battleInfo.winner;
    }
-  timer.value = setTimeout(() => {
-    const lastLvl = uni.getStorageSync("latest-lvl");
-    if (parseInt(lastLvl) > user.value.lvl) {
-      latestLvl.value = parseInt(lastLvl);
  }
-  }, 1000);
 });
-onUnmounted(() => {
-  if (timer.value) clearTimeout(timer.value);
+
+const checkBowData = () => {
+  uni.navigateTo({
+    url: `/pages/match-detail?id=${data.value.id}`,
  });
+};
+
 </script>

 <template>
@@ -164,11 +175,7 @@ onUnmounted(() => {
      <view @click="checkBowData">查看成绩</view>
      <view @click="exit">退出</view>
    </view>
-    <UserUpgrade
-      :show="showUpgrade"
-      :onClose="() => (showUpgrade = false)"
-      :lvl="latestLvl"
-    />
+    <UserUpgrade />
  </view>
 </template>

--- a/src/pages/battle-room.vue
+++ b/src/pages/battle-room.vue
@@ -479,7 +479,7 @@ async function onReceiveMessage(messages = []) {
          isEnded.value = true;
          setTimeout(() => {
            uni.redirectTo({
-              url: `/pages/battle-result?battleId=${msg.id}`,
+              url: "/pages/battle-result",
            });
          }, 1500);
        }
@@ -533,6 +533,7 @@ onUnmounted(() => {
    exitRoomAPI(roomNumber.value);
  }
 });
+
 const refreshTimer = ref(null);
 onShow(async () => {
  if (battleId.value) {
--- a/src/pages/melee-match.vue
+++ b/src/pages/melee-match.vue
@@ -175,7 +175,7 @@ async function onReceiveMessage(messages = []) {
        isEnded.value = true;
        setTimeout(() => {
          uni.redirectTo({
-            url: `/pages/battle-result?battleId=${msg.id}`,
+            url: "/pages/battle-result",
          });
        }, 1500);
      }
@@ -211,7 +211,7 @@ onUnmounted(() => {
 const refreshTimer = ref(null);
 onShow(async () => {
  if (battleId.value) {
-    if (!isEnded.value && (await isGameEnded())) return;
+    if (!isEnded.value && (await isGameEnded(battleId.value))) return;
    getCurrentGameAPI();
    const refreshData = () => {
      const lastAwakeTime = uni.getStorageSync("last-awake-time");
--- a/src/pages/team-match.vue
+++ b/src/pages/team-match.vue
@@ -253,7 +253,7 @@ async function onReceiveMessage(messages = []) {
        isEnded.value = true;
        setTimeout(() => {
          uni.redirectTo({
-            url: `/pages/battle-result?battleId=${msg.id}`,
+            url: "/pages/battle-result",
          });
        }, 1500);
      }
--- a/src/websocket.js
+++ b/src/websocket.js
@@ -61,9 +61,9 @@ function createWebSocket(token, onMessage) {
    } else if (msg.constructor === MESSAGETYPES.MatchOver) {
      uni.$emit("game-over");
    } else if (msg.constructor === MESSAGETYPES.RankUpdate) {
-      console.log("RankUpdate", msg);
+      uni.setStorageSync("latestRank", msg.lvl);
    } else if (msg.constructor === MESSAGETYPES.LvlUpdate) {
-      uni.setStorageSync("latest-lvl", msg.lvl);
+      uni.setStorageSync("latestLvl", msg.lvl);
    } else if (msg.constructor === MESSAGETYPES.PaySuccess) {
      console.log(1111111, msg);
    }