panqihua
/
help_user
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

志愿者界面

Browse Source
master
pan 4 years ago
parent 9846accf96
commit 99662c7ba3
7 changed files with 235 additions and 14 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 12
      src/Main.tsx
  2. 8
      src/Page.tsx
  3. 2
      src/bootstrap/InputGroup.tsx
  4. 3
      src/bootstrap/LoginFormDesc.ts
  5. 30
      src/entity.ts
  6. 12
      src/sub/IndexMenu.tsx
  7. 182
      src/sub/Volunteer.tsx

12
src/Main.tsx
Unescape View File

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

8
src/Page.tsx
Unescape View File

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

2
src/bootstrap/InputGroup.tsx
Unescape View File

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

3
src/bootstrap/LoginFormDesc.ts
Unescape View File

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

30
src/entity.ts
Unescape View File

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

12
src/sub/IndexMenu.tsx
Unescape View File

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

182
src/sub/Volunteer.tsx
Unescape View File

@ -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>
)
}
}
Write Preview
Loading…
Cancel
Save