You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
121 lines
4.0 KiB
121 lines
4.0 KiB
import React from "react";
|
|
import {Button, Table} from "react-bootstrap";
|
|
import {Input} from "../ui/InputGroup";
|
|
import {PageProps, User} from "../entity";
|
|
import {Page} from "../ui/Page";
|
|
import {Address} from "../ui/Address";
|
|
import {userObj} from "../ui/TestData";
|
|
|
|
/**
|
|
* 志愿者信息
|
|
*/
|
|
export class Volunteer extends React.Component<{ undefined?:undefined }, {
|
|
form:{
|
|
keyword:string;
|
|
address:string;
|
|
};
|
|
addressList:Array<{address:string}>;
|
|
volunteerList:Array<Array<User>>;
|
|
page:PageProps;
|
|
}>{
|
|
|
|
|
|
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){
|
|
|
|
const array=[userObj,userObj,userObj,userObj]
|
|
|
|
this.setState({
|
|
volunteerList:[array,array,array,array]
|
|
})
|
|
}
|
|
|
|
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<User>, index:number)=>
|
|
<div className="p-3 d-flex ml-auto mr-auto volunteer overflow-auto" key={"row"+index}>{volunteers.map((volunteer:User, subIndex:number)=>
|
|
<div key={"col"+subIndex} className="mr-3">
|
|
<div className="border-info border">
|
|
志愿者个人简介
|
|
</div>
|
|
<div>
|
|
<p className="border-info border m-0">{volunteer.info}</p>
|
|
</div>
|
|
<div >
|
|
<Table>
|
|
<tbody>
|
|
{[[volunteer.name,volunteer.sex,volunteer.age],[volunteer.mobile,volunteer.email,volunteer.serviceAddress]].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>
|
|
|
|
)
|
|
}
|
|
}
|
|
|