help_user/src/sub/IndexMenu.tsx

import React from "react";
import {Button, Card, Col, Container, Image, ListGroup, Row} from "react-bootstrap";

import {Page} from "../ui/Page";
import {ActivityDetail, ActivityStatus, PageProps} from "../entity";
import {MyDialog} from "../ui/MyDialog";
import {Activity} from "../ui/Activity";
import {Input} from "../ui/InputGroup";
import {Method, request} from "../interface";
import {FindActivityRes, FindActivityTransform, PageDataMessage} from "../result";
import {Cookies} from "react-cookie";
import {changeActivity, showActivityTip} from "../public";
import {Api, prefix} from "../api";

/**
 * 首页
 */
export class IndexMenu extends React.Component<{ cookies:Cookies },
    {
        //活动数据
        activityList?:Array<Array<ActivityDetail>>;
        //分页信息
        page?:PageProps;
        //检索活动标题
        title:string;
        result:JSX.Element|null;
        activityId:number|null;
        //显示帮助按钮
        hideButton:boolean;
    }>{



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

        this.state={
            hideButton: true,
            activityId: null,
            result: null,
            title:""
        }
    }

    componentDidMount() {
        this.loadActivity(1)
    }



    /**
     * 加载活动列表
     * @param page
     */
    loadActivity(page:number){
        console.debug("检索活动关键字:"+this.state.title)
        let that=this
        request(Api.main.activity.find,Method.GET, {
            title:this.state.title,
            currentPage:String(page)
        },new FindActivityTransform(),function (res:FindActivityRes) {


            switch(res.customResult){
                case PageDataMessage.fail:
                    that.setState({
                        result:<h3 className="text-danger text-center">活动加载失败，请联系管理员</h3>
                    });break;
                case PageDataMessage.ok:
                    that.setState({
                        activityList:res.dataList,
                        page: res.page,
                    })
                    break
                case PageDataMessage.empty:
                    that.setState({
                        activityList:[],
                        page:res.page,
                    });break;
            }
        })
    }


    render() {
        let that=this
        const rowList=this.state.activityList?this.state.activityList.length===0?<h3 className="text-center text-info">当前没有活动可报名</h3>:this.state.activityList.map((activities:Array<ActivityDetail>, index:number)=>
           <Row className="p-3" key={"row"+index}>{activities.map((activity:ActivityDetail, subIndex:number)=>
               <Col className="col-4" key={"col"+subIndex}>
                   <Card>
                       <Card.Header>
                        <Image src={prefix.image+activity.activityImg} className="activityImage"/>
                       </Card.Header>
                       <Card.Body>
                          <ListGroup>
                              <ListGroup.Item className="bg-info" style={{color:"white",fontWeight:"bold"}}>
                                  {activity.title}
                              </ListGroup.Item>
                              <ListGroup.Item>
                                  <p className="activity-text-limit text-ellipsis">{activity.content}</p>
                              </ListGroup.Item>
                          </ListGroup>
                       </Card.Body>
                       <Card.Footer>
                           <Button variant={"info"} onClick={()=>this.setState({activityId:activity.activityId})} className="mr-2">查看活动详情</Button>

                           {showActivityTip(activity,this,<Button variant="primary" onClick={()=> {
                               changeActivity(activity.activityId,ActivityStatus.apply, this,function(){
                                   that.loadActivity(1)
                               })
                           }}>帮助</Button>)}
                       </Card.Footer>
                   </Card>
               </Col>)}
           </Row>
        ):null

        return (

            <Container className="p-5">

                <Input name="keyword" desc="活动标题" onChange={(value:string)=>this.setState({title:value})}/>

                <Button className="mt-3 mb-3" variant={"info"} onClick={()=>this.loadActivity(1)}>检索活动</Button>

                {/*<Page onClick={(page:number)=>this.loadActive(page)} currentPage={this.state.page.currentPage} totalPage={this.state.page.totalPage} pageSize={this.state.page.pageSize}/>*/}


                    {rowList}

                {this.state.page?<Page onClick={(page:number)=>this.loadActivity(page)} currentPage={this.state.page.currentPage} totalPage={this.state.page.totalPage} pageSize={this.state.page.pageSize}/>:null}

                <MyDialog content={<Activity cookies={this.props.cookies} activityId={this.state.activityId} hideButton={this.state.hideButton} applyFunction={(activeId:number)=>{
                    let that=this
                    changeActivity(activeId,ActivityStatus.apply, this,function () {
                        that.loadActivity(1)
                    })
                    this.setState({activityId:null})
                }} />}
                          open={this.state.activityId!=null} titleId="view-active" menuName="活动详情"
                          onClose={()=>this.setState({activityId:null})}/>

                <MyDialog content={this.state.result} open={this.state.result!==null} titleId="find-activity-tip" menuName="活动提示" onClose={()=>this.setState({result:null})}/>
            </Container>
        )
    }
}