help_user/src/my/MyHelp.tsx

import React from "react";
import {Button, Col, Container, Image, Row} from "react-bootstrap";
import {MyHelpState} from "../entity";
import moment from "moment";

const classList="border-info border d-flex justify-content-center align-items-center"

/**
 * 我的求助
 */
export class MyHelp extends React.Component<any, { data:Array<MyHelpState> }>{


    constructor(props: Readonly<any>) {
        super(props);

        this.state= {
            data: []
        }
    }

    componentDidMount() {
        this.loadMyHelp()
    }

    /**
     * 完成活动
     * @param help
     */
    complete(help:MyHelpState){

    }

    /**
     * 参与活动
     * @param help
     */
    join(help:MyHelpState){

    }

    /**
     * 获取操作布局
     * @param help
     */
    getAction(help:MyHelpState){
        if(help.joinTime&&help.completeTime){
            return (<Row>
                        <Col className={classList}>已完成</Col>
                        <Col className={classList}/>
                        <Col className={classList}>{help.score}</Col>
                    </Row>)
        }else if(help.joinTime){
            return (<Row>
                        <Col className={classList}>待完成</Col>
                        <Col className={classList+" p-3"}><Button className="w-100" onClick={()=>this.complete(help)} variant={"info"}>完成</Button></Col>
                        <Col className={classList}/>
                    </Row>)
        }else{
            return (
                <Row>
                    <Col className={classList}>待参与</Col>
                    <Col className={classList+" p-3"}><Button className="w-100" onClick={()=>this.join(help)} variant={"info"}>参与</Button></Col>
                    <Col className={classList}/>
                </Row>
            )
        }
    }

    loadMyHelp(){
        this.setState({
            data:[{
                //活动标题
                title:"活动标题",
                //活动内容
                content:"活动内容",
                //活动背景图
                activeImg: "logo512.png",
                //求助时间
                seekHelpTime:new Date().getTime(),
                //活动开始时间
                activeStartTime:new Date().getTime(),
                //活动结束时间
                activeEndTime:new Date().getTime(),
                //报名时间
                applyTime:new Date().getTime(),
                //参与时间
                joinTime:new Date().getTime(),
                //完成时间
                completeTime:new Date().getTime(),
                //活动评价分
                score: Math.ceil(Math.random()*10),
            },
                {
                    //活动标题
                    title:"活动标题",
                    //活动内容
                    content:"活动内容",
                    //活动背景图
                    activeImg: "logo512.png",
                    //求助时间
                    seekHelpTime:new Date().getTime(),
                    //活动开始时间
                    activeStartTime:new Date().getTime(),
                    //活动结束时间
                    activeEndTime:new Date().getTime(),
                    //报名时间
                    applyTime:new Date().getTime(),
                    //参与时间
                    joinTime:null,
                    //完成时间
                    completeTime:new Date().getTime(),
                    //活动评价分
                    score: Math.ceil(Math.random()*10),
                },{
                    //活动标题
                    title:"活动标题",
                    //活动内容
                    content:"活动内容",
                    //活动背景图
                    activeImg: "logo512.png",
                    //求助时间
                    seekHelpTime:new Date().getTime(),
                    //活动开始时间
                    activeStartTime:new Date().getTime(),
                    //活动结束时间
                    activeEndTime:new Date().getTime(),
                    //报名时间
                    applyTime:new Date().getTime(),
                    //参与时间
                    joinTime:new Date().getTime(),
                    //完成时间
                    completeTime:null,
                    //活动评价分
                    score: Math.ceil(Math.random()*10),
                }]
        })
    }

    render() {
        return (
            <div className="overflow-auto my-help-height">
                {this.state.data.map((help:MyHelpState,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>
                                {["求助时间","活动开始时间","活动结束时间"].map((text:string,index:number)=>
                                    <Col className={classList} key={"col"+index}>{text}</Col>
                                )}
                            </Row>
                            <Row>
                                {[help.seekHelpTime,help.activeStartTime,help.activeEndTime].map((time:number,index:number)=>
                                    <Col className="border-info border" key={"col"+index}>{moment(time).format("YYYY-MM-DD HH:mm:ss")}</Col>
                                )}
                            </Row>
                            <Row>
                                {["报名时间","参与时间","完成时间"].map((text:string,index:number)=>
                                    <Col className={classList} key={"col"+index}>{text}</Col>
                                )}
                            </Row>
                            <Row>
                                {[help.applyTime,help.joinTime,help.completeTime].map((time,index:number)=>
                                    <Col className="border-info border" key={"col"+index}>{time?moment(time).format("YYYY-MM-DD HH:mm:ss"):""}</Col>
                                )}
                            </Row>
                            <Row>
                                {["参与状态","操作","活动评分"].map((text:string,index:number)=>
                                    <Col className={classList} key={"col"+index}>{text}</Col>
                                )}
                            </Row>
                            {this.getAction(help)}
                        </Container>
                    </div>
                )}
            </div>
        )
    }
}