150 lines
3.3 KiB
Vue
150 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) => {
|
|
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">
|
|
<span class="num">{{ loadNum }}%</span>
|
|
</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("index/bg.jpg");
|
|
}
|
|
|
|
.load-container {
|
|
position: relative;
|
|
@include box(750px, 1180px);
|
|
// transform: translateY(-50%);
|
|
|
|
.load-icon {
|
|
@include pos(363px, 136px, 335px, 320px);
|
|
@include bg_pos("load/icon.png");
|
|
}
|
|
|
|
.load-box {
|
|
@include pos(582px, 45px, 83px, 450px);
|
|
border-radius: 25px;
|
|
padding: 1px;
|
|
border: 1px solid rgb(243, 87, 4);
|
|
|
|
|
|
.bar {
|
|
@include box(0%, 38px);
|
|
border-radius: 20px;
|
|
border: 1px solid rgb(255, 255, 255);
|
|
|
|
background-image: -webkit-linear-gradient(0deg, #f7c86f 0%, #f25501 100%);
|
|
|
|
}
|
|
}
|
|
|
|
.load-num {
|
|
@include pos(235px, 80px, 256px, 511px);
|
|
@include bg_pos("load/icon-2.png");
|
|
|
|
@include flexCen();
|
|
|
|
|
|
.num {
|
|
font-size: 40px;
|
|
color: #f25501;
|
|
font-weight: 700;
|
|
|
|
/* 文字填充色 */
|
|
text-shadow:
|
|
-1px -1px 0 #ffffff,
|
|
1px -1px 0 #ffffff,
|
|
-1px 1px 0 #ffffff,
|
|
1px 1px 0 #ffffff;
|
|
/* 四个方向阴影叠加 */
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
@include box(200px, 40px);
|
|
line-height: 40px;
|
|
text-align: center;
|
|
background-color: aliceblue;
|
|
}
|
|
}
|
|
}
|
|
</style>
|