141 lines
3.3 KiB
Vue
141 lines
3.3 KiB
Vue
<script setup>
|
|
import { Toast } from "vant";
|
|
import gsap from "gsap";
|
|
import Preloader from "@/plugins/Preloader";
|
|
import { loadImg, pageImg } from "@/data/imgList";
|
|
import { getMyPrize } from "@/api";
|
|
import { useMainStore } from "@/store";
|
|
|
|
// 页面配置初始化
|
|
const emit = defineEmits(["LoadPage"]);
|
|
const userStore = useMainStore();
|
|
|
|
const loadNum = ref(0);
|
|
|
|
onMounted(() => {
|
|
|
|
Preloader({
|
|
name: "加载页资源",
|
|
imgs: loadImg,
|
|
callback: (progress) => {
|
|
// console.log('进度：', progress);
|
|
},
|
|
}).then((res) => {
|
|
gsap.to(".LoadPage", {
|
|
duration: 0.2,
|
|
autoAlpha: 1,
|
|
onComplete: () => {
|
|
if (import.meta.env.VITE_MODE != "dev") {
|
|
getMyPrize({}, userStore.token).then((res) => {
|
|
if (res.code == 0) {
|
|
console.log("我的奖品", res);
|
|
if (res.data) {
|
|
console.log("有奖品");
|
|
userStore.updatePrize(res.data);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
Preloader({
|
|
name: "内页资源",
|
|
imgs: pageImg,
|
|
callback: (progress) => {
|
|
// console.log('进度：', progress);
|
|
gsap.set(".bar", { width: progress + "%" });
|
|
loadNum.value = progress;
|
|
},
|
|
}).then((res) => {
|
|
console.log("加载完成");
|
|
|
|
gsap.to(".LoadPage", {
|
|
duration: 1,
|
|
autoAlpha: 0,
|
|
onComplete: () => {
|
|
emit("LoadPage", { action: "hide" });
|
|
},
|
|
});
|
|
});
|
|
},
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="LoadPage" @touchmove.prevent>
|
|
<div class="load-bg"></div>
|
|
<div class="load-container">
|
|
<div class="load-icon"></div>
|
|
<div class="load-box">
|
|
<div class="bar"></div>
|
|
</div>
|
|
<div class="load-num">{{ loadNum }}%</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.LoadPage {
|
|
@include pos(100%, 100%, 0px, 0px);
|
|
|
|
overflow: hidden;
|
|
@include flexCen();
|
|
|
|
.load-bg {
|
|
@include pos(750px, 100%, 0px, 50%);
|
|
transform: translateY(-50%);
|
|
@include bg_pos("load/bg.jpg");
|
|
}
|
|
|
|
.load-container {
|
|
position: relative;
|
|
@include box(750px, 1180px);
|
|
// transform: translateY(-50%);
|
|
|
|
.load-icon{
|
|
@include pos(101px, 55px, 325px, 370px);
|
|
@include bg_pos("load/icon.png");
|
|
}
|
|
|
|
.load-box {
|
|
@include pos(512px, 35px, 119px, 450px);
|
|
border-style: solid;
|
|
border-width: 2px;
|
|
border-color: #e17c4d;
|
|
border-radius: 20px;
|
|
padding: 2px;
|
|
|
|
.bar {
|
|
@include box(0%, 26px);
|
|
border-radius: 20px;
|
|
background: linear-gradient( -178deg, rgb(255,184,127) 0%, rgb(255,238,186) 100%);
|
|
background-image: -webkit-linear-gradient( -178deg, rgb(255,184,127) 0%, rgb(255,238,186) 100%);
|
|
|
|
}
|
|
}
|
|
|
|
.load-num {
|
|
@include pos(750px, 50px, 0px, 511px);
|
|
text-align: center;
|
|
font-size: 38px;
|
|
color: #ffaf5e;
|
|
line-height: 40px;
|
|
font-weight: 700;
|
|
background: linear-gradient(to right, #f2733a, #ffd667);
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
// letter-spacing: 2px;
|
|
}
|
|
|
|
.btn {
|
|
@include box(200px, 40px);
|
|
line-height: 40px;
|
|
text-align: center;
|
|
background-color: aliceblue;
|
|
}
|
|
}
|
|
}
|
|
</style>
|