添加个人信息-个人信息界面

master
pan 5 years ago
parent a4c6ab7919
commit b03313e21e
  1. 12
      src/entity.ts
  2. 6
      src/index.css
  3. 18
      src/my/MyHelp.tsx
  4. 80
      src/my/MyInfo.tsx
  5. 51
      src/my/MyMessage.tsx
  6. 18
      src/my/SeekHelp.tsx

@ -123,12 +123,22 @@ export interface Friend {
* *
*/ */
export interface User { export interface User {
//用户ID
userId:string;
//用户姓名 //用户姓名
name:string; name:string;
//用户年龄 //用户年龄
age:number; age:number;
//用户电话 //用户电话
mobile:string; mobile:number;
//用户邮箱
email:string;
//地点
address:string;
//个人简介
info:string;
//头像
headImg:string;
} }
/** /**

@ -51,3 +51,9 @@
.chat-send-content{ .chat-send-content{
height: 140px; height: 140px;
} }
/*
* 个人信息介绍
*/
.my-info-desc{
height: 100px;
}

@ -0,0 +1,18 @@
import React from "react";
import {Col, Container, Row} from "react-bootstrap";
/**
*
*/
export class MyHelp extends React.Component<any, any>{
render() {
return (
<Container>
<Row>
<Col></Col>
</Row>
</Container>
)
}
}

@ -0,0 +1,80 @@
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>
)
}
}

@ -1,10 +1,59 @@
import React from "react"; import React from "react";
import {Button, ButtonGroup, Col, Container, Row} from "react-bootstrap";
import {MyInfo} from "./MyInfo";
import {MyHelp} from "./MyHelp";
import {SeekHelp} from "./SeekHelp";
enum Menu {
info="个人信息",
seekHelp="我的求助",
help="我的帮助"
}
/** /**
* *
*/ */
export class MyMessage extends React.Component<any, any>{ export class MyMessage extends React.Component<any, any>{
constructor(props: Readonly<any>) {
super(props);
this.state={
subMenu:Menu.info,
page:<MyInfo/>
}
}
//切换菜单
changeMenu(menu:Menu){
this.setState({subMenu:menu})
switch (menu) {
case Menu.info:
this.setState({page:<MyInfo/>})
break
case Menu.help:
this.setState({page:<MyHelp/>})
break
case Menu.seekHelp:
this.setState({page:<SeekHelp/>})
break
}
}
render() { render() {
return (<h1></h1>); return (
<Container>
<Row>
<Col>
<ButtonGroup aria-label="Basic example">
{[Menu.info,Menu.seekHelp,Menu.help].map((menu:Menu,index:number)=><Button onClick={()=>this.changeMenu(menu)} key={"button"+index} variant={menu===this.state.subMenu?"primary":"light"}>{menu}</Button>)}
</ButtonGroup>
</Col>
</Row>
<Row>
{this.state.page}
</Row>
</Container>);
} }
} }

@ -0,0 +1,18 @@
import React from "react";
import {Col, Container, Row} from "react-bootstrap";
/**
*
*/
export class SeekHelp extends React.Component<any, any>{
render() {
return (
<Container>
<Row>
<Col></Col>
</Row>
</Container>
)
}
}
Loading…
Cancel
Save