diff --git a/src/components/play/ScanPage.vue b/src/components/play/ScanPage.vue index b286cc6..37b7473 100644 --- a/src/components/play/ScanPage.vue +++ b/src/components/play/ScanPage.vue @@ -266,6 +266,11 @@ export default { margin-bottom: 16px; } +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + .notice-text { text-align: center; padding: 20px; diff --git a/src/composables/useQrCode.js b/src/composables/useQrCode.js index fa8d553..b4e3d91 100644 --- a/src/composables/useQrCode.js +++ b/src/composables/useQrCode.js @@ -106,7 +106,7 @@ export function useQrCode() { } } - const processSelectRegionResponse = async (state, countdown, data, startCountdown, startLoginPolling, updateStateFromResponse) => { + const processSelectRegionResponse = async (state, countdown, data, startCountdown, startLoginPolling, updateStateFromResponse, startQrDelayCountdown, clearQrDelayCountdown) => { if (data.qrDelaySeconds && data.qrDelaySeconds > 0 && data.mecmachineId) { console.log('进入延迟分支') await updateStateFromResponse(data, true) @@ -116,8 +116,17 @@ export function useQrCode() { console.log('设置状态:', { status: state.status, isWaitingQr: state.isWaitingQr }) ElMessage.info(`正在准备二维码,请等待 ${data.qrDelaySeconds} 秒...`) + // 启动等待秒数的本地倒计时 + if (typeof startQrDelayCountdown === 'function') { + startQrDelayCountdown(state, data.qrDelaySeconds) + } + setTimeout(async () => { state.isWaitingQr = false + // 清理等待倒计时定时器 + if (typeof clearQrDelayCountdown === 'function') { + clearQrDelayCountdown() + } await fetchQrCodeAfterDelay(state, countdown, data.mecmachineId, data.qrCreatedAt, data.qrExpireAt) @@ -131,6 +140,10 @@ export function useQrCode() { await updateStateFromResponse(data) state.isWaitingQr = false console.log('设置状态:', { status: state.status, isWaitingQr: state.isWaitingQr, qrInfo: !!state.qrInfo }) + // 进入立即分支时,确保清理等待倒计时(如果之前存在) + if (typeof clearQrDelayCountdown === 'function') { + clearQrDelayCountdown() + } if (state.qrInfo && state.qrInfo.url) { const isUrlValid = await validateQrCodeUrl(state.qrInfo.url) diff --git a/src/composables/useTimers.js b/src/composables/useTimers.js index ec60158..fc20ac9 100644 --- a/src/composables/useTimers.js +++ b/src/composables/useTimers.js @@ -9,7 +9,8 @@ export function useTimers() { loginPoll: null, countdown: null, refreshCooldown: null, - progressPoll: null + progressPoll: null, + qrDelay: null }) const clearTimer = (name) => { @@ -98,6 +99,24 @@ export function useTimers() { }, 1000) } + const startQrDelayCountdown = (state, seconds = null) => { + clearTimer('qrDelay') + if (seconds !== null) { + state.qrDelaySeconds = seconds + } + timers.qrDelay = setInterval(() => { + if (state.qrDelaySeconds > 0) { + state.qrDelaySeconds-- + } else { + clearTimer('qrDelay') + } + }, 1000) + } + + const clearQrDelayCountdown = () => { + clearTimer('qrDelay') + } + return { countdown, refreshCooldown, @@ -107,6 +126,8 @@ export function useTimers() { startCountdown, startLoginPolling, startProgressPolling, - startRefreshCooldown + startRefreshCooldown, + startQrDelayCountdown, + clearQrDelayCountdown } } \ No newline at end of file diff --git a/src/views/Play.vue b/src/views/Play.vue index 345257f..fbfd74f 100644 --- a/src/views/Play.vue +++ b/src/views/Play.vue @@ -263,7 +263,9 @@ export default { startCountdown, startLoginPolling, startRefreshCooldown, - startProgressPolling + startProgressPolling, + startQrDelayCountdown, + clearQrDelayCountdown } = useTimers() const { @@ -311,7 +313,9 @@ export default { } }) }, - updateStateFromResponse + updateStateFromResponse, + startQrDelayCountdown, + clearQrDelayCountdown ) } catch (error) { console.error('处理选择区域失败:', error)