help_user/src/ui/Activity.tsx

import React from "react";
import {Button, Image} from "react-bootstrap";
import {ActivityDetail} from "../entity";
import moment from "moment";
import {API, Method, prefix, request} from "../interface";
import {ActivityDetailRes, ActivityDetailTransform, SimpleMessage} from "../result";

/**
 * 活动信息
 */
export class Activity extends React.Component<
    {
        activityId:number|null;
        /**
         * 显示报名按钮
         */
        showButton:boolean;
        /**
         * 报名方法
         */
        applyFunction?:Function;
    },
    {
        activity?:ActivityDetail ,
        result:JSX.Element
    }>{


    constructor(props: Readonly<{ activityId: number | null; showButton: boolean; applyFunction?: Function }>) {
        super(props);

        this.state={
            result:<h3 className="text-info text-center">活动详情加载中</h3>
        }
    }

    componentDidMount() {
        if(this.props.activityId) {
            this.loadActivityWithId()
        }
    }

        /**
         * 查找活动
         */
        loadActivityWithId(){
            let that=this

            request(API.main.activity.find+"/"+this.props.activityId,Method.GET,{},new ActivityDetailTransform(),function(res:ActivityDetailRes){
                switch (res.customResult) {
                    case SimpleMessage.fail:
                        that.setState({
                            result:<h3 className="text-danger text-center">活动详情加载失败，请联系管理员</h3>
                        });break;
                    case SimpleMessage.ok:
                        that.setState({
                            activity:res.activity
                        });break;
                }
            })
        }

        render() {
            return (
                <div className="overflow-auto activity-detail-height">
                    {this.state.activity?
                        <div>
                            <div className="text-center">
                                <Image className="mb-3 activityImage" src={prefix.image+this.state.activity.activityImg}/>
                            </div>
                            <h3 className="text-center">{this.state.activity.title}</h3>
                            <p className="p-2">{this.state.activity.content}</p>
                            <h5 className="text-center">{"活动开始时间："+moment(this.state.activity.activityStartTime).format("YYYY-MM-DD HH:mm:ss")}</h5>
                            <h5 className="text-center mb-3">{"活动结束时间："+moment(this.state.activity.activityStartTime).format("YYYY-MM-DD HH:mm:ss")}</h5>
                            {this.props.showButton?<div className="text-center"><Button onClick={()=>this.props.applyFunction?this.props.applyFunction(this.props.activityId):null}>帮助</Button></div>:null}
                        </div>
                    :this.state.result}
                    </div>
            );
        }
}