From 9de602ea25691680bb951ea74ac71792fe85284f Mon Sep 17 00:00:00 2001
From: pan <1029559041@qq.com>
Date: Thu, 21 May 2020 00:43:12 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Main.tsx          |  16 ++++--
 src/entity.ts         |  13 +++++
 src/sub/IndexMenu.tsx | 124 ++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 149 insertions(+), 4 deletions(-)
 create mode 100644 src/entity.ts
 create mode 100644 src/sub/IndexMenu.tsx

diff --git a/src/Main.tsx b/src/Main.tsx
index 4e7b350..f7deaa3 100644
--- a/src/Main.tsx
+++ b/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>
         );
     }
diff --git a/src/entity.ts b/src/entity.ts
new file mode 100644
index 0000000..6b19c07
--- /dev/null
+++ b/src/entity.ts
@@ -0,0 +1,13 @@
+/**
+ * 首页活动列表信息
+ */
+export interface ActiveForm {
+    //活动ID
+    activeId:number;
+    //活动标题
+    title:string;
+    //活动内容
+    content:string;
+    //活动图片
+    activeImg:string;
+}
diff --git a/src/sub/IndexMenu.tsx b/src/sub/IndexMenu.tsx
new file mode 100644
index 0000000..0b3f329
--- /dev/null
+++ b/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>
+        )
+    }
+}