<template>
  <view class="">
    <view class="overflow-hidden" :style="{ height: hpx }">
      <image v-if="banner" mode="widthFix" class="w-full h-full" :src="banner" />
      <div class="" id="timer" @click="launchApp">
        <div id="info">跳过</div>
        <div class="circleProgress_wrapper">
          <div class="wrapper right">
            <div class="circleProgress rightcircle"></div>
          </div>
          <div class="wrapper left">
            <div class="circleProgress leftcircle"></div>
          </div>
        </div>
      </div>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      hpx: '100%',
      banner: '',
      timer: null,
    };
  },
  async onLoad({ url }) {
    this.banner = url;
    //#ifdef APP-PLUS
    plus.navigator.closeSplashscreen();
    // #endif
    uni.getSystemInfo({
      success: (res) => {
        this.hpx = res.windowHeight + 'px';
      },
    });
  },
  onReady() {
    this.setTimer();
  },
  methods: {
    setTimer() {
      let count = 4;
      this.timer = setInterval(() => {
        count--;
        if (count == 0) {
          clearInterval(this.timer);
          this.launchApp();
        }
      }, 1000);
    },
    launchApp() {
      uni.switchTab({
        url: '/pages/index/index',
      });
      //跳过引导页,储存本地值,下次进入直接跳过
      // uni.setStorage({
      //   key: 'launchFlag',
      //   data: true,
      //   success() {
      //     uni.switchTab({
      //       url: '/pages/index/index'
      //     });
      //   },
      // });
    },
  },
  onUnload(){
    if(this.timer) clearInterval(this.timer)
    this.timer=null
  }
};
</script>
<style>
page {
  background-color: #ffffff;
  min-height: 100%;
  height: 100%;
}
</style>
<style lang="scss">
#timer {
  display: inline-block;
  position: fixed;
  top: 40px;
  right: 10px;
  box-sizing: inherit;
}

#info {
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  line-height: 36px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.3);
  text-align: center;
  color: #ffffff;
  font-size: 12px;
}

.circleProgress_wrapper {
  width: 36px;
  height: 36px;
  position: relative;
}

.wrapper {
  width: 18px;
  height: 36px;
  position: absolute;
  top: 0;
  overflow: hidden;
}

.right {
  right: 0;
}

.left {
  left: 0;
}

.circleProgress {
  width: 36px;
  height: 36px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  position: absolute;
  top: 0;
  -webkit-transform: rotate(45deg);
}

.rightcircle {
  border-top: 2px solid #03a9f4;
  border-right: 2px solid #03a9f4;
  right: 0;
  -webkit-animation: circleProgressLoad_right 4s linear;
  /*动画停留在最后一帧*/
  animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
}

.leftcircle {
  border-bottom: 2px solid #03a9f4;
  border-left: 2px solid #03a9f4;
  left: 0;
  -webkit-animation: circleProgressLoad_left 4s linear;
  /*动画停留在最后一帧*/
  animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
}

@-webkit-keyframes circleProgressLoad_right {
  0% {
    border-top: 2px solid #03a9f4;
    border-right: 2px solid #03a9f4;
    -webkit-transform: rotate(45deg);
  }

  50% {
    border-top: 2px solid #03a9f4;
    border-right: 2px solid #03a9f4;
    border-left: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    -webkit-transform: rotate(225deg);
  }

  100% {
    border-left: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    -webkit-transform: rotate(225deg);
  }
}

@-webkit-keyframes circleProgressLoad_left {
  0% {
    border-bottom: 2px solid #03a9f4;
    border-left: 2px solid #03a9f4;
    -webkit-transform: rotate(45deg);
  }

  50% {
    border-bottom: 2px solid #03a9f4;
    border-left: 2px solid #03a9f4;
    border-top: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    -webkit-transform: rotate(45deg);
  }

  100% {
    border-top: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    -webkit-transform: rotate(225deg);
  }
}
</style>
