feat
parent
9f6b2fda54
commit
995843f342
|
|
@ -0,0 +1,13 @@
|
||||||
|
import { declareRequest } from "@cqsjjb/jjb-dva-runtime";
|
||||||
|
|
||||||
|
// 发送短信验证码
|
||||||
|
export const sendMessageAction = declareRequest(
|
||||||
|
"sendMessageLoading",
|
||||||
|
"Post > @/safetyEval/account/sendMessage"
|
||||||
|
);
|
||||||
|
|
||||||
|
// 新增用户（注册）
|
||||||
|
export const registerAction = declareRequest(
|
||||||
|
"registerLoading",
|
||||||
|
"Post > @/account/save"
|
||||||
|
);
|
||||||
|
|
@ -20,3 +20,4 @@ export const NS_EQUIP_INFO = defineNamespace("equipInfo");
|
||||||
export const NS_QUAL_FILING = defineNamespace("qualFiling");
|
export const NS_QUAL_FILING = defineNamespace("qualFiling");
|
||||||
export const NS_QUAL_REVIEW = defineNamespace("qualReview");
|
export const NS_QUAL_REVIEW = defineNamespace("qualReview");
|
||||||
export const NS_QUAL_EXPERT = defineNamespace("qualExpert");
|
export const NS_QUAL_EXPERT = defineNamespace("qualExpert");
|
||||||
|
export const NS_REGISTER = defineNamespace("register");
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,327 @@
|
||||||
import React from "react";
|
import {
|
||||||
|
UserOutlined,
|
||||||
|
LockOutlined,
|
||||||
|
MobileOutlined,
|
||||||
|
SafetyCertificateOutlined,
|
||||||
|
} from "@ant-design/icons";
|
||||||
|
import { Connect } from "@cqsjjb/jjb-dva-runtime";
|
||||||
|
import { Button, Form, Input, message } from "antd";
|
||||||
|
import React, { useState } from "react";
|
||||||
|
import { NS_REGISTER } from "~/enumerate/namespace";
|
||||||
|
import "./index.less";
|
||||||
|
|
||||||
|
function Register({ sendMessageAction, registerAction, registerLoading }) {
|
||||||
|
const [form] = Form.useForm();
|
||||||
|
const [countdown, setCountdown] = useState(0);
|
||||||
|
const [sending, setSending] = useState(false);
|
||||||
|
|
||||||
|
const handleSendCode = async () => {
|
||||||
|
const phone = form.getFieldValue("phone");
|
||||||
|
if (!phone) {
|
||||||
|
message.error("请输入手机号");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const phoneReg = /^1[3-9]\d{9}$/;
|
||||||
|
if (!phoneReg.test(phone)) {
|
||||||
|
message.error("请输入正确的手机号");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setSending(true);
|
||||||
|
try {
|
||||||
|
const res = await sendMessageAction({ mobile: phone });
|
||||||
|
if (res.success) {
|
||||||
|
message.success("验证码已发送");
|
||||||
|
setCountdown(60);
|
||||||
|
const timer = setInterval(() => {
|
||||||
|
setCountdown((prev) => {
|
||||||
|
if (prev <= 1) {
|
||||||
|
clearInterval(timer);
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
return prev - 1;
|
||||||
|
});
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
setSending(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = async (values) => {
|
||||||
|
const payload = {
|
||||||
|
account: values.account,
|
||||||
|
phone: values.phone,
|
||||||
|
password: values.password,
|
||||||
|
type: 1,
|
||||||
|
};
|
||||||
|
const res = await registerAction(payload);
|
||||||
|
if (res.success) {
|
||||||
|
message.success("注册成功");
|
||||||
|
form.resetFields();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
export default class Register extends React.Component {
|
|
||||||
render() {
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div className="register-page">
|
||||||
<h1>Regist1er</h1>
|
<div className="register-top-bar">
|
||||||
|
<div className="register-top-logo">
|
||||||
|
<svg
|
||||||
|
className="register-top-icon"
|
||||||
|
viewBox="0 0 32 32"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<rect
|
||||||
|
x="2"
|
||||||
|
y="12"
|
||||||
|
width="6"
|
||||||
|
height="18"
|
||||||
|
rx="1"
|
||||||
|
fill="#fff"
|
||||||
|
opacity="0.9"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
x="10"
|
||||||
|
y="6"
|
||||||
|
width="6"
|
||||||
|
height="24"
|
||||||
|
rx="1"
|
||||||
|
fill="#fff"
|
||||||
|
opacity="0.7"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
x="18"
|
||||||
|
y="10"
|
||||||
|
width="6"
|
||||||
|
height="20"
|
||||||
|
rx="1"
|
||||||
|
fill="#fff"
|
||||||
|
opacity="0.8"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
x="26"
|
||||||
|
y="4"
|
||||||
|
width="4"
|
||||||
|
height="26"
|
||||||
|
rx="1"
|
||||||
|
fill="#fff"
|
||||||
|
opacity="0.6"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M4 8 L10 2 L16 8 L22 2 L28 8"
|
||||||
|
stroke="#fff"
|
||||||
|
strokeWidth="2"
|
||||||
|
fill="none"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
opacity="0.5"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span className="register-top-title">
|
||||||
|
巫溪县安全评价在线监管一件事
|
||||||
|
</span>
|
||||||
|
<span className="register-top-subtitle">安全评价机构服务系统</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="register-card">
|
||||||
|
<div className="register-left">
|
||||||
|
<svg
|
||||||
|
className="register-logo-icon"
|
||||||
|
viewBox="0 0 200 200"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<defs>
|
||||||
|
<linearGradient
|
||||||
|
id="shieldGrad"
|
||||||
|
x1="0%"
|
||||||
|
y1="0%"
|
||||||
|
x2="100%"
|
||||||
|
y2="100%"
|
||||||
|
>
|
||||||
|
<stop offset="0%" stopColor="#4a9eff" />
|
||||||
|
<stop offset="100%" stopColor="#1677ff" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="ringGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" stopColor="#a8d4ff" />
|
||||||
|
<stop offset="100%" stopColor="#4a9eff" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<ellipse
|
||||||
|
cx="100"
|
||||||
|
cy="160"
|
||||||
|
rx="70"
|
||||||
|
ry="15"
|
||||||
|
fill="#e0e0e0"
|
||||||
|
opacity="0.4"
|
||||||
|
/>
|
||||||
|
<ellipse
|
||||||
|
cx="100"
|
||||||
|
cy="150"
|
||||||
|
rx="55"
|
||||||
|
ry="10"
|
||||||
|
fill="#c0d8f0"
|
||||||
|
opacity="0.5"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M100 45 L145 60 L145 110 Q145 140 100 160 Q55 140 55 110 L55 60 Z"
|
||||||
|
fill="url(#shieldGrad)"
|
||||||
|
opacity="0.15"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M100 50 L140 64 L140 108 Q140 136 100 154 Q60 136 60 108 L60 64 Z"
|
||||||
|
fill="url(#shieldGrad)"
|
||||||
|
opacity="0.25"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M100 55 L135 68 L135 106 Q135 132 100 148 Q65 132 65 106 L65 68 Z"
|
||||||
|
fill="url(#shieldGrad)"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M88 95 L96 105 L114 82"
|
||||||
|
stroke="#fff"
|
||||||
|
strokeWidth="5"
|
||||||
|
fill="none"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
<ellipse
|
||||||
|
cx="100"
|
||||||
|
cy="148"
|
||||||
|
rx="45"
|
||||||
|
ry="8"
|
||||||
|
fill="none"
|
||||||
|
stroke="url(#ringGrad)"
|
||||||
|
strokeWidth="3"
|
||||||
|
/>
|
||||||
|
<ellipse
|
||||||
|
cx="100"
|
||||||
|
cy="148"
|
||||||
|
rx="35"
|
||||||
|
ry="6"
|
||||||
|
fill="none"
|
||||||
|
stroke="#a8d4ff"
|
||||||
|
strokeWidth="2"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
x="85"
|
||||||
|
y="155"
|
||||||
|
width="8"
|
||||||
|
height="20"
|
||||||
|
rx="2"
|
||||||
|
fill="#4a9eff"
|
||||||
|
opacity="0.6"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
x="107"
|
||||||
|
y="155"
|
||||||
|
width="8"
|
||||||
|
height="20"
|
||||||
|
rx="2"
|
||||||
|
fill="#4a9eff"
|
||||||
|
opacity="0.6"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<div className="register-left-title">安全评价机构服务系统</div>
|
||||||
|
<div className="register-left-subtitle">创造更值得信赖的世界</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="register-right">
|
||||||
|
<div className="register-header">
|
||||||
|
<div className="register-title">欢迎注册安全评价机构服务系统</div>
|
||||||
|
<div className="register-subtitle">创造更值得信赖的世界</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Form
|
||||||
|
form={form}
|
||||||
|
className="register-form"
|
||||||
|
onFinish={handleSubmit}
|
||||||
|
autoComplete="off"
|
||||||
|
>
|
||||||
|
<Form.Item
|
||||||
|
name="account"
|
||||||
|
rules={[{ required: true, message: "请输入账号" }]}
|
||||||
|
>
|
||||||
|
<Input
|
||||||
|
prefix={<UserOutlined style={{ color: "#bfbfbf" }} />}
|
||||||
|
placeholder="请输入账号"
|
||||||
|
size="large"
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item
|
||||||
|
name="password"
|
||||||
|
rules={[{ required: true, message: "请输入密码" }]}
|
||||||
|
>
|
||||||
|
<Input.Password
|
||||||
|
prefix={<LockOutlined style={{ color: "#bfbfbf" }} />}
|
||||||
|
placeholder="请输入密码"
|
||||||
|
size="large"
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item
|
||||||
|
name="phone"
|
||||||
|
rules={[
|
||||||
|
{ required: true, message: "请输入手机号" },
|
||||||
|
{ pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号" },
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<Input
|
||||||
|
prefix={<MobileOutlined style={{ color: "#bfbfbf" }} />}
|
||||||
|
placeholder="请输入手机号"
|
||||||
|
size="large"
|
||||||
|
maxLength={11}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item
|
||||||
|
name="verifyCode"
|
||||||
|
rules={[{ required: true, message: "请输入验证码" }]}
|
||||||
|
>
|
||||||
|
<div className="register-verify-row">
|
||||||
|
<Form.Item name="verifyCode" noStyle>
|
||||||
|
<Input
|
||||||
|
className="register-verify-input"
|
||||||
|
prefix={
|
||||||
|
<SafetyCertificateOutlined style={{ color: "#bfbfbf" }} />
|
||||||
|
}
|
||||||
|
placeholder="验证码"
|
||||||
|
size="large"
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
<Button
|
||||||
|
className="register-verify-btn"
|
||||||
|
type="primary"
|
||||||
|
disabled={countdown > 0 || sending}
|
||||||
|
loading={sending}
|
||||||
|
onClick={handleSendCode}
|
||||||
|
>
|
||||||
|
{countdown > 0 ? `${countdown}s后重试` : "获取验证码"}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item>
|
||||||
|
<Button
|
||||||
|
className="register-submit-btn"
|
||||||
|
type="primary"
|
||||||
|
htmlType="submit"
|
||||||
|
loading={registerLoading}
|
||||||
|
>
|
||||||
|
注册
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
className="register-submit-btn"
|
||||||
|
loading={registerLoading}
|
||||||
|
onClick={() => window.location.href = "https://gbs-gateway.qhdsafety.com/login/client/72cf4f659dc54dcfaeecd32eabf483b5"}
|
||||||
|
>
|
||||||
|
登录
|
||||||
|
</Button>
|
||||||
|
</Form.Item>
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export default Connect([NS_REGISTER], true)(Register);
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,141 @@
|
||||||
|
.register-page {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: linear-gradient(135deg, #1a5fb4 0%, #0d3a7a 100%);
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 24px;
|
||||||
|
|
||||||
|
.register-top-bar {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
|
||||||
|
.register-top-logo {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
|
||||||
|
.register-top-icon {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-top-title {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #fff;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-top-subtitle {
|
||||||
|
font-size: 13px;
|
||||||
|
color: rgba(255, 255, 255, 0.75);
|
||||||
|
margin-left: 4px;
|
||||||
|
padding-left: 10px;
|
||||||
|
border-left: 1px solid rgba(255, 255, 255, 0.4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-card {
|
||||||
|
display: flex;
|
||||||
|
width: 900px;
|
||||||
|
min-height: 520px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-left {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: linear-gradient(180deg, #e8f4ff 0%, #d0e8ff 100%);
|
||||||
|
padding: 40px;
|
||||||
|
|
||||||
|
.register-logo-icon {
|
||||||
|
width: 180px;
|
||||||
|
height: 180px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-left-title {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #1677ff;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-left-subtitle {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-right {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 48px;
|
||||||
|
|
||||||
|
.register-header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
|
||||||
|
.register-title {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-subtitle {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-form {
|
||||||
|
.ant-form-item {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-input-affix-wrapper {
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-input {
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-verify-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
|
||||||
|
.register-verify-input {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-verify-btn {
|
||||||
|
width: 120px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-submit-btn {
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 15px;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,20 +1,17 @@
|
||||||
.pageLayout-extra {
|
|
||||||
|
|
||||||
color: rgba(0, 0, 0, 0.45);
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
.micro-temp-modal-body {
|
.micro-temp-modal-body {
|
||||||
max-height: 630px;
|
max-height: 630px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
scrollbar-width: thin;
|
scrollbar-width: thin;
|
||||||
}
|
}
|
||||||
body {
|
|
||||||
height: 100%;
|
|
||||||
overflow-y: hidden;
|
|
||||||
}
|
|
||||||
.micro-temp-layout-container .micro-temp-lay-container-bottom {
|
.micro-temp-layout-container .micro-temp-lay-container-bottom {
|
||||||
padding: 10px 24px !important;
|
padding: 10px 24px !important;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue