diff --git a/src/Main.tsx b/src/Main.tsx index 828421e..561d445 100644 --- a/src/Main.tsx +++ b/src/Main.tsx @@ -4,7 +4,7 @@ import {IndexMenu} from "./sub/IndexMenu"; import {Volunteer} from "./sub/Volunteer"; import {SendHelp} from "./sub/SendHelp"; import {MyFriend} from "./my/MyFriend"; -import {MyDialog} from "./my/MyDialog"; +import {MyDialog} from "./ui/MyDialog"; import {MyLeaveWord} from "./my/MyLeaveWord"; import {MyMessage} from "./my/MyMessage"; import {User} from "./entity"; @@ -50,7 +50,7 @@ export class Main extends React.Component<{ user:string,logout:Function }, //一级菜单 menu:Menu.index, //二级菜单 - subMenu:, + subMenu:, //我的好友信息 friendList:[], //我的菜单 @@ -85,7 +85,7 @@ export class Main extends React.Component<{ user:string,logout:Function }, switch (menu) { case Menu.index: this.setState({ - subMenu: + subMenu: });break; case Menu.volunteer: this.setState({ diff --git a/src/account/Login.tsx b/src/account/Login.tsx index 759cc02..740908d 100644 --- a/src/account/Login.tsx +++ b/src/account/Login.tsx @@ -1,7 +1,7 @@ import React from "react"; import {Button, Form} from 'react-bootstrap' import {LoginProps, LoginState} from "./LoginProps"; -import {Input} from "../bootstrap/InputGroup"; +import {Input} from "../ui/InputGroup"; /** * 登陆表单组件 diff --git a/src/account/PropCookie.ts b/src/account/PropCookie.ts index 36b9be8..87ade7b 100644 --- a/src/account/PropCookie.ts +++ b/src/account/PropCookie.ts @@ -2,8 +2,4 @@ /** * cookie信息，组件间传递 */ -// export interface PropCookie { -// cookies:Cookies; -// } - export const user_cookie="user_cookie" diff --git a/src/account/Register.tsx b/src/account/Register.tsx index 977caef..6a213a2 100644 --- a/src/account/Register.tsx +++ b/src/account/Register.tsx @@ -1,6 +1,6 @@ import React from "react"; import {RegisterProps, RegisterState} from "./RegisterProps"; -import {Input} from "../bootstrap/InputGroup"; +import {Input} from "../ui/InputGroup"; import {Button, Form} from 'react-bootstrap' /** diff --git a/src/bootstrap/LoginFormDesc.ts b/src/bootstrap/LoginFormDesc.ts deleted file mode 100644 index 778aed7..0000000 --- a/src/bootstrap/LoginFormDesc.ts +++ /dev/null @@ -1,32 +0,0 @@ -import * as React from "react"; - -/** - * 文本输入框组件封装 - */ -export interface FormInputProps { - //表单名 - name: string - //描述信息 - desc: string - //提示信息 - placeholder?:string - //表单值 - value?: string - //数据类型 - type?: - |"text" - |"password" - as?: React.ElementType; - //值改变事件 - onChange: Function - //验证信息 - valid?:{ - check?:Boolean; - valid?:String; - invalid?:String; - } - //bootstrap col - col?:number - //长度 - maxLength ?:number -} diff --git a/src/entity.ts b/src/entity.ts index f9a3856..0741c5d 100644 --- a/src/entity.ts +++ b/src/entity.ts @@ -1,16 +1,8 @@ /** * 首页活动列表信息 */ -export interface ActiveProps { - //活动ID - activeId:number; - //活动标题 - title:string; - //活动内容 - content:string; - //活动图片 - activeImg:string; -} +import * as React from "react"; + /** * 地点信息 @@ -52,7 +44,12 @@ export enum RecommendType { auto="系统推荐" } +/** + * 活动简介 + */ export interface BaseHelp { + //活动ID + activeId:number; //活动标题 title:string; //活动内容 @@ -61,9 +58,13 @@ export interface BaseHelp { activeImg:string; } + //活动详情 export interface ActiveDetail extends BaseHelp{ - + //活动开始时间 + activeStartTime:number; + //活动结束时间 + activeEndTime:number; } //我的帮助信息 @@ -120,22 +121,29 @@ export interface SendHelpState extends BaseHelp{ } - /** * 分页信息 */ -export interface PageProps { +export interface PageProps{ //当前页 currentPage:number; //总页数 totalPage:number; //分页大小 pageSize:number; +} + +/** + * 分页点击 + */ +export interface PageClickProps extends PageProps{ //分页点击事件 onClick:Function; } + + export interface BaseDialogProps { //弹窗名 menuName:string; @@ -212,3 +220,33 @@ export interface Chat extends User{ flag:boolean; } +/** + * 文本输入框组件封装 + */ +export interface FormInputProps { + //表单名 + name: string + //描述信息 + desc: string + //提示信息 + placeholder?: string + //表单值 + value?: string + //数据类型 + type?: + | "text" + | "password" + as?: React.ElementType; + //值改变事件 + onChange: Function + //验证信息 + valid?: { + check?: Boolean; + valid?: String; + invalid?: String; + } + //bootstrap col + col?: number + //长度 + maxLength?: number +} diff --git a/src/index.css b/src/index.css index 2354f0b..a8161e7 100644 --- a/src/index.css +++ b/src/index.css @@ -62,6 +62,13 @@ height: 50px; } +/** +* 活动首页正文内容限制 + */ +.active-text-limit{ + -webkit-line-clamp:3; +} + /** * 名字 */ @@ -123,3 +130,10 @@ width: 1400px; } +/** +* 活动详情高度 + */ +.active-detail-height{ + height: 450px; +} + diff --git a/src/my/MyFriend.tsx b/src/my/MyFriend.tsx index e01e63a..4e35bd0 100644 --- a/src/my/MyFriend.tsx +++ b/src/my/MyFriend.tsx @@ -4,7 +4,7 @@ import {Chat, User} from "../entity"; import {Tooltip} from "@material-ui/core"; import moment from "moment"; import {MyInfo} from "./MyInfo"; -import {MyDialog} from "./MyDialog"; +import {MyDialog} from "../ui/MyDialog"; const maxLength=150 diff --git a/src/my/MyHelp.tsx b/src/my/MyHelp.tsx index 67f9523..2dcb94e 100644 --- a/src/my/MyHelp.tsx +++ b/src/my/MyHelp.tsx @@ -70,6 +70,8 @@ export class MyHelp extends React.Component<{ undefined?:undefined }, { data:Arr loadMyHelp(){ this.setState({ data:[{ + //活动Id + activeId:123, //活动标题 title:"活动标题", //活动内容 @@ -92,6 +94,8 @@ export class MyHelp extends React.Component<{ undefined?:undefined }, { data:Arr score: Math.ceil(Math.random()*10), }, { + //活动Id + activeId:123, //活动标题 title:"活动标题", //活动内容 @@ -113,6 +117,8 @@ export class MyHelp extends React.Component<{ undefined?:undefined }, { data:Arr //活动评价分 score: Math.ceil(Math.random()*10), },{ + //活动Id + activeId:123, //活动标题 title:"活动标题", //活动内容 diff --git a/src/my/MyInfo.tsx b/src/my/MyInfo.tsx index 7e5186a..79f6443 100644 --- a/src/my/MyInfo.tsx +++ b/src/my/MyInfo.tsx @@ -1,7 +1,7 @@ import React from "react"; import {Button, Col, Container, Form, FormControl, Image, Row} from "react-bootstrap"; import {UserEdit} from "../entity"; -import {Input} from "../bootstrap/InputGroup"; +import {Input} from "../ui/InputGroup"; /** diff --git a/src/my/MyLeaveWord.tsx b/src/my/MyLeaveWord.tsx index 3ac687b..8987c15 100644 --- a/src/my/MyLeaveWord.tsx +++ b/src/my/MyLeaveWord.tsx @@ -2,8 +2,9 @@ import React from "react"; import {Button, Col, Container, Image, Row} from "react-bootstrap"; import {ActiveDetail, User} from "../entity"; import {Tooltip} from "@material-ui/core"; -import {MyDialog} from "./MyDialog"; +import {MyDialog} from "../ui/MyDialog"; import {MyInfo} from "./MyInfo"; +import {Active} from "../ui/Active"; enum LeaveWordType { recommend, @@ -27,17 +28,25 @@ interface Type2 { /** * 我的留言 */ -export class MyLeaveWord extends React.Component<{ user:string }, { +export class MyLeaveWord extends React.Component<{ user:string }, + { + //留言信息 data:Array; + //打开用户信息弹框 openUserInfo:boolean; + //用户id userId?:string; + //打开活动信息弹框 + openActive:boolean; + //活动详情 + active?:ActiveDetail; }>{ constructor(props: Readonly) { super(props); - this.state={data:[],openUserInfo:false} + this.state={data:[],openUserInfo:false,openActive:false} } componentDidMount() { @@ -62,9 +71,12 @@ export class MyLeaveWord extends React.Component<{ user:string }, { info:"个人简介", }, active:{ + activeId:1, title:"活动标题1", content:"活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动", - activeImg:"logo512.png" + activeImg:"logo512.png", + activeStartTime:new Date().getTime(), + activeEndTime:new Date().getTime() }, type:LeaveWordType.recommend }, @@ -80,9 +92,12 @@ export class MyLeaveWord extends React.Component<{ user:string }, { info:"个人简介", }, active:{ + activeId:1, title:"活动标题1", content:"活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动", - activeImg:"logo512.png" + activeImg:"logo512.png", + activeStartTime:new Date().getTime(), + activeEndTime:new Date().getTime() }, type:LeaveWordType.apply }, @@ -133,7 +148,7 @@ export class MyLeaveWord extends React.Component<{ user:string }, {

{data.active.content}

- +
}else{ @@ -184,6 +199,10 @@ export class MyLeaveWord extends React.Component<{ user:string }, { } open={this.state.openUserInfo} onClose={()=>this.setState({openUserInfo:false})}/> + + {this.state.active?} + open={this.state.openActive} titleId="view-active" menuName="活动详情" + onClose={()=>this.setState({active:undefined,openActive:false})}/>:null} ); } diff --git a/src/my/SeekHelp.tsx b/src/my/SeekHelp.tsx index ca3bfb4..2d3cd8a 100644 --- a/src/my/SeekHelp.tsx +++ b/src/my/SeekHelp.tsx @@ -3,10 +3,10 @@ import {Button, ButtonGroup, Col, Container, Image, ListGroup, Row} from "react- import {SeekHelpState, User} from "../entity"; import moment from "moment"; import Dialog from "@material-ui/core/Dialog"; -import {CloseDialog} from "./CloseDialog"; +import {CloseDialog} from "../ui/CloseDialog"; import {Paper, Tooltip} from "@material-ui/core"; import Draggable from "react-draggable"; -import {MyDialog} from "./MyDialog"; +import {MyDialog} from "../ui/MyDialog"; import {MyInfo} from "./MyInfo"; /** @@ -79,7 +79,9 @@ export class SeekHelp extends React.Component<{ user:string }, activeImg: "logo512.png", content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容", time: new Date().getTime(), - title:"活动标题" + title:"活动标题", + //活动Id + activeId:123, }, { applyVolunteerList: [], @@ -88,7 +90,9 @@ export class SeekHelp extends React.Component<{ user:string }, activeImg: "logo512.png", content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容", time: new Date().getTime(), - title:"活动标题" + title:"活动标题", + //活动Id + activeId:123, }, { applyVolunteerList: [], @@ -97,7 +101,9 @@ export class SeekHelp extends React.Component<{ user:string }, activeImg: "logo512.png", content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容", time: new Date().getTime(), - title:"活动标题" + title:"活动标题", + //活动Id + activeId:123, } ]}) diff --git a/src/sub/IndexMenu.tsx b/src/sub/IndexMenu.tsx index 7c6377b..156767e 100644 --- a/src/sub/IndexMenu.tsx +++ b/src/sub/IndexMenu.tsx @@ -1,12 +1,21 @@ import React from "react"; import {Button, Card, Col, Container, ListGroup, Row} from "react-bootstrap"; -import {ActiveProps} from "../entity"; -import {Page} from "../Page"; + +import {Page} from "../ui/Page"; +import {ActiveDetail, BaseHelp, PageProps} from "../entity"; +import {MyDialog} from "../ui/MyDialog"; +import {Active} from "../ui/Active"; /** * 首页 */ -export class IndexMenu extends React.Component<{ undefined?:undefined }, any>{ +export class IndexMenu extends React.Component<{ user:string }, + { + activeList:Array>; + page:PageProps; + active?:ActiveDetail; + openActive:boolean; + }>{ @@ -19,7 +28,8 @@ export class IndexMenu extends React.Component<{ undefined?:undefined }, any>{ currentPage:1, totalPage:3, pageSize:9 - } + }, + openActive:false } } @@ -27,6 +37,33 @@ export class IndexMenu extends React.Component<{ undefined?:undefined }, any>{ this.loadActive(1) } + /** + * 报名活动 + * @param activeId + */ + applyActive(activeId:number){ + console.debug("报名活动"+activeId) + } + + /** + * 查找活动 + * @param activeId + */ + loadActiveWithId(activeId:number):ActiveDetail{ + return { + activeId:123, + activeImg:"logo512.png", + content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容", + title: "标题标题标题标题标题标题标题", + activeEndTime:new Date().getTime(), + activeStartTime:new Date().getTime() + } + } + + /** + * 加载活动列表 + * @param page + */ loadActive(page:number){ this.setState({ activeList:[[{ @@ -83,8 +120,8 @@ export class IndexMenu extends React.Component<{ undefined?:undefined }, any>{ render() { - const rowList=this.state.activeList.map((actives:Array, index:number)=> - {actives.map((active:ActiveProps, subIndex:number)=> + const rowList=this.state.activeList.map((actives:Array, index:number)=> + {actives.map((active:BaseHelp, subIndex:number)=> @@ -96,12 +133,16 @@ export class IndexMenu extends React.Component<{ undefined?:undefined }, any>{ {active.title} -

{active.content}

+

{active.content}

 - + + )} @@ -119,6 +160,10 @@ export class IndexMenu extends React.Component<{ undefined?:undefined }, any>{ this.loadActive(page)} currentPage={this.state.page.currentPage} totalPage={this.state.page.totalPage} pageSize={this.state.page.pageSize}/> + {this.state.active?this.applyActive(activeId)} />} + open={this.state.openActive} titleId="view-active" menuName="活动详情" + onClose={()=>this.setState({active:undefined,openActive:false})}/>:null} + ) } diff --git a/src/sub/SendHelp.tsx b/src/sub/SendHelp.tsx index 5e51d87..47d85ba 100644 --- a/src/sub/SendHelp.tsx +++ b/src/sub/SendHelp.tsx @@ -1,12 +1,12 @@ import React, {RefObject} from "react"; -import {Input} from "../bootstrap/InputGroup"; +import {Input} from "../ui/InputGroup"; 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"; import moment from 'moment'; import path from "path"; -import {Address} from "../Address"; +import {Address} from "../ui/Address"; /** * 活动内容限长字符数 @@ -39,6 +39,8 @@ export class SendHelp extends React.Component<{ undefined?:undefined }, SendHelp const time=moment() this.state={ + //活动Id + activeId:123, title:"", content:"", startTime:time.add({days:1}).format("YYYY-MM-DD HH:mm:ss"), diff --git a/src/sub/Volunteer.tsx b/src/sub/Volunteer.tsx index 370f1e8..37a4353 100644 --- a/src/sub/Volunteer.tsx +++ b/src/sub/Volunteer.tsx @@ -1,9 +1,9 @@ import React from "react"; import {Button, Table} from "react-bootstrap"; -import {Input} from "../bootstrap/InputGroup"; -import {VolunteerProps} from "../entity"; -import {Page} from "../Page"; -import {Address} from "../Address"; +import {Input} from "../ui/InputGroup"; +import {PageProps, VolunteerProps} from "../entity"; +import {Page} from "../ui/Page"; +import {Address} from "../ui/Address"; /** * 志愿者信息 @@ -15,11 +15,7 @@ export class Volunteer extends React.Component<{ undefined?:undefined }, { }; addressList:Array<{address:string}>; volunteerList:Array>; - page:{ - currentPage:number; - totalPage:number; - pageSize:number; - } + page:PageProps; }>{ diff --git a/src/ui/Active.tsx b/src/ui/Active.tsx new file mode 100644 index 0000000..586c532 --- /dev/null +++ b/src/ui/Active.tsx @@ -0,0 +1,34 @@ +import React from "react"; +import {Button, Image} from "react-bootstrap"; +import {ActiveDetail} from "../entity"; +import moment from "moment"; + +/** + * 活动信息 + */ +export class Active extends React.Component< + { + active:ActiveDetail; + /** + * 显示报名按钮 + */ + showButton:boolean; + /** + * 报名方法 + */ + applyFunction?:Function; + }, { undefined?:undefined }>{ + + render() { + return ( +
+ +

{this.props.active.title}

+

{this.props.active.content}

+
{"活动开始时间："+moment(this.props.active.activeStartTime).format("YYYY-MM-DD HH:mm:ss")}
+
{"活动结束时间："+moment(this.props.active.activeStartTime).format("YYYY-MM-DD HH:mm:ss")}
+ {this.props.showButton?
:null} +
+ ); + } +} diff --git a/src/Address.tsx b/src/ui/Address.tsx similarity index 96% rename from src/Address.tsx rename to src/ui/Address.tsx index 7db4054..fec031b 100644 --- a/src/Address.tsx +++ b/src/ui/Address.tsx @@ -1,5 +1,5 @@ import {Form, InputGroup} from "react-bootstrap"; -import {AddressProps, OnChangeAddress} from "./entity"; +import {AddressProps, OnChangeAddress} from "../entity"; import React from "react"; /** diff --git a/src/my/CloseDialog.tsx b/src/ui/CloseDialog.tsx similarity index 100% rename from src/my/CloseDialog.tsx rename to src/ui/CloseDialog.tsx diff --git a/src/bootstrap/InputGroup.tsx b/src/ui/InputGroup.tsx similarity index 97% rename from src/bootstrap/InputGroup.tsx rename to src/ui/InputGroup.tsx index d46fe5a..9bbf129 100644 --- a/src/bootstrap/InputGroup.tsx +++ b/src/ui/InputGroup.tsx @@ -1,6 +1,6 @@ import React from "react"; import {FormControl, InputGroup} from 'react-bootstrap' -import {FormInputProps} from "./LoginFormDesc"; +import {FormInputProps} from "../entity"; const defaultValid={ diff --git a/src/my/MyDialog.tsx b/src/ui/MyDialog.tsx similarity index 100% rename from src/my/MyDialog.tsx rename to src/ui/MyDialog.tsx diff --git a/src/Page.tsx b/src/ui/Page.tsx similarity index 87% rename from src/Page.tsx rename to src/ui/Page.tsx index 9ec9986..db951b2 100644 --- a/src/Page.tsx +++ b/src/ui/Page.tsx @@ -1,11 +1,11 @@ -import {PageProps} from "./entity"; +import {PageClickProps} from "../entity"; import React from "react"; import {Pagination} from "react-bootstrap"; /** * 分页组件 */ -export class Page extends React.Component{ +export class Page extends React.Component{ render() { return (