处理倒计时

This commit is contained in:
2026-05-22 14:29:32 +08:00
parent f8062eae7b
commit 8ef911603e
10 changed files with 36 additions and 27 deletions

View File

@ -23,18 +23,26 @@ export interface CaptchaCountdownState {
* *
* @param key register_phone/register_email/forgotPassword_phone * @param key register_phone/register_email/forgotPassword_phone
* @param totalSeconds 60 * @param totalSeconds 60
* @param pagePrefix
* @returns * @returns
*/ */
export const initCaptchaState = (key: string, totalSeconds: number = 60): CaptchaCountdownState => { export const initCaptchaState = (
key: string,
totalSeconds: number = 60,
pagePrefix?: string
): CaptchaCountdownState => {
// 生成完整的 key包含页面级前缀以避免跨页面状态污染
const fullKey = pagePrefix ? `${pagePrefix}_${key}` : key;
const state: CaptchaCountdownState = { const state: CaptchaCountdownState = {
countdown: ref(0), countdown: ref(0),
isCounting: ref(false), isCounting: ref(false),
timer: null, timer: null,
key key: fullKey
}; };
// 页面刷新后从sessionStorage恢复状态 // 页面刷新后从sessionStorage恢复状态
const stored = getStorage<StoredCaptchaState>(`captcha_${key}`, 'session'); const stored = getStorage<StoredCaptchaState>(`captcha_${fullKey}`, 'session');
if (stored) { if (stored) {
try { try {
const now = Date.now(); const now = Date.now();
@ -58,11 +66,11 @@ export const initCaptchaState = (key: string, totalSeconds: number = 60): Captch
}, 1000); }, 1000);
} else { } else {
// 剩余时间<=0清空本地存储 // 剩余时间<=0清空本地存储
removeStorage(`captcha_${key}`, 'session'); removeStorage(`captcha_${fullKey}`, 'session');
} }
} catch (e) { } catch (e) {
console.error('恢复验证码倒计时状态失败:', e); console.error('恢复验证码倒计时状态失败:', e);
removeStorage(`captcha_${key}`, 'session'); removeStorage(`captcha_${fullKey}`, 'session');
} }
} }

View File

@ -1,7 +1,7 @@
<template> <template>
<div class="table_form-container"> <div class="table_form-container">
<!-- 搜索 --> <!-- 搜索 -->
<FundDetailSearch :search-form="searchForm" :search-options="searchOptions" @search="handleSearch" <FundDetailSearch :search-form="searchForm" :search-options="searchOptions" :buttonLoading="loading" @search="handleSearch"
@reset="handleReset"> @reset="handleReset">
<template #button="{ form }"> <template #button="{ form }">
<el-button type="primary" @click="handleExport()"> 导出 </el-button> <el-button type="primary" @click="handleExport()"> 导出 </el-button>

View File

@ -2,6 +2,7 @@
<div class="rechange-check table_form-container"> <div class="rechange-check table_form-container">
<!-- 搜索区域默认把当天 0 点到当前时间写入时间输入框 --> <!-- 搜索区域默认把当天 0 点到当前时间写入时间输入框 -->
<RechangeSearch <RechangeSearch
:buttonLoading="loading"
:search-form="searchForm" :search-form="searchForm"
:search-options="searchOptions" :search-options="searchOptions"
@search="handleSearch" @search="handleSearch"

View File

@ -227,9 +227,9 @@ const sendState = ref({
countdown: 0, countdown: 0,
}) })
// //
const emailCaptchaState = initCaptchaState('email') // const emailCaptchaState = initCaptchaState('email', 60, 'transfer_email') //
const phoneCaptchaState = initCaptchaState('phone') // const phoneCaptchaState = initCaptchaState('phone', 60, 'transfer_phone') //
// //
const { isCounting: emailIsCounting, countdown: emailCountdown } = emailCaptchaState const { isCounting: emailIsCounting, countdown: emailCountdown } = emailCaptchaState

View File

@ -205,16 +205,16 @@ const passwordForm = reactive<PasswordForm>({
login_password2: '' login_password2: ''
}); });
// //
const showSendButton = ref(true); const showSendButton = ref(true);
const sendState = ref({ isCounting: false, countdown: 0 }); const sendState = ref({ isCounting: false, countdown: 0 });
const phoneCaptchaState = initCaptchaState('phone'); const phoneCaptchaState = initCaptchaState('phone', 60, 'center_phone');
const emailCaptchaState = initCaptchaState('email'); const emailCaptchaState = initCaptchaState('email', 60, 'center_email');
const showPwdSendButton = ref(true); const showPwdSendButton = ref(true);
const pwdSendState = reactive({ isCounting: false, countdown: 0 }); const pwdSendState = reactive({ isCounting: false, countdown: 0 });
const pwdMobileCaptchaState = initCaptchaState('phone'); const pwdMobileCaptchaState = initCaptchaState('phone', 60, 'center_pwd_phone');
const pwdEmailCaptchaState = initCaptchaState('email'); const pwdEmailCaptchaState = initCaptchaState('email', 60, 'center_pwd_email');
const userStore = useUserStore(); const userStore = useUserStore();
const languageStore = useLanguageStore(); const languageStore = useLanguageStore();

View File

@ -86,9 +86,9 @@ const sendState = ref<object>({
isCounting: false, isCounting: false,
countdown: 0, countdown: 0,
}) })
// //
const emailCaptchaState = initCaptchaState('email'); // const emailCaptchaState = initCaptchaState('email', 60, 'changepwd_email'); //
const phoneCaptchaState = initCaptchaState('phone'); // const phoneCaptchaState = initCaptchaState('phone', 60, 'changepwd_phone'); //
// //
const { isCounting: emailIsCounting, countdown: emailCountdown } = emailCaptchaState const { isCounting: emailIsCounting, countdown: emailCountdown } = emailCaptchaState
// //

View File

@ -116,9 +116,9 @@ const sendState = ref<object>({
isCounting: false, isCounting: false,
countdown: 0, countdown: 0,
}) })
// //
const emailCaptchaState = initCaptchaState('email'); // const emailCaptchaState = initCaptchaState('email', 60, 'forgot_email'); //
const phoneCaptchaState = initCaptchaState('phone'); // const phoneCaptchaState = initCaptchaState('phone', 60, 'forgot_phone'); //
// //
const { isCounting: emailIsCounting, countdown: emailCountdown } = emailCaptchaState const { isCounting: emailIsCounting, countdown: emailCountdown } = emailCaptchaState
// //

View File

@ -163,9 +163,9 @@ const registerRules = ref<FormRules>({
code: codeRules().code, code: codeRules().code,
}) })
// //
const emailCaptchaState = initCaptchaState('email') // const emailCaptchaState = initCaptchaState('email', 60, 'register_email') //
const phoneCaptchaState = initCaptchaState('phone') // const phoneCaptchaState = initCaptchaState('phone', 60, 'register_phone') //
// //
const { isCounting: emailIsCounting, countdown: emailCountdown } = emailCaptchaState const { isCounting: emailIsCounting, countdown: emailCountdown } = emailCaptchaState
// //

View File

@ -60,8 +60,8 @@ const sendState = ref<object>({
isCounting: false, isCounting: false,
countdown: 0, countdown: 0,
}) })
// //
const emailCaptchaState = initCaptchaState('email'); const emailCaptchaState = initCaptchaState('email', 60, 'bindemail_email');
// //
const { isCounting: emailIsCounting, countdown: emailCountdown } = emailCaptchaState const { isCounting: emailIsCounting, countdown: emailCountdown } = emailCaptchaState

View File

@ -70,8 +70,8 @@ const sendState = ref<object>({
isCounting: false, isCounting: false,
countdown: 0, countdown: 0,
}) })
// //
const phoneCaptchaState = initCaptchaState('phone'); const phoneCaptchaState = initCaptchaState('phone', 60, 'bindphone_phone');
// //
const { isCounting: phoneIsCounting, countdown: phoneCountdown } = phoneCaptchaState const { isCounting: phoneIsCounting, countdown: phoneCountdown } = phoneCaptchaState