修改活动信息可更新活动图片

src/Active.tsx

@@ -1,15 +1,22 @@
 import React from "react";
-import {Button, Form, ListGroup, Tab, Table, Tabs} from "react-bootstrap";
+import {Button, Form, Image, ListGroup, Tab, Table, Tabs} from "react-bootstrap";
 import {ManagerActivity} from "./entity";
 import {JSONResponse, Method, request} from "./interface";
-import {API} from "./api";
+import {API, prefix} from "./api";
 import {EmptyBodyTransform, FindActivityRes, FindActivityTransform, PageDataMessage, SimpleMessage} from "./result";
 import {MyDialog} from "./ui/MyDialog";
 import moment from "moment";
 import {Input} from "./ui/InputGroup";
+import {UploadImg} from "./ui/UploadImg";
 
 const contentMaxLength=50
-
+/**
+ * 图片尺寸限制
+ */
+const maxImageSize={
+    width:100,
+    height:100
+}
 class EditActive extends React.Component<
     {
         onClick:Function;
@@ -31,6 +38,10 @@ class EditActive extends React.Component<
     render() {
         return (
             <Form>
+                <div className="text-center ml-auto mr-auto">
+                    <UploadImg tip={"点击更新活动图片"} maxImageSize={maxImageSize} onChange={(value:string)=>
+                        this.setState({activity:{...this.state.activity,...{activityImgFile:value}}})} />
+                </div>
                 <Input name="title" desc="活动标题" value={this.state.activity.title} onChange={(value:string)=>
                     this.setState({
                         activity:{...this.state.activity,...{title:value}}
@@ -108,6 +119,7 @@ export class Active extends React.Component<any, {
                                 <th>#</th>
                                 <th>活动标题</th>
                                 <th>活动内容</th>
+                                <th>活动图片</th>
                                 <th>开始时间</th>
                                 <th>结束时间</th>
                                 <th>求助用户id</th>
@@ -121,6 +133,7 @@ export class Active extends React.Component<any, {
                                     <td>{index+1}</td>
                                     <td>{active.title}</td>
                                     <td>{active.content}</td>
+                                    <td><Image className="head-img" src={prefix.image+active.activityImg}/></td>
                                     <td>{moment(active.activityStartTime).format("YYYY-MM-DD HH:mm:ss")}</td>
                                     <td>{moment(active.activityEndTime).format("YYYY-MM-DD HH:mm:ss")}</td>
                                     <td>{active.seekHelpUser}</td>
@@ -159,9 +172,10 @@ export class Active extends React.Component<any, {
      */
     private modifyActivity(activity: ManagerActivity) {
         let that=this
-        request(API.account.updateActivity+activity.activityId,Method.POST, {
+        request(API.account.updateActivity+activity.activityId,Method.PUT, {
                 title:activity.title,
-                content:activity.content
+                content:activity.content,
+                activityImgFile:activity.activityImgFile?activity.activityImgFile:null
             },
             new EmptyBodyTransform(),function (res:JSONResponse<SimpleMessage>) {
                 switch (res.customResult) {

src/User.tsx

@@ -7,7 +7,14 @@ import {API, prefix} from "./api";
 import {EmptyBodyTransform, FindUserRes, FindUserTransform, PageDataMessage, SimpleMessage} from "./result";
 import {MyDialog} from "./ui/MyDialog";
 import {Address} from "./ui/Address";
-
+import {UploadImg} from "./ui/UploadImg";
+/**
+ * 图片尺寸限制
+ */
+const maxImageSize={
+    width:100,
+    height:100
+}
 class EditUser extends React.Component<{
     user:UserEntity;
     modifyUser:Function;
@@ -30,6 +37,10 @@ class EditUser extends React.Component<{
     render() {
         return (
             <Form>
+                <div className="text-center ml-auto mr-auto">
+                    <UploadImg tip={"点击更新头像"} maxImageSize={maxImageSize} onChange={(value:string)=>
+                        this.setState({ user:{...this.state.user,...{activityImgFile:value}}})} />
+                </div>
                 <Input name="name" desc="姓名" value={this.state.user.name} onChange={(value:string)=>
                     this.setState({
                     user:{...this.state.user,...{name:value}}
@@ -273,7 +284,7 @@ export class User extends React.Component<
      */
     private modifyUser(user: UserEntity) {
         let that=this
-        request(API.account.updateUser,Method.POST, {
+        request(API.account.updateUser,Method.PUT, {
             userId:user.userId,
             name:user.name,
             age:String(user.age),
@@ -283,7 +294,8 @@ export class User extends React.Component<
             userType:user.userType,
             mobile:user.mobile,
             email:user.email,
-            info:user.info
+            info:user.info,
+            activityImgFile:user.activityImgFile?user.activityImgFile:null
 
         },new EmptyBodyTransform(),function (res:JSONResponse<SimpleMessage>) {
             switch (res.customResult) {

src/entity.ts

@@ -40,6 +40,8 @@ export interface UserEntity{
     isMyFriend?:boolean;
     //时间币
     timeScore?:boolean;
+    //头像文件
+    activityImgFile?:any;
 }
 
 //活动
@@ -182,6 +184,7 @@ export interface ManagerActivity {
     activityEndTime:number;
     seekHelpUser:number;
     helpUser:Array<string>;
+    activityImgFile?:any;
 }
 
 /**

src/ui/UploadImg.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import {Form, Image} from "react-bootstrap";
+import path from "path";
+
+/**
+ * 上传图片
+ */
+export class UploadImg extends React.Component<
+    {
+        //tip
+        tip:string,
+        //图片尺寸限制
+        maxImageSize:{
+            width:number,
+            height:number
+        };
+        //上传事件
+        onChange:Function;
+}, {
+    //imgObj
+    imgObj?:any;
+    //图片文件名
+    imageName?:string;
+}>{
+
+
+    constructor(props: Readonly<{ tip: string; maxImageSize: { width: number; height: number }; onChange: Function }>) {
+        super(props);
+
+        this.state={}
+    }
+
+    render() {
+        return (
+            <div>
+                    {/*
+                        预览背景图
+                        */}
+                <Image className="mt-3 d-none" src={this.state.imgObj} onLoad={(s)=> {
+                    if (s.target instanceof HTMLImageElement) {
+                        //限制图片显示大小
+                        s.target.width = s.target.width > this.props.maxImageSize.width ? this.props.maxImageSize.width : s.target.width
+                        s.target.height = s.target.height > this.props.maxImageSize.height ? this.props.maxImageSize.height : s.target.height
+                        s.target.classList.remove('d-none')
+                    }
+                }
+                }/>
+
+                {/*上传背景图*/}
+                <div className="col-7 ml-auto mr-auto mt-3">
+                    <Form.File
+                        label={this.state.imageName?path.basename(this.state.imageName.replace(/\\/g,'/')):this.props.tip}
+                        custom
+                        accept="image/*"
+                        onChange={(e:any)=>{
+                            const file=e.target.files[0]
+                            if(!file){
+                                return
+                            }
+                            this.setState({
+                                imgObj:URL.createObjectURL(file),
+                                imageName:e.target.value
+                            })
+                            this.props.onChange(file)
+                        }}
+                    />
+                </div>
+            </div>
+        )
+    }
+}