用户可更新头像

src/Main.tsx

@@ -200,7 +200,7 @@ export class Main extends React.Component<
                         {this.state.userType?<Navbar.Brand className="ml-3">{this.state.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()}/>
+                        <MyDialog maxWidth={800} titleId="my-dialog" menuName={this.state.my.menuName} content={this.state.my.content} open={this.state.my.open} onClose={()=>this.closeDialog()}/>
                     </Nav>
                 </Navbar>
 

src/entity.ts

@@ -160,6 +160,8 @@ export interface MyDialogProps extends CloseDialogProps{
     content:JSX.Element|null;
     //弹窗状态
     open:boolean;
+    //窗口宽度
+    maxWidth?:number;
 }
 
 export enum UserType {

src/my/MyInfo.tsx

@@ -16,6 +16,15 @@ import {Address} from "../ui/Address";
 import {Cookies} from "react-cookie";
 import {user_type_cookie} from "../account/PropCookie";
 import {Api, prefix} from "../api";
+import {UploadImg} from "../ui/UploadImg";
+
+/**
+ * 图片尺寸限制
+ */
+const maxImageSize={
+    width:100,
+    height:100
+}
 
 /**
  * 个人信息
@@ -31,7 +40,12 @@ export class MyInfo extends React.Component<
         //是否添加好友
         isAdd:boolean;
         cookies?:Cookies;
-    }, { userEdit:UserEdit,userInfo?:User,result:JSX.Element|null }>{
+    }, {
+        userEdit:UserEdit,
+        userInfo?:User,
+        result:JSX.Element|null,
+        activityImgFile?:any;
+    }>{
 
     private ages:Array<number>
 
@@ -167,11 +181,8 @@ export class MyInfo extends React.Component<
         })
 
         let that=this
-        // let isUpdateUserType=this.state.userEdit.userType!==this.state.userEdit.oldUserType
-        // if(isUpdateUserType&&this.props.cookies){
-        //     this.props.cookies.set(user_type_cookie,this.state.userEdit.userType)
-        // }
-        request(Api.account.update,Method.POST, {
+
+        request(Api.account.update,Method.PUT, {
             headImg:this.state.userEdit.headImg||"",
             name:this.state.userEdit.name||"",
             age:this.state.userEdit.age+""||"",
@@ -180,7 +191,8 @@ export class MyInfo extends React.Component<
             serviceAddress:this.state.userEdit.serviceAddress||"",
             info:this.state.userEdit.info||"",
             userType:this.state.userEdit.userType||"",
-            sex:this.state.userEdit.sex||""
+            sex:this.state.userEdit.sex||"",
+            activityImgFile:this.state.activityImgFile?this.state.activityImgFile:null
         },new EmptyBodyTransform(),function (res:JSONResponse<SimpleMessage>) {
             switch (res.customResult) {
                 case SimpleMessage.fail:
@@ -236,7 +248,10 @@ export class MyInfo extends React.Component<
             <Container className="overflow-auto">
                 <Row>
                     <Col className="p-3 text-center">
-                        <Image className="chat-headImg" src={this.state.userInfo?.headImg?prefix.image+this.state.userInfo.headImg:""}/>
+                        {this.state.userEdit.contentEditable?
+                            <UploadImg tip={"点击更新头像"} maxImageSize={maxImageSize} onChange={(value:string)=>this.setState({activityImgFile:value})} />
+                            :
+                            <Image className="chat-headImg" src={this.state.userInfo?.headImg?prefix.image+this.state.userInfo.headImg:""}/>}
                     </Col>
                 </Row>
                 {/*TODO 表单校验*/}

src/my/MyMessage.tsx

@@ -18,7 +18,7 @@ export class MyMessage extends React.Component<{
     user:string,
     cookies:Cookies,
     //刷新用户信息
-    refreshFun?:Function,
+    refreshFun?:Function
 }, {
     subMenu:Menu,
     page:JSX.Element

src/ui/MyDialog.tsx

@@ -1,15 +1,25 @@
 import React from "react";
 import Dialog from "@material-ui/core/Dialog";
 import Draggable from "react-draggable";
-import {Paper} from "@material-ui/core";
+import {Paper, styled} from "@material-ui/core";
 import {MyDialogProps} from "../entity";
 import {CloseDialog} from "./CloseDialog";
 
+
 /**
  * 我的弹窗
  */
-export class MyDialog extends React.Component<MyDialogProps, { undefined?:undefined }>{
+export class MyDialog extends React.Component<MyDialogProps, { defaultPaper:any }>{
+
+    private EditDialogPaper:any;
 
+    constructor(props: Readonly<MyDialogProps>) {
+        super(props);
+
+        this.EditDialogPaper=styled(Paper)({
+                maxWidth:this.props.maxWidth?this.props.maxWidth:600
+            })
+    }
 
     render() {
         return (
@@ -18,7 +28,7 @@ export class MyDialog extends React.Component<MyDialogProps, { undefined?:undefi
                 open={this.props.open}
                 PaperComponent={(props)=>
                     <Draggable handle={"#"+this.props.titleId} cancel={'[class*="MuiDialogContent-root"]'}>
-                        <Paper {...props} />
+                        {<this.EditDialogPaper {...props}/>}
                     </Draggable>}
                 aria-labelledby={this.props.titleId}
                 classes={{paper:"w-100"}}