You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
169 lines
7.1 KiB
169 lines
7.1 KiB
import React from "react";
|
|
import {Input} from "../ui/InputGroup";
|
|
import {Button, Form} from 'react-bootstrap'
|
|
import {RegisterProps, RegisterState, UserType} from "../entity";
|
|
import {UploadImg} from "../ui/UploadImg";
|
|
import {Address} from "../ui/Address";
|
|
import {API, JSONResponse, Method, request} from "../interface"
|
|
import {RegisterMessage, RegisterTransform} from "../result";
|
|
import {MyDialog} from "../ui/MyDialog";
|
|
|
|
/**
|
|
* 图片尺寸限制
|
|
*/
|
|
const maxImageSize={
|
|
width:100,
|
|
height:100
|
|
}
|
|
|
|
/**
|
|
* 注册
|
|
*/
|
|
export class Register extends React.Component<RegisterProps, RegisterState>{
|
|
|
|
constructor(props: Readonly<RegisterProps>) {
|
|
super(props)
|
|
this.state={
|
|
result: null,
|
|
sex: "",
|
|
address:"",
|
|
serviceAddress: "",
|
|
age: 0,
|
|
email: "",
|
|
info: "",
|
|
mobile: 0,
|
|
name: "",
|
|
userId: "",
|
|
password:"",
|
|
confirmPwd:"",
|
|
userType:""
|
|
}
|
|
|
|
}
|
|
|
|
//注册
|
|
register(){
|
|
let that=this
|
|
request(API.account.register,Method.PUT, {
|
|
userId:this.state.userId,
|
|
password:this.state.password,
|
|
name:this.state.name,
|
|
sex:this.state.sex,
|
|
imgFile:this.state.imgFile,
|
|
address:this.state.address,
|
|
serviceAddress:this.state.serviceAddress,
|
|
userType:this.state.userType,
|
|
mobile:String(this.state.mobile),
|
|
email:this.state.email,
|
|
info:this.state.info
|
|
|
|
},new RegisterTransform(),function(res:JSONResponse<RegisterMessage>){
|
|
let message
|
|
switch (res.customResult) {
|
|
case RegisterMessage.ok:message="注册成功";
|
|
that.setState({
|
|
result:<div className="text-center"><Button variant="info" onClick={()=>that.props.toLogin()}>注册成功,返回登陆</Button></div>
|
|
})
|
|
break
|
|
case RegisterMessage.fail:message="注册失败,请联系管理员";
|
|
// eslint-disable-next-line no-fallthrough
|
|
case RegisterMessage.form_parse_error:message="表单不合法,请联系管理员"
|
|
// eslint-disable-next-line no-fallthrough
|
|
case RegisterMessage.user_repeat:message="用户id'"+that.state.userId+"'重复,请更换"
|
|
that.setState({
|
|
result:<h3 className="text-danger text-center">{message}</h3>
|
|
})
|
|
break
|
|
}
|
|
|
|
})
|
|
}
|
|
|
|
//检查是否为空
|
|
isNotEmpty(...value:(string | number)[]){
|
|
for(let index in value){
|
|
if(value[index].toString().length===0){
|
|
return false
|
|
}
|
|
}
|
|
return true
|
|
}
|
|
|
|
//检查密码
|
|
checkPwd(){
|
|
return this.state.confirmPwd.length>0&&this.state.password===this.state.confirmPwd
|
|
}
|
|
|
|
//检查表单
|
|
check(){
|
|
return this.isNotEmpty(this.state.userId,this.state.password,this.state.name,this.state.sex,this.state.serviceAddress,this.state.userType,this.state.info)
|
|
&&this.state.imgFile!=null&&this.checkPwd()&&this.checkMobile()&&this.checkEmail()
|
|
}
|
|
|
|
/**
|
|
* 检查手机号
|
|
*/
|
|
checkMobile(){
|
|
return /1[3456789]\d{9}/g.test(this.state.mobile.toString())
|
|
}
|
|
|
|
/**
|
|
* 检查邮箱
|
|
*/
|
|
checkEmail(){
|
|
return /[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}/g.test(this.state.email)
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
return (
|
|
<div className="d-flex align-items-center" style={{height:window.screen.availHeight+'px'}}>
|
|
<div className="container">
|
|
<Form>
|
|
<Input col={4} name="userId" type="text" desc="用户账号" value={this.state.userId} onChange={(value: string)=>{
|
|
this.setState({...this.state,...{userId:value}})}} valid={{check:this.isNotEmpty(this.state.userId)}}/>
|
|
|
|
<Input col={4} name="password" type="password" desc="用户密码" value={this.state.password}
|
|
onChange={(value: string)=>{this.setState({password:value})}} valid={{check:this.isNotEmpty(this.state.password)}}/>
|
|
|
|
<Input col={4} name="confirmPwd" type="password" desc="确认密码" placeholder="请确认密码" value={this.state.confirmPwd}
|
|
onChange={(value: string)=>{this.setState({confirmPwd:value})}}
|
|
valid={{check:this.checkPwd(),
|
|
invalid:this.state.confirmPwd.length>0&&this.state.password!==this.state.confirmPwd?"密码和确认密码不一致":"验证失败"}}/>
|
|
|
|
<Input col={4} name="name" desc="姓名" onChange={(value:string)=>this.setState({name:value})} valid={{check:this.isNotEmpty(this.state.name)}}/>
|
|
|
|
<Input col={4} name="sex" desc="性别" as="select" onChange={(value:string)=>this.setState({sex:value})}
|
|
options={[<option value="" key={"sex"+0}>请选择性别</option>,<option value="man" key={"sex"+1}>男</option>,<option value="women" key={"sex"+2}>女</option>]}/>
|
|
|
|
<UploadImg maxImageSize={maxImageSize} onChange={(imgObj:any)=>
|
|
{
|
|
this.setState({imgFile:imgObj})
|
|
}} tip={"请上传头像"} />
|
|
|
|
<Input name="address" desc="住址" onChange={(value:string)=>this.setState({address:value})}/>
|
|
|
|
<Address onChange={(value:string)=>this.setState({serviceAddress:value})}/>
|
|
|
|
<Input col={4} name="userType" desc="用户身份" as="select" onChange={(value:string)=>this.setState({userType:value})}
|
|
options={[<option value="" key={"userType0"}>请选择用户身份</option>,<option key={"userType1"} value={UserType.help}>服务发起者</option>,<option key={"userType2"} value={UserType.seekHelp}>服务接收者</option>]}/>
|
|
|
|
<Input col={4} name="mobile" desc="电话" onChange={(value:string)=>this.setState({mobile:+value})} valid={{check:this.checkMobile()}}/>
|
|
|
|
<Input col={4} name="email" desc="邮箱" onChange={(value:string)=>this.setState({email:value})} valid={{check:this.checkEmail()}}/>
|
|
|
|
{/*TODO 简介长度要限制*/}
|
|
<Input col={7} name="info" desc="简介" as={"textarea"} onChange={(value:string)=>this.setState({info:value})} valid={{check:this.isNotEmpty(this.state.info)}}/>
|
|
|
|
<Button variant="success" className="mt-3 col-2 mr-3" disabled={!this.check()} onClick={()=>this.register()}>注册</Button>
|
|
|
|
<Button variant="info" className="mt-3 col-2" onClick={()=>this.props.toLogin()}>返回登陆</Button>
|
|
</Form>
|
|
</div>
|
|
|
|
<MyDialog content={this.state.result} open={this.state.result!==null} titleId="register-tip" menuName="注册反馈" onClose={()=>this.setState({result:null})}/>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|