完善登录面板
This commit is contained in:
xianyi
@@ -1,94 +1,94 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
import { getVerificationCodeImage, loginByPassword } from '../../api';
|
||||
import { Button, Input } from '../ui';
|
||||
|
||||
interface LoginModalProps {
|
||||
onClose: () => void;
|
||||
onLoginSuccess?: (phone: string) => void;
|
||||
onLoginSuccess?: (userName: string) => void;
|
||||
}
|
||||
|
||||
const APP_ID = 'b2b49e91d21446aeb14579930f732985';
|
||||
|
||||
export const LoginModal = ({ onClose, onLoginSuccess }: LoginModalProps) => {
|
||||
const [phone, setPhone] = useState('');
|
||||
const [code, setCode] = useState('');
|
||||
const [countdown, setCountdown] = useState(0);
|
||||
const [username, setUsername] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [imgCode, setImgCode] = useState('');
|
||||
const [imgCodeKey, setImgCodeKey] = useState('');
|
||||
const [imgCodeUrl, setImgCodeUrl] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [imgLoading, setImgLoading] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
// 验证码倒计时
|
||||
const fetchImageCode = async () => {
|
||||
setImgLoading(true);
|
||||
setError('');
|
||||
try {
|
||||
const res = await getVerificationCodeImage({ app_id: APP_ID });
|
||||
if (res.Status === 200 && res.Data) {
|
||||
setImgCodeKey(res.Data.verification_code_key || '');
|
||||
// 后端返回的可能是 base64，直接作为 src
|
||||
setImgCodeUrl(res.Data.verification_code_image || null);
|
||||
} else {
|
||||
setError(res.Message || '获取图形验证码失败');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('获取图形验证码失败', err);
|
||||
setError('获取图形验证码失败，请稍后重试');
|
||||
} finally {
|
||||
setImgLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (countdown > 0) {
|
||||
const timer = setTimeout(() => setCountdown(countdown - 1), 1000);
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
}, [countdown]);
|
||||
fetchImageCode();
|
||||
}, []);
|
||||
|
||||
// 验证手机号格式
|
||||
const validatePhone = (phoneNumber: string): boolean => {
|
||||
return /^1[3-9]\d{9}$/.test(phoneNumber);
|
||||
};
|
||||
|
||||
// 发送验证码
|
||||
const handleSendCode = async () => {
|
||||
if (!phone) {
|
||||
setError('请输入手机号');
|
||||
return;
|
||||
}
|
||||
if (!validatePhone(phone)) {
|
||||
setError('请输入正确的手机号');
|
||||
return;
|
||||
}
|
||||
|
||||
setError('');
|
||||
setLoading(true);
|
||||
|
||||
// 模拟发送验证码 API 调用
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000));
|
||||
|
||||
setLoading(false);
|
||||
setCountdown(60); // 60秒倒计时
|
||||
// 实际项目中，这里应该调用后端 API 发送验证码
|
||||
// 开发环境可以显示验证码（例如：123456）
|
||||
// eslint-disable-next-line no-console
|
||||
console.log('验证码已发送（开发环境：123456）');
|
||||
};
|
||||
|
||||
// 登录
|
||||
const handleLogin = async () => {
|
||||
if (!phone) {
|
||||
setError('请输入手机号');
|
||||
if (!username.trim()) {
|
||||
setError('请输入账号');
|
||||
return;
|
||||
}
|
||||
if (!validatePhone(phone)) {
|
||||
setError('请输入正确的手机号');
|
||||
if (!password) {
|
||||
setError('请输入密码');
|
||||
return;
|
||||
}
|
||||
if (!code) {
|
||||
setError('请输入验证码');
|
||||
if (!imgCode.trim()) {
|
||||
setError('请输入图形验证码');
|
||||
return;
|
||||
}
|
||||
if (code.length !== 6) {
|
||||
setError('验证码应为6位数字');
|
||||
if (!imgCodeKey) {
|
||||
setError('验证码失效，请刷新');
|
||||
return;
|
||||
}
|
||||
|
||||
setError('');
|
||||
setLoading(true);
|
||||
|
||||
// 模拟登录 API 调用
|
||||
await new Promise((resolve) => setTimeout(resolve, 1500));
|
||||
|
||||
// 开发环境：验证码为 123456 时通过
|
||||
if (code === '123456') {
|
||||
try {
|
||||
const res = await loginByPassword({
|
||||
username: username.trim(),
|
||||
password,
|
||||
verification_code: imgCode.trim(),
|
||||
verification_code_key: imgCodeKey,
|
||||
});
|
||||
if (res.Status === 200 && res.Data?.access_token) {
|
||||
onLoginSuccess?.(res.Data.user_name || username.trim());
|
||||
onClose();
|
||||
} else {
|
||||
setError(res.Message || '登录失败');
|
||||
// 登录失败时刷新验证码
|
||||
fetchImageCode();
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('登录失败', err);
|
||||
setError('登录失败，请稍后重试');
|
||||
fetchImageCode();
|
||||
} finally {
|
||||
setLoading(false);
|
||||
onLoginSuccess?.(phone);
|
||||
onClose();
|
||||
} else {
|
||||
setLoading(false);
|
||||
setError('验证码错误，请重新输入');
|
||||
}
|
||||
};
|
||||
|
||||
const canSendCode = countdown === 0 && !loading && phone.length === 11;
|
||||
const canLogin = phone && code && !loading;
|
||||
const canLogin = !!(username && password && imgCode && imgCodeKey && !loading);
|
||||
|
||||
return (
|
||||
<div className='fixed inset-0 z-50 flex items-center justify-center bg-black/30' onClick={onClose}>
|
||||
@@ -105,47 +105,64 @@ export const LoginModal = ({ onClose, onLoginSuccess }: LoginModalProps) => {
|
||||
|
||||
<div className='px-4 py-6 bg-gray-50/60 space-y-4'>
|
||||
<div className='space-y-2'>
|
||||
<label className='text-xs text-gray-700 font-medium'>手机号</label>
|
||||
<label className='text-xs text-gray-700 font-medium'>账号</label>
|
||||
<Input
|
||||
type='tel'
|
||||
placeholder='请输入手机号'
|
||||
value={phone}
|
||||
type='text'
|
||||
placeholder='请输入账号'
|
||||
value={username}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value.replace(/\D/g, '').slice(0, 11);
|
||||
setPhone(value);
|
||||
setUsername(e.target.value);
|
||||
setError('');
|
||||
}}
|
||||
maxLength={11}
|
||||
className='text-base'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='space-y-2'>
|
||||
<label className='text-xs text-gray-700 font-medium'>验证码</label>
|
||||
<div className='flex gap-2'>
|
||||
<label className='text-xs text-gray-700 font-medium'>密码</label>
|
||||
<Input
|
||||
type='password'
|
||||
placeholder='请输入密码'
|
||||
value={password}
|
||||
onChange={(e) => {
|
||||
setPassword(e.target.value);
|
||||
setError('');
|
||||
}}
|
||||
className='text-base'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='space-y-2'>
|
||||
<label className='text-xs text-gray-700 font-medium'>图形验证码</label>
|
||||
<div className='flex items-center gap-2'>
|
||||
<Input
|
||||
type='text'
|
||||
placeholder='请输入6位验证码'
|
||||
value={code}
|
||||
placeholder='请输入验证码'
|
||||
value={imgCode}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value.replace(/\D/g, '').slice(0, 6);
|
||||
setCode(value);
|
||||
setImgCode(e.target.value);
|
||||
setError('');
|
||||
}}
|
||||
maxLength={6}
|
||||
className='text-base flex-1'
|
||||
/>
|
||||
<Button
|
||||
onClick={handleSendCode}
|
||||
disabled={!canSendCode}
|
||||
className={!canSendCode ? 'opacity-50 cursor-not-allowed' : ''}
|
||||
>
|
||||
{countdown > 0 ? `${countdown}秒` : loading ? '发送中...' : '发送验证码'}
|
||||
</Button>
|
||||
</div>
|
||||
<div className='text-[11px] text-gray-500'>
|
||||
开发环境：验证码为 <span className='font-mono font-semibold'>123456</span>
|
||||
<div className='w-28 h-10 border rounded-lg bg-white flex items-center justify-center overflow-hidden'>
|
||||
{imgLoading ? (
|
||||
<span className='text-[11px] text-gray-500'>加载中…</span>
|
||||
) : imgCodeUrl ? (
|
||||
<img
|
||||
src={imgCodeUrl}
|
||||
alt='验证码'
|
||||
className='w-full h-full object-contain cursor-pointer'
|
||||
onClick={fetchImageCode}
|
||||
/>
|
||||
) : (
|
||||
<button className='text-[11px] text-blue-600' onClick={fetchImageCode}>
|
||||
刷新
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className='text-[11px] text-gray-500'>看不清？点击图片刷新</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
@@ -156,9 +173,9 @@ export const LoginModal = ({ onClose, onLoginSuccess }: LoginModalProps) => {
|
||||
<Button
|
||||
onClick={handleLogin}
|
||||
disabled={!canLogin}
|
||||
className={`w-full justify-center ${!canLogin ? 'opacity-50 cursor-not-allowed' : 'bg-gray-900 hover:bg-gray-800'}`}
|
||||
className={`w-full font-bold text-white justify-center ${!canLogin ? 'opacity-50 cursor-not-allowed' : 'bg-gray-900 hover:bg-gray-800'}`}
|
||||
>
|
||||
{loading ? '· · ·' : '登录'}
|
||||
{loading ? '登录中…' : '登录'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user