姜鑫
3 years ago
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 { useLogout } from '@/composables/useLogout' |
|||
import { getBackTime } from '@/http/api/base' |
|||
import { useLogout } from '@/composables/useLogout' |
|||
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) => { |
|||
const MIN_TIME = 0 |
|||
const MAX_TIME = 5 |
|||
const CHECK_TIME = 1000 |
|||
const DELAY_CHECK_TIME = 400 |
|||
const _isAndroid = isAndroid() |
|||
|
|||
const router = useRouter() |
|||
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 => { |
|||
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() |
|||
} |
|||
}, 1000) |
|||
}, CHECK_TIME) |
|||
}) |
|||
} |
|||
//检测倒计时返回屏保弹框是否满足要求
|
|||
function countDownToWallpaper() { |
|||
clearInterval(state.countDownToWallpaperTimer) |
|||
state.countDownToWallpaperTimes = state.totalTime[1] |
|||
function sleepToWallpaper() { |
|||
isWallpaper.value = true |
|||
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() |
|||
} |
|||
}, 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