THJ_Mobile/src/packages/mobile/views/boot/index.vue

<template>
  <div class="boot">
    <Swipe class="boot__guide" :loop="false" v-if="guidePage">
      <SwipeItem>
        <img src="@mobile/assets/images/boot-720p.png" />
      </SwipeItem>
      <SwipeItem>
        <img src="@mobile/assets/images/guide-1.png" />
      </SwipeItem>
      <SwipeItem>
        <img src="@mobile/assets/images/guide-2.png" @click="skip" />
      </SwipeItem>
    </Swipe>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Swipe, SwipeItem } from 'vant'
import { initBaseData } from '@/business/common'
import service from '@/services'
import socket from '@/services/socket'
import plus from '@/utils/h5plus'

const route = useRoute()
const router = useRouter()
const guidePage = localStorage.getItem('thj_app_guide') === 'false' ? false : true // 是否显示引导页
const countdown = 1  // 倒计时秒数

const state = reactive({
  loading: true,
  second: countdown, // 剩余秒数
  currentRate: 100, // 当前进度
  rate: 100, // 目标进度
})

// 倒计时
const timer = window.setInterval(() => {
  state.second--
  state.rate = (100 / countdown) * state.second
  if (state.second <= 0) {
    // 判断是否首次打开应用
    if (guidePage) {
      localStorage.setItem('thj_app_guide', 'false')
    } else {
      skip()
    }
  }
}, 1000)

// 跳过广告
const skip = () => {
  clearInterval(timer)
  plus.exitFullSreen()
  // 判断服务是否初始化完成
  if (state.loading) {
    router.replace('/user/login')
  } else {
    const redirect = route.query.redirect
    if (redirect) {
      router.replace(redirect.toString())
    } else {
      router.replace('/')
    }
  }
}

plus.setFullSreen()
// 等待服务初始化
service.onReady().then(async () => {
  // 等待连接交易服务
  await socket.connectTrade()
  // 等待业务数据初始化
  await initBaseData()
  state.loading = false
})
</script>

<style lang="less" scoped>
@import './index.less';
</style>