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.
182 lines
7.0 KiB
182 lines
7.0 KiB
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>
|
|
|
|
)
|
|
}
|
|
}
|
|
|