help_user/src/my/MyInfo.tsx

import React from "react";
import {Button, Col, Container, Form, FormControl, Image, Row} from "react-bootstrap";
import {UserEdit} from "../entity";
import {Input} from "../bootstrap/InputGroup";


/**
 * 个人信息
 */
export class MyInfo extends React.Component<
    {
        isOwn:boolean;
        ownUserId:string;
        userId?:string;
        isMyFriend:boolean;
        isAdd:boolean;
    }, UserEdit>{


    constructor(props: Readonly<any>) {
        super(props);

        this.state={
            //用户ID
            userId:"",
            //用户姓名
            name:"",
            //用户年龄
            age:0,
            //用户电话
            mobile:0,
            //用户邮箱
            email:"",
            //地点
            address:"",
            //个人简介
            info:"",
            //头像
            headImg:"",
            contentEditable:false,
            modifyPassword:false,
            oldPassword:"",
            newPassword:"",
            confirmNewPwd:""
        }
    }

    /**
     * 加载用户信息
     */
    loadInfo(){
        this.setState({
            headImg:"logo512.png",
            userId:"admin",
            name:"张三",
            age:Math.ceil(Math.random()*100)+1,
            mobile:1234567879,
            email:"admin@qq.com",
            address:"上海高新区",
            info:"个人简介",
        })
    }

    componentDidMount() {
        this.loadInfo()
    }

    /**
     * 进入编辑模式
     */
    openEdit(){
        this.setState({
            contentEditable:true
        })
    }

    /**
     * 进入修改密码
     */
    openModifyPwd(){
        this.setState({
            modifyPassword:true
        })
    }

    /**
     * 修改密码
     */
    modifyPwd(){
        this.setState({
            modifyPassword:false
        })
    }

    /**
     * 保存信息
     */
    doSave(){
        this.setState({
            contentEditable:false
        })

        console.debug(this.state)
    }


    /**
     * 添加好友
     */
    addFriend(){

    }

    /**
     * 同意好友邀请
     */
    agreeFriend(){

    }


    render() {

        return (
            <Container>
                <Row>
                    <Col className="p-3">
                        <Image className="chat-headImg" src={this.state.headImg}/>
                    </Col>
                </Row>
                <Row>
                    <Col className="border-info border p-3 text-center">{this.state.userId}</Col>
                    <Col className="border-info border p-3 text-center">
                        {this.state.contentEditable?
                            <FormControl value={this.state.name} onChange={(e)=>this.setState({name:e.target.value})}/>
                            :this.state.name}</Col>
                    <Col className="border-info border p-3 text-center">
                        {this.state.contentEditable?
                            <FormControl value={this.state.age} type={"number"} onChange={(e)=>this.setState({age:+e.target.value})}/>
                            :this.state.age}</Col>
                </Row>
                <Row>
                    <Col className="border-info border p-3 text-center">
                        {this.state.contentEditable?
                            <FormControl value={this.state.mobile} type={"number"} onChange={(e)=>this.setState({mobile:+e.target.value})}/>
                            :this.state.mobile}
                    </Col>
                    <Col className="border-info border p-3 text-center">
                        {this.state.contentEditable?
                            <FormControl value={this.state.email} onChange={(e)=>this.setState({email:e.target.value})}/>
                            :this.state.email}
                    </Col>
                </Row>
                <Row>
                    <Col className="border-info border p-3 text-center">
                        {this.state.contentEditable?
                            <FormControl value={this.state.address} onChange={(e)=>this.setState({address:e.target.value})}/>
                            :this.state.address}
                    </Col>
                </Row>
                <Row>
                    <Col className="border-info border p-3 text-center my-info-desc">
                        {this.state.contentEditable?
                            <FormControl value={this.state.info} as={"textarea"} onChange={(e)=>this.setState({info:e.target.value})}/>
                            :this.state.info}
                    </Col>
                </Row>
                {this.state.modifyPassword?
                    <Row>
                        <Col>
                            <Form>
                                <Input name="oldPassword" type={"password"} desc="旧密码" onChange={(value:string)=>this.setState({oldPassword:value})}/>

                                <Input name="newPassword" type={"password"} desc="新密码" onChange={(value:string)=>this.setState({newPassword:value})}/>

                                <Input name="confirmNewPwd" type={"password"} placeholder="请确认新密码" desc="新密码" onChange={(value:string)=>this.setState({confirmNewPwd:value})}/>
                            </Form>
                        </Col>
                    </Row>
                    :null
                }

                {this.props.isOwn?
                    <Row className="p-3">
                        <Col className="text-center">
                            {this.state.contentEditable?
                                <Button variant={"primary"} onClick={()=>this.doSave()}>保存信息</Button>:
                                <Button variant={"info"} onClick={()=>this.openEdit()} disabled={this.state.modifyPassword}>编辑信息</Button>}
                        </Col>
                        <Col className="text-center">
                            {this.state.modifyPassword?
                                <Button variant={"light"} onClick={()=>this.modifyPwd()}>确认</Button>:
                                <Button variant={"light"} onClick={()=>this.openModifyPwd()} disabled={this.state.contentEditable}>修改密码</Button>}
                        </Col>
                    </Row>:
                    <Row className="p-3">
                        <Col className="text-center">
                            {this.props.isMyFriend?null:this.props.isAdd?
                            <Button variant={"primary"} onClick={()=>this.addFriend()}>添加好友</Button>
                            :
                            <Button variant={"primary"} onClick={()=>this.agreeFriend()}>同意</Button>
                            }
                        </Col>
                    </Row>
                }

            </Container>
        )
    }
}