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.
171 lines
7.0 KiB
171 lines
7.0 KiB
import React from "react";
|
|
import {Button, ButtonGroup, Col, Container, Image, ListGroup, Row} from "react-bootstrap";
|
|
import {SeekHelpState, User} from "../entity";
|
|
import moment from "moment";
|
|
import Dialog from "@material-ui/core/Dialog";
|
|
import {CloseDialog} from "../ui/CloseDialog";
|
|
import {Paper, Tooltip} from "@material-ui/core";
|
|
import Draggable from "react-draggable";
|
|
import {MyDialog} from "../ui/MyDialog";
|
|
import {MyInfo} from "./MyInfo";
|
|
|
|
/**
|
|
* 志愿者状态
|
|
*/
|
|
enum VolunteerStatus {
|
|
apply="报名",
|
|
join="参加",
|
|
complete="完成"
|
|
}
|
|
|
|
const titleId="seek-help-dialog"
|
|
|
|
/**
|
|
* 我的帮助
|
|
*/
|
|
export class SeekHelp extends React.Component<{ user:string },
|
|
{
|
|
data:Array<SeekHelpState>;
|
|
open:boolean;
|
|
status?:VolunteerStatus;
|
|
volunteerList?:Array<User>;
|
|
openUserInfo:boolean;
|
|
userId?:string;
|
|
}>{
|
|
|
|
|
|
constructor(props: Readonly<any>) {
|
|
super(props);
|
|
|
|
this.state={
|
|
data:[],
|
|
open:false,
|
|
openUserInfo: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:"活动标题",
|
|
//活动Id
|
|
activeId:123,
|
|
},
|
|
{
|
|
applyVolunteerList: [],
|
|
completeVolunteerList: [],
|
|
joinVolunteerList: [],
|
|
activeImg: "logo512.png",
|
|
content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容",
|
|
time: new Date().getTime(),
|
|
title:"活动标题",
|
|
//活动Id
|
|
activeId:123,
|
|
},
|
|
{
|
|
applyVolunteerList: [],
|
|
completeVolunteerList: [],
|
|
joinVolunteerList: [],
|
|
activeImg: "logo512.png",
|
|
content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容",
|
|
time: new Date().getTime(),
|
|
title:"活动标题",
|
|
//活动Id
|
|
activeId:123,
|
|
}
|
|
]})
|
|
|
|
console.debug(this.state)
|
|
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div className="overflow-auto seek-help-height">
|
|
{this.state.data.map((help:SeekHelpState, 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" onClick={()=>this.setState({openUserInfo:true,userId:user.userId})}/>
|
|
</Tooltip>
|
|
</ListGroup.Item>
|
|
)}
|
|
</ListGroup>
|
|
</Dialog>
|
|
|
|
<MyDialog titleId="view-user" menuName="用户信息"
|
|
content={<MyInfo ownUserId={this.props.user} isOwn={false} isMyFriend={false} isAdd={true} userId={this.state.userId}/>}
|
|
open={this.state.openUserInfo} onClose={()=>this.setState({openUserInfo:false})}/>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|