对接服务端

1.获取修改个人信息
2.修改密码

src/App.tsx

@@ -44,6 +44,7 @@ class App extends React.Component<
   logout(){
     this.props.cookies.remove(user_cookie)
     this.props.cookies.remove(user_type_cookie)
+    this.props.cookies.remove(time_score)
     this.toLogin()
   }
 

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, UserEdit, UserType} from "./entity";
+import {User, UserType} from "./entity";
 import {Cookies} from "react-cookie";
 import {time_score, user_cookie, user_type_cookie, welcome_cookie} from "./account/PropCookie";
 
@@ -147,7 +147,7 @@ export class Main extends React.Component<
                 break;
             case DialogType.message:
                 this.setState({
-                    my:{menuName:dialogType,content:<MyMessage onUserUpdate={(user:UserEdit)=>{
+                    my:{menuName:dialogType,content:<MyMessage onUserUpdate={(user:User)=>{
                             this.setState({userType:user.userType})
                             this.props.cookies.set(user_type_cookie,user.userType)
                         }}

src/account/Register.tsx

@@ -21,17 +21,22 @@ const maxImageSize={
  */
 export class Register extends React.Component<RegisterProps, RegisterState>{
 
+    private ages:Array<number>
+
     constructor(props: Readonly<RegisterProps>) {
         super(props)
+
+        this.ages=this.createAge()
+
         this.state={
             result: null,
             sex: "",
             address:"",
             serviceAddress: "",
-            age: 0,
+            age: this.ages[0],
             email: "",
             info: "",
-            mobile: 0,
+            mobile: "",
             name: "",
             userId: "",
             password:"",
@@ -55,8 +60,8 @@ export class Register extends React.Component<RegisterProps, RegisterState>{
            userType:this.state.userType,
            mobile:String(this.state.mobile),
            email:this.state.email,
-           info:this.state.info
-
+           info:this.state.info,
+           age:this.state.age+""
        },new RegisterTransform(),function(res:JSONResponse<RegisterMessage>){
            let message
            switch (res.customResult) {
@@ -114,7 +119,13 @@ export class Register extends React.Component<RegisterProps, RegisterState>{
         return /[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}/g.test(this.state.email)
     }
 
-
+    createAge(){
+        let age=[]
+        for(let i=18;i<100;i++){
+            age.push(i)
+        }
+        return age
+    }
 
     render() {
         return (
@@ -134,7 +145,15 @@ export class Register extends React.Component<RegisterProps, RegisterState>{
 
                         <Input col={4} name="name" desc="姓名" onChange={(value:string)=>this.setState({name:value})} valid={{check:this.isNotEmpty(this.state.name)}}/>
 
-                        <Input col={4} name="sex" desc="性别" as="select" onChange={(value:string)=>this.setState({sex:value})}
+                        <Input col={4} name="age" desc="年龄" value={this.state.age+""} onChange={(value:string)=>{
+                            this.setState({age:+value})
+                            console.debug(this.state.age+"==="+value)
+                        }}
+                               as={"select"} options={this.ages.map(value=><option key={value} value={value}>{value}</option>)}/>
+
+                        <Input col={4} name="sex" desc="性别" as="select" onChange={(value:string)=>{
+                            this.setState({sex:value})
+                        }}
                                options={[<option value="" key={"sex"+0}>请选择性别</option>,<option value="man" key={"sex"+1}>男</option>,<option value="women" key={"sex"+2}>女</option>]}/>
 
                         <UploadImg maxImageSize={maxImageSize} onChange={(imgObj:any)=>
@@ -144,12 +163,12 @@ export class Register extends React.Component<RegisterProps, RegisterState>{
 
                         <Input name="address" desc="住址" onChange={(value:string)=>this.setState({address:value})}/>
 
-                        <Address onChange={(value:string)=>this.setState({serviceAddress:value})}/>
+                        <Address value={this.state.serviceAddress} onChange={(value:string)=>this.setState({serviceAddress: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()}}/>
+                        <Input col={4} name="mobile" desc="电话" onChange={(value:string)=>this.setState({mobile:value})} valid={{check:this.checkMobile()}}/>
 
                         <Input col={4} name="email" desc="邮箱" onChange={(value:string)=>this.setState({email:value})} valid={{check:this.checkEmail()}}/>
 

src/entity.ts

@@ -13,6 +13,8 @@ export interface AddressProps {
 
 export interface OnChangeAddress {
     onChange:Function;
+    col?:number;
+    value?:string;
 }
 
 /**
@@ -184,7 +186,7 @@ export interface User{
     //用户年龄
     age:number;
     //用户电话
-    mobile:number;
+    mobile:string;
     //用户邮箱
     email:string;
     //住址
@@ -206,7 +208,29 @@ export interface User{
 /**
  * 个人信息编辑修改密码
  */
-export interface UserEdit extends User{
+export interface UserEdit{
+    //用户id
+    userId?:string;
+    //用户姓名
+    name?:string;
+    //用户年龄
+    age?:number;
+    //用户性别
+    sex?:string;
+    //用户电话
+    mobile?:number;
+    //用户邮箱
+    email?:string;
+    //住址
+    address?:string;
+    //服务地点
+    serviceAddress?:string;
+    //个人简介
+    info?:string;
+    //头像
+    headImg?:string;
+    //身份
+    userType?:string;
     //编辑模式
     contentEditable:boolean;
     //修改时间
@@ -217,6 +241,7 @@ export interface UserEdit extends User{
     newPassword:string;
     //确认新密码
     confirmNewPwd:string;
+    result:JSX.Element|null
 }
 
 

src/interface.ts

@@ -15,7 +15,11 @@ export const API={
         //登录
         login:prefix.user+"/login",
         //查找用户
-        find:prefix.user+"/find"
+        find:prefix.user+"/find",
+        //更新
+        update:prefix.user+"/update",
+        //更新密码
+        updatePwd:prefix.user+"/updatePwd"
     },
     main:{
         activity: {

src/my/MyFriend.tsx

@@ -26,10 +26,8 @@ export class MyFriend extends React.Component<{ user:string },
     friendIndex:number|null;
     //发送内容
     sendContent:String;
-    //查看用户信息
-    openUserInfo:boolean;
     //查看用户ID
-    userId?:string;
+    userId:string|null;
 }
 >{
 
@@ -50,8 +48,7 @@ export class MyFriend extends React.Component<{ user:string },
             friendIndex:null,
             //发送内容
             sendContent:'',
-            //查看用户信息
-            openUserInfo:false
+            userId:null
         }
     }
 
@@ -119,7 +116,7 @@ export class MyFriend extends React.Component<{ user:string },
                                 <ListGroup.Item key={"list"+index} className="d-flex justify-content-between" variant="info">
                                     <span>{user.name}</span>
                                     <Tooltip title="查看用户信息" placement="right">
-                                        <img src="user.svg" alt="查看用户信息" className="userIcon" onClick={()=>this.setState({openUserInfo:true,userId:user.userId})}/>
+                                        <img src="user.svg" alt="查看用户信息" className="userIcon" onClick={()=>this.setState({userId:user.userId})}/>
                                     </Tooltip>
                                 </ListGroup.Item>)}
                         </ListGroup>
@@ -178,8 +175,8 @@ export class MyFriend extends React.Component<{ user:string },
                 </Row>
 
                 <MyDialog titleId="view-user" menuName="用户信息"
-                          content={<MyInfo ownUserId={this.props.user} isOwn={false} isMyFriend={false} isAdd={true} userId={this.state.userId}/>}
-                          open={this.state.openUserInfo} onClose={()=>this.setState({openUserInfo:false})}/>
+                          content={<MyInfo isOwn={false} isMyFriend={false} isAdd={true} userId={this.state.userId?this.state.userId:""}/>}
+                          open={this.state.userId!==null} onClose={()=>this.setState({userId:null})}/>
             </Container>
         );
     }

src/my/MyInfo.tsx

@@ -2,69 +2,84 @@ import React from "react";
 import {Button, Col, Container, Form, FormControl, Image, Row} from "react-bootstrap";
 import {UserEdit, UserType} from "../entity";
 import {Input} from "../ui/InputGroup";
-
+import {API, JSONResponse, Method, prefix, request} from "../interface";
+import {
+    EmptyBodyTransform,
+    FindUserInfo,
+    FindUserInfoTransform,
+    ModifyPwdMessage,
+    ModifyPwdTransform,
+    SimpleMessage
+} from "../result";
+import {MyDialog} from "../ui/MyDialog";
+import {Address} from "../ui/Address";
 
 /**
  * 个人信息
  */
 export class MyInfo extends React.Component<
     {
+        userId:string;
         isOwn:boolean;
-        ownUserId:string;
-        userId?:string;
         isMyFriend:boolean;
         isAdd:boolean;
-        //更新用户信息回调
         onUserUpdate?:Function;
     }, UserEdit>{
 
+    private ages:Array<number>
 
     constructor(props: Readonly<any>) {
         super(props);
 
+        this.ages=this.createAge()
+
         this.state={
-            userType: "",
-            //用户ID
-            userId:"",
-            //用户姓名
-            name:"",
-            //用户年龄
-            age:0,
-            //用户电话
-            mobile:0,
-            //用户邮箱
-            email:"",
-            address:"",
-            //地点
-            serviceAddress:"",
-            //个人简介
-            info:"",
-            //性别
-            sex:"男",
-            //头像
-            headImg:"",
             contentEditable:false,
             modifyPassword:false,
             oldPassword:"",
             newPassword:"",
-            confirmNewPwd:""
+            confirmNewPwd:"",
+            result:null
         }
     }
 
+
+    createAge(){
+        let age=[]
+        for(let i=18;i<100;i++){
+            age.push(i)
+        }
+        return age
+    }
+
     /**
      * 加载用户信息
      */
     loadInfo(){
-        this.setState({
-            headImg:"logo512.png",
-            userId:"admin",
-            name:"张三",
-            age:Math.ceil(Math.random()*100)+1,
-            mobile:1234567879,
-            email:"admin@qq.com",
-            serviceAddress:"上海高新区",
-            info:"个人简介",
-            userType:UserType.help.toString()
+
+        let that=this
+
+        request(API.account.find+"/"+this.props.userId,Method.GET, {},new FindUserInfoTransform(),function(res:FindUserInfo){
+            switch (res.customResult) {
+                case SimpleMessage.fail:
+                    that.setState({
+                        result:<h3 className="text-danger text-center">获取用户信息失败，请联系管理员</h3>
+                    });break
+                case SimpleMessage.ok:
+                    that.setState({
+                        headImg:res.info?.headImg,
+                        userId:res.info?.userId,
+                        name:res.info?.name,
+                        age:res.info?.age,
+                        mobile:res.info?.mobile,
+                        email:res.info?.email,
+                        serviceAddress:res.info?.serviceAddress,
+                        info:res.info?.info,
+                        userType:res.info?.userType,
+                        sex:res.info?.sex
+                    });break
+
+            }
         })
     }
 
@@ -97,6 +112,28 @@ export class MyInfo extends React.Component<
         this.setState({
             modifyPassword:false
         })
+
+        let that=this
+
+        request(API.account.updatePwd,Method.POST, {
+            newPassword:this.state.newPassword,
+            oldPassword:this.state.oldPassword
+        },new ModifyPwdTransform(),function (res:JSONResponse<ModifyPwdMessage>) {
+            switch (res.customResult) {
+                case ModifyPwdMessage.fail:
+                    that.setState({
+                        result:<h3 className="text-danger text-center">修改密码失败，请联系管理员</h3>
+                    });break
+                case ModifyPwdMessage.pwd_fail:
+                    that.setState({
+                        result:<h3 className="text-danger text-center">修改密码失败，原密码错误</h3>
+                    });break
+                case ModifyPwdMessage.ok:
+                    that.setState({
+                        result:<h3 className="text-info text-center">修改密码成功</h3>
+                    });break
+            }
+        })
     }
 
     /**
@@ -107,10 +144,34 @@ export class MyInfo extends React.Component<
             contentEditable:false
         })
 
-        if(this.props.onUserUpdate) {
-            this.props.onUserUpdate({userType: this.state.userType})
-        }
-        console.debug(this.state)
+        let that=this
+
+        request(API.account.update,Method.POST, {
+            headImg:this.state.headImg||"",
+            name:this.state.name||"",
+            age:this.state.age+""||"",
+            mobile:this.state.mobile+""||"",
+            email:this.state.email||"",
+            serviceAddress:this.state.serviceAddress||"",
+            info:this.state.info||"",
+            userType:this.state.userType||"",
+            sex:this.state.sex||""
+        },new EmptyBodyTransform(),function (res:JSONResponse<SimpleMessage>) {
+            switch (res.customResult) {
+                case SimpleMessage.fail:
+                    that.setState({
+                        result:<h3 className="text-danger text-center">更新信息失败，请联系管理员</h3>
+                    });break
+                case SimpleMessage.ok:
+                    that.loadInfo();
+                    //TODO 更新用户身份
+                    that.setState({
+                        result:<h3 className="text-info text-center">更新信息成功</h3>
+                    })
+                    break
+            }
+        })
+
     }
 
 
@@ -132,22 +193,26 @@ export class MyInfo extends React.Component<
     render() {
 
         return (
-            <Container>
+            <Container className="overflow-auto">
                 <Row>
-                    <Col className="p-3">
-                        <Image className="chat-headImg" src={this.state.headImg}/>
+                    <Col className="p-3 text-center">
+                        <Image className="chat-headImg" src={this.state.headImg?prefix.image+this.state.headImg:""}/>
                     </Col>
                 </Row>
                 {/*TODO 表单校验*/}
                 <Row>
-                    <Col className="border-info border p-3 text-center">{this.state.userId}</Col>
+                    <Col className="border-info border p-3 d-flex justify-content-center align-items-center">
+                        {this.state.userId}
+                    </Col>
                     <Col className="border-info border p-3 text-center">
                         {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})}/>
+                            <FormControl as={"select"} value={this.state.age} onChange={(e)=>this.setState({age:+e.target.value})}>
+                                {this.ages.map(value=><option key={value} value={value}>{value}</option>)}
+                            </FormControl>
                             :this.state.age}</Col>
                 </Row>
                 <Row>
@@ -163,18 +228,24 @@ export class MyInfo extends React.Component<
                     </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?"等待接受帮助":"等待前往帮助"}
+                            <FormControl value={this.state.sex} as={"select"} onChange={event => this.setState({sex:event.target.value})}>
+                                <option value={"man"}>男</option>
+                                <option value={"women"}>女</option>
+                            </FormControl>:this.state.sex==='man'?"男":"女"}
                     </Col>
                 </Row>
                 <Row>
                     <Col className="border-info border p-3 text-center">
                         {this.state.contentEditable?
-                            <FormControl value={this.state.serviceAddress} onChange={(e)=>this.setState({serviceAddress:e.target.value})}/>
-                            :this.state.serviceAddress}
+                            <Address col={12} value={this.state.serviceAddress}  onChange={(value:string)=>this.setState({serviceAddress:value})}/>:this.state.serviceAddress}
+                    </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.seekHelp}>服务发起者</option>
+                                <option value={UserType.help}>服务接受者</option>
+                            </FormControl>:
+                            this.state.userType===UserType.help?"等待前往帮助":"等待接受帮助"}
                     </Col>
                 </Row>
                 <Row>
@@ -223,6 +294,9 @@ export class MyInfo extends React.Component<
                     </Row>
                 }
 
+                <MyDialog content={this.state.result} open={this.state.result!==null} titleId="myinfo-dialog" menuName="用户提示" onClose={()=>this.setState({
+                    result:null
+                })}/>
             </Container>
         )
     }

src/my/MyLeaveWord.tsx

@@ -162,7 +162,7 @@ export class MyLeaveWord extends React.Component<{ user:string },
             <div className="overflow-auto my-leave-world-height">
                 {this.state.data.map((data,index) =>this.getData(data,index))}
                 <MyDialog titleId="view-user" menuName="用户信息"
-                          content={<MyInfo ownUserId={this.props.user} isOwn={false} isMyFriend={false} isAdd={false} userId={this.state.userId}/>}
+                          content={<MyInfo isOwn={false} isMyFriend={false} isAdd={false} userId={this.state.userId?this.state.userId:""}/>}
                           open={this.state.openUserInfo} onClose={()=>this.setState({openUserInfo:false})}/>
 
                 {this.state.activity?<MyDialog content={<Activity activity={this.state.activity} showButton={false} />}

src/my/MyMessage.tsx

@@ -22,7 +22,7 @@ export class MyMessage extends React.Component<{ user:string,onUserUpdate:Functi
 
         this.state={
             subMenu:Menu.info,
-            page:<MyInfo onUserUpdate={(user:User)=>this.props.onUserUpdate(user)} ownUserId={this.props.user} isMyFriend={false} isOwn={true} isAdd={false}/>
+            page:<MyInfo onUserUpdate={(user:User)=>this.props.onUserUpdate(user)} userId={this.props.user} isMyFriend={false} isOwn={true} isAdd={false}/>
         }
     }
 
@@ -31,7 +31,7 @@ export class MyMessage extends React.Component<{ user:string,onUserUpdate:Functi
         this.setState({subMenu:menu})
         switch (menu) {
             case Menu.info:
-                this.setState({page:<MyInfo onUserUpdate={(user:User)=>this.props.onUserUpdate(user)} ownUserId={this.props.user} isMyFriend={false} isOwn={true} isAdd={false}/>})
+                this.setState({page:<MyInfo onUserUpdate={(user:User)=>this.props.onUserUpdate(user)} userId={this.props.user} isMyFriend={false} isOwn={true} isAdd={false}/>})
                 break
             case Menu.help:
                 this.setState({page:<MyHelp/>})

src/my/SeekHelp.tsx

@@ -144,7 +144,7 @@ export class SeekHelp extends React.Component<{ user:string },
                 </Dialog>
 
                 <MyDialog titleId="view-user" menuName="用户信息"
-                          content={<MyInfo ownUserId={this.props.user} isOwn={false} isMyFriend={false} isAdd={true} userId={this.state.userId}/>}
+                          content={<MyInfo isOwn={false} isMyFriend={false} isAdd={true} userId={this.state.userId?this.state.userId:""}/>}
                           open={this.state.openUserInfo} onClose={()=>this.setState({openUserInfo:false})}/>
             </div>
         )

src/result.ts

@@ -2,7 +2,7 @@
  * 返回信息
  */
 import {JSONResponse, Result, TransformData} from "./interface";
-import {ActivityDetail, PageProps, User, UserType} from "./entity";
+import {ActivityDetail, PageProps, User, UserEdit, UserType} from "./entity";
 
 /**
  * 空body响应
@@ -171,6 +171,33 @@ export class ActivityDetailTransform extends TransformData<SimpleMessage, Activi
     }
 }
 
+export class FindUserInfo extends JSONResponse<SimpleMessage>{
+    info?:UserEdit
+}
+
+export class FindUserInfoTransform  extends TransformData<SimpleMessage, FindUserInfo>{
+    protected newObject(): FindUserInfo {
+        return new FindUserInfo();
+    }
+
+
+    protected transformBody(data: any) {
+        this.target.info=data.body
+    }
+}
+
+export enum ModifyPwdMessage {
+    ok='ok',
+    pwd_fail='pwd_fail',
+    fail='fail'
+}
+
+export class ModifyPwdTransform extends EmptyBodyDiffMsg<ModifyPwdMessage>{
+    protected newObject(): JSONResponse<ModifyPwdMessage> {
+        return new JSONResponse<ModifyPwdMessage>();
+    }
+
+}
 
 
 

src/ui/Address.tsx

@@ -12,7 +12,8 @@ export class Address extends React.Component<OnChangeAddress, { addressList:Arra
         super(props);
 
         this.state={
-            addressList:[]
+            addressList:[],
+
         }
     }
 
@@ -39,11 +40,11 @@ export class Address extends React.Component<OnChangeAddress, { addressList:Arra
 
     render() {
         return (
-            <InputGroup className="mt-3 col-3 ml-auto mr-auto">
+            <InputGroup className={"col-"+(this.props.col?this.props.col:3)+" ml-auto mr-auto"}>
                 <InputGroup.Prepend>
                     <InputGroup.Text>服务地点</InputGroup.Text>
                 </InputGroup.Prepend>
-                <Form.Control as="select" custom onChange={(e)=>this.props.onChange(e.target.value)}>
+                <Form.Control as="select" value={this.props.value} custom onChange={(e)=>this.props.onChange(e.target.value)}>
                     <option value="">请选择服务地点</option>
                     {this.state.addressList.map((address:AddressProps, index:number)=>
                         <option key={"option"+index} value={address.address} >{address.address}</option>

src/ui/TestData.ts

@@ -10,8 +10,8 @@ export const userObj={
     //发送时间
     time:new Date().getTime(),
     userId:"admin",
-    age:Math.ceil(Math.random()*100)+1,
-    mobile:1234567879,
+    age:22,
+    mobile:"1234567879",
     email:"admin@qq.com",
     address:"上海高新区",
     serviceAddress:"上海",