活动详情组件优化

src/Main.tsx

@@ -148,7 +148,7 @@ export class Main extends React.Component<
                 break;
             case DialogType.leaveWord:
                 this.setState({
-                    my:{menuName:dialogType,content:<MyLeaveWord  user={this.state.userId}/>,open:true}
+                    my:{menuName:dialogType,content:<MyLeaveWord  cookies={this.props.cookies} user={this.state.userId}/>,open:true}
                 })
                 break;
             case DialogType.message:

src/my/MyLeaveWord.tsx

@@ -8,13 +8,15 @@ import {Activity} from "../ui/Activity";
 import {API, JSONResponse, Method, prefix, request} from "../interface";
 import {EmptyBodyTransform, LeaveWordRes, LeaveWordTransform, PageDataMessage, SimpleMessage} from "../result";
 import {changeActivity} from "../public";
+import {Cookies} from "react-cookie";
 
 /**
  * 我的留言
  */
 export class MyLeaveWord extends React.Component<
     {
-        user:string
+        user:string,
+        cookies:Cookies
     },
 {
     //留言信息
@@ -197,7 +199,7 @@ export class MyLeaveWord extends React.Component<
                           content={<MyInfo isOwn={false}  isAdd={false} userId={this.state.userId?this.state.userId:""}/>}
                           open={this.state.openUserInfo} onClose={()=>this.setState({openUserInfo:false})}/>
 
-                <MyDialog content={<Activity activityId={this.state.activityId} hideButton={false} applyFunction={(activeId:number)=>{
+                <MyDialog content={<Activity cookies={this.props.cookies} activityId={this.state.activityId} hideButton={false} applyFunction={(activeId:number)=>{
                     changeActivity(activeId,ActivityStatus.apply, this,function () {
                     })
                     this.setState({activityId:null})

src/public.tsx

@@ -1,6 +1,6 @@
 // 一些组件公用函数
 import {API, Method, request} from "./interface";
-import {ActivityStatus} from "./entity";
+import {ActivityDetail, ActivityStatus, UserType} from "./entity";
 import {
     ChangeActivityRes,
     ChangeActivityTransform,
@@ -10,6 +10,8 @@ import {
     UserTransform
 } from "./result";
 import React from "react";
+import {user_cookie, user_type_cookie} from "./account/PropCookie";
+import {Cookies} from "react-cookie";
 
 /**
  * 更新活动状态
@@ -65,3 +67,18 @@ export function loadMyFriend(name:string,that:React.Component){
     })
 
 }
+
+//参与活动提示
+export function showActivityTip(activity:ActivityDetail, that:React.Component<{ cookies:Cookies },any>,button:JSX.Element){
+    if(that.props.cookies.get(user_type_cookie)===UserType.seekHelp){
+        return null
+    }else if(activity.userId===that.props.cookies.get(user_cookie)){
+        return <span className="text-danger text-center">我发布的活动</span>
+    }else if(activity.hasApply){
+        return <span className="text-danger text-center">已报名</span>
+    }else if(activity.hasStart){
+        return <span className="text-danger text-center">活动已开始</span>
+    }else{
+        return button
+    }
+}

src/sub/IndexMenu.tsx

@@ -2,15 +2,14 @@ import React from "react";
 import {Button, Card, Col, Container, Image, ListGroup, Row} from "react-bootstrap";
 
 import {Page} from "../ui/Page";
-import {ActivityDetail, ActivityStatus, PageProps, UserType} from "../entity";
+import {ActivityDetail, ActivityStatus, PageProps} from "../entity";
 import {MyDialog} from "../ui/MyDialog";
 import {Activity} from "../ui/Activity";
 import {Input} from "../ui/InputGroup";
 import {API, Method, prefix, request} from "../interface";
 import {FindActivityRes, FindActivityTransform, PageDataMessage} from "../result";
 import {Cookies} from "react-cookie";
-import {user_cookie, user_type_cookie} from "../account/PropCookie";
-import {changeActivity} from "../public";
+import {changeActivity, showActivityTip} from "../public";
 
 /**
  * 首页
@@ -46,6 +45,8 @@ export class IndexMenu extends React.Component<{ cookies:Cookies },
         this.loadActivity(1)
     }
 
+
+
     /**
      * 加载活动列表
      * @param page
@@ -77,6 +78,7 @@ export class IndexMenu extends React.Component<{ cookies:Cookies },
 
 
     render() {
+        let that=this
         const rowList=this.state.activityList?this.state.activityList.length===0?<h3 className="text-center text-info">当前没有活动可报名</h3>:this.state.activityList.map((activities:Array<ActivityDetail>, index:number)=>
            <Row className="p-3" key={"row"+index}>{activities.map((activity:ActivityDetail, subIndex:number)=>
                <Col className="col-4" key={"col"+subIndex}>
@@ -95,18 +97,13 @@ export class IndexMenu extends React.Component<{ cookies:Cookies },
                           </ListGroup>
                        </Card.Body>
                        <Card.Footer>
-                           <Button variant={"info"} onClick={()=>this.setState({activityId:activity.activityId,hideButton:
-                                   this.props.cookies.get(user_type_cookie)===UserType.seekHelp
-                                   ||activity.userId===this.props.cookies.get(user_cookie)
-                                   ||activity.hasApply||activity.hasStart})} className="mr-2">查看活动详情</Button>
-                           {this.props.cookies.get(user_type_cookie)===UserType.seekHelp
-                           ||activity.userId===this.props.cookies.get(user_cookie)
-                           ||activity.hasApply||activity.hasStart?null:<Button variant="primary" onClick={()=> {
-                               let that=this
+                           <Button variant={"info"} onClick={()=>this.setState({activityId:activity.activityId})} className="mr-2">查看活动详情</Button>
+
+                           {showActivityTip(activity,this,<Button variant="primary" onClick={()=> {
                                changeActivity(activity.activityId,ActivityStatus.apply, this,function(){
                                    that.loadActivity(1)
                                })
-                           }}>帮助</Button>}
+                           }}>帮助</Button>)}
                        </Card.Footer>
                    </Card>
                </Col>)}
@@ -128,7 +125,7 @@ export class IndexMenu extends React.Component<{ cookies:Cookies },
 
                 {this.state.page?<Page onClick={(page:number)=>this.loadActivity(page)} currentPage={this.state.page.currentPage} totalPage={this.state.page.totalPage} pageSize={this.state.page.pageSize}/>:null}
 
-                <MyDialog content={<Activity activityId={this.state.activityId} hideButton={this.state.hideButton} applyFunction={(activeId:number)=>{
+                <MyDialog content={<Activity cookies={this.props.cookies} activityId={this.state.activityId} hideButton={this.state.hideButton} applyFunction={(activeId:number)=>{
                     let that=this
                     changeActivity(activeId,ActivityStatus.apply, this,function () {
                         that.loadActivity(1)

src/ui/Activity.tsx

@@ -4,6 +4,8 @@ import {ActivityDetail} from "../entity";
 import moment from "moment";
 import {API, Method, prefix, request} from "../interface";
 import {ActivityDetailRes, ActivityDetailTransform, SimpleMessage} from "../result";
+import {showActivityTip} from "../public";
+import {Cookies} from "react-cookie";
 
 /**
  * 活动信息
@@ -19,6 +21,7 @@ export class Activity extends React.Component<
          * 报名方法
          */
         applyFunction?:Function;
+        cookies:Cookies;
     },
     {
         activity?:ActivityDetail ,
@@ -26,7 +29,7 @@ export class Activity extends React.Component<
     }>{
 
 
-    constructor(props: Readonly<{ activityId: number | null; hideButton: boolean; applyFunction?: Function }>) {
+    constructor(props: Readonly<{ activityId: number | null; hideButton: boolean; applyFunction?: Function; cookies:Cookies }>) {
         super(props);
 
         this.state={
@@ -71,8 +74,10 @@ export class Activity extends React.Component<
                             <h3 className="text-center">{this.state.activity.title}</h3>
                             <p className="p-2">{this.state.activity.content}</p>
                             <h5 className="text-center">{"活动开始时间："+moment(this.state.activity.activityStartTime).format("YYYY-MM-DD HH:mm:ss")}</h5>
-                            <h5 className="text-center mb-3">{"活动结束时间："+moment(this.state.activity.activityStartTime).format("YYYY-MM-DD HH:mm:ss")}</h5>
-                            {this.props.hideButton?null:<div className="text-center"><Button onClick={()=>this.props.applyFunction?this.props.applyFunction(this.props.activityId):null}>帮助</Button></div>}
+                            <h5 className="text-center mb-3">{"活动结束时间："+moment(this.state.activity.activityEndTime).format("YYYY-MM-DD HH:mm:ss")}</h5>
+
+                            {<div className="text-center ml-auto mr-auto">{showActivityTip(this.state.activity,this,
+                                <Button onClick={()=>this.props.applyFunction?this.props.applyFunction(this.props.activityId):null}>帮助</Button>)}</div>}
                         </div>
                     :this.state.result}
                     </div>