8 changed files with 121 additions and 131 deletions
@ -1,115 +1,105 @@ |
|||||
import { toRefs, computed, reactive, onMounted, ref } from 'vue' |
|
||||
|
import { ref, computed, onMounted, watch } from 'vue' |
||||
import { useRouter } from 'vue-router' |
import { useRouter } from 'vue-router' |
||||
import { useLogout } from '@/composables/useLogout' |
|
||||
import { getBackTime } from '@/http/api/base' |
import { getBackTime } from '@/http/api/base' |
||||
|
import { useLogout } from '@/composables/useLogout' |
||||
import { isAndroid } from '@/utils/utils' |
import { isAndroid } from '@/utils/utils' |
||||
|
|
||||
type Reactive = { |
|
||||
totalTime: [number, number] //总时间
|
|
||||
countDownToIndexTimer: any //返回首页的定时器
|
|
||||
countDownToWallpaperTimer: any //返回屏保的定时器
|
|
||||
countDownToIndexTimes: number //返回首页倒计时时间
|
|
||||
countDownToWallpaperTimes: number //返回首页倒计时时间
|
|
||||
isWallpaper: boolean //当前是回到首页还是回到屏保
|
|
||||
countDownGif: boolean //是否显示倒计时gif动图
|
|
||||
} |
|
||||
|
|
||||
export const useHandleScreen = (callback: () => void) => { |
export const useHandleScreen = (callback: () => void) => { |
||||
|
const MIN_TIME = 0 |
||||
|
const MAX_TIME = 5 |
||||
|
const CHECK_TIME = 1000 |
||||
|
const DELAY_CHECK_TIME = 400 |
||||
const _isAndroid = isAndroid() |
const _isAndroid = isAndroid() |
||||
|
|
||||
const router = useRouter() |
const router = useRouter() |
||||
const { logoutRef, resetClickNumber, setLogoutRef, addTotalClick } = useLogout() |
const { logoutRef, resetClickNumber, setLogoutRef, addTotalClick } = useLogout() |
||||
|
|
||||
const state = reactive<Reactive>({ |
|
||||
totalTime: [60, 0], //总时间
|
|
||||
countDownToIndexTimer: 0, //返回首页的定时器
|
|
||||
countDownToWallpaperTimer: 0, //返回屏保的定时器
|
|
||||
countDownToIndexTimes: 0, //返回首页倒计时时间
|
|
||||
countDownToWallpaperTimes: 0, //返回首页倒计时时间
|
|
||||
isWallpaper: false, //当前是回到首页还是回到屏保
|
|
||||
countDownGif: false //是否显示倒计时gif动图
|
|
||||
}) |
|
||||
|
|
||||
const title = computed(() => (state.isWallpaper ? '即将进入屏幕保护' : '即将进入首页')) |
|
||||
|
const totalTime = ref<number[]>([60, 60]) //总时间
|
||||
|
const toIndexTime = ref(60) //回首页的时间
|
||||
|
const toWallpaperTime = ref(60) //回屏保的时间
|
||||
|
const isWallpaper = ref(false) //回首页是否已经跑完
|
||||
|
const showCountDownDialog = ref(false) |
||||
|
const title = computed(() => (isWallpaper.value ? '即将进入屏幕保护' : '即将进入首页')) |
||||
|
|
||||
//超过一分钟未操作回到首页
|
|
||||
const delayCheckRouterPathTimer = ref<any>() |
|
||||
const checkHandleScreen = (e: TouchEvent) => { |
|
||||
!_isAndroid && addTotalClick(e) |
|
||||
clearTimeout(delayCheckRouterPathTimer.value) |
|
||||
clearInterval(state.countDownToIndexTimer) |
|
||||
clearInterval(state.countDownToWallpaperTimer) |
|
||||
state.countDownToIndexTimes = state.totalTime[0] |
|
||||
state.countDownToWallpaperTimes = state.totalTime[1] |
|
||||
state.isWallpaper = false |
|
||||
state.countDownGif = false |
|
||||
//延迟判断当前路由处于哪个当中
|
|
||||
delayCheckRouterPathTimer.value = setTimeout(async () => { |
|
||||
//如果当前路由不是根路由且倒计时满足条件时优先弹出返回首页
|
|
||||
if (router.currentRoute.value.fullPath !== '/') { |
|
||||
await countDownToIndex() |
|
||||
callback && callback() |
|
||||
} |
|
||||
|
const toIndexInterval = ref() |
||||
|
const toWallpaperInterval = ref() |
||||
|
const delayCheckRoutePathTimer = ref() |
||||
|
|
||||
//返回屏保时长不为0时跳出返回屏保弹框
|
|
||||
if (state.countDownToWallpaperTimes !== 0) { |
|
||||
await countDownToWallpaper() |
|
||||
callback && callback() |
|
||||
} |
|
||||
}, 400) |
|
||||
} |
|
||||
|
|
||||
//检测倒计时返回首页弹框是否满足要求
|
|
||||
function countDownToIndex() { |
|
||||
clearInterval(state.countDownToIndexTimer) |
|
||||
|
function sleepToIndex() { |
||||
|
isWallpaper.value = false |
||||
return new Promise<void>(resolve => { |
return new Promise<void>(resolve => { |
||||
state.countDownToIndexTimer = setInterval(() => { |
|
||||
state.countDownToIndexTimes-- |
|
||||
if (state.countDownToIndexTimes > 0 && state.countDownToIndexTimes <= 5) { |
|
||||
state.countDownGif = true |
|
||||
} |
|
||||
if (state.countDownToIndexTimes <= 0) { |
|
||||
clearInterval(state.countDownToIndexTimer) |
|
||||
state.countDownGif = false |
|
||||
state.countDownToIndexTimes = state.totalTime[0] |
|
||||
|
toIndexInterval.value = setInterval(() => { |
||||
|
toIndexTime.value-- |
||||
|
if (toIndexTime.value <= MIN_TIME) { |
||||
|
clearInterval(toIndexInterval.value) |
||||
|
toIndexTime.value = totalTime.value[0] |
||||
|
isWallpaper.value = false |
||||
resolve() |
resolve() |
||||
} |
} |
||||
}, 1000) |
|
||||
|
}, CHECK_TIME) |
||||
}) |
}) |
||||
} |
} |
||||
//检测倒计时返回屏保弹框是否满足要求
|
|
||||
function countDownToWallpaper() { |
|
||||
clearInterval(state.countDownToWallpaperTimer) |
|
||||
state.countDownToWallpaperTimes = state.totalTime[1] |
|
||||
|
function sleepToWallpaper() { |
||||
|
isWallpaper.value = true |
||||
return new Promise<void>(resolve => { |
return new Promise<void>(resolve => { |
||||
state.countDownToWallpaperTimer = setInterval(() => { |
|
||||
state.countDownToWallpaperTimes-- |
|
||||
if (state.countDownToWallpaperTimes > 0 && state.countDownToWallpaperTimes <= 5) { |
|
||||
state.isWallpaper = true |
|
||||
state.countDownGif = true |
|
||||
} |
|
||||
if (state.countDownToWallpaperTimes <= 0) { |
|
||||
clearInterval(state.countDownToWallpaperTimer) |
|
||||
state.countDownGif = false |
|
||||
state.isWallpaper = false |
|
||||
state.countDownToWallpaperTimes = state.totalTime[1] |
|
||||
|
toWallpaperInterval.value = setInterval(() => { |
||||
|
toWallpaperTime.value-- |
||||
|
if (toWallpaperTime.value <= MIN_TIME) { |
||||
|
clearInterval(toWallpaperInterval.value) |
||||
|
toWallpaperTime.value = totalTime.value[1] |
||||
|
isWallpaper.value = false |
||||
resolve() |
resolve() |
||||
} |
} |
||||
}, 1000) |
|
||||
|
}, CHECK_TIME) |
||||
}) |
}) |
||||
} |
} |
||||
|
|
||||
onMounted(_getBackTime) |
|
||||
//获取返回时长
|
|
||||
async function _getBackTime() { |
|
||||
try { |
|
||||
const { data } = await getBackTime() |
|
||||
state.totalTime = data |
|
||||
state.countDownToIndexTimes = data[0] |
|
||||
state.countDownToWallpaperTimes = data[1] |
|
||||
} catch (error) { |
|
||||
console.log('error: ', error) |
|
||||
} |
|
||||
|
async function checkHandleScreen(e: TouchEvent) { |
||||
|
!_isAndroid && addTotalClick(e) |
||||
|
toIndexTime.value = totalTime.value[0] |
||||
|
toWallpaperTime.value = totalTime.value[1] |
||||
|
|
||||
|
clearInterval(toIndexInterval.value) |
||||
|
clearInterval(toWallpaperInterval.value) |
||||
|
clearTimeout(delayCheckRoutePathTimer.value) |
||||
|
|
||||
|
delayCheckRoutePathTimer.value = setTimeout(async () => { |
||||
|
if (router.currentRoute.value.fullPath !== '/') { |
||||
|
await sleepToIndex() |
||||
|
callback() |
||||
|
} |
||||
|
await sleepToWallpaper() |
||||
|
callback() |
||||
|
}, DELAY_CHECK_TIME) |
||||
} |
} |
||||
|
|
||||
return { ...toRefs(state), title, logoutRef, checkHandleScreen, resetClickNumber, setLogoutRef } |
|
||||
|
//监听时间 大于等于0且小于等于5时显示弹框
|
||||
|
watch([toIndexTime, toWallpaperTime], ([indexTime, wallpaperTime]) => { |
||||
|
if ((indexTime >= MIN_TIME && indexTime <= MAX_TIME) || (wallpaperTime >= MIN_TIME && wallpaperTime <= MAX_TIME)) { |
||||
|
showCountDownDialog.value = true |
||||
|
} else { |
||||
|
showCountDownDialog.value = false |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
onMounted(() => { |
||||
|
//获取返回首页和进入屏保的具体时间
|
||||
|
getBackTime().then(({ data }) => { |
||||
|
totalTime.value = data |
||||
|
toIndexTime.value = data[0] |
||||
|
toWallpaperTime.value = data[1] |
||||
|
}) |
||||
|
}) |
||||
|
return { |
||||
|
isWallpaper, |
||||
|
showCountDownDialog, |
||||
|
title, |
||||
|
checkHandleScreen, |
||||
|
totalTime, |
||||
|
toIndexTime, |
||||
|
toWallpaperTime, |
||||
|
logoutRef, |
||||
|
resetClickNumber, |
||||
|
setLogoutRef |
||||
|
} |
||||
} |
} |
||||
|
|||||
Loading…
Reference in new issue