shoot-miniprograms/src/components/UserUpgrade.vue

<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user } = storeToRefs(store);
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);
});

onBeforeUnmount(() => {
  if (timer.value) clearTimeout(timer.value);
});
</script>

<template>
  <view class="content" :style="{ display: show ? 'flex' : 'none' }">
    <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="bg-effect"
        src="../static/gold-shining.png"
        mode="widthFix"
      />
    </view>
    <view class="text-content">
      <image src="../static/update-text-bg.png" />
      <text>恭喜你升级到</text>
      <text>{{ showRank ? nextRankTitle : `射灵${lvl}级` }}</text>
      <text>!</text>
    </view>
    <!-- <button @click="onClose" hover-class="none">关闭</button> -->
  </view>
</template>

<style scoped>
.content {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #232323;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10;
  color: red;
}
.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 {
  animation: scaleIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.up-grade > image:first-child {
  width: 50vw;
  margin: 18vw;
}
.bg-effect {
  position: absolute;
  width: 80vw;
  left: calc(50% - 40vw);
  z-index: -1;
  /* transform: scale(0); */
  /* opacity: 0; */
  animation: rotate 10s linear infinite;
}
.text-content {
  color: #fff;
  display: flex;
  font-size: 20px;
  font-weight: bold;
  position: relative;
  line-height: 60px;
  margin-bottom: 20vw;
}
.text-content > image:first-child {
  position: absolute;
  width: 80vw;
  left: calc(50% - 40vw);
  height: 60px;
}
.text-content > text:nth-child(3) {
  color: #fed847;
}
.content > button:last-child {
  color: #fff9;
  font-size: 20px;
  border: 1px solid #fff;
  padding: 10px;
  width: 50vw;
  border-radius: 20px;
  margin-top: 10vw;
}
</style>