palc-newyear2024/src/components/Loading.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);

const entryAni = () => {
  gsap.to(".clock-h", {
    duration: 10,
    rotation: "+=360",
    repeat: -1,
    ease: "none",
  });
  gsap.to(".clock-m", {
    duration: 3,
    rotation: "+=360",
    repeat: -1,
    ease: "none",
  });
  gsap.to(".clock-s", {
    duration: 1,
    rotation: "+=360",
    repeat: -1,
    ease: "none",
  });
};
onMounted(() => {
  entryAni();
  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="clock-box">
        <div class="clock-h"></div>
        <div class="clock-m"></div>
        <div class="clock-s"></div>
        <div class="clock-circle"></div>
      </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%);

    .clock-box {
      @include pos(125px, 125px, 313px, 299px);
      @include bg_pos("load/clock-bg.png");

      .clock-circle {
        @include pos(13px, 13px, 57px, 55px);
        @include bg_pos("load/clock-circle.png");
      }

      .clock-s {
        @include pos(125px, 125px, 0px, 0px);
        @include bg_pos("load/clock-second.png");
      }

      .clock-m {
        @include pos(125px, 125px, 0px, 0px);
        @include bg_pos("load/clock-minute.png");
      }

      .clock-h {
        @include pos(125px, 125px, 0px, 0px);
        @include bg_pos("load/clock-hour.png");
      }
    }

    .load-box {
      @include pos(512px, 38px, 119px, 450px);
      border-style: solid;
      border-width: 2px;
      border-color: #e17c4d;
      border-radius: 20px;
      overflow: hidden;

      .bar {
        @include box(10%, 38px);
        border-radius: 20px;
        background: linear-gradient(45deg, #f2733a, #ffd667);
      }
    }

    .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;
      font-style: italic;
    }

    .btn {
      @include box(200px, 40px);
      line-height: 40px;
      text-align: center;
      background-color: aliceblue;
    }
  }
}
</style>