From bff7c0dec863c2b98029cf44853b496522d0e9be Mon Sep 17 00:00:00 2001 From: pan <1029559041@qq.com> Date: Sat, 23 May 2020 23:16:21 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E4=B8=AA=E4=BA=BA=E4=BF=A1?= =?UTF-8?q?=E6=81=AF-=E6=88=91=E7=9A=84=E6=B1=82=E5=8A=A9=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.test.tsx | 2 +- src/App.tsx | 2 +- src/Main.tsx | 3 +- src/account/Login.tsx | 12 +-- src/account/Register.tsx | 13 +-- src/bootstrap/InputGroup.tsx | 2 +- src/entity.ts | 52 +++++++++--- src/index.css | 4 + src/my/CloseDialog.tsx | 23 ++++++ src/my/MyDialog.tsx | 34 +++----- src/my/MyHelp.tsx | 4 +- src/my/SeekHelp.tsx | 150 +++++++++++++++++++++++++++++++++-- src/sub/IndexMenu.tsx | 3 +- src/sub/Volunteer.tsx | 3 +- 14 files changed, 247 insertions(+), 60 deletions(-) create mode 100644 src/my/CloseDialog.tsx diff --git a/src/App.test.tsx b/src/App.test.tsx index 9503280..8b7fa31 100644 --- a/src/App.test.tsx +++ b/src/App.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { render } from '@testing-library/react'; +import {render} from '@testing-library/react'; import App from './App'; test('renders learn react link', () => { diff --git a/src/App.tsx b/src/App.tsx index 679cd9a..cd30dae 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,7 +2,7 @@ import React from 'react'; import './App.css'; import 'bootstrap/dist/css/bootstrap.min.css'; import {Login} from './account/Login'; -import { withCookies } from 'react-cookie'; +import {withCookies} from 'react-cookie'; import {Main} from "./Main"; import {Register} from "./account/Register"; import {user_cookie} from "./account/PropCookie"; diff --git a/src/Main.tsx b/src/Main.tsx index 32aa4dc..466ae40 100644 --- a/src/Main.tsx +++ b/src/Main.tsx @@ -1,5 +1,5 @@ import React from "react"; -import {Navbar,Nav,Dropdown} from "react-bootstrap"; +import {Dropdown, Nav, Navbar} from "react-bootstrap"; import {IndexMenu} from "./sub/IndexMenu"; import {Volunteer} from "./sub/Volunteer"; import {MyHelp} from "./sub/MyHelp"; @@ -7,6 +7,7 @@ import {MyFriend} from "./my/MyFriend"; import {MyDialog} from "./my/MyDialog"; import {MyLeaveWord} from "./my/MyLeaveWord"; import {MyMessage} from "./my/MyMessage"; + /** * 菜单标记 */ diff --git a/src/account/Login.tsx b/src/account/Login.tsx index 8b83301..759cc02 100644 --- a/src/account/Login.tsx +++ b/src/account/Login.tsx @@ -1,5 +1,5 @@ import React from "react"; -import {Button} from 'react-bootstrap' +import {Button, Form} from 'react-bootstrap' import {LoginProps, LoginState} from "./LoginProps"; import {Input} from "../bootstrap/InputGroup"; @@ -22,13 +22,15 @@ export class Login extends React.Component{ return (
- {this.setState({user:value})}}/> +
+ {this.setState({user:value})}}/> - {this.setState({password:value})}}/> + {this.setState({password:value})}}/> - + - + +
); diff --git a/src/account/Register.tsx b/src/account/Register.tsx index 4cf62c7..977caef 100644 --- a/src/account/Register.tsx +++ b/src/account/Register.tsx @@ -1,7 +1,8 @@ import React from "react"; import {RegisterProps, RegisterState} from "./RegisterProps"; import {Input} from "../bootstrap/InputGroup"; -import {Button} from 'react-bootstrap' +import {Button, Form} from 'react-bootstrap' + /** * 注册 */ @@ -24,13 +25,15 @@ export class Register extends React.Component{ return (
- {this.setState({user:value})}}/> +
+ {this.setState({user:value})}}/> - {this.setState({password:value})}}/> + {this.setState({password:value})}}/> - + - + +
); diff --git a/src/bootstrap/InputGroup.tsx b/src/bootstrap/InputGroup.tsx index 999a0cf..c4b11df 100644 --- a/src/bootstrap/InputGroup.tsx +++ b/src/bootstrap/InputGroup.tsx @@ -1,5 +1,5 @@ import React from "react"; -import {InputGroup,FormControl} from 'react-bootstrap' +import {FormControl, InputGroup} from 'react-bootstrap' import {FormInputProps} from "./LoginFormDesc"; diff --git a/src/entity.ts b/src/entity.ts index 30fcae2..a1c3129 100644 --- a/src/entity.ts +++ b/src/entity.ts @@ -52,20 +52,37 @@ export enum RecommendType { auto="系统推荐" } -/** - * 求助信息 - */ -export interface MyHelpState { +export interface BaseHelp { //活动标题 title:string; //活动内容 content:string; + //活动背景图 + activeImg:string; +} + + + +//我的求助信息 +export interface InfoHelpState extends BaseHelp{ + //求助时间 + time:number; + //活动报名志愿者 + applyVolunteerList:Array; + //活动参加志愿者 + joinVolunteerList:Array; + //活动完成志愿者 + completeVolunteerList:Array; +} + +/** + * 求助信息 + */ +export interface MyHelpState extends BaseHelp{ //开始时间 startTime:string; //结束时间 endTime:string; - //活动背景图 - activeImg:any; //服务地点 address:string; //推荐方式 @@ -80,6 +97,8 @@ export interface MyHelpState { }; } + + /** * 分页信息 */ @@ -94,18 +113,27 @@ export interface PageProps { onClick:Function; } + +export interface BaseDialogProps { + //弹窗名 + menuName:string; + //关闭事件 + onClose:Function; +} + +export interface CloseDialogProps extends BaseDialogProps{ + // + titleId:string; +} + /** * 我的弹窗 */ -export interface MyDialogProps { - //弹窗名 - menuName:string; +export interface MyDialogProps extends BaseDialogProps{ //弹窗内容 content:React.Component; //弹窗状态 open:boolean; - //关闭事件 - onClose:Function; } @@ -142,7 +170,7 @@ export interface User{ } /** - * 个人信息 + * 个人信息编辑修改密码 */ export interface UserEdit extends User{ //编辑模式 diff --git a/src/index.css b/src/index.css index 6c7f263..ac9bb01 100644 --- a/src/index.css +++ b/src/index.css @@ -57,3 +57,7 @@ .my-info-desc{ height: 100px; } + +.seek-help-height{ + height: 400px; +} diff --git a/src/my/CloseDialog.tsx b/src/my/CloseDialog.tsx new file mode 100644 index 0000000..8322062 --- /dev/null +++ b/src/my/CloseDialog.tsx @@ -0,0 +1,23 @@ +import React from "react"; +import {Tooltip} from "@material-ui/core"; +import {CloseDialogProps} from "../entity"; + +/** + * 关闭弹窗 + */ +export class CloseDialog extends React.Component{ + + render() { + return ( +
+ + +

{this.props.menuName}

+ + + 关闭弹窗this.props.onClose()}/> + +
+ ) + } +} diff --git a/src/my/MyDialog.tsx b/src/my/MyDialog.tsx index 860fe3a..acefbad 100644 --- a/src/my/MyDialog.tsx +++ b/src/my/MyDialog.tsx @@ -1,8 +1,9 @@ import React from "react"; import Dialog from "@material-ui/core/Dialog"; import Draggable from "react-draggable"; -import {Paper, Tooltip} from "@material-ui/core"; +import {Paper} from "@material-ui/core"; import {MyDialogProps} from "../entity"; +import {CloseDialog} from "./CloseDialog"; /** * 我的弹窗 @@ -10,42 +11,31 @@ import {MyDialogProps} from "../entity"; export class MyDialog extends React.Component{ + constructor(props: Readonly) { + super(props); + + this.state={ + titleId:"my-dialog" + } + } render() { return ( - + } - aria-labelledby="draggable-dialog-title" + aria-labelledby={this.state.titleId} classes={{paper:"w-100"}} > -
- - -

{this.props.menuName}

- - - 关闭弹窗this.props.onClose()}/> - -
+ this.props.onClose()} titleId={this.state.titleId}/>
{this.props.content}
- - {/**/} - {/* */} - {/* */} - {/**/} ); } diff --git a/src/my/MyHelp.tsx b/src/my/MyHelp.tsx index 6ae9267..d720c44 100644 --- a/src/my/MyHelp.tsx +++ b/src/my/MyHelp.tsx @@ -10,9 +10,7 @@ export class MyHelp extends React.Component{ return ( - - - + 我的求助 ) diff --git a/src/my/SeekHelp.tsx b/src/my/SeekHelp.tsx index ac0d6ff..c3861ef 100644 --- a/src/my/SeekHelp.tsx +++ b/src/my/SeekHelp.tsx @@ -1,18 +1,154 @@ import React from "react"; -import {Col, Container, Row} from "react-bootstrap"; +import {Button, ButtonGroup, Col, Container, Image, ListGroup, Row} from "react-bootstrap"; +import {InfoHelpState, User} from "../entity"; +import moment from "moment"; +import Dialog from "@material-ui/core/Dialog"; +import {CloseDialog} from "./CloseDialog"; +import {Paper, Tooltip} from "@material-ui/core"; +import Draggable from "react-draggable"; + +/** + * 志愿者状态 + */ +enum VolunteerStatus { + apply="报名", + join="参加", + complete="完成" +} + +const titleId="seek-help-dialog" /** * 我的帮助 */ -export class SeekHelp extends React.Component{ +export class SeekHelp extends React.Component, + open:boolean, + status?:VolunteerStatus, + volunteerList?:Array}>{ + + + constructor(props: Readonly) { + super(props); + + this.state={ + data:[], + open:false + } + } + + componentDidMount() { + this.loadHelp() + } + + /** + * 加载我的求助信息 + */ + loadHelp(){ + this.setState({data:[ + { + applyVolunteerList: [{ + headImg:"logo512.png", + userId:"admin", + name:"张三", + age:Math.ceil(Math.random()*100)+1, + mobile:1234567879, + email:"admin@qq.com", + address:"上海高新区", + info:"个人简介", + }, + { + headImg:"logo512.png", + userId:"admin", + name:"李四", + age:Math.ceil(Math.random()*100)+1, + mobile:1234567879, + email:"admin@qq.com", + address:"上海高新区", + info:"个人简介", + }], + completeVolunteerList: [], + joinVolunteerList: [], + activeImg: "logo512.png", + content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容", + time: new Date().getTime(), + title:"活动标题" + }, + { + applyVolunteerList: [], + completeVolunteerList: [], + joinVolunteerList: [], + activeImg: "logo512.png", + content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容", + time: new Date().getTime(), + title:"活动标题" + }, + { + applyVolunteerList: [], + completeVolunteerList: [], + joinVolunteerList: [], + activeImg: "logo512.png", + content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容", + time: new Date().getTime(), + title:"活动标题" + } + ]}) + + console.debug(this.state) + + } render() { return ( - - - 我的帮助 - - +
+ {this.state.data.map((help:InfoHelpState,index:number)=> +
+ + + + + + +
{help.title}
+
{help.content}
+ + + + + {moment(help.time).format("YYYY-MM-DD HH:mm:ss")} + + + + + + + + + + + +
+ )} + + + + + } + aria-labelledby={titleId}> + this.setState({open:false})} titleId={titleId}/> + + {(this.state.volunteerList||[]).map((user:User,index:number)=> + + {user.name} + + 查看用户信息 + + + )} + + +
) } } diff --git a/src/sub/IndexMenu.tsx b/src/sub/IndexMenu.tsx index a24c979..fb86b94 100644 --- a/src/sub/IndexMenu.tsx +++ b/src/sub/IndexMenu.tsx @@ -1,7 +1,8 @@ import React from "react"; -import {Container,Row,Col,Card,ListGroup,Button} from "react-bootstrap"; +import {Button, Card, Col, Container, ListGroup, Row} from "react-bootstrap"; import {ActiveProps} from "../entity"; import {Page} from "../Page"; + /** * 首页 */ diff --git a/src/sub/Volunteer.tsx b/src/sub/Volunteer.tsx index c3e3dc1..0e674ac 100644 --- a/src/sub/Volunteer.tsx +++ b/src/sub/Volunteer.tsx @@ -1,9 +1,10 @@ import React from "react"; -import {Button, Container, Row, Col, Card, Table} from "react-bootstrap"; +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"; + /** * 志愿者信息 */