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

src/entity.ts

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

src/index.css

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

src/my/MyHelp.tsx

@@ -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>
+        )
+    }
+}

src/my/MyInfo.tsx

@@ -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>
+        )
+    }
+}

src/my/MyMessage.tsx

@@ -1,10 +1,59 @@
 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>{
+
+
+    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() {
-        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>);
     }
 }

src/my/SeekHelp.tsx

@@ -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>
+        )
+    }
+}