help_user/src/sub/IndexMenu.tsx

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

import {Page} from "../ui/Page";
import {ActivityDetail, PageProps} from "../entity";
import {MyDialog} from "../ui/MyDialog";
import {Activity} from "../ui/Activity";
import {Input} from "../ui/InputGroup";
import {activityObj} from "../ui/TestData";
import {API, Method, request} from "../interface";
import {FindActivityMessage, FindActivityRes, FindActivityTransform} from "../result";

/**
 * 首页
 */
export class IndexMenu extends React.Component<{ user:string },
    {
        //活动数据
        activityList?:Array<Array<ActivityDetail>>;
        //分页信息
        page?:PageProps;
        //活动
        activity?:ActivityDetail;
        //打开活动
        openActivity:boolean;
        //检索活动标题
        title:string;
        result:JSX.Element|null;
    }>{



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

        this.state={
            result: null,openActivity:false,
            title:""
        }
    }

    componentDidMount() {
        this.loadActivity(1)
    }

    /**
     * 报名活动
     * @param activityId
     */
    applyActivity(activityId:number){
        console.debug("报名活动"+activityId)
    }

    /**
     * 查找活动
     * @param activityId
     */
    loadActivityWithId(activityId:number):ActivityDetail{
        console.debug("activityId="+activityId)
        return activityObj
    }

    /**
     * 加载活动列表
     * @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:page+""
        },new FindActivityTransform(),function (res:FindActivityRes) {


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


    render() {
        const rowList=this.state.activityList?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>
                        <img src={"/image/"+activity.activityImg} alt="活动图片" 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({
                               activity:this.loadActivityWithId(activity.activityId),
                               openActivity:true
                           })} className="mr-2">查看活动详情</Button>
                           <Button variant="primary" >帮助</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}

                {this.state.activity?<MyDialog content={<Activity activity={this.state.activity} showButton={true} applyFunction={(activeId:number)=>this.applyActivity(activeId)} />}
                                               open={this.state.openActivity} titleId="view-active" menuName="活动详情"
                                               onClose={()=>this.setState({activity:undefined,openActivity:false})}/>:null}

                <MyDialog content={this.state.result} open={this.state.result!==null} titleId="find-activity-tip" menuName="发布求助信息反馈" onClose={()=>this.setState({result:null})}/>

            </Container>
        )
    }
}