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, BaseHelp, PageProps} from "../entity";
import {MyDialog} from "../ui/MyDialog";
import {Activity} from "../ui/Activity";
import {Input} from "../ui/InputGroup";

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



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

        this.state={
            activityList:[],
            page:{
                currentPage:1,
                totalPage:3,
                pageSize:9
            },
            openActivity:false,
            title:""
        }
    }

    componentDidMount() {
        this.loadActivity(1)
    }

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

    /**
     * 查找活动
     * @param activityId
     */
    loadActivityWithId(activityId:number):ActivityDetail{
        return {
            activityId:123,
            activityImg:"logo512.png",
            content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容",
            title: "标题标题标题标题标题标题标题",
            activityEndTime:new Date().getTime(),
            activityStartTime:new Date().getTime()
        }
    }

    /**
     * 加载活动列表
     * @param page
     */
    loadActivity(page:number){
        console.debug("检索活动关键字:"+this.state.title)

        this.setState({
            activityList:[[{
                activityId: 123,
                //活动标题
                title: "活动标题",
                //活动内容
                content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容",
                //活动图片
                activityImg: "/logo512.png"
            },{
                activityId: 123,
                //活动标题
                title: "活动标题",
                //活动内容
                content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容",
                //活动图片
                activityImg: "/logo512.png"
            },{
                activityId: 123,
                //活动标题
                title: "活动标题",
                //活动内容
                content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容",
                //活动图片
                activityImg: "/logo512.png"
            }],[{
                activityId: 123,
                //活动标题
                title: "活动标题",
                //活动内容
                content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容",
                //活动图片
                activityImg: "/logo512.png"
            },{
                activityId: 123,
                //活动标题
                title: "活动标题",
                //活动内容
                content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容",
                //活动图片
                activityImg: "/logo512.png"
            },{
                activityId: 123,
                //活动标题
                title: "活动标题",
                //活动内容
                content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容",
                //活动图片
                activityImg: "/logo512.png"
            }]]
        })
    }


    render() {
        const rowList=this.state.activityList.map((activities:Array<BaseHelp>, index:number)=>
           <Row className="p-3" key={"row"+index}>{activities.map((activity:BaseHelp, subIndex:number)=>
               <Col className="col-4" key={"col"+subIndex}>
                   <Card>
                       <Card.Header>
                        <img src={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>
        )

        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}


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

                {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}

            </Container>
        )
    }
}