njDaTuSha/src/pages/loading/index.vue

<template>
  <div class="page pg-bg loading-pg" @click.prevent.stop="onClick" @touchmove.prevent @touchend.stop="onClick">
    <div class="header abs">
      <Bell />
    </div>
    <div class="content">
      <div class="loading-main">
        <div class="main-img">
          <Flower :percent="percent" />
        </div>
        <div class="txt">
          <LoadingTxt />
          <div>{{percent}}</div>
        </div>
      </div>
    </div>
    <DownArrow v-if="percent == '100%'" style="bottom: 120px" />
    <!-- <div class="footer abs txt">
      主办单位：中共南京市委网信办、共青团南京市委员会、南京广播电视集团、侵华日军南京大屠杀遇难同胞纪念馆
    </div> -->
  </div>
</template>

<script setup>
  import { computed, onMounted, ref } from 'vue';
  import Bell from '@/components/Bell.vue';
  import DownArrow from '@/components/DownArrow.vue';
  import LoadingTxt from './LoadingTxt.vue';
  import Flower from './Flower.vue';
  import { preload } from '@/utils/preload';
  import throttle from '@/utils/throttle';

  const emit = defineEmits(['ready']);

  const percent = ref('0%');
  const finished = ref(false);

  const onClick = () => {
    if (!finished.value) return;

    const t = setTimeout(() => {
      emit('ready');
      clearTimeout(t);
    }, 100);
  }

  const callback = (val) => {
    console.log('------val----->', val)
    const p = Number(val * 100).toFixed(2);
    percent.value = `${p}%`
  }

  onMounted(() => {
    preload(throttle(callback, 0)).then(() => {
      percent.value = `${100}%`
      finished.value = true;
      // emit('ready');
    });
  });
</script>

<style lang="less" scoped>
.loading-pg {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-image: url(/images/loading/bg.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;

  .content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .loading-main {
      position: relative;
      text-align: center;
      width: 80vw;
      flex: none;
      display: flex;
      align-items: center;
      justify-content: center;

      .main-img {
        flex: none;
        width: 20vw;
        position: relative;
      }
    }
  }

  .header {
    top: 24px;
    right: 24px;
    width: 40px;
  }

  .footer {
    font-size: 12px;
    text-align: center;
    bottom: 12px;
    left: 0;
    padding: 0 16px;
  }
}
</style>