help_user/src/sub/Volunteer.tsx

import React from "react";
import {Button, Table} from "react-bootstrap";
import {Input} from "../bootstrap/InputGroup";
import {VolunteerProps} from "../entity";
import {Page} from "../Page";
import {Address} from "../Address";

/**
 * 志愿者信息
 */
export class Volunteer extends React.Component<{ undefined?:undefined }, {
    form:{
        keyword:string;
        address:string;
    };
    addressList:Array<{address:string}>;
    volunteerList:Array<Array<VolunteerProps>>;
    page:{
        currentPage:number;
        totalPage:number;
        pageSize:number;
    }
}>{


    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:"广州"
                }
            ],[
                {
                    //个人描述
                    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:"广州"
                }
            ],[
                {
                    //个人描述
                    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:"广州"
                }
            ],[
                {
                    //个人描述
                    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
                     }})}/>

                <Address onChange={(value:string)=>this.setState({
                    form:{
                        keyword:this.state.form.keyword,
                        address:value
                    }
                })}/>

                <Button className="col-1 mt-3 mb-3" variant="info" onClick={()=>console.info(this.state.form)}>搜索</Button>

                {/*<Page onClick={(page:number)=>this.loadVolunteerList(page)} currentPage={this.state.page.currentPage} totalPage={this.state.page.totalPage} pageSize={this.state.page.pageSize}/>*/}


                    {this.state.volunteerList.map((volunteers:Array<VolunteerProps>, index:number)=>
                        <div className="p-3 d-flex ml-auto mr-auto volunteer overflow-auto" key={"row"+index}>{volunteers.map((volunteer:VolunteerProps, subIndex:number)=>
                            <div  key={"col"+subIndex} className="mr-3">
                                    <div className="border-info border">
                                        志愿者个人简介
                                    </div>
                                    <div>
                                        <p className="border-info border m-0">{volunteer.desc}</p>
                                    </div>
                                    <div >
                                        <Table>
                                            <tbody>
                                            {[[volunteer.name,volunteer.sex,volunteer.age],[volunteer.phone,volunteer.mail,volunteer.address]].map((tr,index)=>
                                                <tr key={"tr"+index}>
                                                    {tr.map((td,index)=><td key={"td"+index} className="border border-info">{td}</td>)}
                                                </tr>
                                            )}
                                            </tbody>
                                        </Table>
                                    </div>
                            </div>
                        )}</div>
                    )}


                <Page onClick={(page:number)=>this.loadVolunteerList(page)} currentPage={this.state.page.currentPage} totalPage={this.state.page.totalPage} pageSize={this.state.page.pageSize}/>

            </div>

        )
    }
}