nili
7 months ago
1 changed files with 174 additions and 0 deletions
@ -0,0 +1,174 @@ |
|||||
|
// RegisterPage.js
|
||||
|
import { Button, Form, Input, Toast, Image } from "antd-mobile"; |
||||
|
import React, { useEffect } from "react"; |
||||
|
import { useNavigate, useParams } from "react-router-dom"; |
||||
|
import { api } from "../api"; |
||||
|
import { MatrixAppBo, RegisterBo } from "../api/generated"; |
||||
|
|
||||
|
const RegisterPage = () => { |
||||
|
const [count, setCount] = React.useState(60); |
||||
|
const [app, setApp] = React.useState<MatrixAppBo>(); |
||||
|
const [form] = Form.useForm(); |
||||
|
const navigate = useNavigate(); |
||||
|
const { inviteCode } = useParams(); |
||||
|
|
||||
|
const onFinish = async (values: RegisterBo) => { |
||||
|
const data = form.getFieldsValue(); |
||||
|
if (data.pwd !== data.confirmPassword) { |
||||
|
Toast.show({ |
||||
|
content: "密码不一致,请重新输入", |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
const res = await api.submitRegister(values); |
||||
|
if (res.data.code !== 0) { |
||||
|
Toast.show({ |
||||
|
content: res.data.message, |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
Toast.show({ |
||||
|
content: "注册成功", |
||||
|
}); |
||||
|
navigate("/download/" + inviteCode); |
||||
|
}; |
||||
|
|
||||
|
const send = async () => { |
||||
|
const values = form.getFieldsValue(); |
||||
|
const mobile: string = values.mobile; |
||||
|
if (!mobile) { |
||||
|
Toast.show({ |
||||
|
content: "请输入手机号", |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
const res = await api.sendCode(mobile, "register"); |
||||
|
if (res.data.code !== 0) { |
||||
|
Toast.show({ |
||||
|
content: res.data.message, |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
Toast.show({ |
||||
|
content: "验证码发送成功:" + mobile, |
||||
|
}); |
||||
|
startCountdown(); |
||||
|
}; |
||||
|
|
||||
|
const startCountdown = () => { |
||||
|
setCount(60); |
||||
|
const timer = setInterval(() => { |
||||
|
setCount((count) => count - 1); |
||||
|
}, 1000); |
||||
|
setTimeout(() => { |
||||
|
clearInterval(timer); |
||||
|
setCount(60); |
||||
|
}, 60000); |
||||
|
}; |
||||
|
|
||||
|
useEffect(() => { |
||||
|
const getApp = async () => { |
||||
|
if (!inviteCode) { |
||||
|
return; |
||||
|
} |
||||
|
const res = await api.getApp(inviteCode); |
||||
|
if (res.data.code !== 0) { |
||||
|
Toast.show({ |
||||
|
content: res.data.message, |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
setApp(res.data.data); |
||||
|
}; |
||||
|
getApp(); |
||||
|
}, [inviteCode]); |
||||
|
|
||||
|
return ( |
||||
|
<div style={{ maxWidth: 500, margin: "auto" }}> |
||||
|
<Image |
||||
|
style={{ margin: "auto", paddingTop: 20 }} |
||||
|
src={app?.img} |
||||
|
width={100} |
||||
|
height={100} |
||||
|
/> |
||||
|
<p style={{ textAlign: "center", fontSize: 20, fontWeight: "bold" }}> |
||||
|
{app?.name} |
||||
|
</p> |
||||
|
<Form |
||||
|
onFinish={onFinish} |
||||
|
layout="horizontal" |
||||
|
mode="card" |
||||
|
form={form} |
||||
|
initialValues={{ inviteCode: inviteCode }} |
||||
|
> |
||||
|
<Form.Item |
||||
|
name="mobile" |
||||
|
label="手机号" |
||||
|
rules={[ |
||||
|
{ required: true, message: "请输入手机号" }, |
||||
|
{ pattern: /^1\d{10}$/, message: "手机号格式错误" }, |
||||
|
]} |
||||
|
> |
||||
|
<Input placeholder="请输入手机号" maxLength={11} /> |
||||
|
</Form.Item> |
||||
|
<Form.Item |
||||
|
name="code" |
||||
|
label="短信验证码" |
||||
|
extra={ |
||||
|
<Button |
||||
|
size="small" |
||||
|
color="primary" |
||||
|
onClick={send} |
||||
|
disabled={count !== 60} |
||||
|
> |
||||
|
{count === 60 ? "发送验证码" : `${count}s`} |
||||
|
</Button> |
||||
|
} |
||||
|
rules={[{ required: true, message: "请输入短信验证码!" }]} |
||||
|
> |
||||
|
<Input /> |
||||
|
</Form.Item> |
||||
|
<Form.Item |
||||
|
name="pwd" |
||||
|
label="密码" |
||||
|
rules={[{ required: true, message: "请输入密码" }]} |
||||
|
> |
||||
|
<Input |
||||
|
minLength={8} |
||||
|
type="password" |
||||
|
placeholder="请输入密码,最少8位" |
||||
|
/> |
||||
|
</Form.Item> |
||||
|
<Form.Item |
||||
|
name="confirmPassword" |
||||
|
label="确认密码" |
||||
|
rules={[ |
||||
|
{ required: true, message: "请再次输入密码" }, |
||||
|
{ |
||||
|
validator: (rules, value, callback) => { |
||||
|
let pwd = form.getFieldValue("pwd"); |
||||
|
if (pwd && pwd !== value) { |
||||
|
callback("密码不一致"); |
||||
|
} else { |
||||
|
callback(); |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
]} |
||||
|
> |
||||
|
<Input minLength={8} type="password" placeholder="请再次输入密码" /> |
||||
|
</Form.Item> |
||||
|
<Form.Item name="inviteCode" label="邀请码" disabled> |
||||
|
<Input /> |
||||
|
</Form.Item> |
||||
|
<Form.Item> |
||||
|
<Button color="primary" block type="submit"> |
||||
|
注册 |
||||
|
</Button> |
||||
|
</Form.Item> |
||||
|
</Form> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default RegisterPage; |
Loading…
Reference in new issue