panqihua
/
help_admin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source
0603
pan 5 years ago
parent 233cb66ef2
commit 1b6cbd59eb
4 changed files with 108 additions and 8 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 24
      src/Active.tsx
  2. 18
      src/User.tsx
  3. 3
      src/entity.ts
  4. 71
      src/ui/UploadImg.tsx

24
src/Active.tsx
Unescape View File

@ -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) {

18
src/User.tsx
Unescape View File

@ -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) {

3
src/entity.ts
Unescape View File

@ -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;
}
/**

71
src/ui/UploadImg.tsx
Unescape View File

@ -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>
)
}
}
Write Preview
Loading…
Cancel
Save