You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
214 lines
9.4 KiB
214 lines
9.4 KiB
import React, {RefObject} from "react";
|
|
import {Input} from "../ui/InputGroup";
|
|
import {RecommendType, SendHelpState, User} from "../entity";
|
|
import {Button, Container, Form, FormControl, InputGroup, ListGroup, OverlayTrigger, Tooltip} from "react-bootstrap";
|
|
import ReactDatetimeClass from "react-datetime";
|
|
import "react-datetime/css/react-datetime.css";
|
|
import moment from 'moment';
|
|
import {Address} from "../ui/Address";
|
|
import {UploadImg} from "../ui/UploadImg";
|
|
import {JSONResponse, Method, request} from "../interface"
|
|
import {EmptyBodyTransform, SimpleMessage} from "../result";
|
|
import {MyDialog} from "../ui/MyDialog";
|
|
import {loadMyFriend} from "../public";
|
|
import {Api} from "../api";
|
|
|
|
/**
|
|
* 活动内容限长字符数
|
|
*/
|
|
const contentMaxLength=50;
|
|
|
|
/**
|
|
* 图片尺寸限制
|
|
*/
|
|
const maxImageSize={
|
|
width:100,
|
|
height:100
|
|
}
|
|
|
|
|
|
|
|
const recommendType=[RecommendType.no, RecommendType.choose,RecommendType.auto]
|
|
|
|
/**
|
|
* 我的求助
|
|
*/
|
|
export class SendHelp extends React.Component<{ onSendActivityOK:Function }, SendHelpState>{
|
|
//当前选中的好友索引
|
|
private friendIndex:RefObject<any>;
|
|
|
|
constructor(props: Readonly<any>) {
|
|
super(props);
|
|
|
|
const time=moment()
|
|
this.state={
|
|
title:"",
|
|
content:"",
|
|
activityStartTime:time.add({days:1}).format("YYYY-MM-DD HH:mm:ss"),
|
|
activityEndTime:time.add({days:7}).format("YYYY-MM-DD HH:mm:ss"),
|
|
serviceAddress: "",
|
|
recommendType: RecommendType.no,
|
|
friendList:[],
|
|
chooseFriendList: {},
|
|
result:null
|
|
|
|
}
|
|
|
|
this.friendIndex=React.createRef()
|
|
}
|
|
|
|
//发布求助信息
|
|
sendHelp(){
|
|
let that=this
|
|
request(Api.main.activity.help,Method.PUT, {
|
|
title:this.state.title,
|
|
content:this.state.content,
|
|
activityStartTime:this.state.activityStartTime,
|
|
activityEndTime:this.state.activityEndTime,
|
|
activityImgFile:this.state.activityImgFile,
|
|
serviceAddress:this.state.serviceAddress,
|
|
recommendType:this.state.recommendType,
|
|
friendUserId:Object.keys(this.state.chooseFriendList).map(value => this.state.chooseFriendList[value].userId)
|
|
|
|
},new EmptyBodyTransform(),function (res:JSONResponse<SimpleMessage>) {
|
|
switch (res.customResult) {
|
|
case SimpleMessage.ok:
|
|
that.setState({
|
|
result:<div className="text-center"><Button variant="info" onClick={()=>that.props.onSendActivityOK()}>发布成功，返回首页</Button></div>
|
|
});break
|
|
case SimpleMessage.fail:
|
|
that.setState({
|
|
result:<h3 className="text-center text-danger">发布失败</h3>
|
|
});break
|
|
}
|
|
})
|
|
}
|
|
|
|
//检查是否为空
|
|
isNotEmpty(...value:(string | number)[]){
|
|
for(let index in value){
|
|
if(value[index].toString().length===0){
|
|
return false
|
|
}
|
|
}
|
|
return true
|
|
}
|
|
|
|
check(){
|
|
return this.isNotEmpty(this.state.title,this.state.content,this.state.serviceAddress)&&this.state.activityImgFile!=null
|
|
}
|
|
|
|
getRecommendType(type:RecommendType){
|
|
switch (type) {
|
|
case RecommendType.auto:return "系统推荐"
|
|
case RecommendType.choose:return "手动推荐"
|
|
case RecommendType.no:return "不推荐"
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<Container>
|
|
{/*活动标题*/}
|
|
<Input name="title" desc="活动标题" onChange={(value:string)=>this.setState({title:value})} valid={{check:this.state.title.length>0}}/>
|
|
|
|
{/*活动内容*/}
|
|
<Input name="content" desc="活动内容" as="textarea" valid={{check:this.state.content.length>0,valid:this.state.content.length===0?"验证失败":"您还可输入"+(contentMaxLength-this.state.content.length+"个字符")}} maxLength={contentMaxLength} onChange={(value:string)=>this.setState({content:value})}/>
|
|
|
|
{/*活动开始时间*/}
|
|
<InputGroup className="col-7 ml-auto mr-auto mt-3">
|
|
<InputGroup.Prepend>
|
|
<InputGroup.Text>活动开始时间</InputGroup.Text>
|
|
</InputGroup.Prepend>
|
|
<ReactDatetimeClass defaultValue={this.state.activityStartTime} onChange={value => {
|
|
if(moment.isMoment(value)){
|
|
this.setState({
|
|
activityStartTime:value.format("YYYY-MM-DD HH:mm:ss")
|
|
})
|
|
}
|
|
}} dateFormat="YYYY-MM-DD" timeFormat="HH:mm:ss"/>
|
|
</InputGroup>
|
|
|
|
{/*活动结束时间*/}
|
|
<InputGroup className="col-7 ml-auto mr-auto mt-3">
|
|
<InputGroup.Prepend>
|
|
<InputGroup.Text>活动结束时间</InputGroup.Text>
|
|
</InputGroup.Prepend>
|
|
<ReactDatetimeClass defaultValue={this.state.activityEndTime} onChange={value => {
|
|
if(moment.isMoment(value)){
|
|
this.setState({
|
|
activityEndTime:value.format("YYYY-MM-DD HH:mm:ss")
|
|
})
|
|
}
|
|
}} dateFormat="YYYY-MM-DD" timeFormat="HH:mm:ss"/>
|
|
</InputGroup>
|
|
|
|
<UploadImg tip={"请上传活动背景图"} maxImageSize={maxImageSize} onChange={(value:string)=>this.setState({activityImgFile:value})} />
|
|
|
|
{/*服务地点*/}
|
|
<div className="mt-3">
|
|
<Address onChange={(value:string)=>this.setState({serviceAddress:value})}/>
|
|
</div>
|
|
|
|
<InputGroup className={"mt-3 col-3 ml-auto mr-auto "+(this.state.serviceAddress.length>0?"":"d-none")}>
|
|
<InputGroup.Prepend>
|
|
<InputGroup.Text>推荐好友方式</InputGroup.Text>
|
|
</InputGroup.Prepend>
|
|
<Form.Control as="select" custom onChange={(e)=>
|
|
{
|
|
this.setState({recommendType:e.target.value})
|
|
}}>
|
|
{recommendType.map((value:RecommendType,index:number) => <option key={"option"+index} value={value}>{this.getRecommendType(value)}</option>)}
|
|
</Form.Control>
|
|
</InputGroup>
|
|
|
|
<InputGroup className={"mt-3 col-7 ml-auto mr-auto "+(this.state.recommendType===RecommendType.choose?"":"d-none")}>
|
|
<InputGroup.Prepend>
|
|
<InputGroup.Text>推荐好友</InputGroup.Text>
|
|
</InputGroup.Prepend>
|
|
<InputGroup.Prepend>
|
|
<FormControl placeholder="请输入好友关键字" onChange={(e)=>loadMyFriend(e.target.value,this,1)}/>
|
|
</InputGroup.Prepend>
|
|
<Form.Control as="select" custom ref={this.friendIndex}>
|
|
{this.state.friendList.map((friend:User,index:number)=><option key={"option"+index} value={index+""}>{friend.name}</option>)}
|
|
</Form.Control>
|
|
<div className="input-group-append">
|
|
<button className="btn btn-outline-secondary" type="button" onClick={()=>{
|
|
if(this.friendIndex.current.value.length>0) {
|
|
this.setState({
|
|
chooseFriendList: {...this.state.chooseFriendList,...{[this.state.friendList[+this.friendIndex.current.value].name]:this.state.friendList[+this.friendIndex.current.value]}}
|
|
})
|
|
|
|
}
|
|
}}>添加好友</button>
|
|
</div>
|
|
</InputGroup>
|
|
|
|
<ListGroup className={"mt-3 col-3 ml-auto mr-auto "+(this.state.recommendType===RecommendType.choose?"":"d-none")}>
|
|
<ListGroup.Item>待推荐好友</ListGroup.Item>
|
|
{Object.keys(this.state.chooseFriendList).map(key=><ListGroup.Item className="d-flex justify-content-between align-items-center" key={"list"+key} variant="info">{this.state.chooseFriendList[key].name}
|
|
<OverlayTrigger
|
|
placement="right"
|
|
overlay={
|
|
<Tooltip id={key}>
|
|
取消推荐
|
|
</Tooltip>
|
|
}
|
|
>
|
|
<img src="close.svg" alt="取消推荐" className="closeIcon20" onClick={()=> {
|
|
delete this.state.chooseFriendList[key]
|
|
this.setState({
|
|
chooseFriendList:this.state.chooseFriendList
|
|
})
|
|
}}/>
|
|
</OverlayTrigger>
|
|
</ListGroup.Item>)}
|
|
</ListGroup>
|
|
|
|
<Button disabled={!this.check()} className="mt-3" onClick={()=>this.sendHelp()}>发布活动</Button>
|
|
|
|
<MyDialog content={this.state.result} open={this.state.result!==null} titleId="register-tip" menuName="发布求助信息反馈" onClose={()=>this.setState({result:null})}/>
|
|
</Container>
|
|
);
|
|
}
|
|
}
|
|
|