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.
210 lines
6.7 KiB
210 lines
6.7 KiB
import React from "react";
|
|
import {Button, Col, Container, Form, FormControl, Image, Row} from "react-bootstrap";
|
|
import {UserEdit} from "../entity";
|
|
import {Input} from "../ui/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>
|
|
)
|
|
}
|
|
}
|
|
|