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.
80 lines
2.2 KiB
80 lines
2.2 KiB
import React from "react";
|
|
import {Col, Container, Image, Row} from "react-bootstrap";
|
|
import {User} from "../entity";
|
|
|
|
/**
|
|
* 个人信息
|
|
*/
|
|
export class MyInfo extends React.Component<any, User>{
|
|
|
|
|
|
constructor(props: Readonly<any>) {
|
|
super(props);
|
|
|
|
this.state={
|
|
//用户ID
|
|
userId:"",
|
|
//用户姓名
|
|
name:"",
|
|
//用户年龄
|
|
age:NaN,
|
|
//用户电话
|
|
mobile:NaN,
|
|
//用户邮箱
|
|
email:"",
|
|
//地点
|
|
address:"",
|
|
//个人简介
|
|
info:"",
|
|
//头像
|
|
headImg:""
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 加载用户信息
|
|
*/
|
|
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()
|
|
}
|
|
|
|
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.name}</Col>
|
|
<Col className="border-info border p-3 text-center">{this.state.age}</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col className="border-info border p-3 text-center">{this.state.mobile}</Col>
|
|
<Col className="border-info border p-3 text-center">{this.state.email}</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col className="border-info border p-3 text-center">{this.state.address}</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col className="border-info border p-3 text-center my-info-desc">{this.state.info}</Col>
|
|
</Row>
|
|
</Container>
|
|
)
|
|
}
|
|
}
|
|
|