完善个人信息页面

src/bootstrap/InputGroup.tsx

@@ -31,7 +31,7 @@ export class Input extends React.Component<FormInputProps, any>{
                 <InputGroup.Prepend>
                     <InputGroup.Text id={this.props.name}>{this.props.desc}</InputGroup.Text>
                 </InputGroup.Prepend>
-                <FormControl className={this.valid()} type={this.props.type} as={this.props.as} placeholder={'请输入'+this.props.desc} aria-describedby={this.props.name} value={this.props.value}
+                <FormControl autoComplete={this.props.name} className={this.valid()} type={this.props.type} as={this.props.as} placeholder={(this.props.placeholder||"").length>0?this.props.placeholder:"请输入"+this.props.desc} aria-describedby={this.props.name} value={this.props.value}
                              onChange={(e)=>this.props.onChange(e.target.value)} maxLength={this.props.maxLength }/>
                 <div className="valid-feedback text-center">
                     {this.merge().valid}

src/bootstrap/LoginFormDesc.ts

@@ -8,6 +8,8 @@ export interface FormInputProps {
     name: string
     //描述信息
     desc: string
+    //提示信息
+    placeholder?:string
     //表单值
     value?: string
     //数据类型

src/entity.ts

@@ -122,7 +122,7 @@ export interface Friend {
 /**
  * 用户信息
  */
-export interface User {
+export interface User{
     //用户ID
     userId:string;
     //用户姓名
@@ -141,6 +141,24 @@ export interface User {
     headImg:string;
 }
 
+/**
+ * 个人信息
+ */
+export interface UserEdit extends User{
+    //编辑模式
+    contentEditable:boolean;
+    //修改时间
+    modifyPassword:boolean;
+    //原密码
+    oldPassword:string;
+    //新密码
+    newPassword:string;
+    //确认新密码
+    confirmNewPwd:string;
+}
+
+
+
 /**
  * 聊天信息
  */

src/my/MyHelp.tsx

@@ -10,7 +10,9 @@ export class MyHelp extends React.Component<any, any>{
         return (
             <Container>
                 <Row>
-                    <Col>我的求助</Col>
+                    <Col>
+
+                    </Col>
                 </Row>
             </Container>
         )

src/my/MyInfo.tsx

@@ -1,11 +1,12 @@
 import React from "react";
-import {Col, Container, Image, Row} from "react-bootstrap";
+import {Button, Col, Container, Form, FormControl, Image, Row} from "react-bootstrap";
-import {User} from "../entity";
+import {UserEdit} from "../entity";
+import {Input} from "../bootstrap/InputGroup";
 
 /**
  * 个人信息
  */
-export class MyInfo extends React.Component<any, User>{
+export class MyInfo extends React.Component<any, UserEdit>{
 
 
     constructor(props: Readonly<any>) {
@@ -17,9 +18,9 @@ export class MyInfo extends React.Component<any, User>{
             //用户姓名
             name:"",
             //用户年龄
-            age:NaN,
+            age:0,
             //用户电话
-            mobile:NaN,
+            mobile:0,
             //用户邮箱
             email:"",
             //地点
@@ -27,7 +28,12 @@ export class MyInfo extends React.Component<any, User>{
             //个人简介
             info:"",
             //头像
-            headImg:""
+            headImg:"",
+            contentEditable:false,
+            modifyPassword:false,
+            oldPassword:"",
+            newPassword:"",
+            confirmNewPwd:""
         }
     }
 
@@ -51,6 +57,46 @@ export class MyInfo extends React.Component<any, User>{
         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)
+    }
+
+
+
     render() {
         return (
             <Container>
@@ -61,18 +107,67 @@ export class MyInfo extends React.Component<any, User>{
                 </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">
-                    <Col className="border-info border p-3 text-center">{this.state.age}</Col>
+                        {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.mobile}</Col>
+                    <Col className="border-info border p-3 text-center">
-                    <Col className="border-info border p-3 text-center">{this.state.email}</Col>
+                        {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">{this.state.address}</Col>
+                    <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 className="border-info border p-3 text-center my-info-desc">{this.state.info}</Col>
+                        <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
+                }
+
+                <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>
             </Container>
         )