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.
 
 
 
 
help_user/src/sub/IndexMenu.tsx

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