增加活动详情页面

首页活动列表和个人信息-我的留言推荐活动可进入活动详情

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:<IndexMenu/>,
+            subMenu:<IndexMenu user={this.props.user}/>,
             //我的好友信息
             friendList:[],
             //我的菜单
@@ -85,7 +85,7 @@ export class Main extends React.Component<{ user:string,logout:Function },
         switch (menu) {
             case Menu.index:
                 this.setState({
-                    subMenu:<IndexMenu/>
+                    subMenu:<IndexMenu user={this.props.user}/>
                 });break;
             case Menu.volunteer:
                 this.setState({

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";
 
 /**
  * 登陆表单组件

src/account/PropCookie.ts

@@ -2,8 +2,4 @@
 /**
  * cookie信息，组件间传递
  */
-// export interface PropCookie {
-//     cookies:Cookies;
-// }
-
 export const user_cookie="user_cookie"

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'
 
 /**

src/bootstrap/LoginFormDesc.ts

@@ -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
-}

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
+}

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;
+}
+

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

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:"活动标题",
                     //活动内容

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

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<Type1|Type2>;
+    //打开用户信息弹框
     openUserInfo:boolean;
+    //用户id
     userId?:string;
+    //打开活动信息弹框
+    openActive:boolean;
+    //活动详情
+    active?:ActiveDetail;
 }>{
 
 
     constructor(props: Readonly<any>) {
         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 }, {
                    <p className="text-ellipsis leave-word-height">{data.active.content}</p>
                </div>
                <div className="text-center">
-                   <Button variant={"primary"}>查看活动详情</Button>
+                   <Button variant={"primary"} onClick={()=>this.setState({openActive:true,active:data.active})}>查看活动详情</Button>
                </div>
            </Col>
        }else{
@@ -184,6 +199,10 @@ export class MyLeaveWord extends React.Component<{ user:string }, {
                 <MyDialog titleId="view-user" menuName="用户信息"
                           content={<MyInfo ownUserId={this.props.user} isOwn={false} isMyFriend={false} isAdd={false} userId={this.state.userId}/>}
                           open={this.state.openUserInfo} onClose={()=>this.setState({openUserInfo:false})}/>
+
+                {this.state.active?<MyDialog content={<Active active={this.state.active} showButton={false} />}
+                                             open={this.state.openActive} titleId="view-active" menuName="活动详情"
+                                             onClose={()=>this.setState({active:undefined,openActive:false})}/>:null}
             </div>
         );
     }

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,
             }
         ]})
 

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<Array<BaseHelp>>;
+        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<ActiveProps>, index:number)=>
-           <Row className="p-3" key={"row"+index}>{actives.map((active:ActiveProps, subIndex:number)=>
+        const rowList=this.state.activeList.map((actives:Array<BaseHelp>, index:number)=>
+           <Row className="p-3" key={"row"+index}>{actives.map((active:BaseHelp, subIndex:number)=>
                <Col className="col-4" key={"col"+subIndex}>
                    <Card>
                        <Card.Header>
@@ -96,12 +133,16 @@ export class IndexMenu extends React.Component<{ undefined?:undefined }, any>{
                                   {active.title}
                               </ListGroup.Item>
                               <ListGroup.Item>
-                                  <p>{active.content}</p>
+                                  <p className="active-text-limit text-ellipsis">{active.content}</p>
                               </ListGroup.Item>
                           </ListGroup>
                        </Card.Body>
                        <Card.Footer>
-                           <Button variant="primary" className="w-100">帮助</Button>
+                           <Button variant={"info"} onClick={()=>this.setState({
+                               active:this.loadActiveWithId(active.activeId),
+                               openActive:true
+                           })} className="mr-2">查看活动详情</Button>
+                           <Button variant="primary" >帮助</Button>
                        </Card.Footer>
                    </Card>
                </Col>)}
@@ -119,6 +160,10 @@ export class IndexMenu extends React.Component<{ undefined?:undefined }, any>{
 
                 <Page onClick={(page:number)=>this.loadActive(page)}  currentPage={this.state.page.currentPage} totalPage={this.state.page.totalPage} pageSize={this.state.page.pageSize}/>
 
+                {this.state.active?<MyDialog content={<Active active={this.state.active} showButton={true} applyFunction={(activeId:number)=>this.applyActive(activeId)} />}
+                                             open={this.state.openActive} titleId="view-active" menuName="活动详情"
+                                             onClose={()=>this.setState({active:undefined,openActive:false})}/>:null}
+
             </Container>
         )
     }

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"),

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<Array<VolunteerProps>>;
-    page:{
-        currentPage:number;
-        totalPage:number;
-        pageSize:number;
-    }
+    page:PageProps;
 }>{
 
 

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 (
+                <div className="overflow-auto active-detail-height">
+                    <Image className="mb-3" src={this.props.active.activeImg}/>
+                    <h3 className="text-center">{this.props.active.title}</h3>
+                    <p className="p-2">{this.props.active.content}</p>
+                    <h5 className="text-center">{"活动开始时间："+moment(this.props.active.activeStartTime).format("YYYY-MM-DD HH:mm:ss")}</h5>
+                    <h5 className="text-center mb-3">{"活动结束时间："+moment(this.props.active.activeStartTime).format("YYYY-MM-DD HH:mm:ss")}</h5>
+                    {this.props.showButton?<div className="text-center"><Button onClick={()=>this.props.applyFunction?this.props.applyFunction(this.props.active.activeId):null}>帮助</Button></div>:null}
+                </div>
+            );
+        }
+}

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

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={

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<PageProps, { undefined?:undefined }>{
+export class Page extends React.Component<PageClickProps, { undefined?:undefined }>{
 
     render() {
         return (