From 99662c7ba334504110fed0a1315d89f6b9c399d9 Mon Sep 17 00:00:00 2001
From: pan <1029559041@qq.com>
Date: Thu, 21 May 2020 02:14:34 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BF=97=E6=84=BF=E8=80=85=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Main.tsx                   |  12 ++-
 src/Page.tsx                   |   8 +-
 src/bootstrap/InputGroup.tsx   |   2 +-
 src/bootstrap/LoginFormDesc.ts |   3 +
 src/entity.ts                  |  30 ++++++
 src/sub/IndexMenu.tsx          |  12 +--
 src/sub/Volunteer.tsx          | 182 +++++++++++++++++++++++++++++++++
 7 files changed, 235 insertions(+), 14 deletions(-)
 create mode 100644 src/sub/Volunteer.tsx

diff --git a/src/Main.tsx b/src/Main.tsx
index f7deaa3..861c4c5 100644
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import {Navbar,Nav,Dropdown} from "react-bootstrap";
 import {IndexMenu} from "./sub/IndexMenu";
+import {Volunteer} from "./sub/Volunteer";
 
 /**
  * 菜单标记
@@ -51,6 +52,11 @@ export class Main extends React.Component<any, any>{
                 this.setState({
                     subMenu:<IndexMenu/>
                 });break;
+            case Menu.volunteer:
+                this.setState({
+                    subMenu:<Volunteer/>
+                });break;
+
         }
     }
 
@@ -61,13 +67,13 @@ export class Main extends React.Component<any, any>{
                     <Navbar.Brand>互联网+互助平台</Navbar.Brand>
                     <Nav variant="pills" defaultActiveKey="index" className="w-100">
                         <Nav.Item className="col-2">
-                            <Nav.Link eventKey="index" style={this.getMenuColor(Menu.index)} onClick={()=>this.setState({menu:Menu.index})}>首页</Nav.Link>
+                            <Nav.Link eventKey="index" style={this.getMenuColor(Menu.index)} onClick={()=>this.changeMenu(Menu.index)}>首页</Nav.Link>
                         </Nav.Item>
                         <Nav.Item className="col-2">
-                            <Nav.Link eventKey="volunteer" style={this.getMenuColor(Menu.volunteer)} onClick={()=>this.setState({menu:Menu.volunteer})}>志愿者</Nav.Link>
+                            <Nav.Link eventKey="volunteer" style={this.getMenuColor(Menu.volunteer)} onClick={()=>this.changeMenu(Menu.volunteer)}>志愿者</Nav.Link>
                         </Nav.Item>
                         <Nav.Item className="col-2">
-                            <Nav.Link eventKey="myHelp" style={this.getMenuColor(Menu.myHelp)} onClick={()=>this.setState({menu:Menu.myHelp})}>我的求助</Nav.Link>
+                            <Nav.Link eventKey="myHelp" style={this.getMenuColor(Menu.myHelp)} onClick={()=>this.changeMenu(Menu.myHelp)}>我的求助</Nav.Link>
                         </Nav.Item>
 
                         <Dropdown>
diff --git a/src/Page.tsx b/src/Page.tsx
index cf3dc40..576981a 100644
--- a/src/Page.tsx
+++ b/src/Page.tsx
@@ -10,11 +10,11 @@ export class Page extends React.Component<PageForm, PageForm>{
     render() {
         return (
             <Pagination className="justify-content-center">
-                {this.props.currentPage===1?<Pagination.First disabled/>:<Pagination.First/>}
-                {this.props.currentPage>1?<Pagination.Prev/>:<Pagination.Prev disabled/>}
+                {this.props.currentPage===1?<Pagination.First disabled/>:<Pagination.First onClick={()=>this.props.onClick(1)}/>}
+                {this.props.currentPage>1?<Pagination.Prev onClick={()=>this.props.onClick(this.props.currentPage-1)}/>:<Pagination.Prev disabled/>}
                 <Pagination.Item active>{this.props.currentPage}</Pagination.Item>
-                {this.props.currentPage<this.props.totalPage?<Pagination.Next/>:<Pagination.Next disabled/>}
-                {this.props.currentPage===this.props.totalPage?<Pagination.Last disabled/>:<Pagination.Last/>}
+                {this.props.currentPage<this.props.totalPage?<Pagination.Next onClick={()=>this.props.onClick(this.props.currentPage+1)}/>:<Pagination.Next disabled/>}
+                {this.props.currentPage===this.props.totalPage?<Pagination.Last disabled/>:<Pagination.Last onClick={()=>this.props.onClick(this.props.totalPage)}/>}
             </Pagination>
         );
     }
diff --git a/src/bootstrap/InputGroup.tsx b/src/bootstrap/InputGroup.tsx
index e732857..cb9e188 100644
--- a/src/bootstrap/InputGroup.tsx
+++ b/src/bootstrap/InputGroup.tsx
@@ -27,7 +27,7 @@ export class Input extends React.Component<InputFormDesc, any>{
 
     render() {
         return (
-            <InputGroup className="col-7 ml-auto mr-auto mt-3">
+            <InputGroup className={"col-"+(this.props.col||7)+" ml-auto mr-auto mt-3"}>
                 <InputGroup.Prepend>
                     <InputGroup.Text id={this.props.name}>{this.props.desc}</InputGroup.Text>
                 </InputGroup.Prepend>
diff --git a/src/bootstrap/LoginFormDesc.ts b/src/bootstrap/LoginFormDesc.ts
index 811a15f..404e202 100644
--- a/src/bootstrap/LoginFormDesc.ts
+++ b/src/bootstrap/LoginFormDesc.ts
@@ -1,3 +1,4 @@
+
 /**
  * 文本输入框组件封装
  */
@@ -20,4 +21,6 @@ export interface InputFormDesc {
         valid?:String;
         invalid?:String;
     }
+    //bootstrap col
+    col?:number
 }
diff --git a/src/entity.ts b/src/entity.ts
index 480a5ea..f140a06 100644
--- a/src/entity.ts
+++ b/src/entity.ts
@@ -12,6 +12,34 @@ export interface ActiveForm {
     activeImg:string;
 }
 
+/**
+ * 地点信息
+ */
+export interface AddressForm {
+    //地点
+    address:string;
+}
+
+/**
+ *志愿者信息
+ */
+export interface VolunteerForm {
+   //个人描述
+    desc:string;
+    //姓名
+    name:string;
+    //性别
+    sex:string;
+    //年龄
+    age:number;
+    //联系电话
+    phone:number;
+    //邮箱
+    mail:string;
+    //服务地点
+    address:string;
+}
+
 /**
  * 分页信息
  */
@@ -22,4 +50,6 @@ export interface PageForm {
     totalPage:number;
     //分页大小
     pageSize:number;
+    //分页点击事件
+    onClick:Function;
 }
diff --git a/src/sub/IndexMenu.tsx b/src/sub/IndexMenu.tsx
index 335624c..6650f02 100644
--- a/src/sub/IndexMenu.tsx
+++ b/src/sub/IndexMenu.tsx
@@ -23,10 +23,10 @@ export class IndexMenu extends React.Component<any, any>{
     }
 
     componentDidMount() {
-        this.loadActive()
+        this.loadActive(1)
     }
 
-    loadActive(){
+    loadActive(page:number){
         this.setState({
             activeList:[[{
                 activeId: 123,
@@ -110,13 +110,13 @@ export class IndexMenu extends React.Component<any, any>{
         return (
 
             <Container className="p-5">
-                <Page  currentPage={this.state.page.currentPage} totalPage={this.state.page.totalPage} pageSize={this.state.page.pageSize}/>
+                <Page onClick={(page:number)=>this.loadActive(page)} currentPage={this.state.page.currentPage} totalPage={this.state.page.totalPage} pageSize={this.state.page.pageSize}/>
+
 
-                <div>
                     {rowList}
-                </div>
 
-                <Page  currentPage={this.state.page.currentPage} totalPage={this.state.page.totalPage} pageSize={this.state.page.pageSize}/>
+
+                <Page onClick={(page:number)=>this.loadActive(page)}  currentPage={this.state.page.currentPage} totalPage={this.state.page.totalPage} pageSize={this.state.page.pageSize}/>
 
             </Container>
         )
diff --git a/src/sub/Volunteer.tsx b/src/sub/Volunteer.tsx
new file mode 100644
index 0000000..34cba85
--- /dev/null
+++ b/src/sub/Volunteer.tsx
@@ -0,0 +1,182 @@
+import React from "react";
+import {Dropdown,Button,Container,Row,Col,Card,Table} from "react-bootstrap";
+import {Input} from "../bootstrap/InputGroup";
+import {AddressForm, VolunteerForm} from "../entity";
+import {Page} from "../Page";
+/**
+ * 志愿者信息
+ */
+export class Volunteer extends React.Component<any, any>{
+
+
+    constructor(props: Readonly<any>) {
+        super(props);
+
+        this.state={
+            form:{
+                keyword:"",
+                address:"请选择服务地点"
+            },
+            addressList:[
+                {
+                    address:"北京",
+                },
+                {
+                    address:"广州",
+                },
+                {
+                    address:"上海",
+                }
+            ],
+            volunteerList:[],
+            page:{
+                currentPage:1,
+                totalPage:3,
+                pageSize:9
+            }
+        }
+    }
+
+    componentDidMount() {
+        this.loadVolunteerList(1)
+    }
+
+    /**
+     * 加载志愿者列表
+     */
+    loadVolunteerList(page:number){
+        this.setState({
+            volunteerList:[[
+                {
+                    //个人描述
+                    desc:"个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述",
+                    //姓名
+                    name:"张三",
+                    //性别
+                    sex:"男",
+                    //年龄
+                    age:17,
+                    //联系电话
+                    phone:15920722180,
+                    //邮箱
+                    mail:"admin@qq.com",
+                    //服务地点
+                    address:"广州"
+                },
+                {
+                    //个人描述
+                    desc:"个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述",
+                    //姓名
+                    name:"张三",
+                    //性别
+                    sex:"男",
+                    //年龄
+                    age:17,
+                    //联系电话
+                    phone:15920722180,
+                    //邮箱
+                    mail:"admin@qq.com",
+                    //服务地点
+                    address:"广州"
+                }
+            ],[
+                {
+                    //个人描述
+                    desc:"个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述",
+                    //姓名
+                    name:"张三",
+                    //性别
+                    sex:"男",
+                    //年龄
+                    age:17,
+                    //联系电话
+                    phone:15920722180,
+                    //邮箱
+                    mail:"admin@qq.com",
+                    //服务地点
+                    address:"广州"
+                },
+                {
+                    //个人描述
+                    desc:"个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述",
+                    //姓名
+                    name:"张三",
+                    //性别
+                    sex:"男",
+                    //年龄
+                    age:17,
+                    //联系电话
+                    phone:15920722180,
+                    //邮箱
+                    mail:"admin@qq.com",
+                    //服务地点
+                    address:"广州"
+                }
+            ]]
+        })
+    }
+
+    render() {
+        return (
+            <div className="p-5">
+
+            <h3>搜索志愿者</h3>
+
+                <Input col={3} name="keyword" desc="描述信息关键字" onChange={(value:string)=>this.setState({form:{
+                     keyword:value,
+                     address:this.state.form.address
+                     }})}/>
+
+                <Dropdown className="mt-3">
+                    <Dropdown.Toggle variant="primary" id="dropdown-basic" className="col-1">
+                        {this.state.form.address}
+                    </Dropdown.Toggle>
+
+                    <Dropdown.Menu>
+                        {this.state.addressList.map((address:AddressForm,index:number)=> <Dropdown.Item key={"dropdown"+index} onClick={()=>this.setState({
+                            form:{
+                                keyword:this.state.form.keyword,
+                                address:address.address
+                            }
+                        })}>{address.address}</Dropdown.Item>)}
+                    </Dropdown.Menu>
+                </Dropdown>
+
+                <Button className="col-1 mt-3 mb-3" variant="info">搜索</Button>
+
+                <Page onClick={(page:number)=>this.loadVolunteerList(page)} currentPage={this.state.page.currentPage} totalPage={this.state.page.totalPage} pageSize={this.state.page.pageSize}/>
+
+                <Container className="p-3">
+                    {this.state.volunteerList.map((volunteers:Array<VolunteerForm>,index:number)=>
+                        <Row className="justify-content-center p-3" key={"row"+index}>{volunteers.map((volunteer:VolunteerForm,subIndex:number)=>
+                            <Col key={"col"+subIndex} className="col-5">
+                                <Card>
+                                    <Card.Header>志愿者个人简介</Card.Header>
+                                    <Card.Body>
+                                        <p>{volunteer.desc}</p>
+                                    </Card.Body>
+                                    <Card.Footer>
+                                        <Table  bordered hover variant="light">
+                                            <tbody>
+                                                <tr>
+                                                    <td className="border-dark">{volunteer.name}</td><td className="border-dark">{volunteer.sex}</td><td className="border-dark">{volunteer.age}</td>
+                                                </tr>
+                                                <tr>
+                                                    <td className="border-dark">{volunteer.phone}</td><td className="border-dark">{volunteer.mail}</td><td className="border-dark">{volunteer.address}</td>
+                                                </tr>
+                                            </tbody>
+                                        </Table>
+                                    </Card.Footer>
+                                </Card>
+                            </Col>
+                        )}</Row>
+                    )}
+                </Container>
+
+                <Page onClick={(page:number)=>this.loadVolunteerList(page)} currentPage={this.state.page.currentPage} totalPage={this.state.page.totalPage} pageSize={this.state.page.pageSize}/>
+
+            </div>
+
+        )
+    }
+}