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

src/Main.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import {Dropdown, Nav, Navbar} from "react-bootstrap";
 import {IndexMenu} from "./sub/IndexMenu";
 import {Volunteer} from "./sub/Volunteer";
-import {MyHelp} from "./sub/MyHelp";
+import {SendHelp} from "./sub/SendHelp";
 import {MyFriend} from "./my/MyFriend";
 import {MyDialog} from "./my/MyDialog";
 import {MyLeaveWord} from "./my/MyLeaveWord";
@@ -81,7 +81,7 @@ export class Main extends React.Component<any, any>{
                 });break;
             case Menu.myHelp:
                 this.setState({
-                    subMenu:<MyHelp/>
+                    subMenu:<SendHelp/>
                 });break;
 
         }

src/entity.ts

@@ -61,10 +61,27 @@ export interface BaseHelp {
     activeImg:string;
 }
 
+//我的帮助信息
+export interface MyHelpState extends BaseHelp{
+    //求助时间
+    seekHelpTime:number;
+    //活动开始时间
+    activeStartTime:number;
+    //活动结束时间
+    activeEndTime:number;
+    //报名时间
+    applyTime:number;
+    //参与时间
+    joinTime:number|null;
+    //完成时间
+    completeTime:number|null;
+    //活动评价分
+    score: number|null;
+}
 
 
 //我的求助信息
-export interface InfoHelpState extends BaseHelp{
+export interface SeekHelpState extends BaseHelp{
     //求助时间
     time:number;
     //活动报名志愿者
@@ -78,7 +95,7 @@ export interface InfoHelpState extends BaseHelp{
 /**
  * 求助信息
  */
-export interface MyHelpState extends BaseHelp{
+export interface SendHelpState extends BaseHelp{
     //开始时间
     startTime:string;
     //结束时间
@@ -90,10 +107,10 @@ export interface MyHelpState extends BaseHelp{
     //推荐目标
     recommendTarget?:Array<number>;
     //好友列表
-    friendList:Array<Friend>;
+    friendList:Array<User>;
     //已选中好友列表
     chooseFriendList: {
-        [propName:string]:Friend
+        [propName:string]:User
     };
 }
 
@@ -136,17 +153,6 @@ export interface MyDialogProps extends BaseDialogProps{
     open:boolean;
 }
 
-
-/**
- * 好友信息
- */
-export interface Friend {
-    //好友姓名
-    name:string;
-    //好友状态
-    status?:boolean;
-}
-
 /**
  * 用户信息
  */
@@ -167,6 +173,8 @@ export interface User{
     info:string;
     //头像
     headImg:string;
+    //好友状态
+    status?:boolean;
 }
 
 /**

src/my/MyFriend.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import {Button, Col, Container, FormControl, Image, ListGroup, Row,} from "react-bootstrap";
-import {Chat, Friend, User} from "../entity";
+import {Chat, User} from "../entity";
 import {Tooltip} from "@material-ui/core";
 import moment from "moment";
 
@@ -141,7 +141,7 @@ export class MyFriend extends React.Component<any,any>{
     }
 
     //加载聊天记录
-    loadMyChat(friend:Friend){
+    loadMyChat(user:User){
         this.setState({
             chatList:[{
                 //发送人名称
@@ -181,7 +181,7 @@ export class MyFriend extends React.Component<any,any>{
                             <ListGroup.Item>
                                 <FormControl placeholder="查找好友" onChange={(e)=>this.loadMyFriend(e.target.value)}/>
                             </ListGroup.Item>
-                            {this.state.friendList.map((friend:Friend,index:number)=>
+                            {this.state.friendList.map((friend:User,index:number)=>
                                 <Tooltip  key={"tooltip"+index} title={"点击查看和"+friend.name+"的聊天记录"} placement={"right"}>
                                     <ListGroup.Item onClick={()=>
                                     {

src/my/MyHelp.tsx

@@ -1,18 +1,187 @@
 import React from "react";
-import {Col, Container, Row} from "react-bootstrap";
+import {Button, Col, Container, Image, Row} from "react-bootstrap";
+import {MyHelpState} from "../entity";
+import moment from "moment";
+
+const classList="border-info border d-flex justify-content-center align-items-center"
 
 /**
  * 我的求助
  */
-export class MyHelp extends React.Component<any, any>{
+export class MyHelp extends React.Component<any, { data:Array<MyHelpState> }>{
+
+
+    constructor(props: Readonly<any>) {
+        super(props);
+
+        this.state= {
+            data: []
+        }
+    }
+
+    componentDidMount() {
+        this.loadMyHelp()
+    }
+
+    /**
+     * 完成活动
+     * @param help
+     */
+    complete(help:MyHelpState){
+
+    }
+
+    /**
+     * 参与活动
+     * @param help
+     */
+    join(help:MyHelpState){
+
+    }
+
+    /**
+     * 获取操作布局
+     * @param help
+     */
+    getAction(help:MyHelpState){
+        if(help.joinTime&&help.completeTime){
+            return (<Row>
+                        <Col className={classList}>已完成</Col>
+                        <Col className={classList}/>
+                        <Col className={classList}>{help.score}</Col>
+                    </Row>)
+        }else if(help.joinTime){
+            return (<Row>
+                        <Col className={classList}>待完成</Col>
+                        <Col className={classList+" p-3"}><Button className="w-100" onClick={()=>this.complete(help)} variant={"info"}>完成</Button></Col>
+                        <Col className={classList}/>
+                    </Row>)
+        }else{
+            return (
+                <Row>
+                    <Col className={classList}>待参与</Col>
+                    <Col className={classList+" p-3"}><Button className="w-100" onClick={()=>this.join(help)} variant={"info"}>参与</Button></Col>
+                    <Col className={classList}/>
+                </Row>
+            )
+        }
+    }
+
+    loadMyHelp(){
+        this.setState({
+            data:[{
+                //活动标题
+                title:"活动标题",
+                //活动内容
+                content:"活动内容",
+                //活动背景图
+                activeImg: "logo512.png",
+                //求助时间
+                seekHelpTime:new Date().getTime(),
+                //活动开始时间
+                activeStartTime:new Date().getTime(),
+                //活动结束时间
+                activeEndTime:new Date().getTime(),
+                //报名时间
+                applyTime:new Date().getTime(),
+                //参与时间
+                joinTime:new Date().getTime(),
+                //完成时间
+                completeTime:new Date().getTime(),
+                //活动评价分
+                score: Math.ceil(Math.random()*10),
+            },
+                {
+                    //活动标题
+                    title:"活动标题",
+                    //活动内容
+                    content:"活动内容",
+                    //活动背景图
+                    activeImg: "logo512.png",
+                    //求助时间
+                    seekHelpTime:new Date().getTime(),
+                    //活动开始时间
+                    activeStartTime:new Date().getTime(),
+                    //活动结束时间
+                    activeEndTime:new Date().getTime(),
+                    //报名时间
+                    applyTime:new Date().getTime(),
+                    //参与时间
+                    joinTime:null,
+                    //完成时间
+                    completeTime:new Date().getTime(),
+                    //活动评价分
+                    score: Math.ceil(Math.random()*10),
+                },{
+                    //活动标题
+                    title:"活动标题",
+                    //活动内容
+                    content:"活动内容",
+                    //活动背景图
+                    activeImg: "logo512.png",
+                    //求助时间
+                    seekHelpTime:new Date().getTime(),
+                    //活动开始时间
+                    activeStartTime:new Date().getTime(),
+                    //活动结束时间
+                    activeEndTime:new Date().getTime(),
+                    //报名时间
+                    applyTime:new Date().getTime(),
+                    //参与时间
+                    joinTime:new Date().getTime(),
+                    //完成时间
+                    completeTime:null,
+                    //活动评价分
+                    score: Math.ceil(Math.random()*10),
+                }]
+        })
+    }
 
     render() {
         return (
+            <div className="overflow-auto seek-help-height">
+                {this.state.data.map((help:MyHelpState,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>
+                                {["求助时间","活动开始时间","活动结束时间"].map((text:string,index:number)=>
+                                    <Col className={classList} key={"col"+index}>{text}</Col>
+                                )}
+                            </Row>
+                            <Row>
+                                {[help.seekHelpTime,help.activeStartTime,help.activeEndTime].map((time:number,index:number)=>
+                                    <Col className="border-info border" key={"col"+index}>{moment(time).format("YYYY-MM-DD HH:mm:ss")}</Col>
+                                )}
+                            </Row>
+                            <Row>
+                                {["报名时间","参与时间","完成时间"].map((text:string,index:number)=>
+                                    <Col className={classList} key={"col"+index}>{text}</Col>
+                                )}
+                            </Row>
+                            <Row>
+                                {[help.applyTime,help.joinTime,help.completeTime].map((time,index:number)=>
+                                    <Col className="border-info border" key={"col"+index}>{time?moment(time).format("YYYY-MM-DD HH:mm:ss"):""}</Col>
+                                )}
+                            </Row>
+                            <Row>
+                                {["参与状态","操作","活动评分"].map((text:string,index:number)=>
+                                    <Col className={classList} key={"col"+index}>{text}</Col>
+                                )}
                             </Row>
+                            {this.getAction(help)}
                         </Container>
+                    </div>
+                )}
+            </div>
         )
     }
 }

src/my/SeekHelp.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import {Button, ButtonGroup, Col, Container, Image, ListGroup, Row} from "react-bootstrap";
-import {InfoHelpState, User} from "../entity";
+import {SeekHelpState, User} from "../entity";
 import moment from "moment";
 import Dialog from "@material-ui/core/Dialog";
 import {CloseDialog} from "./CloseDialog";
@@ -22,7 +22,7 @@ const titleId="seek-help-dialog"
  * 我的帮助
  */
 export class SeekHelp extends React.Component<any,{
-    data:Array<InfoHelpState>,
+    data:Array<SeekHelpState>,
     open:boolean,
     status?:VolunteerStatus,
     volunteerList?:Array<User>}>{
@@ -101,7 +101,7 @@ export class SeekHelp extends React.Component<any,{
     render() {
         return (
             <div className="overflow-auto seek-help-height">
-                {this.state.data.map((help:InfoHelpState,index:number)=>
+                {this.state.data.map((help:SeekHelpState, index:number)=>
                     <div key={"list"+index} className="mt-3 mb-3 border-info border">
                         <Container>
                             <Row>

src/sub/SendHelp.tsx

@@ -1,6 +1,6 @@
 import React, {RefObject} from "react";
 import {Input} from "../bootstrap/InputGroup";
-import {Friend, MyHelpState, RecommendType} from "../entity";
+import {RecommendType, SendHelpState, User} from "../entity";
 import {Button, Container, Form, FormControl, InputGroup, ListGroup, OverlayTrigger, Tooltip} from "react-bootstrap";
 import ReactDatetimeClass from "react-datetime";
 import "react-datetime/css/react-datetime.css";
@@ -28,7 +28,7 @@ const recommendType=[RecommendType.no, RecommendType.choose,RecommendType.auto]
 /**
  * 我的求助
  */
-export class MyHelp extends React.Component<any, MyHelpState>{
+export class SendHelp extends React.Component<any, SendHelpState>{
     //存放活动背景图
     private fileImg: RefObject<any>;
     //当前选中的好友索引
@@ -59,11 +59,42 @@ export class MyHelp extends React.Component<any, MyHelpState>{
      * 搜索好友
      */
     searchFriend(keyword:string){
-        this.setState({friendList:[{
+        this.setState({friendList:[
-            name:"fffff"
+            {
+                //用户ID
+                userId:"admin",
+                //用户姓名
+                name:"张三",
+                //用户年龄
+                age:Math.ceil(Math.random()*100)+1,
+                //用户电话
+                mobile:1234567879,
+                //用户邮箱
+                email:"admin@qq.com",
+                //地点
+                address:"上海高新区",
+                //个人简介
+                info:"个人简介",
+                //头像
+                headImg:"logo512.png",
         },
         {
-            name:"EEE"
+            //用户ID
+            userId:"admin",
+            //用户姓名
+            name:"李四",
+            //用户年龄
+            age:Math.ceil(Math.random()*100)+1,
+            //用户电话
+            mobile:1234567879,
+            //用户邮箱
+            email:"admin@qq.com",
+            //地点
+            address:"上海高新区",
+            //个人简介
+            info:"个人简介",
+            //头像
+            headImg:"logo512.png"
         }]})
     }
 
@@ -178,7 +209,7 @@ export class MyHelp extends React.Component<any, MyHelpState>{
                         <FormControl placeholder="请输入好友关键字" onChange={(e)=>this.searchFriend(e.target.value)}/>
                     </InputGroup.Prepend>
                     <Form.Control as="select" custom ref={this.friendIndex}>
-                        {this.state.friendList.map((friend:Friend,index:number)=><option key={"option"+index} value={index+""}>{friend.name}</option>)}
+                        {this.state.friendList.map((friend:User,index:number)=><option key={"option"+index} value={index+""}>{friend.name}</option>)}
                     </Form.Control>
                     <div className="input-group-append">
                         <button className="btn btn-outline-secondary" type="button" onClick={()=>{