首页

src/Main.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import {Navbar,Nav,Dropdown} from "react-bootstrap";
+import {IndexMenu} from "./sub/IndexMenu";
 
 /**
  * 菜单标记
@@ -19,7 +20,8 @@ export class Main extends React.Component<any, any>{
         super(props);
         //默认菜单
         this.state={
-            menu:Menu.index
+            menu:Menu.index,
+            subMenu:<IndexMenu/>
         }
     }
 
@@ -36,7 +38,6 @@ export class Main extends React.Component<any, any>{
                 backgroundColor: "white"
             }
         }
-        // return this.state.menu===menu?"black":"blue"
     }
 
     //切换菜单
@@ -44,6 +45,13 @@ export class Main extends React.Component<any, any>{
         this.setState({
             menu:menu
         })
+
+        switch (menu) {
+            case Menu.index:
+                this.setState({
+                    subMenu:<IndexMenu/>
+                });break;
+        }
     }
 
     render() {
@@ -78,9 +86,9 @@ export class Main extends React.Component<any, any>{
 
                         <Navbar.Brand className="ml-3">等待接受帮助</Navbar.Brand>
                     </Nav>
-
-
                 </Navbar>
+
+                {this.state.subMenu}
             </div>
         );
     }

src/entity.ts

@@ -0,0 +1,13 @@
+/**
+ * 首页活动列表信息
+ */
+export interface ActiveForm {
+    //活动ID
+    activeId:number;
+    //活动标题
+    title:string;
+    //活动内容
+    content:string;
+    //活动图片
+    activeImg:string;
+}

src/sub/IndexMenu.tsx

@@ -0,0 +1,124 @@
+import React from "react";
+import {Container,Row,Col,Card,ListGroup,Button,Pagination} from "react-bootstrap";
+import {ActiveForm} from "../entity";
+/**
+ * 首页
+ */
+export class IndexMenu extends React.Component<any, any>{
+
+
+
+    constructor(props: Readonly<any>) {
+        super(props);
+
+        this.state={
+            activeList:[],
+            page:{
+                currentPage:1,
+                totalPage:1
+            }
+        }
+    }
+
+    componentDidMount() {
+        this.loadActive()
+    }
+
+    loadActive(){
+        this.setState({
+            activeList:[[{
+                activeId: 123,
+                //活动标题
+                title: "活动标题",
+                //活动内容
+                content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容",
+                //活动图片
+                activeImg: "https://www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg"
+            },{
+                activeId: 123,
+                //活动标题
+                title: "活动标题",
+                //活动内容
+                content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容",
+                //活动图片
+                activeImg: "https://www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg"
+            },{
+                activeId: 123,
+                //活动标题
+                title: "活动标题",
+                //活动内容
+                content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容",
+                //活动图片
+                activeImg: "https://www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg"
+            }],[{
+                activeId: 123,
+                //活动标题
+                title: "活动标题",
+                //活动内容
+                content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容",
+                //活动图片
+                activeImg: "https://www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg"
+            },{
+                activeId: 123,
+                //活动标题
+                title: "活动标题",
+                //活动内容
+                content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容",
+                //活动图片
+                activeImg: "https://www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg"
+            },{
+                activeId: 123,
+                //活动标题
+                title: "活动标题",
+                //活动内容
+                content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容",
+                //活动图片
+                activeImg: "https://www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg"
+            }]]
+        })
+    }
+
+
+    render() {
+        const rowList=this.state.activeList.map((actives:Array<ActiveForm>,index:number)=>
+           <Row className="p-3" key={"row"+index}>{actives.map((active:ActiveForm,subIndex:number)=>
+               <Col className="col-4" key={"col"+subIndex}>
+                   <Card>
+                       <Card.Header>
+                        <img src={active.activeImg} alt="活动图片" style={{width:"100px",height:"100px"}}/>
+                       </Card.Header>
+                       <Card.Body>
+                          <ListGroup>
+                              <ListGroup.Item className="bg-info" style={{color:"white",fontWeight:"bold"}}>
+                                  {active.title}
+                              </ListGroup.Item>
+                              <ListGroup.Item>
+                                  <p>{active.content}</p>
+                              </ListGroup.Item>
+                          </ListGroup>
+                       </Card.Body>
+                       <Card.Footer>
+                           <Button variant="primary" className="w-100">帮助</Button>
+                       </Card.Footer>
+                   </Card>
+               </Col>)}
+           </Row>
+        )
+
+        return (
+            <Container className="p-5">
+                <div>
+                    {rowList}
+                </div>
+
+                <Pagination className="justify-content-center">
+                    {this.state.page.currentPage===1?<Pagination.First disabled/>:<Pagination.First/>}
+                    {this.state.page.currentPage-1>0?<Pagination.Prev/>:<Pagination.Prev disabled/>}
+                    <Pagination.Item active>{this.state.page.currentPage}</Pagination.Item>
+                    {this.state.page.currentPage+1<this.state.page.totalPage?<Pagination.Next/>:<Pagination.Next disabled/>}
+                    {this.state.page.currentPage===this.state.page.totalPage?<Pagination.Last disabled/>:<Pagination.Last/>}
+                </Pagination>
+            </Container>
+        )
+    }
+}