help_user/src/account/Register.tsx

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, Method, request} from "../interface"
import {RegisterMessage, RegisterRes, 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:RegisterRes){
           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>
        );
    }
}