43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
import { Card, Form, Input, Button, message } from 'antd';
|
||
import { useNavigate } from 'react-router-dom';
|
||
import { register as registerApi } from '../api';
|
||
|
||
const RegisterPage = () => {
|
||
const navigate = useNavigate();
|
||
|
||
const onFinish = async (values: any) => {
|
||
try {
|
||
await registerApi(values);
|
||
message.success('注册成功，请登录');
|
||
navigate('/login');
|
||
} catch (error: any) {
|
||
message.error(error?.response?.data?.message || '注册失败');
|
||
}
|
||
};
|
||
|
||
return (
|
||
<Card title="创建商家账号" style={{ maxWidth: 420, margin: '0 auto' }}>
|
||
<Form layout="vertical" onFinish={onFinish}>
|
||
<Form.Item name="username" label="账号" rules={[{ required: true, min: 3 }]}
|
||
extra="用于登录后台的管理员账号">
|
||
<Input />
|
||
</Form.Item>
|
||
<Form.Item name="email" label="邮箱">
|
||
<Input />
|
||
</Form.Item>
|
||
<Form.Item name="password" label="密码" rules={[{ required: true, min: 6 }]}>
|
||
<Input.Password />
|
||
</Form.Item>
|
||
<Button type="primary" htmlType="submit" block>
|
||
注册
|
||
</Button>
|
||
<Button type="link" block onClick={() => navigate('/login')}>
|
||
已有账号？返回登录
|
||
</Button>
|
||
</Form>
|
||
</Card>
|
||
);
|
||
};
|
||
|
||
export default RegisterPage;
|