完成用户升级交互

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 { updateUser, getLvlName, getLvlImage } = store;
-const props = defineProps({
+const show = ref(false);
-  lvl: {
+const showRank = ref(false);
-    type: Number,
+const showGrade = ref(false);
-    default: 0,
+const nextRankTitle = ref("");
-  },
+const nextRankImage = ref("");
-  show: {
+const lvl = ref(0);
-    type: Boolean,
+const timer = ref(null);
-    default: false,
+
-  },
+onMounted(async () => {
-  onClose: {
+  timer.value = setTimeout(() => {
-    type: Function,
+    let latestRank = 0;
-    default: () => {},
+    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(() => {
+      show.value = false;
+    }, timeout);
+  }, 1000);
 });
-onMounted(() => {
+
-  if (props.lvl > user.value.lvl) {
+onUnmounted(() => {
-    updateUser({ ...user.value, lvl: props.lvl });
+  if (timer.value) clearTimeout(timer.value);
-  }
-  setTimeout(() => {
-    props.onClose();
-  }, 1500);
 });
 </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"
+        class="bg-effect"
-        src="../static/shining-bg.png"
-        mode="widthFix"
-      />
-      <image
-        class="scale-in 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;
 }
-
+.up-grade > image:first-child {
-.content > view:first-child > 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);
+  /* transform: scale(0); */
-  opacity: 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;

src/pages/battle-result.vue

@@ -15,39 +15,50 @@ 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();
 }
 
+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 =
+      battleInfo.playerStats.findIndex((p) => p.id === user.value.id) + 1;
+    if (mine) {
+      totalPoints.value = mine.totalScore;
+      ifWin.value = battleInfo.mode === 1 && mine.team === battleInfo.winner;
+    }
+  }
+});
+
 const checkBowData = () => {
   uni.navigateTo({
     url: `/pages/match-detail?id=${data.value.id}`,
   });
 };
-onMounted(async () => {
+
-  const battleInfo = uni.getStorageSync("last-battle");
-  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 (mine) {
-    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);
-});
 </script>
 
 <template>
@@ -164,11 +175,7 @@ onUnmounted(() => {
       <view @click="checkBowData">查看成绩</view>
       <view @click="exit">退出</view>
     </view>
-    <UserUpgrade
+    <UserUpgrade />
-      :show="showUpgrade"
-      :onClose="() => (showUpgrade = false)"
-      :lvl="latestLvl"
-    />
   </view>
 </template>
 

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) {

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");

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);
       }

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);
     }