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.
190 lines
6.9 KiB
190 lines
6.9 KiB
import React from "react";
|
|
import {Button, Card, Col, Container, Image, ListGroup, Row} from "react-bootstrap";
|
|
|
|
import {Page} from "../ui/Page";
|
|
import {ActivityDetail, PageProps, VolunteerStatus} from "../entity";
|
|
import {MyDialog} from "../ui/MyDialog";
|
|
import {Activity} from "../ui/Activity";
|
|
import {Input} from "../ui/InputGroup";
|
|
import {API, JSONResponse, Method, prefix, request} from "../interface";
|
|
import {
|
|
ActivityDetailRes,
|
|
ActivityDetailTransform,
|
|
EmptyBodyTransform,
|
|
FindActivityRes,
|
|
FindActivityTransform,
|
|
PageDataMessage,
|
|
SimpleMessage
|
|
} 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 活动id
|
|
*/
|
|
apply(activityId:number){
|
|
console.debug("报名id"+activityId)
|
|
|
|
let that=this
|
|
|
|
request(API.main.activity.apply,Method.POST,{
|
|
activityId:activityId+"",
|
|
activityStatus:VolunteerStatus.join.toString()
|
|
},new EmptyBodyTransform(),function (res:JSONResponse<SimpleMessage>) {
|
|
switch (res.customResult) {
|
|
case SimpleMessage.ok:
|
|
that.setState({
|
|
result:<h3 className="text-info text-center">报名成功</h3>
|
|
});break
|
|
case SimpleMessage.fail:
|
|
that.setState({
|
|
result:<h3 className="text-danger text-center">报名失败,请联系管理员</h3>
|
|
});break
|
|
}
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 查找活动
|
|
* @param activityId
|
|
*/
|
|
loadActivityWithId(activityId:number){
|
|
console.debug("activityId="+activityId)
|
|
|
|
let that=this
|
|
request(API.main.activity.find+"/"+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({
|
|
openActivity:true,
|
|
activity:res.activity
|
|
});break;
|
|
}
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 加载活动列表
|
|
* @param page
|
|
*/
|
|
loadActivity(page:number){
|
|
console.debug("检索活动关键字:"+this.state.title)
|
|
let that=this
|
|
request(API.main.activity.find+'?title='+this.state.title+"¤tPage="+page,Method.GET, {},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({
|
|
page:res.page,
|
|
result:<h3 className="text-info text-center">当前没有活动记录!!!</h3>
|
|
});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>
|
|
<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.loadActivityWithId(activity.activityId)} className="mr-2">查看活动详情</Button>
|
|
<Button variant="primary" onClick={()=>this.apply(activity.activityId)}>帮助</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>
|
|
)
|
|
}
|
|
}
|
|
|