添加个人信息-我的求助页面

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";
+
 /**
  * 菜单标记
  */

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,6 +22,7 @@ export class Login extends React.Component<LoginProps, LoginState>{
         return (
             <div className="d-flex align-items-center" style={{height:window.screen.availHeight+'px'}}>
                 <div className="container">
+                    <Form>
                         <Input name="user" type="text" desc="用户账号" value={this.state.user} onChange={(value: string)=>{this.setState({user:value})}}/>
 
                         <Input name="password" type="password" desc="用户密码" value={this.state.password}  onChange={(value: string)=>{this.setState({password:value})}}/>
@@ -29,6 +30,7 @@ export class Login extends React.Component<LoginProps, LoginState>{
                         <Button variant="success" className="mt-3 col-2 mr-3"  onClick={()=>this.props.login(this.state.user,this.state.password)}>登录</Button>
 
                         <Button variant="info" className="mt-3 col-2"  onClick={()=>this.props.toRegister()}>跳转到注册</Button>
+                    </Form>
                 </div>
             </div>
         );

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,6 +25,7 @@ export class Register extends React.Component<RegisterProps, RegisterState>{
         return (
             <div className="d-flex align-items-center" style={{height:window.screen.availHeight+'px'}}>
                 <div className="container">
+                    <Form>
                         <Input name="user" type="text" desc="用户账号" value={this.state.user} onChange={(value: string)=>{this.setState({user:value})}}/>
 
                         <Input name="password" type="password" desc="用户密码" value={this.state.password}  onChange={(value: string)=>{this.setState({password:value})}}/>
@@ -31,6 +33,7 @@ export class Register extends React.Component<RegisterProps, RegisterState>{
                         <Button variant="success" className="mt-3 col-2 mr-3"  onClick={()=>this.register()}>注册</Button>
 
                         <Button variant="info" className="mt-3 col-2"  onClick={()=>this.props.toLogin()}>返回登陆</Button>
+                    </Form>
                 </div>
             </div>
         );

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";
 
 

src/entity.ts

@@ -52,20 +52,37 @@ export enum RecommendType {
     auto="系统推荐"
 }
 
-/**
+export interface BaseHelp {
- * 求助信息
- */
-export interface MyHelpState {
     //活动标题
     title:string;
     //活动内容
     content:string;
+    //活动背景图
+    activeImg:string;
+}
+
+
+
+//我的求助信息
+export interface InfoHelpState extends BaseHelp{
+    //求助时间
+    time:number;
+    //活动报名志愿者
+    applyVolunteerList:Array<User>;
+    //活动参加志愿者
+    joinVolunteerList:Array<User>;
+    //活动完成志愿者
+    completeVolunteerList:Array<User>;
+}
+
+/**
+ * 求助信息
+ */
+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 {
+export interface MyDialogProps extends BaseDialogProps{
-    //弹窗名
-    menuName:string;
     //弹窗内容
     content:React.Component;
     //弹窗状态
     open:boolean;
-    //关闭事件
-    onClose:Function;
 }
 
 
@@ -142,7 +170,7 @@ export interface User{
 }
 
 /**
- * 个人信息
+ * 个人信息编辑修改密码
  */
 export interface UserEdit extends User{
     //编辑模式

src/index.css

@@ -57,3 +57,7 @@
 .my-info-desc{
   height: 100px;
 }
+
+.seek-help-height{
+    height: 400px;
+}

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<CloseDialogProps, any>{
+
+    render() {
+        return (
+            <div className="d-flex justify-content-between p-3" >
+                <span className="invisible"/>
+                <Tooltip title="按下光标拖放弹窗到其他位置" placement="left">
+                    <h3  id={this.props.titleId} style={{cursor:"move"}}>{this.props.menuName}</h3>
+                </Tooltip>
+                <Tooltip title="关闭弹窗" placement="left">
+                    <img src="close.svg" alt="关闭弹窗" className="closeIcon40" onClick={()=>this.props.onClose()}/>
+                </Tooltip>
+            </div>
+        )
+    }
+}

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<MyDialogProps, any>{
 
 
+    constructor(props: Readonly<MyDialogProps>) {
+        super(props);
+
+        this.state={
+            titleId:"my-dialog"
+        }
+    }
 
     render() {
         return (
             <Dialog
                 hideBackdrop={true}
                 open={this.props.open}
-                // onClose={handleClose}
                 PaperComponent={(props)=>
-                    <Draggable handle="#draggable-dialog-title" cancel={'[class*="MuiDialogContent-root"]'}>
+                    <Draggable handle={"#"+this.state.titleId} cancel={'[class*="MuiDialogContent-root"]'}>
                         <Paper {...props} />
                     </Draggable>}
-                aria-labelledby="draggable-dialog-title"
+                aria-labelledby={this.state.titleId}
                 classes={{paper:"w-100"}}
             >
-                <div className="d-flex justify-content-between p-3" >
+                <CloseDialog  menuName={this.props.menuName} onClose={()=>this.props.onClose()} titleId={this.state.titleId}/>
-                    <span className="invisible"/>
-                    <Tooltip title="按下光标拖放弹窗到其他位置" placement="left">
-                        <h3 id="draggable-dialog-title" style={{cursor:"move"}}>{this.props.menuName}</h3>
-                    </Tooltip>
-                    <Tooltip title="关闭弹窗" placement="left">
-                        <img src="close.svg" alt="关闭弹窗" className="closeIcon40" onClick={()=>this.props.onClose()}/>
-                    </Tooltip>
-                </div>
 
                 <div className="p-3">
                     {this.props.content}
                 </div>
-
-                {/*<DialogActions>*/}
-                {/*    <Button autoFocus  color="primary">*/}
-                {/*        Cancel*/}
-                {/*    </Button>*/}
-                {/*    <Button color="primary">*/}
-                {/*        Subscribe*/}
-                {/*    </Button>*/}
-                {/*</DialogActions>*/}
             </Dialog>
         );
     }

src/my/MyHelp.tsx

@@ -10,9 +10,7 @@ export class MyHelp extends React.Component<any, any>{
         return (
             <Container>
                 <Row>
-                    <Col>
+                    <Col>我的求助</Col>
-
-                    </Col>
                 </Row>
             </Container>
         )

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<any, any>{
+export class SeekHelp extends React.Component<any,{
+    data:Array<InfoHelpState>,
+    open:boolean,
+    status?:VolunteerStatus,
+    volunteerList?:Array<User>}>{
+
+
+    constructor(props: Readonly<any>) {
+        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 (
+            <div className="overflow-auto seek-help-height">
+                {this.state.data.map((help:InfoHelpState,index:number)=>
+                    <div key={"list"+index} className="mt-3 mb-3 border-info border">
                         <Container>
                             <Row>
-                    <Col>我的帮助</Col>
+                                <Col xs={4}>
+                                    <Image src={help.activeImg} className="activeImage"/>
+                                </Col>
+                                <Col>
+                                    <h5>{help.title}</h5>
+                                    <h6>{help.content}</h6>
+                                </Col>
+                            </Row>
+                            <Row>
+                                <Col xs={4} className="mt-auto mb-auto">
+                                    <span>{moment(help.time).format("YYYY-MM-DD HH:mm:ss")}</span>
+                                </Col>
+                                <Col>
+                                    <ButtonGroup>
+                                        <Button variant={"primary"} disabled={help.applyVolunteerList.length===0} onClick={()=>this.setState({open:true,status:VolunteerStatus.apply,volunteerList:help.applyVolunteerList})}>报名人数:{help.applyVolunteerList.length}</Button>
+                                        <Button variant={"success"} disabled={help.joinVolunteerList.length===0} onClick={()=>this.setState({open:true,status:VolunteerStatus.join,volunteerList:help.joinVolunteerList})}>参与人数:{help.joinVolunteerList.length}</Button>
+                                        <Button variant={"light"} disabled={help.completeVolunteerList.length===0} onClick={()=>this.setState({open:true,status:VolunteerStatus.complete,volunteerList:help.completeVolunteerList})}>完成人数:{help.completeVolunteerList.length}</Button>
+                                    </ButtonGroup>
+                                </Col>
                             </Row>
                         </Container>
+
+                    </div>
+                )}
+
+                <Dialog hideBackdrop={true} open={this.state.open}
+                        PaperComponent={(props)=>
+                        <Draggable handle={"#"+titleId} cancel={'[class*="MuiDialogContent-root"]'}>
+                            <Paper {...props} />
+                        </Draggable>}
+                        aria-labelledby={titleId}>
+                    <CloseDialog menuName={this.state.status+"活动志愿者"} onClose={()=>this.setState({open:false})} titleId={titleId}/>
+                    <ListGroup>
+                        {(this.state.volunteerList||[]).map((user:User,index:number)=>
+                            <ListGroup.Item key={"list"+index} className="d-flex justify-content-between" variant="info">
+                                <span>{user.name}</span>
+                                <Tooltip title="查看用户信息" placement="right">
+                                <img src="user.svg" alt="查看用户信息" className="userIcon"/>
+                                </Tooltip>
+                            </ListGroup.Item>
+                        )}
+                    </ListGroup>
+                </Dialog>
+            </div>
         )
     }
 }

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";
+
 /**
  * 首页
  */

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";
+
 /**
  * 志愿者信息
  */