81 lines
2.2 KiB
JavaScript
81 lines
2.2 KiB
JavaScript
import React, { useState } from 'react';
|
||
import './login.less';
|
||
|
||
const LoginPage = () => {
|
||
const [username, setUsername] = useState('admin');
|
||
const [password, setPassword] = useState('admin123');
|
||
const [loading, setLoading] = useState(false);
|
||
|
||
const handleSubmit = async (e) => {
|
||
e.preventDefault();
|
||
setLoading(true);
|
||
|
||
try {
|
||
// 模拟登录请求
|
||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||
|
||
// 模拟登录成功，存储token
|
||
localStorage.setItem('token', 'mock-token-123456');
|
||
|
||
// 显示成功消息
|
||
alert('登录成功');
|
||
|
||
// 跳转到首页
|
||
window.location.href = '/';
|
||
} catch (error) {
|
||
alert('登录失败，请检查用户名和密码');
|
||
console.error('Login error:', error);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="loginContainer">
|
||
<div className="loginCard">
|
||
<h2 className="loginTitle">LeasePal 商户管理系统</h2>
|
||
<h5 className="loginSubtitle">登录</h5>
|
||
|
||
<form onSubmit={handleSubmit} className="loginForm">
|
||
<div className="formItem">
|
||
<input
|
||
type="text"
|
||
value={username}
|
||
onChange={(e) => setUsername(e.target.value)}
|
||
placeholder="用户名"
|
||
required
|
||
className="formInput"
|
||
/>
|
||
</div>
|
||
|
||
<div className="formItem">
|
||
<input
|
||
type="password"
|
||
value={password}
|
||
onChange={(e) => setPassword(e.target.value)}
|
||
placeholder="密码"
|
||
required
|
||
className="formInput"
|
||
/>
|
||
</div>
|
||
|
||
<div className="formItem">
|
||
<button
|
||
type="submit"
|
||
className="loginButton"
|
||
disabled={loading}
|
||
>
|
||
{loading ? '登录中...' : '登录'}
|
||
</button>
|
||
</div>
|
||
|
||
<div className="loginTips">
|
||
<p><strong>提示：</strong>用户名: admin, 密码: admin123</p>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default LoginPage; |