pan
5 years ago
parent
db95a92aa1
commit
bff7c0dec8
@ -0,0 +1,23 @@ |
||||
import React from "react"; |
||||
import {Tooltip} from "@material-ui/core"; |
||||
import {CloseDialogProps} from "../entity"; |
||||
|
||||
/** |
||||
* 关闭弹窗 |
||||
*/ |
||||
export class CloseDialog extends React.Component<CloseDialogProps, any>{ |
||||
|
||||
render() { |
||||
return ( |
||||
<div className="d-flex justify-content-between p-3" > |
||||
<span className="invisible"/> |
||||
<Tooltip title="按下光标拖放弹窗到其他位置" placement="left"> |
||||
<h3 id={this.props.titleId} style={{cursor:"move"}}>{this.props.menuName}</h3> |
||||
</Tooltip> |
||||
<Tooltip title="关闭弹窗" placement="left"> |
||||
<img src="close.svg" alt="关闭弹窗" className="closeIcon40" onClick={()=>this.props.onClose()}/> |
||||
</Tooltip> |
||||
</div> |
||||
) |
||||
} |
||||
} |
||||
@ -1,18 +1,154 @@ |
||||
import React from "react"; |
||||
import {Col, Container, Row} from "react-bootstrap"; |
||||
import {Button, ButtonGroup, Col, Container, Image, ListGroup, Row} from "react-bootstrap"; |
||||
import {InfoHelpState, User} from "../entity"; |
||||
import moment from "moment"; |
||||
import Dialog from "@material-ui/core/Dialog"; |
||||
import {CloseDialog} from "./CloseDialog"; |
||||
import {Paper, Tooltip} from "@material-ui/core"; |
||||
import Draggable from "react-draggable"; |
||||
|
||||
/** |
||||
* 志愿者状态 |
||||
*/ |
||||
enum VolunteerStatus { |
||||
apply="报名", |
||||
join="参加", |
||||
complete="完成" |
||||
} |
||||
|
||||
const titleId="seek-help-dialog" |
||||
|
||||
/** |
||||
* 我的帮助 |
||||
*/ |
||||
export class SeekHelp extends React.Component<any, any>{ |
||||
export class SeekHelp extends React.Component<any,{ |
||||
data:Array<InfoHelpState>, |
||||
open:boolean, |
||||
status?:VolunteerStatus, |
||||
volunteerList?:Array<User>}>{ |
||||
|
||||
|
||||
constructor(props: Readonly<any>) { |
||||
super(props); |
||||
|
||||
this.state={ |
||||
data:[], |
||||
open:false |
||||
} |
||||
} |
||||
|
||||
componentDidMount() { |
||||
this.loadHelp() |
||||
} |
||||
|
||||
/** |
||||
* 加载我的求助信息 |
||||
*/ |
||||
loadHelp(){ |
||||
this.setState({data:[ |
||||
{ |
||||
applyVolunteerList: [{ |
||||
headImg:"logo512.png", |
||||
userId:"admin", |
||||
name:"张三", |
||||
age:Math.ceil(Math.random()*100)+1, |
||||
mobile:1234567879, |
||||
email:"admin@qq.com", |
||||
address:"上海高新区", |
||||
info:"个人简介", |
||||
}, |
||||
{ |
||||
headImg:"logo512.png", |
||||
userId:"admin", |
||||
name:"李四", |
||||
age:Math.ceil(Math.random()*100)+1, |
||||
mobile:1234567879, |
||||
email:"admin@qq.com", |
||||
address:"上海高新区", |
||||
info:"个人简介", |
||||
}], |
||||
completeVolunteerList: [], |
||||
joinVolunteerList: [], |
||||
activeImg: "logo512.png", |
||||
content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容", |
||||
time: new Date().getTime(), |
||||
title:"活动标题" |
||||
}, |
||||
{ |
||||
applyVolunteerList: [], |
||||
completeVolunteerList: [], |
||||
joinVolunteerList: [], |
||||
activeImg: "logo512.png", |
||||
content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容", |
||||
time: new Date().getTime(), |
||||
title:"活动标题" |
||||
}, |
||||
{ |
||||
applyVolunteerList: [], |
||||
completeVolunteerList: [], |
||||
joinVolunteerList: [], |
||||
activeImg: "logo512.png", |
||||
content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容", |
||||
time: new Date().getTime(), |
||||
title:"活动标题" |
||||
} |
||||
]}) |
||||
|
||||
console.debug(this.state) |
||||
|
||||
} |
||||
|
||||
render() { |
||||
return ( |
||||
<Container> |
||||
<Row> |
||||
<Col>我的帮助</Col> |
||||
</Row> |
||||
</Container> |
||||
<div className="overflow-auto seek-help-height"> |
||||
{this.state.data.map((help:InfoHelpState,index:number)=> |
||||
<div key={"list"+index} className="mt-3 mb-3 border-info border"> |
||||
<Container> |
||||
<Row> |
||||
<Col xs={4}> |
||||
<Image src={help.activeImg} className="activeImage"/> |
||||
</Col> |
||||
<Col> |
||||
<h5>{help.title}</h5> |
||||
<h6>{help.content}</h6> |
||||
</Col> |
||||
</Row> |
||||
<Row> |
||||
<Col xs={4} className="mt-auto mb-auto"> |
||||
<span>{moment(help.time).format("YYYY-MM-DD HH:mm:ss")}</span> |
||||
</Col> |
||||
<Col> |
||||
<ButtonGroup> |
||||
<Button variant={"primary"} disabled={help.applyVolunteerList.length===0} onClick={()=>this.setState({open:true,status:VolunteerStatus.apply,volunteerList:help.applyVolunteerList})}>报名人数:{help.applyVolunteerList.length}</Button> |
||||
<Button variant={"success"} disabled={help.joinVolunteerList.length===0} onClick={()=>this.setState({open:true,status:VolunteerStatus.join,volunteerList:help.joinVolunteerList})}>参与人数:{help.joinVolunteerList.length}</Button> |
||||
<Button variant={"light"} disabled={help.completeVolunteerList.length===0} onClick={()=>this.setState({open:true,status:VolunteerStatus.complete,volunteerList:help.completeVolunteerList})}>完成人数:{help.completeVolunteerList.length}</Button> |
||||
</ButtonGroup> |
||||
</Col> |
||||
</Row> |
||||
</Container> |
||||
|
||||
</div> |
||||
)} |
||||
|
||||
<Dialog hideBackdrop={true} open={this.state.open} |
||||
PaperComponent={(props)=> |
||||
<Draggable handle={"#"+titleId} cancel={'[class*="MuiDialogContent-root"]'}> |
||||
<Paper {...props} /> |
||||
</Draggable>} |
||||
aria-labelledby={titleId}> |
||||
<CloseDialog menuName={this.state.status+"活动志愿者"} onClose={()=>this.setState({open:false})} titleId={titleId}/> |
||||
<ListGroup> |
||||
{(this.state.volunteerList||[]).map((user:User,index:number)=> |
||||
<ListGroup.Item key={"list"+index} className="d-flex justify-content-between" variant="info"> |
||||
<span>{user.name}</span> |
||||
<Tooltip title="查看用户信息" placement="right"> |
||||
<img src="user.svg" alt="查看用户信息" className="userIcon"/> |
||||
</Tooltip> |
||||
</ListGroup.Item> |
||||
)} |
||||
</ListGroup> |
||||
</Dialog> |
||||
</div> |
||||
) |
||||
} |
||||
} |
||||
|
||||
Loading…
Reference in new issue