You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
147 lines
5.7 KiB
147 lines
5.7 KiB
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: page===1?res.dataList||[]:(that.state.activityList||[]).concat(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>
|
|
)
|
|
}
|
|
}
|
|
|