shoot-miniprograms/src/components/UserUpgrade.vue

<script setup>
import { onMounted } 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 });
  }
});
</script>

<template>
  <view class="content" :style="{ display: show ? 'flex' : 'none' }">
    <image src="../static/user-upgrade.png" mode="widthFix" />
    <image class="" src="../static/shining-bg.png" mode="widthFix" />
    <view>
      <text>恭喜你升级到</text>
      <text>射灵{{ lvl }}级</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;
}
.content > image:first-child {
  width: 50vw;
  position: absolute;
  top: calc(50% - 30vw);
}
.content > image:nth-child(2) {
  width: 80vw;
}
.content > view:nth-child(3) {
  color: #fff;
  display: flex;
  font-size: 20px;
  font-weight: bold;
  margin-top: -6vw;
}
.content > view:nth-child(3) > text:last-child {
  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>