import React, { useState } from 'react';
|
import { Form, Input, Button, Card, message } from 'antd';
|
import { UserOutlined, LockOutlined } from '@ant-design/icons';
|
import { useDispatch } from 'react-redux';
|
import { useNavigate } from 'react-router-dom';
|
import { loginStart, loginSuccess, loginFailure } from '../store/slices/authSlice';
|
import { adminAPI } from '../services/api';
|
|
const Login = () => {
|
const [loading, setLoading] = useState(false);
|
const dispatch = useDispatch();
|
const navigate = useNavigate();
|
|
const onFinish = async (values) => {
|
setLoading(true);
|
dispatch(loginStart());
|
|
try {
|
const response = await adminAPI.login({
|
phone: values.phone,
|
password: values.password,
|
});
|
|
if (response.code === 0) {
|
const userData = response.data;
|
|
// 保存token和用户信息到localStorage
|
localStorage.setItem('token', userData.token);
|
localStorage.setItem('user', JSON.stringify(userData));
|
|
// 更新Redux状态
|
dispatch(loginSuccess(userData));
|
message.success('登录成功！');
|
|
// 跳转到首页
|
navigate('/');
|
} else {
|
dispatch(loginFailure(response.message || '登录失败'));
|
message.error(response.message || '登录失败');
|
}
|
} catch (error) {
|
const errorMessage = error.message || '登录失败，请检查用户名和密码';
|
dispatch(loginFailure(errorMessage));
|
message.error(errorMessage);
|
} finally {
|
setLoading(false);
|
}
|
};
|
|
return (
|
<div style={{
|
minHeight: '100vh',
|
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
display: 'flex',
|
alignItems: 'center',
|
justifyContent: 'center',
|
padding: '20px'
|
}}>
|
<Card
|
title={
|
<div style={{ textAlign: 'center', fontSize: '24px', fontWeight: 'bold', color: '#1890ff' }}>
|
志愿者服务后台管理系统
|
</div>
|
}
|
style={{ width: 400, boxShadow: '0 4px 12px rgba(0,0,0,0.15)' }}
|
>
|
<Form
|
name="login"
|
onFinish={onFinish}
|
autoComplete="off"
|
size="large"
|
>
|
<Form.Item
|
name="phone"
|
rules={[
|
{ required: true, message: '请输入手机号！' },
|
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号！' }
|
]}
|
>
|
<Input
|
prefix={<UserOutlined />}
|
placeholder="请输入手机号"
|
/>
|
</Form.Item>
|
|
<Form.Item
|
name="password"
|
rules={[{ required: true, message: '请输入密码！' }]}
|
>
|
<Input.Password
|
prefix={<LockOutlined />}
|
placeholder="请输入密码"
|
/>
|
</Form.Item>
|
|
<Form.Item>
|
<Button
|
type="primary"
|
htmlType="submit"
|
loading={loading}
|
style={{ width: '100%' }}
|
>
|
登录
|
</Button>
|
</Form.Item>
|
</Form>
|
|
<div style={{ textAlign: 'center', color: '#8c8c8c', fontSize: '12px' }}>
|
<p>默认账号：13800138000</p>
|
<p>默认密码：123456</p>
|
</div>
|
</Card>
|
</div>
|
);
|
};
|
|
export default Login;
|
