From b03313e21ebb41f4a5ee73ad916d11fd05330201 Mon Sep 17 00:00:00 2001
From: pan <1029559041@qq.com>
Date: Sat, 23 May 2020 02:29:02 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E4=B8=AA=E4=BA=BA=E4=BF=A1?=
 =?UTF-8?q?=E6=81=AF-=E4=B8=AA=E4=BA=BA=E4=BF=A1=E6=81=AF=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/entity.ts        | 12 ++++++-
 src/index.css        |  6 ++++
 src/my/MyHelp.tsx    | 18 ++++++++++
 src/my/MyInfo.tsx    | 80 ++++++++++++++++++++++++++++++++++++++++++++
 src/my/MyMessage.tsx | 51 +++++++++++++++++++++++++++-
 src/my/SeekHelp.tsx  | 18 ++++++++++
 6 files changed, 183 insertions(+), 2 deletions(-)
 create mode 100644 src/my/MyHelp.tsx
 create mode 100644 src/my/MyInfo.tsx
 create mode 100644 src/my/SeekHelp.tsx

diff --git a/src/entity.ts b/src/entity.ts
index d448d51..e5ef95d 100644
--- a/src/entity.ts
+++ b/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;
 }
 
 /**
diff --git a/src/index.css b/src/index.css
index f529b8d..6c7f263 100644
--- a/src/index.css
+++ b/src/index.css
@@ -51,3 +51,9 @@
 .chat-send-content{
   height: 140px;
 }
+/*
+* 个人信息介绍
+*/
+.my-info-desc{
+  height: 100px;
+}
diff --git a/src/my/MyHelp.tsx b/src/my/MyHelp.tsx
new file mode 100644
index 0000000..d720c44
--- /dev/null
+++ b/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>
+        )
+    }
+}
diff --git a/src/my/MyInfo.tsx b/src/my/MyInfo.tsx
new file mode 100644
index 0000000..78ac0be
--- /dev/null
+++ b/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>
+        )
+    }
+}
diff --git a/src/my/MyMessage.tsx b/src/my/MyMessage.tsx
index 72845db..8323d35 100644
--- a/src/my/MyMessage.tsx
+++ b/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>);
     }
 }
diff --git a/src/my/SeekHelp.tsx b/src/my/SeekHelp.tsx
new file mode 100644
index 0000000..ac0d6ff
--- /dev/null
+++ b/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>
+        )
+    }
+}