主界面切换身份

src/App.tsx

@@ -7,20 +7,21 @@ import {Main} from "./Main";
 import {Register} from "./account/Register";
 import {user_cookie} from "./account/PropCookie";
 
-class App extends React.Component<{ allCookies:any;cookies:Cookies }, { page?:JSX.Element }> {
+class App extends React.Component<{ allCookies:any;cookies:Cookies }, { page?:JSX.Element}> {
 
 
   constructor(props: Readonly<any>) {
     super(props);
 
     this.state={}
+
   }
 
   componentDidMount() {
     const { cookies } = this.props
     if((cookies.get(user_cookie)||"").length>0){
       this.setState({
-        page:<Main user={cookies.get(user_cookie)} logout={()=>this.logout()}/>
+        page:<Main  user={cookies.get(user_cookie)} logout={()=>this.logout()} />
       })
     }else{
       this.toLogin()
@@ -48,8 +49,9 @@ class App extends React.Component<{ allCookies:any;cookies:Cookies }, { page?:JS
     console.debug("user_cookie="+user)
     this.props.cookies.set(user_cookie,user)
 
+
     this.setState({
-      page:<Main user={user} logout={()=>this.logout()}/>
+      page:<Main logout={()=>this.logout()}  user={user}/>
     })
   }
 

src/Main.tsx

@@ -7,7 +7,7 @@ import {MyFriend} from "./my/MyFriend";
 import {MyDialog} from "./ui/MyDialog";
 import {MyLeaveWord} from "./my/MyLeaveWord";
 import {MyMessage} from "./my/MyMessage";
-import {User} from "./entity";
+import {User, UserEdit, UserType} from "./entity";
 
 /**
  * 菜单标记
@@ -30,16 +30,22 @@ enum DialogType {
 /**
  * 主菜单
  */
-export class Main extends React.Component<{ user:string,logout:Function },
+export class Main extends React.Component<
+    { user:string,userType?:string,logout:Function},
     {
+        //菜单
        menu:Menu;
+       //子菜单
        subMenu:JSX.Element;
        friendList:Array<User>;
+       //我的菜单
        my:{
            menuName:string;
            content:JSX.Element|null;
            open:boolean;
-       }
+       },
+    //用户身份
+    userType?:string;
     }
 >{
 
@@ -125,12 +131,16 @@ export class Main extends React.Component<{ user:string,logout:Function },
                 break;
             case DialogType.message:
                 this.setState({
-                    my:{menuName:dialogType,content:<MyMessage user={this.props.user}/>,open:true}
+                    my:{menuName:dialogType,content:<MyMessage onUserUpdate={(user:UserEdit)=>this.setState({userType:user.userType})} user={this.props.user}/>,open:true}
                 })
                 break;
         }
     }
 
+    onUserUpdate(user:UserEdit){
+        console.debug(user)
+    }
+
     render() {
         return (
             <div>
@@ -159,7 +169,10 @@ export class Main extends React.Component<{ user:string,logout:Function },
                             </Dropdown.Menu>
                         </Dropdown>
 
-                        <Navbar.Brand className="ml-3">等待接受帮助</Navbar.Brand>
+
+
+                        {(this.state.userType||this.props.userType)?<Navbar.Brand className="ml-3">{(this.state.userType||this.props.userType)===UserType.help.toString()?"等待接受帮助":"等待前往帮助"}</Navbar.Brand>:null}
+
 
                         <MyDialog titleId="my-dialog" menuName={this.state.my.menuName} content={this.state.my.content} open={this.state.my.open} onClose={()=>this.closeDialog()}/>
                     </Nav>

src/account/Register.tsx

@@ -69,18 +69,6 @@ export class Register extends React.Component<RegisterProps, RegisterState>{
             &&this.state.headImg!==headimgTip&&this.checkPwd()&&this.checkMobile()&&this.checkEmail()
     }
 
-    //解析身份
-    getType(type:String){
-        switch (type) {
-            case UserType.help.toString():
-                return "帮助信息"
-            case UserType.seekHelp.toString():
-                return "求助信息"
-        }
-
-        return ""
-    }
-
     /**
      * 检查手机号
      */
@@ -120,7 +108,7 @@ export class Register extends React.Component<RegisterProps, RegisterState>{
 
                         <Address onChange={(value:string)=>this.setState({address:value})}/>
 
-                        <Input col={4} name="userType" desc="用户身份" as="select" onChange={(value:string)=>this.setState({userType:this.getType(value)})}
+                        <Input col={4} name="userType" desc="用户身份" as="select" onChange={(value:string)=>this.setState({userType:value})}
                                options={[<option value="" key={"userType0"}>请选择用户身份</option>,<option key={"userType1"} value={UserType.help}>服务发起者</option>,<option key={"userType2"} value={UserType.seekHelp}>服务接收者</option>]}/>
 
                         <Input col={4} name="mobile" desc="电话" onChange={(value:string)=>this.setState({mobile:+value})} valid={{check:this.checkMobile()}}/>

src/entity.ts

@@ -167,8 +167,8 @@ export interface MyDialogProps extends CloseDialogProps{
 }
 
 export enum UserType {
-    seekHelp,
+    seekHelp="seekHelp",
-    help
+    help="help"
 }
 
 /**

src/my/MyInfo.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import {Button, Col, Container, Form, FormControl, Image, Row} from "react-bootstrap";
-import {UserEdit} from "../entity";
+import {UserEdit, UserType} from "../entity";
 import {Input} from "../ui/InputGroup";
 
 
@@ -14,6 +14,8 @@ export class MyInfo extends React.Component<
         userId?:string;
         isMyFriend:boolean;
         isAdd:boolean;
+        //更新用户信息回调
+        onUserUpdate?:Function;
     }, UserEdit>{
 
 
@@ -61,6 +63,7 @@ export class MyInfo extends React.Component<
             email:"admin@qq.com",
             address:"上海高新区",
             info:"个人简介",
+            userType:UserType.help.toString()
         })
     }
 
@@ -103,6 +106,9 @@ export class MyInfo extends React.Component<
             contentEditable:false
         })
 
+        if(this.props.onUserUpdate) {
+            this.props.onUserUpdate({userType: this.state.userType})
+        }
         console.debug(this.state)
     }
 
@@ -153,6 +159,14 @@ export class MyInfo extends React.Component<
                             <FormControl value={this.state.email} onChange={(e)=>this.setState({email:e.target.value})}/>
                             :this.state.email}
                     </Col>
+                    <Col className="border-info border p-3 text-center">
+                        {this.state.contentEditable?
+                            <FormControl value={this.state.userType} as={"select"} onChange={(e)=>this.setState({userType:e.target.value})}>
+                                <option value={UserType.help}>服务发起者</option>
+                                <option value={UserType.seekHelp}>服务接受者</option>
+                            </FormControl>:
+                            this.state.userType===UserType.help?"等待接受帮助":"等待前往帮助"}
+                    </Col>
                 </Row>
                 <Row>
                     <Col className="border-info border p-3 text-center">

src/my/MyMessage.tsx

@@ -3,6 +3,7 @@ import {Button, ButtonGroup, Col, Container, Row} from "react-bootstrap";
 import {MyInfo} from "./MyInfo";
 import {MyHelp} from "./MyHelp";
 import {SeekHelp} from "./SeekHelp";
+import {User} from "../entity";
 
 enum Menu {
     info="个人信息",
@@ -13,7 +14,7 @@ enum Menu {
 /**
  * 个人信息
  */
-export class MyMessage extends React.Component<{ user:string }, { subMenu:Menu,page:JSX.Element }>{
+export class MyMessage extends React.Component<{ user:string,onUserUpdate:Function }, { subMenu:Menu,page:JSX.Element }>{
 
 
     constructor(props: Readonly<any>) {
@@ -21,7 +22,7 @@ export class MyMessage extends React.Component<{ user:string }, { subMenu:Menu,p
 
         this.state={
             subMenu:Menu.info,
-            page:<MyInfo ownUserId={this.props.user} isMyFriend={false} isOwn={true} isAdd={false}/>
+            page:<MyInfo onUserUpdate={(user:User)=>this.props.onUserUpdate(user)} ownUserId={this.props.user} isMyFriend={false} isOwn={true} isAdd={false}/>
         }
     }
 
@@ -30,7 +31,7 @@ export class MyMessage extends React.Component<{ user:string }, { subMenu:Menu,p
         this.setState({subMenu:menu})
         switch (menu) {
             case Menu.info:
-                this.setState({page:<MyInfo ownUserId={this.props.user} isMyFriend={false} isOwn={true} isAdd={false}/>})
+                this.setState({page:<MyInfo onUserUpdate={(user:User)=>this.props.onUserUpdate(user)} ownUserId={this.props.user} isMyFriend={false} isOwn={true} isAdd={false}/>})
                 break
             case Menu.help:
                 this.setState({page:<MyHelp/>})