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

5 years ago · 1b6cbd59eb
parent 233cb66ef2
commit 1b6cbd59eb
4 changed files with 108 additions and 8 deletions
--- a/src/Active.tsx
+++ b/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) {
--- a/src/User.tsx
+++ b/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) {
--- a/src/entity.ts
+++ b/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;
 }

 /**
--- a/src/ui/UploadImg.tsx
+++ b/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>
+        )
+    }
+}