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.
191 lines
7.5 KiB
191 lines
7.5 KiB
import React from "react";
|
|
import {Button, Card, Col, Container, Row, 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<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
|
|
}})}/>
|
|
|
|
{/*<InputGroup className="mt-3 col-3 ml-auto mr-auto">*/}
|
|
{/* <InputGroup.Prepend>*/}
|
|
{/* <InputGroup.Text>请选择服务地点</InputGroup.Text>*/}
|
|
{/* </InputGroup.Prepend>*/}
|
|
{/* <Form.Control as="select" custom value={this.state.form.address} onChange={(e)=>this.setState({*/}
|
|
{/* form:{*/}
|
|
{/* keyword:this.state.form.keyword,*/}
|
|
{/* address:e.target.value*/}
|
|
{/* }*/}
|
|
{/* })}>*/}
|
|
{/* {this.state.addressList.map((address:AddressProps, index:number)=>*/}
|
|
{/* <option key={"option"+index} value={address.address} >{address.address}</option>*/}
|
|
{/* )}*/}
|
|
{/* </Form.Control>*/}
|
|
{/*</InputGroup>*/}
|
|
<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}/>
|
|
|
|
<Container className="p-3">
|
|
{this.state.volunteerList.map((volunteers:Array<VolunteerProps>, index:number)=>
|
|
<Row className="justify-content-center p-3" key={"row"+index}>{volunteers.map((volunteer:VolunteerProps, 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>
|
|
|
|
)
|
|
}
|
|
}
|
|
|