bimwe/mini-programs
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加验证码处理逻辑

Browse Source
This commit is contained in:
张成
2025-08-24 15:40:37 +08:00
parent b92301a887
commit 5e31adee53
5 changed files with 152 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/pages/login/verification/index.scss
View File

@@ -273,6 +273,16 @@
font-size: 14px;
line-height: 1.714;
color: rgba(60, 60, 67, 0.3);
.count_number {
color: rgba(60, 60, 67, 0.3);
transition: color 0.3s ease;
&.active {
color: #000000;
font-weight: 500;
}
}
}
}
}
@@ -321,6 +331,16 @@
font-size: 14px;
line-height: 1.714;
color: rgba(60, 60, 67, 0.3);
.count_number {
color: rgba(60, 60, 67, 0.3);
transition: color 0.3s ease;
&.active {
color: #000000;
font-weight: 500;
}
}
}
}

81
src/pages/login/verification/index.tsx
View File

@@ -10,11 +10,11 @@ const VerificationPage: React.FC = () => {
const [countdown, setCountdown] = useState(0);
const [can_send_code, setCanSendCode] = useState(true);
const [is_loading, setIsLoading] = useState(false);
const [code_input_focus, setCodeInputFocus] = useState(false);
// 计算登录按钮是否应该启用
const can_login = phone.length === 11 && verification_code.length === 6 && !is_loading;
// 返回上一页
const handle_go_back = () => {
Taro.navigateBack();
};
// 发送验证码
const handle_send_code = async () => {
@@ -30,10 +30,16 @@ const VerificationPage: React.FC = () => {
if (!can_send_code) return;
try {
console.log('开始发送验证码，手机号:', phone);
// 调用发送短信接口
const result = await send_sms_code(phone);
console.log('发送验证码结果:', result);
if (result.success) {
console.log('验证码发送成功，开始倒计时');
Taro.showToast({
title: '验证码已发送',
icon: 'success',
@@ -43,7 +49,19 @@ const VerificationPage: React.FC = () => {
// 开始倒计时
setCanSendCode(false);
setCountdown(60);
console.log('设置状态: can_send_code = false, countdown = 60');
// 发送验证码成功后，让验证码输入框获得焦点并调用系统键盘
setTimeout(() => {
// 设置验证码输入框聚焦状态
setCodeInputFocus(true);
// 清空验证码，让用户重新输入
setVerificationCode('');
console.log('设置验证码输入框聚焦');
}, 500); // 延迟500ms确保Toast显示完成后再聚焦
} else {
console.log('验证码发送失败:', result.message);
Taro.showToast({
title: result.message || '发送失败',
icon: 'none',
@@ -51,6 +69,7 @@ const VerificationPage: React.FC = () => {
});
}
} catch (error) {
console.error('发送验证码异常:', error);
Taro.showToast({
title: '发送失败，请重试',
icon: 'none',
@@ -61,15 +80,19 @@ const VerificationPage: React.FC = () => {
// 倒计时效果
useEffect(() => {
console.log('倒计时 useEffect 触发，countdown:', countdown);
if (countdown > 0) {
const timer = setTimeout(() => {
console.log('倒计时减少，从', countdown, '到', countdown - 1);
setCountdown(countdown - 1);
}, 1000);
return () => clearTimeout(timer);
} else {
} else if (countdown === 0 && !can_send_code) {
console.log('倒计时结束，重新启用发送按钮');
setCanSendCode(true);
}
}, [countdown]);
}, [countdown, can_send_code]);
// 手机号登录
const handle_phone_login = async () => {
@@ -96,7 +119,7 @@ const VerificationPage: React.FC = () => {
try {
// 调用登录服务
const result = await phone_auth_login({ phone, verification_code });
if (result.success) {
setTimeout(() => {
@@ -122,12 +145,6 @@ const VerificationPage: React.FC = () => {
}
};
// 查看条款
const handle_view_terms = (type: string = 'terms') => {
Taro.navigateTo({
url: `/pages/login/terms/index?type=${type}`
});
};
return (
<View className="verification_page">
@@ -159,7 +176,12 @@ const VerificationPage: React.FC = () => {
onInput={(e) => setPhone(e.detail.value)}
maxlength={11}
/>
<View className="char_count">{phone.length}/11</View>
<View className="char_count">
<Text className={phone.length > 0 ? 'count_number active' : 'count_number'}>
{phone.length}
</Text>
/11
</View>
</View>
</View>
@@ -171,11 +193,20 @@ const VerificationPage: React.FC = () => {
type="number"
placeholder="输入短信验证码"
placeholderClass="input_placeholder"
placeholderStyle="color:#999999;"
focus={code_input_focus}
value={verification_code}
onInput={(e) => setVerificationCode(e.detail.value)}
onFocus={() => setCodeInputFocus(true)}
onBlur={() => setCodeInputFocus(false)}
maxlength={6}
/>
<View className="char_count">{verification_code.length}/6</View>
<View className="char_count">
<Text className={verification_code.length > 0 ? 'count_number active' : 'count_number'}>
{verification_code.length}
</Text>
/6
</View>
</View>
<Button
className={`send_code_button ${!can_send_code ? 'disabled' : ''}`}
@@ -191,21 +222,33 @@ const VerificationPage: React.FC = () => {
</View>
)}
</Button>
{/* 调试信息 */}
{/* {process.env.NODE_ENV === 'development' && (
<View style={{fontSize: '12px', color: '#999', marginTop: '5px'}}>
调试: can_send_code={can_send_code.toString()}, countdown={countdown}
</View>
)} */}
</View>
</View>
{/* 登录按钮 */}
<View className="button_section">
<Button
className={`login_button ${is_loading ? 'loading' : ''}`}
className={`login_button ${is_loading ? 'loading' : ''} ${!can_login ? 'disabled' : ''}`}
onClick={handle_phone_login}
disabled={is_loading}
disabled={!can_login}
>
{is_loading ? '登录中...' : '登录'}
{'登录'}
</Button>
{/* 调试信息 */}
{/* {process.env.NODE_ENV === 'development' && (
<View style={{fontSize: '12px', color: '#999', marginTop: '5px', textAlign: 'center'}}>
调试: 手机号长度={phone.length}, 验证码长度={verification_code.length}, 可登录={can_login.toString()}
</View>
)} */}
</View>
</View>
{/* 底部指示器 */}