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.
220 lines
8.7 KiB
220 lines
8.7 KiB
import React, {RefObject} from "react";
|
|
import {Input} from "../bootstrap/InputGroup";
|
|
import {Friend, MyHelpState, RecommendType} 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 path from "path";
|
|
import {Address} from "../Address";
|
|
|
|
/**
|
|
* 活动内容限长字符数
|
|
*/
|
|
const contentMaxLength=50;
|
|
|
|
/**
|
|
* 图片尺寸限制
|
|
*/
|
|
const maxImageSize={
|
|
width:100,
|
|
height:100
|
|
}
|
|
|
|
|
|
|
|
const recommendType=[RecommendType.no, RecommendType.choose,RecommendType.auto]
|
|
|
|
/**
|
|
* 我的求助
|
|
*/
|
|
export class MyHelp extends React.Component<any, MyHelpState>{
|
|
//存放活动背景图
|
|
private fileImg: RefObject<any>;
|
|
//当前选中的好友索引
|
|
private friendIndex:RefObject<any>;
|
|
|
|
constructor(props: Readonly<any>) {
|
|
super(props);
|
|
|
|
const time=moment()
|
|
this.state={
|
|
title:"",
|
|
content:"",
|
|
startTime:time.add({days:1}).format("YYYY-MM-DD HH:mm:ss"),
|
|
endTime:time.add({days:7}).format("YYYY-MM-DD HH:mm:ss"),
|
|
activeImg:"上传活动背景图",
|
|
address: "",
|
|
recommendType: RecommendType.no,
|
|
friendList:[],
|
|
chooseFriendList: {}
|
|
}
|
|
|
|
this.fileImg=React.createRef()
|
|
|
|
this.friendIndex=React.createRef()
|
|
}
|
|
|
|
/**
|
|
* 搜索好友
|
|
*/
|
|
searchFriend(keyword:string){
|
|
this.setState({friendList:[{
|
|
name:"fffff"
|
|
},
|
|
{
|
|
name:"EEE"
|
|
}]})
|
|
}
|
|
|
|
/**
|
|
* 获取推荐类型
|
|
* @param value
|
|
*/
|
|
getRecommendType(value:string){
|
|
switch (value) {
|
|
case RecommendType.no:
|
|
return RecommendType.no;
|
|
case RecommendType.auto:
|
|
return RecommendType.auto;
|
|
case RecommendType.choose:
|
|
return RecommendType.choose;
|
|
}
|
|
return RecommendType.no
|
|
}
|
|
|
|
/**
|
|
* 获取图片url
|
|
*/
|
|
getUrl(){
|
|
if(this.fileImg.current!==null&&this.fileImg.current.files.length>0) {
|
|
return URL.createObjectURL(this.fileImg.current.files[0])
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<Container>
|
|
{/*活动标题*/}
|
|
<Input name="title" desc="活动标题" onChange={(value:string)=>this.setState({title:value})}/>
|
|
|
|
{/*活动内容*/}
|
|
<Input name="content" desc="活动内容" as="textarea" valid={{check:true,valid:"您还可输入"+(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.startTime} onChange={value => {
|
|
if(moment.isMoment(value)){
|
|
this.setState({
|
|
startTime: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.endTime} onChange={value => {
|
|
if(moment.isMoment(value)){
|
|
this.setState({
|
|
endTime:value.format("YYYY-MM-DD HH:mm:ss")
|
|
})
|
|
}
|
|
}} dateFormat="YYYY-MM-DD" timeFormat="HH:mm:ss"/>
|
|
</InputGroup>
|
|
|
|
{/*
|
|
预览活动背景图
|
|
*/}
|
|
<img className="mt-3 d-none" src={this.getUrl()} onLoad={(s)=> {
|
|
if(s.target instanceof HTMLImageElement){
|
|
//限制图片显示大小
|
|
s.target.width=s.target.width>maxImageSize.width?maxImageSize.width:s.target.width
|
|
s.target.height=s.target.height>maxImageSize.height?maxImageSize.height:s.target.height
|
|
s.target.classList.remove('d-none')
|
|
}
|
|
}
|
|
} alt="活动背景图"/>
|
|
|
|
{/*上传活动背景图*/}
|
|
<Form className="col-7 ml-auto mr-auto mt-3">
|
|
<Form.File
|
|
ref={this.fileImg}
|
|
label={path.basename(this.state.activeImg.replace(/\\/g,'/'))}
|
|
custom
|
|
accept="image/*"
|
|
onChange={(e:any)=>{
|
|
this.setState({activeImg:e.target.value})
|
|
}}
|
|
/>
|
|
</Form>
|
|
|
|
{/*服务地点*/}
|
|
<Address onChange={(value:string)=>this.setState({address:value})}/>
|
|
|
|
<InputGroup className={"mt-3 col-3 ml-auto mr-auto "+(this.state.address.length>0?"":"d-none")}>
|
|
<InputGroup.Prepend>
|
|
<InputGroup.Text>推荐好友方式</InputGroup.Text>
|
|
</InputGroup.Prepend>
|
|
<Form.Control as="select" custom onChange={(e)=>
|
|
{
|
|
this.setState({recommendType:this.getRecommendType(e.target.value)})
|
|
}}>
|
|
{recommendType.map((value:RecommendType,index:number) => <option key={"option"+index} value={value}>{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)=>this.searchFriend(e.target.value)}/>
|
|
</InputGroup.Prepend>
|
|
<Form.Control as="select" custom ref={this.friendIndex}>
|
|
{this.state.friendList.map((friend:Friend,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 className="mt-3">发布活动</Button>
|
|
</Container>
|
|
);
|
|
}
|
|
}
|
|
|