注册登录init

2025-01-20 11:46:18 +08:00 · 2025-01-20 11:46:18 +08:00 · 8ec2aefdce
parent ac5e1ddcb4
commit 8ec2aefdce
15 changed files with 943 additions and 1 deletions
--- a/src/App.js
+++ b/src/App.js
@ -112,7 +112,7 @@ const Relaction = Loadable({
  loading: Loading,
 });
 const LoginRegisterPage = Loadable({
-  loader: () => import("./modules/loginRegister/LoginRegisterPage"),
+  loader: () => import("./modules/loginRegister/LoginRegisterPageNew"),
  loading: Loading,
 });

--- a/src/modules/loginRegister/LoginNew.jsx
+++ b/src/modules/loginRegister/LoginNew.jsx
@ -0,0 +1,149 @@
+import React, { useEffect, useState } from "react";
+import { Form, Input, Button, Checkbox , Tooltip } from "antd";
+import { Link } from "react-router-dom";
+import axios from 'axios';
+// import educoderLogo from '../login/educoder.png';
+// import qqlogo from '../login/qq@2x.png';
+// import WeChatlogo from '../login/WeChat@2x.png';
+// import giteelogo from '../login/gitee.png';
+// import githublogo from '../login/github.png';
+import cookie from 'react-cookies';
+import './LoginRegisterPageNew.scss';
+import { Encrypt } from "../../common/Env";
+
+function Login(props){
+  const [message,setMessage] = useState();
+  // const [setting, setSetting] = useState(undefined);
+  const {form, location, mygetHelmetapi} = props;
+  const {getFieldDecorator } = form;
+  const {search} = location;
+
+
+  useEffect(()=>{
+    //控制密码输入框在DOM不可见value
+    clear();
+    //获取第三方登录平台信息
+    // setSetting(JSON.parse(localStorage.getItem("chromesetting")));
+  },[])
+
+  // 配置网页标题
+  useEffect(()=>{
+    if(mygetHelmetapi){
+      const {name} = mygetHelmetapi;
+      document.title = name;
+    }
+  }, [mygetHelmetapi])
+
+  // 登录表单提交
+  function handleSubmit(){
+    setMessage(undefined);
+    form.validateFields((err, values) => {
+      if (!err) {
+        axios.post(`/accounts/login.json`, {
+          login: values.username,
+          password: Encrypt(values.password),
+          autologin: values.remember?1:0,
+        }).then((response) => {
+          if (!response.data.login) {
+            response.data.status === -2 ? setMessage(response.data.message) : setMessage("错误的账号或密码");
+          } else {
+            //判断用户是否选择【下次自动登录】
+            cookie.save('autologin',values.remember);
+            cookie.save('supplyphone',true);
+            cookie.save("login",response.data.login);
+            
+            const searchParams = new URLSearchParams(search.substring(1));
+            const goPage = searchParams.get("go_page");
+            //意见反馈
+            window.location.href = goPage ? goPage : `/${response.data.login}`
+          }
+        }).catch((error) => {
+          console.log('error',error);
+        })
+      }
+    });
+  }
+
+  //清除密码框的value属性->DOM看不见密码值
+  function clear(){
+    const password = document.getElementById("login_password");
+    if(password && password.type==="password"){
+      setTimeout(()=>{
+        password.removeAttribute('value');
+      },0)
+    }
+  }
+
+
+  return(
+    <div>
+      <div className="right_cont login_content">
+        <div className="login_register_head mb60">
+          <p>欢迎登录 </p>
+          <p className="head_blue">支持持续成长演化的软件平台-群智开发</p>
+        </div>
+        <p className = {message?"message active mb10":"message"}>{message}</p>
+        <Form className="login-form">
+          <Form.Item>
+            {getFieldDecorator('username',{
+              rules:[
+                {
+                  required:true,  
+                  message:"请输入手机号/邮箱/用户名"
+                }
+              ],
+              validateTrigger:"onBlur",
+            })(<Input className="account" placeholder="请输入手机号/邮箱/用户名" prefix={<div className="input_icon"></div>} />)}
+          </Form.Item>
+
+          <Form.Item>
+            {getFieldDecorator('password', {
+              rules: [
+                {
+                  required:true,
+                  message:"请输入登录密码"
+                }
+              ],
+              validateTrigger:"onBlur",
+            })(
+              <Input.Password className="psd" placeholder="请输入登录密码" onBlur={clear} onChange={clear} prefix={<div className="input_icon"></div>} />,
+            )}
+          </Form.Item>
+
+          <div className="login_register_head login mb60">
+            <Form.Item>
+              {getFieldDecorator('remember', {
+                valuePropName: 'checked',
+                initialValue: cookie.load('autologin'),
+              })(<Checkbox>下次自动登录</Checkbox>)}
+            </Form.Item>
+            {/* <Link to="/resetPassword" className="goResetPsdBut">忘记密码？</Link> */}
+          </div>
+          <Button type="primary" htmlType="submit" onClick={handleSubmit} className="login_register_cofBut">登录</Button>
+        </Form>
+        <div className="link_span">没有账号？<Link to={`/register`}>去注册</Link></div>
+
+        {
+          // setting && setting.third_party_new && setting.third_party_new.length > 0 ?
+          // <p className="quick_logon">
+          //   <p className="quick_logon_p"></p>
+          //   <span className={"startlogin"}>&nbsp;快速登录&nbsp;</span>
+          //   {setting.third_party_new.map((item,key)=>{
+          //     return(
+          //     <a href={`${item.url}`} className="ml15 mr15">
+          //       <Tooltip title={`使用${item.name === "qq" ? "QQ":item.name === "wechat" ? "微信" : item.name}账号登录`}>
+          //         <img src={item.name === "educoder" ? educoderLogo : item.name === "qq" ? qqlogo : item.name === "wechat" ? WeChatlogo :  item.name === "gitee" ? giteelogo : item.name === "github" ? githublogo : ""} width="46px" alt={`${item.name}登录`}/>
+          //       </Tooltip>
+          //     </a>
+          //     )
+          //   })
+          //   }
+          // </p>
+          // <OtherLogin />
+        }
+      </div>
+    </div>
+  )
+
+}
+export default Form.create({ name: 'login' })(Login);
--- a/src/modules/loginRegister/LoginRegisterPageNew.jsx
+++ b/src/modules/loginRegister/LoginRegisterPageNew.jsx
@ -0,0 +1,25 @@
+import React from "react";
+import Login from "./LoginNew";
+import Register from "./RegisterNew";
+import ResetPassword from "./ResetPasswordNew";
+import '../loginRegister/LoginRegisterPageNew.scss';
+
+function LoginRegisterPage(props){
+  const {mygetHelmetapi} = props;
+  return(
+    <div className="loginRegister">
+      <div className="login_register_right">
+        {props.location.pathname === "/login" ? 
+          <Login {...props}/> 
+          : 
+          props.location.pathname === "/register" ? 
+          <Register mygetHelmetapi={mygetHelmetapi}/> 
+          : 
+          <ResetPassword mygetHelmetapi={mygetHelmetapi}/>
+        }
+      </div>
+      <div className="clear"></div>
+    </div>
+  )
+}
+export default LoginRegisterPage;
--- a/src/modules/loginRegister/LoginRegisterPageNew.scss
+++ b/src/modules/loginRegister/LoginRegisterPageNew.scss
@ -0,0 +1,135 @@
+@import url(./font/font.css);
+
+.loginRegister{
+  height: 100vh;
+  width: 100vw;
+  background-image: url(./img/bg1.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: alibaba;
+}
+.clear{
+  clear: both;
+}
+.login_register_right {
+  width: 1200px;
+  height: 705px;
+  background:#ffffff;
+  box-shadow:0px 0px 20px rgba(37, 106, 206, 0.14);
+  background-image: url(./img/bglogin.png);
+  background-repeat: no-repeat;
+  background-size: 50% 100%;
+  .right_cont {
+    width: 50%;
+    margin-left: auto;
+    display: flex;
+    flex-direction: column;
+    padding: 105px 75px 113px 75px;
+    .login_register_head {
+      font-family: alibaba-medium;
+      color: #283444;
+      font-size: 28px;
+      .head_blue {
+        font-size: 24px;
+        color: #0d5ef8;
+      }
+      span {
+        font-family: alibaba;
+      }
+    }
+    .account {
+      .input_icon::before {
+        transform: translate( 50%, -50%);
+        position: absolute;
+        content: "";
+        left: 0;
+        top: 50%;
+        width: 22px;
+        height: 22px;
+        background-image: url(./img/icon1.png);
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+      }
+      &:hover {
+        .input_icon::before {
+          background-image: url(./img/icon2.png);
+        }
+      }
+    } 
+    .psd {
+      .input_icon::before {
+        transform: translate( 50%, -50%);
+        position: absolute;
+        content: "";
+        left: 0;
+        top: 50%;
+        width: 22px;
+        height: 22px;
+        background-image: url(./img/icon3.png);
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+      }
+      &:hover {
+        .input_icon::before {
+          background-image: url(./img/icon4.png);
+        }
+      }
+    }
+    .input_icon {
+      margin-left: 50px;
+      width: 0px;
+      height: 30px;
+      border: 1px solid;
+      border-color: rgba(20, 49, 179, 0.12);
+      &::before {
+        transform: translate( 50%, -50%);
+        position: absolute;
+        content: "";
+        left: 0;
+        top: 50%;
+        width: 22px;
+        height: 22px;
+        background-image: url(./img/icon1.png);
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+    .ant-input{
+      width: 450px;
+      height: 48px;
+      border: 1px solid;
+      border-color: #9eaacb;
+      border-radius: 4px;
+      background: #FFFFFF !important;
+      color: #283444;
+      padding-left: 80px;
+      &:hover{
+        background: rgba(0, 88, 255, 0.03);
+        border-color: #0d5ef8;
+      }
+    }
+    .login_register_cofBut {
+      width: 450px;
+      height: 56px;
+      background: #0d5ef8;
+      border-radius: 10px;
+      color: #ffffff;
+      font-size: 16px;
+    }
+    .ant-form-item {
+      margin-bottom: 40px;
+    }
+    .link_span {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-top: 10px;
+      a {
+        color: #0d5ef8;
+      }
+    }
+  }
+}
--- a/src/modules/loginRegister/RegisterNew.jsx
+++ b/src/modules/loginRegister/RegisterNew.jsx
@ -0,0 +1,352 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Form, Input, Button, Checkbox, message } from "antd";
+import { Link } from "react-router-dom";
+import axios from 'axios';
+import { setmiyah } from 'educoder';
+import './LoginRegisterPageNew.scss';
+import { Encrypt } from "../../common/Env";
+
+function Register(props){
+  const {form, mygetHelmetapi} = props;
+  const {getFieldDecorator, setFieldsValue } = form;
+  //用户输入的符合规则的邮箱（用于获取验证码）
+  const [emailStr, setEmailStr] = useState(undefined);
+  //用户输入的符合规则的用户名，用于当用户输入符合规则的用户名之后再更改又去触发check.json接口
+  const [loginStr, setLoginStr] = useState(undefined);
+  const [secondsStr, setSecondsStr] = useState(60);
+  const [countDown, setCountDown] = useState(false);
+  const [getCaptchaBut, setGetCaptchaBut] = useState(false);
+  const [mess, setMess] = useState(undefined);
+  const [tipVisable, setTipVisable] = useState(false);
+  //用于表单提交时会再次校验数据
+  const [userNameGo, setUserNameGo] = useState(true);
+  const [emailGo, setEmailGo] = useState(true);
+  // 注册类型(手机号/邮箱)
+  const [registerType, setRegisterType] = useState(0);
+  const [setting, setSetting] = useState(undefined);
+  const seconds = useRef();
+  let interval = undefined;
+
+  useEffect(()=>{
+    //获取第三方登录平台信息
+    setSetting(JSON.parse(localStorage.getItem("chromesetting")));
+  },[])
+
+  // 配置网页标题
+  useEffect(()=>{
+    if(mygetHelmetapi){
+      const {name} = mygetHelmetapi;
+      document.title = name;
+    }
+  }, [mygetHelmetapi])
+
+  //注册表单提交
+  function handleSubmit(){
+    form.validateFields((err, values) => {
+      if (!err) {
+        axios.post(`/accounts/register.json`, {
+          login: values.email,
+          namespace: values.register_username.trim(),
+          password: Encrypt(values.register_psd),
+          password_confirmation: Encrypt(values.psdComfirm),
+          code: "123123"
+        }).then((response)=>{
+          debugger;
+          if(response.data && response.data.status === -6){
+            //验证码不正确
+            form.setFields({captcha: {value:values.captcha,errors:[new Error('验证码错误，请重新输入')]}});
+            //设置邮箱内容-》不设置会被恢复成undefined,从而点击验证码失败
+            setEmailStr(values.email);
+          }else if(response.data && response.data.status === 0){
+            //注册成功，页面跳转即可，注册后登录流程forge处理了
+            window.location.href = "/"+values.register_username.trim();
+          } else {
+            setEmailStr(values.email);
+            setMess(response.data.message);
+          }
+        })
+      }
+    });
+  }
+
+  //判断用户名（username）是否注册
+  function usernameConfirm(rule, value, callback){
+    setUserNameGo(true);
+    value && (userNameGo || value !== loginStr) ? axios.post(`/accounts/check.json`, {
+      value: value.trim(),
+      type: 1
+    }).then(response => {
+      if (response.data.status === -1) {
+        callback(response.data.message);
+      } else {
+        setLoginStr(value);
+        setUserNameGo(false);
+        callback();
+      }
+    }):callback();setLoginStr(undefined);
+  }
+
+  //判断邮箱/手机号是否符合规范、是否注册
+  function emailConfirm(rule, value, callback) {
+    if(value){
+      if((/^([1][3456789])\d{9}$/.test(value) && !registerType) || (/^[a-zA-Z0-9]+([.\-_\\]*[a-zA-Z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(value) && registerType)){
+        setEmailGo(true);
+        (emailGo || value !== emailStr) ? axios.get(`/accounts/valid_email_and_phone.json`, {
+          params: {
+            login: value,
+            type: 1
+          }
+        }).then(response => {
+          if(!response.data.status){
+            setEmailStr(value);
+            setGetCaptchaBut(true);
+            setEmailGo(false);
+            callback();
+          }else{
+            setGetCaptchaBut(false);
+            // callback(response.data.status === -2 ? `该${registerType ? '邮箱' : '手机号'}已被注册` : response.data.message);
+            callback(response.data.message);
+          }
+        }):callback();// setEmailStr(undefined);
+      }else{
+        callback(`请输入正确的${registerType ? '邮箱地址' : '手机号'}`);
+      }
+    }else{
+      callback(`请输入${registerType ? '邮箱地址' : '手机号'}`);
+    }
+  }
+
+  //确认密码
+  function comfirmPassWord(rule, value, callback, index) {
+    if ((index === 2 && value && form.getFieldValue('register_psd') && value !== form.getFieldValue('register_psd')) || (index === 1 && value && form.getFieldValue('psdComfirm') && value !== form.getFieldValue('psdComfirm'))) {
+      if(index===1){
+        form.setFields({psdComfirm: {value:form.getFieldValue('psdComfirm'),errors:[new Error('密码不一致，请重新输入')]}});
+        callback();
+      }else{
+        callback('密码不一致，请重新输入');
+      }
+    } else {
+      callback();
+    }
+  }
+
+  //检查密码是否符合格式
+  function checkPassWord(rule, value, callback){
+    if(!value){
+      setTipVisable(true);
+      callback('请输入登录密码');
+    }else if(/(?!.*\s)(?!^[\u4e00-\u9fa5]+$)^.{8,16}$/.test(value)){
+      callback()
+    }else{
+      setTipVisable(true);
+      if(value.length<8 || value.length>16){
+        callback('密码长度为8-16个字符');
+      }else{
+        callback('密码不能使用空格');
+      }
+    }
+  }
+
+  //确认勾选服务
+  function comfirmRead(rule, value, callback){
+    if(value){
+      callback();
+    }else{
+      callback("请阅读并接受我们的服务条款");
+    }
+  }
+
+  //获取验证码
+  function getCaptcha() {
+    setMess(undefined);
+    if (emailStr) {
+      // 倒计时开始
+      setCountDown(true);
+      setGetCaptchaBut(false);
+      seconds.current = 60;
+      setSecondsStr(60);
+      !interval && clearInterval(interval);
+      interval = setInterval(() => {
+        if (seconds.current > 1) {
+          let oldSeconds = seconds.current;
+          seconds.current = oldSeconds - 1;
+          setSecondsStr(oldSeconds - 1);
+        } else {
+          clearInterval(interval);
+          //倒计时结束->可以获取验证码
+          setGetCaptchaBut(true);
+          setCountDown(false);
+        }
+      }, 1000)
+
+      //请求获取验证码接口
+      axios.get(`/accounts/get_verification_code.json`, {
+        params: {
+          login: emailStr,
+          type: 1,
+          smscode: setmiyah(emailStr),
+        }
+      }).then(response => {
+        if (response.data && response.data.status === 0) {
+          //验证码发送成功
+          let email = emailStr.substring(emailStr.indexOf("@")+1);
+          message.success({content:<span>验证码已发送，请注意查收。{registerType ? <a href={`https://mail.${email}`} target="_blank">前往邮箱</a> : ''}</span>});
+        } else {
+          //验证码发送失败,获取验证码按钮变灰并且文案变回【获取验证码】
+          setGetCaptchaBut(false);
+          setCountDown(false);
+          clearInterval(interval);
+          setMess(response.data.message);
+        }
+      })
+    }
+  }
+
+  //清除密码框的value属性->DOM看不见密码值
+  function clear(){
+    const password = document.getElementById("register_register_psd");
+    const passwordComfirm = document.getElementById("register_psdComfirm");
+    if(password && password.type==="password"){
+      setTimeout(()=>{
+        password.removeAttribute('value');
+      },0)
+    }
+    if(passwordComfirm && passwordComfirm.type==="password"){
+      setTimeout(()=>{
+        passwordComfirm.removeAttribute('value');
+      },0)
+    }
+  }
+
+  function changeRegisterType(type){
+    setGetCaptchaBut(false);
+    setRegisterType(type);
+    setFieldsValue({'email': undefined})
+  }
+
+  return(
+    <div>
+      <div className="right_cont Register_content">
+        <div className="login_register_head mb30">
+          <span>欢迎注册 软件发展新技术</span>
+          <span className="link_span">已有账号，<Link to={`/login`}>立即登录</Link></span>
+        </div>
+        <div className="registerNav mb20 font-18">
+          <a className={`type ${registerType ? '' : 'activeRegisterNav'}`} onClick={()=>{changeRegisterType(0)}}>手机号注册</a>
+          <a className={`type ${registerType ? 'activeRegisterNav' : ''} ml50`} onClick={()=>{changeRegisterType(1)}}>邮箱注册</a>
+        </div>
+        <p className={mess ? "message active" : "message"}>{mess}</p>
+        <Form className="login-form">
+          <Form.Item>
+            {getFieldDecorator('register_username',{
+              rules:[
+                {
+                  transform: (value)=>{return value.trim()}
+                },
+                {
+                  required:true,
+                  message:"请输入用户名"
+                },
+                {
+                  pattern: /^[a-zA-Z]/,
+                  message: "用户名必须以字母开头"
+                },
+                {
+                  pattern: /[a-zA-Z0-9]$/,
+                  message: "用户名只能使用英文字母和数字"
+                },
+                {
+                  pattern: /^[^\s]*$/,
+                  message: "用户名不能包含空格"
+                },
+                {
+                  min: 4,
+                  max: 15,
+                  message: "用户名长度为4到15个字符"
+                },
+                {
+                  validator: (rule, value, callback) => { usernameConfirm(rule, value, callback) }
+                }
+              ],
+              validateTrigger:"onBlur",
+              validateFirst: true,
+            })(<Input autoFocus placeholder="请输入4-15位用户名，以字母开头，只能使用字母和数字" autoComplete="off"/>)}
+          </Form.Item>
+          <Form.Item>
+            {getFieldDecorator('email',{
+              rules:[
+                {
+                  validator: (rule, value, callback) => { emailConfirm(rule, value, callback) }
+                }
+              ],
+              validateTrigger:"onBlur",
+              validateFirst: true,
+            })(<Input className="email" placeholder={`请输入${registerType ? '邮箱地址' : '手机号'}`} autoComplete="off"/>)}
+          </Form.Item>
+
+          {/* <Form.Item>
+            <div className="login_register_head">
+              {getFieldDecorator('captcha', {
+                rules: [{
+                  required: true,
+                  message: "请输入验证码"
+                }],
+                validateTrigger: "onBlur",
+              })(
+                <Input className="captcha" placeholder="请输入验证码" autoComplete="off"/>
+              )}
+              <Button className={getCaptchaBut ? 'codeBut':'codeBut disable'} disabled={!getCaptchaBut} onClick={getCaptcha}>{getCaptchaBut || (!getCaptchaBut && !countDown)?"获取验证码":`重发(${secondsStr}s)`}</Button>
+            </div>
+          </Form.Item> */}
+
+          <Form.Item>
+            {getFieldDecorator('register_psd',{
+              rules:[
+                {
+                  validator: (rule, value, callback) => { comfirmPassWord(rule, value, callback, 1) }
+                },
+                {
+                  validator: (rule, value, callback) => { checkPassWord(rule, value, callback) }
+                }
+              ],
+              validateTrigger:"onBlur",
+              validateFirst: true,
+            })(<Input.Password className="register_psd" placeholder="请输入登录密码" onBlur={clear}  onChange={clear} autoComplete="new-password"/>)}
+          </Form.Item>
+          <span className="password_tips" style={{display:tipVisable?"none":"block"}}>请输入8-16位密码，区分大小写、不能使用空格</span>
+
+          <Form.Item>
+            {getFieldDecorator('psdComfirm', {
+              rules: [
+                {
+                  required: true,
+                  message: "请确认登录密码"
+                },
+                {
+                  validator: (rule, value, callback) => { comfirmPassWord(rule, value, callback, 2) }
+                }
+              ],
+              validateTrigger: "onBlur",
+              validateFirst: true,
+            })(<Input.Password className="psdComfirm" placeholder="请确认登录密码" onBlur={clear} onChange={clear} autoComplete="new-password"/>)}
+          </Form.Item>
+
+          {/* <Form.Item className="register_last_form">
+            {getFieldDecorator('agreement', {
+              valuePropName: 'checked',
+              initialValue: false,
+              rules: [
+                {
+                  validator: (rule, value, callback) => { comfirmRead(rule, value, callback) }
+                }
+              ],
+            })(<Checkbox className="link_span">我已阅读并接受<a className="login-form-forgot" href="https://forum.trustie.net/forums/5029/detail" target="_blank">《软件发展新技术服务协议条款》</a></Checkbox>)}
+          </Form.Item> */}
+          <Button type="primary" htmlType="submit" className="login_register_cofBut" onClick={handleSubmit}>注册</Button>
+        </Form>
+        {/* <OtherLogin /> */}
+      </div>
+    </div>
+  )
+}
+export default Form.create({ name: 'register' })(Register);
--- a/src/modules/loginRegister/ResetPasswordNew.jsx
+++ b/src/modules/loginRegister/ResetPasswordNew.jsx
@ -0,0 +1,270 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Form, Input, Button, message } from "antd";
+import { Link } from "react-router-dom";
+import axios from 'axios';
+import { setmiyah } from 'educoder';
+import './LoginRegisterPageNew.scss';
+import { Encrypt } from "../../common/Env";
+
+function ResetPassword(props) {
+  const {form, mygetHelmetapi } = props;
+  const {getFieldDecorator } = form;
+  const [emailStr, setEmailStr] = useState(undefined);
+  const [secondsStr, setSecondsStr] = useState(60);
+  const [countDown, setCountDown] = useState(false);
+  const [getCaptchaBut, setGetCaptchaBut] = useState(false);
+  const [mess, setMess] = useState(undefined);
+  const [tipVisable, setTipVisable] = useState(false);
+  //用于限制表单提交时会再次调用check.json接口校验数据
+  const [emailGo, setEmailGo] = useState(true);
+  const seconds = useRef();
+  let interval = undefined;
+
+  // 配置网页标题
+  useEffect(()=>{
+    if(mygetHelmetapi){
+      const {name} = mygetHelmetapi;
+      document.title = name;
+    }
+  }, [mygetHelmetapi])
+
+  //重置密码表单提交
+  function handleSubmit() {
+    form.validateFieldsAndScroll((err, values) => {
+      if (!err) {
+        axios.post(`/accounts/reset_password.json`, {
+          login: values.email,
+          password: Encrypt(values.psd),
+          password_confirmation: Encrypt(values.psdComfirm),
+          code: values.captcha,
+        }).then((response) => {
+          if (response.data.status === 0) {
+            //重置密码成功，调用登录接口
+            axios.post(`/accounts/login.json`, {
+              login: values.email,
+              password: Encrypt(values.psd)
+            }).then((login_response) => {
+              if (!login_response.data.login) {
+                setMess(login_response.data.message);
+              } else {
+                window.location.href = "/" + login_response.data.login;
+              }
+            }).catch((error) => {
+              console.log('error',error);
+            })
+          } else {
+            //设置邮箱内容-》不设置会被恢复成undefined,从而点击验证码失败
+            setEmailStr(values.email);
+            const message = response.data.message;
+            message === "验证码不正确" ? form.setFields({captcha: {value:values.captcha,errors:[new Error('验证码错误，请重新输入')]}}) : setMess(message);
+          }
+        })
+      }
+    });
+  }
+
+  //判断邮箱/手机号是否符合规范、是否注册
+  function emailConfirm(rule, value, callback) {
+    if(/^([1][3456789])\d{9}$/.test(value) || /^[a-zA-Z0-9]+([.\-_\\]*[a-zA-Z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(value)){
+      setEmailGo(true);
+      if(value && (emailGo || value !== emailStr)){
+        axios.get(`/accounts/valid_email_and_phone.json`, {
+          params: {
+            login: value,
+            type: 2
+          }
+        }).then(response => {
+          if (response.data && !response.data.status) {
+            setEmailStr(value);
+            setGetCaptchaBut(true);
+            setEmailGo(false);
+            callback();
+          } else {
+            setGetCaptchaBut(false);
+            callback('此手机号/邮箱未注册');
+          }
+        })
+      }else{
+        callback()
+      }
+      // setEmailStr(undefined);
+    }else{
+      callback("请输入正确的手机号/邮箱")
+    }
+  }
+
+  //确认密码
+  function comfirmPassWord(rule, value, callback, index) {
+    if ((index === 2 && value && form.getFieldValue('psd') && value !== form.getFieldValue('psd')) || (index === 1 && value && form.getFieldValue('psdComfirm') && value !== form.getFieldValue('psdComfirm'))) {
+      if(index===1){
+        form.setFields({psdComfirm: {value:form.getFieldValue('psdComfirm'),errors:[new Error('密码不一致，请重新输入')]}});
+        callback();
+      }else{
+        callback('密码不一致，请重新输入');
+      }
+    } else {
+      callback();
+    }
+  }
+
+  //检查密码是否符合格式
+  function checkPassWord(rule, value, callback){
+    if(!value){
+      setTipVisable(true);
+      callback('请输入新密码');
+    }else if(/(?!.*\s)(?!^[\u4e00-\u9fa5]+$)^.{8,16}$/.test(value)){
+      callback()
+    }else{
+      setTipVisable(true);
+      if(value.length<8 || value.length>16){
+        callback('密码长度为8-16个字符');
+      }else{
+        callback('密码不能使用空格');
+      }
+    }
+  }
+
+  //获取验证码
+  function getCaptcha() {
+    setMess(undefined);
+    if (emailStr) {
+      // 倒计时开始
+      setCountDown(true);
+      setGetCaptchaBut(false);
+      seconds.current = 60;
+      setSecondsStr(60);
+      !interval && clearInterval(interval);
+      interval = setInterval(() => {
+        if (seconds.current > 1) {
+          let oldSeconds = seconds.current;
+          seconds.current = oldSeconds - 1;
+          setSecondsStr(oldSeconds - 1);
+        } else {
+          //倒计时结束->可以获取验证码
+          setGetCaptchaBut(true);
+          setCountDown(false);
+          clearInterval(interval);
+        }
+      }, 1000)
+
+      //请求获取验证码接口
+      axios.get(`/accounts/get_verification_code.json`, {
+        params: {
+          login: emailStr,
+          type: 2,
+          smscode: setmiyah(emailStr),
+        }
+      }).then(response => {
+        if (response.data && response.data.status === 0) {
+          //验证码发送成功
+          let email = emailStr.substring(emailStr.indexOf("@")+1);
+          message.success({content:<span>验证码已发送，请注意查收。{emailStr.indexOf("@") === -1 ? '' : <a href={`https://mail.${email}`} target="_blank">前往邮箱</a>}</span>});
+        } else {
+          //验证码发送失败,获取验证码按钮变灰并且文案变回【获取验证码】
+          setGetCaptchaBut(false);
+          setCountDown(false);
+          clearInterval(interval);
+          setMess(response.data.message);
+        }
+      })
+    }
+  }
+
+  //清除密码框的value属性->DOM看不见密码值
+  function clear(){
+    const password = document.getElementById("resetPassword_psd");
+    const passwordComfirm = document.getElementById("resetPassword_psdComfirm");
+    if(password && password.type==="password"){
+      setTimeout(()=>{
+        password.removeAttribute('value');
+      },0)
+    }
+    if(passwordComfirm && passwordComfirm.type==="password"){
+      setTimeout(()=>{
+        passwordComfirm.removeAttribute('value');
+      },0)
+    }
+  }
+
+  return (
+    <div>
+      <div className="right_cont ResetPassword_content">
+        <div className="login_register_head mb30">
+          <span>找回密码</span>
+          <span className="link_span">已有账号，<Link to={`/login`}>立即登录</Link></span>
+        </div>
+        <p className={mess ? "message active" : "message"}>{mess}</p>
+        <Form className="login-form">
+          <Form.Item>
+            {getFieldDecorator('email', {
+              rules: [
+                {
+                  required: true,
+                  message: "请输入已注册的手机号/邮箱"
+                },
+                {
+                  validator: (rule, value, callback) => { emailConfirm(rule, value, callback) }
+                }
+              ],
+              validateTrigger: "onBlur",
+              validateFirst: true,
+            })(<Input autoFocus className="account" placeholder="请输入已注册的手机号/邮箱"/>)}
+          </Form.Item>
+
+          <Form.Item>
+            <div className="login_register_head">
+              {getFieldDecorator('captcha', {
+                rules: [{
+                  required: true,
+                  message: "请输入验证码"
+                }],
+                validateTrigger: "onBlur",
+              })(
+                <Input className="captcha" placeholder="请输入验证码" autoComplete="off"/>
+              )}
+              <Button className={getCaptchaBut ? 'codeBut':'codeBut disable'} disabled={!getCaptchaBut} onClick={getCaptcha}>{getCaptchaBut || (!getCaptchaBut && !countDown)?"获取验证码":`重发(${secondsStr}s)`}</Button>
+            </div>
+          </Form.Item>
+
+          <Form.Item>
+            {getFieldDecorator('psd', {
+              rules: [
+                {
+                  validator: (rule, value, callback) => { comfirmPassWord(rule, value, callback,1) }
+                },
+                {
+                  validator: (rule, value, callback) => { checkPassWord(rule, value, callback) }
+                }
+              ],
+              validateTrigger: "onBlur",
+              validateFirst: true,
+            })(<Input.Password className="psd" placeholder="请输入新密码" onBlur={clear} onChange={clear} autoComplete="new-password"/>)}
+          </Form.Item>
+          <span className="password_tips" style={{display:tipVisable?"none":"block"}}>请输入8-16位密码，区分大小写、不能使用空格</span>
+
+          <Form.Item>
+            {getFieldDecorator('psdComfirm', {
+              rules: [
+                {
+                  required: true,
+                  message: "请确认新密码"
+                },
+                {
+                  validator: (rule, value, callback) => { comfirmPassWord(rule, value, callback,2) }
+                }
+              ],
+              validateTrigger: "onBlur",
+              validateFirst: true,
+            })(<Input.Password className="psdComfirm" placeholder="请确认新密码" onBlur={clear} onChange={clear} autoComplete="new-password"/>)}
+          </Form.Item>
+
+          <Form.Item>
+            <Button type="primary" htmlType="submit" className="login_register_cofBut" onClick={handleSubmit}>重置密码并登录</Button>
+          </Form.Item>
+        </Form>
+      </div>
+    </div>
+  )
+
+}
+export default Form.create({ name: 'resetPassword' })(ResetPassword);
--- a/src/modules/loginRegister/font/AlibabaPuHuiTi-Medium.woff2
+++ b/src/modules/loginRegister/font/AlibabaPuHuiTi-Medium.woff2
--- a/src/modules/loginRegister/font/AlibabaPuHuiTi-Regular.woff2
+++ b/src/modules/loginRegister/font/AlibabaPuHuiTi-Regular.woff2
--- a/src/modules/loginRegister/font/font.css
+++ b/src/modules/loginRegister/font/font.css
@ -0,0 +1,11 @@
+/* 登录临时用 */
+
+@font-face {
+  font-family: "alibaba";
+  src: url('./AlibabaPuHuiTi-Regular.woff2');
+}
+@font-face {
+  font-family: "alibaba-medium";
+  src: url('./AlibabaPuHuiTi-Medium.woff2') format('woff');
+  font-display: swap;
+}
--- a/src/modules/loginRegister/img/bg1.png
+++ b/src/modules/loginRegister/img/bg1.png
--- a/src/modules/loginRegister/img/bglogin.png
+++ b/src/modules/loginRegister/img/bglogin.png
--- a/src/modules/loginRegister/img/icon1.png
+++ b/src/modules/loginRegister/img/icon1.png
--- a/src/modules/loginRegister/img/icon2.png
+++ b/src/modules/loginRegister/img/icon2.png
--- a/src/modules/loginRegister/img/icon3.png
+++ b/src/modules/loginRegister/img/icon3.png
--- a/src/modules/loginRegister/img/icon4.png
+++ b/src/modules/loginRegister/img/icon4.png