pan
4 years ago
parent
99662c7ba3
commit
67ad787704
|
After Width: | Height: | Size: 637 B |
@ -0,0 +1,55 @@ |
||||
import {Form, InputGroup} from "react-bootstrap"; |
||||
import {AddressProps, OnChangeAddress} from "./entity"; |
||||
import React from "react"; |
||||
|
||||
/** |
||||
* 加载服务地点信息 |
||||
*/ |
||||
export class Address extends React.Component<OnChangeAddress, any>{ |
||||
|
||||
|
||||
constructor(props: Readonly<OnChangeAddress>) { |
||||
super(props); |
||||
|
||||
this.state={ |
||||
addressList:[] |
||||
} |
||||
} |
||||
|
||||
componentDidMount() { |
||||
this.loadAddress() |
||||
} |
||||
|
||||
/** |
||||
* 加载服务地点 |
||||
*/ |
||||
loadAddress(){ |
||||
this.setState({ |
||||
addressList:[{ |
||||
address:"北京", |
||||
}, |
||||
{ |
||||
address:"广州", |
||||
}, |
||||
{ |
||||
address:"上海", |
||||
}] |
||||
}) |
||||
} |
||||
|
||||
render() { |
||||
return ( |
||||
<InputGroup className="mt-3 col-3 ml-auto mr-auto"> |
||||
<InputGroup.Prepend> |
||||
<InputGroup.Text>服务地点</InputGroup.Text> |
||||
</InputGroup.Prepend> |
||||
<Form.Control as="select" custom onChange={(e)=>this.props.onChange(e.target.value)}> |
||||
<option value="">请选择服务地点</option> |
||||
{this.state.addressList.map((address:AddressProps, index:number)=> |
||||
<option key={"option"+index} value={address.address} >{address.address}</option> |
||||
)} |
||||
</Form.Control> |
||||
</InputGroup> |
||||
) |
||||
} |
||||
} |
||||
@ -1,15 +1,22 @@ |
||||
|
||||
import {PropCookie} from "./PropCookie"; |
||||
|
||||
/** |
||||
* 登陆表单 |
||||
*/ |
||||
import {PropCookie} from "./PropCookie"; |
||||
|
||||
export interface LoginForm extends PropCookie{ |
||||
//管理员名
|
||||
user?:string; |
||||
//密码
|
||||
password?:string; |
||||
export interface LoginProps extends PropCookie{ |
||||
//跳转注册
|
||||
toRegister:Function; |
||||
//登录
|
||||
login:Function; |
||||
} |
||||
|
||||
/** |
||||
* 登陆状态 |
||||
*/ |
||||
export interface LoginState { |
||||
//管理员名
|
||||
user:string; |
||||
//密码
|
||||
password:string; |
||||
} |
||||
@ -1,11 +0,0 @@ |
||||
/** |
||||
* 注册表单 |
||||
*/ |
||||
export interface RegisterForm { |
||||
//管理员名
|
||||
user?:string; |
||||
//密码
|
||||
password?:string; |
||||
//跳转登录
|
||||
toLogin:Function; |
||||
} |
||||
@ -0,0 +1,14 @@ |
||||
/** |
||||
* 注册表单 |
||||
*/ |
||||
export interface RegisterProps { |
||||
//跳转登录
|
||||
toLogin:Function; |
||||
} |
||||
|
||||
export interface RegisterState { |
||||
//管理员名
|
||||
user:string; |
||||
//密码
|
||||
password:string; |
||||
} |
||||
@ -0,0 +1,220 @@ |
||||
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="取消推荐" style={{width:"20px"}} onClick={()=> { |
||||
delete this.state.chooseFriendList[key] |
||||
this.setState({ |
||||
chooseFriendList:this.state.chooseFriendList |
||||
}) |
||||
}}/> |
||||
</OverlayTrigger> |
||||
</ListGroup.Item>)} |
||||
</ListGroup> |
||||
|
||||
<Button className="mt-3">发布活动</Button> |
||||
</Container> |
||||
); |
||||
} |
||||
} |
||||
Loading…
Reference in new issue