store-manage-app/src/pages/guide/judge.vue

<template>
  <view class="content">
    <template v-if="list.length">
      <uv-swiper
        height="100vh"
        :list="list"
        :autoplay="false"
        :border-radius="0"
        :circular="false"
        circular
      ></uv-swiper>

      <div class="" id="timer">
        <div id="info" @click="launchApp">跳过</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>
    </template>
  </view>
</template>

<script setup>
import { onLoad, onReady, onUnload } from '@dcloudio/uni-app'
import { useUserStore } from '@/store/modules/user'
import { http } from '@/utils/request'
import { ref } from 'vue'

const userStore = useUserStore()
const list = ref([])
const timer = ref(null)

onLoad(() => {
  getInit()
})

onReady(() => {
  setTimer()
})

onUnload(() => {
  if (timer.value) clearInterval(timer.value)
  timer.value = null
})

function setTimer() {
  let count = 6
  timer.value = setInterval(() => {
    count--
    if (count == 0) {
      clearInterval(timer.value)
      launchApp()
    }
  }, 1000)
}

function launchApp() {
  checkLogin()
}

async function getInit() {
  try {
    const resData = await http.get('/configurations')
    list.value = resData.launch_images
  } catch (error) {
  } finally {
    if (list.value.length === 0) {
      checkLogin()
    }
  }
}

const checkLogin = () => {
  if (!userStore.isLogin) {
    uni.redirectTo({
      url: '/pages/login/index',
    })
  } else {
    uni.switchTab({
      url: '/pages/home/index',
    })
  }
}
</script>

<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;
  box-sizing: border-box;
  -webkit-transform: rotate(45deg);
}

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

@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);
  }
}

@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>