From 490163d943b2c9b04949affda00c3ba58a383b98 Mon Sep 17 00:00:00 2001 From: pan <1029559041@qq.com> Date: Sun, 24 May 2020 20:28:28 +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=E5=B8=AE=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/Main.tsx | 4 +- src/entity.ts | 38 +++--- src/my/MyFriend.tsx | 6 +- src/my/MyHelp.tsx | 183 ++++++++++++++++++++++++++- src/my/SeekHelp.tsx | 6 +- src/sub/{MyHelp.tsx => SendHelp.tsx} | 43 ++++++- 6 files changed, 244 insertions(+), 36 deletions(-) rename src/sub/{MyHelp.tsx => SendHelp.tsx} (86%) diff --git a/src/Main.tsx b/src/Main.tsx index 466ae40..161d918 100644 --- a/src/Main.tsx +++ b/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{ });break; case Menu.myHelp: this.setState({ - subMenu: + subMenu: });break; } diff --git a/src/entity.ts b/src/entity.ts index a1c3129..c8f0eb6 100644 --- a/src/entity.ts +++ b/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; //好友列表 - friendList:Array; + friendList:Array; //已选中好友列表 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; } /** diff --git a/src/my/MyFriend.tsx b/src/my/MyFriend.tsx index 34f96d4..5c8dc70 100644 --- a/src/my/MyFriend.tsx +++ b/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{ } //加载聊天记录 - loadMyChat(friend:Friend){ + loadMyChat(user:User){ this.setState({ chatList:[{ //发送人名称 @@ -181,7 +181,7 @@ export class MyFriend extends React.Component{ this.loadMyFriend(e.target.value)}/> - {this.state.friendList.map((friend:Friend,index:number)=> + {this.state.friendList.map((friend:User,index:number)=> { diff --git a/src/my/MyHelp.tsx b/src/my/MyHelp.tsx index d720c44..c4490f5 100644 --- a/src/my/MyHelp.tsx +++ b/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{ +export class MyHelp extends React.Component }>{ - render() { - return ( - + + constructor(props: Readonly) { + 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 ( + 已完成 + + {help.score} + ) + }else if(help.joinTime){ + return ( + 待完成 + + + ) + }else{ + return ( - 我的求助 + 待参与 + + - + ) + } + } + + 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 ( +
+ {this.state.data.map((help:MyHelpState,index:number)=> +
+ + + + + + +
{help.title}
+
{help.content}
+ + + + {["求助时间","活动开始时间","活动结束时间"].map((text:string,index:number)=> + {text} + )} + + + {[help.seekHelpTime,help.activeStartTime,help.activeEndTime].map((time:number,index:number)=> + {moment(time).format("YYYY-MM-DD HH:mm:ss")} + )} + + + {["报名时间","参与时间","完成时间"].map((text:string,index:number)=> + {text} + )} + + + {[help.applyTime,help.joinTime,help.completeTime].map((time,index:number)=> + {time?moment(time).format("YYYY-MM-DD HH:mm:ss"):""} + )} + + + {["参与状态","操作","活动评分"].map((text:string,index:number)=> + {text} + )} + + {this.getAction(help)} + +
+ )} +
) } } diff --git a/src/my/SeekHelp.tsx b/src/my/SeekHelp.tsx index c3861ef..8873b21 100644 --- a/src/my/SeekHelp.tsx +++ b/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, + data:Array, open:boolean, status?:VolunteerStatus, volunteerList?:Array}>{ @@ -101,7 +101,7 @@ export class SeekHelp extends React.Component - {this.state.data.map((help:InfoHelpState,index:number)=> + {this.state.data.map((help:SeekHelpState, index:number)=>
diff --git a/src/sub/MyHelp.tsx b/src/sub/SendHelp.tsx similarity index 86% rename from src/sub/MyHelp.tsx rename to src/sub/SendHelp.tsx index 1edfbbe..23eba7b 100644 --- a/src/sub/MyHelp.tsx +++ b/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{ +export class SendHelp extends React.Component{ //存放活动背景图 private fileImg: RefObject; //当前选中的好友索引 @@ -59,11 +59,42 @@ export class MyHelp extends React.Component{ * 搜索好友 */ searchFriend(keyword:string){ - this.setState({friendList:[{ - name:"fffff" + this.setState({friendList:[ + { + //用户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{ this.searchFriend(e.target.value)}/> - {this.state.friendList.map((friend:Friend,index:number)=>)} + {this.state.friendList.map((friend:User,index:number)=>)}