103 lines
3.1 KiB
JavaScript
103 lines
3.1 KiB
JavaScript
import React ,{ useState } from 'react';
|
|
import { Form , Input , Button } from 'antd';
|
|
import phone from './image/phone.svg';
|
|
import lock from "./image/lock.png";
|
|
import axios from 'axios';
|
|
import cookie from 'react-cookies';
|
|
|
|
|
|
const phonereg = /^([1][3456789])\d{9}$/
|
|
const emailreg = /^[a-zA-Z0-9]+([.\-_\\]*[a-zA-Z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/
|
|
function Bind(props){
|
|
const { form } = props;
|
|
|
|
const { getFieldDecorator , getFieldsValue } = form;
|
|
const [ bindFlag , setBindFlag] = useState(true);
|
|
const type = props.match.params.type;
|
|
// 绑定登录
|
|
function bindloginFunc(){
|
|
const {username, password } = getFieldsValue();
|
|
if(username && password){
|
|
var url = '/bind_user.json';
|
|
axios.post(url,{
|
|
username,password,type
|
|
}).then(result=>{
|
|
if(result && result.data.status === 0){
|
|
cookie.save("supplyphone",true);
|
|
cookie.save("login",result.data.login);
|
|
window.location.href = "/"+result.data.login;
|
|
}else{
|
|
props.showNotification(result.data.message);
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
function accountConfirm(r,v,c){
|
|
if(v){
|
|
const {password } = getFieldsValue();
|
|
if(!(phonereg.test(v) || emailreg.test(v))){
|
|
setBindFlag(true);
|
|
c(`请输入正确的手机号或邮箱地址`);
|
|
}else if(password){
|
|
setBindFlag(false);
|
|
}
|
|
}else{
|
|
c();
|
|
setBindFlag(true);
|
|
}
|
|
}
|
|
function psdConfirm(r,v,c){
|
|
if(v){
|
|
const { username } = getFieldsValue();
|
|
if(phonereg.test(username) || emailreg.test(username)){
|
|
setBindFlag(false);
|
|
}else{
|
|
setBindFlag(true);
|
|
}
|
|
}else{
|
|
c();
|
|
setBindFlag(true);
|
|
}
|
|
}
|
|
return(
|
|
<div>
|
|
<Form className="bind_form">
|
|
<Form.Item>
|
|
{getFieldDecorator('username',{
|
|
rules:[
|
|
{
|
|
required:true,
|
|
message:"请输入手机号或邮箱地址"
|
|
},
|
|
{
|
|
validator: (rule, value, callback) => { accountConfirm(rule, value, callback) }
|
|
}
|
|
],
|
|
validateTrigger:"onInput",
|
|
})(<Input className="account" addonBefore={<img src={phone} alt="" width="13px" />} size="large" placeholder="请输入手机号或邮箱地址"/>)}
|
|
</Form.Item>
|
|
<Form.Item>
|
|
{getFieldDecorator('password', {
|
|
rules: [
|
|
{
|
|
required:true,
|
|
message:"请输入登录密码"
|
|
},
|
|
{
|
|
validator: (rule, value, callback) => { psdConfirm(rule, value, callback) }
|
|
}
|
|
],
|
|
validateTrigger:"onInput",
|
|
})(
|
|
<Input.Password autoComplete="new-password" addonBefore={<img src={lock} alt="" width="13px" />} className="psd" size="large" placeholder="请输入登录密码" />,
|
|
)}
|
|
</Form.Item>
|
|
<Button type="primary" disabled={bindFlag} size="large" style={{width:"100%",marginTop:"20px"}} onClick={bindloginFunc}>
|
|
绑定并登录
|
|
</Button>
|
|
</Form>
|
|
</div>
|
|
)
|
|
}
|
|
export default Form.create({ name: 'Bind' })(Bind); |