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.
170 lines
6.9 KiB
170 lines
6.9 KiB
import React from "react";
|
|
import {Button, Card, Col, Container, ListGroup, Row} from "react-bootstrap";
|
|
|
|
import {Page} from "../ui/Page";
|
|
import {ActiveDetail, BaseHelp, PageProps} from "../entity";
|
|
import {MyDialog} from "../ui/MyDialog";
|
|
import {Active} from "../ui/Active";
|
|
|
|
/**
|
|
* 首页
|
|
*/
|
|
export class IndexMenu extends React.Component<{ user:string },
|
|
{
|
|
activeList:Array<Array<BaseHelp>>;
|
|
page:PageProps;
|
|
active?:ActiveDetail;
|
|
openActive:boolean;
|
|
}>{
|
|
|
|
|
|
|
|
constructor(props: Readonly<any>) {
|
|
super(props);
|
|
|
|
this.state={
|
|
activeList:[],
|
|
page:{
|
|
currentPage:1,
|
|
totalPage:3,
|
|
pageSize:9
|
|
},
|
|
openActive:false
|
|
}
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.loadActive(1)
|
|
}
|
|
|
|
/**
|
|
* 报名活动
|
|
* @param activeId
|
|
*/
|
|
applyActive(activeId:number){
|
|
console.debug("报名活动"+activeId)
|
|
}
|
|
|
|
/**
|
|
* 查找活动
|
|
* @param activeId
|
|
*/
|
|
loadActiveWithId(activeId:number):ActiveDetail{
|
|
return {
|
|
activeId:123,
|
|
activeImg:"logo512.png",
|
|
content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容",
|
|
title: "标题标题标题标题标题标题标题",
|
|
activeEndTime:new Date().getTime(),
|
|
activeStartTime:new Date().getTime()
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 加载活动列表
|
|
* @param page
|
|
*/
|
|
loadActive(page:number){
|
|
this.setState({
|
|
activeList:[[{
|
|
activeId: 123,
|
|
//活动标题
|
|
title: "活动标题",
|
|
//活动内容
|
|
content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容",
|
|
//活动图片
|
|
activeImg: "/logo512.png"
|
|
},{
|
|
activeId: 123,
|
|
//活动标题
|
|
title: "活动标题",
|
|
//活动内容
|
|
content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容",
|
|
//活动图片
|
|
activeImg: "/logo512.png"
|
|
},{
|
|
activeId: 123,
|
|
//活动标题
|
|
title: "活动标题",
|
|
//活动内容
|
|
content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容",
|
|
//活动图片
|
|
activeImg: "/logo512.png"
|
|
}],[{
|
|
activeId: 123,
|
|
//活动标题
|
|
title: "活动标题",
|
|
//活动内容
|
|
content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容",
|
|
//活动图片
|
|
activeImg: "/logo512.png"
|
|
},{
|
|
activeId: 123,
|
|
//活动标题
|
|
title: "活动标题",
|
|
//活动内容
|
|
content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容",
|
|
//活动图片
|
|
activeImg: "/logo512.png"
|
|
},{
|
|
activeId: 123,
|
|
//活动标题
|
|
title: "活动标题",
|
|
//活动内容
|
|
content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容",
|
|
//活动图片
|
|
activeImg: "/logo512.png"
|
|
}]]
|
|
})
|
|
}
|
|
|
|
|
|
render() {
|
|
const rowList=this.state.activeList.map((actives:Array<BaseHelp>, index:number)=>
|
|
<Row className="p-3" key={"row"+index}>{actives.map((active:BaseHelp, subIndex:number)=>
|
|
<Col className="col-4" key={"col"+subIndex}>
|
|
<Card>
|
|
<Card.Header>
|
|
<img src={active.activeImg} alt="活动图片" className="activeImage"/>
|
|
</Card.Header>
|
|
<Card.Body>
|
|
<ListGroup>
|
|
<ListGroup.Item className="bg-info" style={{color:"white",fontWeight:"bold"}}>
|
|
{active.title}
|
|
</ListGroup.Item>
|
|
<ListGroup.Item>
|
|
<p className="active-text-limit text-ellipsis">{active.content}</p>
|
|
</ListGroup.Item>
|
|
</ListGroup>
|
|
</Card.Body>
|
|
<Card.Footer>
|
|
<Button variant={"info"} onClick={()=>this.setState({
|
|
active:this.loadActiveWithId(active.activeId),
|
|
openActive:true
|
|
})} className="mr-2">查看活动详情</Button>
|
|
<Button variant="primary" >帮助</Button>
|
|
</Card.Footer>
|
|
</Card>
|
|
</Col>)}
|
|
</Row>
|
|
)
|
|
|
|
return (
|
|
|
|
<Container className="p-5">
|
|
<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.loadActive(page)} currentPage={this.state.page.currentPage} totalPage={this.state.page.totalPage} pageSize={this.state.page.pageSize}/>
|
|
|
|
{this.state.active?<MyDialog content={<Active active={this.state.active} showButton={true} applyFunction={(activeId:number)=>this.applyActive(activeId)} />}
|
|
open={this.state.openActive} titleId="view-active" menuName="活动详情"
|
|
onClose={()=>this.setState({active:undefined,openActive:false})}/>:null}
|
|
|
|
</Container>
|
|
)
|
|
}
|
|
}
|
|
|