志愿者界面

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>

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.First disabled/>:<Pagination.First onClick={()=>this.props.onClick(1)}/>}
-                {this.props.currentPage>1?<Pagination.Prev/>:<Pagination.Prev disabled/>}
+                {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.Next onClick={()=>this.props.onClick(this.props.currentPage+1)}/>:<Pagination.Next disabled/>}
-                {this.props.currentPage===this.props.totalPage?<Pagination.Last disabled/>:<Pagination.Last/>}
+                {this.props.currentPage===this.props.totalPage?<Pagination.Last disabled/>:<Pagination.Last onClick={()=>this.props.onClick(this.props.totalPage)}/>}
             </Pagination>
         );
     }

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>

src/bootstrap/LoginFormDesc.ts

@@ -1,3 +1,4 @@
+
 /**
  * 文本输入框组件封装
  */
@@ -20,4 +21,6 @@ export interface InputFormDesc {
         valid?:String;
         invalid?:String;
     }
+    //bootstrap col
+    col?:number
 }

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

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

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