完成用户升级交互

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: () => {},
-  },
+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(() => {
+      show.value = false;
+    }, timeout);
+  }, 1000);
 });
-onMounted(() => {
-  if (props.lvl > user.value.lvl) {
-    updateUser({ ...user.value, lvl: props.lvl });
-  }
-  setTimeout(() => {
-    props.onClose();
-  }, 1500);
+
+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;