help_user/src/my/SeekHelp.tsx

import React from "react";
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,{
    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 (
            <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>
        )
    }
}