活动详情接口对接

src/interface.ts

@@ -2,9 +2,10 @@
 
 const server="http://localhost:8080"
 
-const prefix={
+export const prefix={
     user:"/api/user",
-    activity:"/api/activity"
+    activity:"/api/activity",
+    image:"/image/"
 }
 //服务器接口地址
 export const API={

src/result.ts

@@ -179,4 +179,24 @@ export class FindUserTransform extends TransformData<FindUserMessage, FindUserRe
     }
 }
 
+export enum ActivityDetailMessage {
+    ok="ok",
+    fail="fail"
+}
+
+export class ActivityDetailRes extends JSONResponse<ActivityDetailMessage>{
+    activity?:ActivityDetail
+}
+
+export class ActivityDetailTransform extends TransformData<ActivityDetailMessage, ActivityDetailRes>{
+    protected newObject(): ActivityDetailRes {
+        return new ActivityDetailRes();
+    }
+
+
+    protected transformBody(data: any) {
+        this.target.activity=data.body
+    }
+}
+
 

src/sub/IndexMenu.tsx

@@ -1,14 +1,20 @@
 import React from "react";
-import {Button, Card, Col, Container, ListGroup, Row} from "react-bootstrap";
+import {Button, Card, Col, Container, Image, ListGroup, Row} from "react-bootstrap";
 
 import {Page} from "../ui/Page";
 import {ActivityDetail, PageProps} from "../entity";
 import {MyDialog} from "../ui/MyDialog";
 import {Activity} from "../ui/Activity";
 import {Input} from "../ui/InputGroup";
-import {activityObj} from "../ui/TestData";
+import {API, Method, prefix, request} from "../interface";
-import {API, Method, request} from "../interface";
+import {
-import {FindActivityMessage, FindActivityRes, FindActivityTransform} from "../result";
+    ActivityDetailMessage,
+    ActivityDetailRes,
+    ActivityDetailTransform,
+    FindActivityMessage,
+    FindActivityRes,
+    FindActivityTransform
+} from "../result";
 
 /**
  * 首页
@@ -55,9 +61,23 @@ export class IndexMenu extends React.Component<{ user:string },
      * 查找活动
      * @param activityId
      */
-    loadActivityWithId(activityId:number):ActivityDetail{
+    loadActivityWithId(activityId:number){
         console.debug("activityId="+activityId)
-        return activityObj
+
+        let that=this
+        request(API.main.activity.find+"/"+activityId,Method.GET,{},new ActivityDetailTransform(),function(res:ActivityDetailRes){
+            switch (res.customResult) {
+                case ActivityDetailMessage.fail:
+                    that.setState({
+                        result:<h3 className="text-danger text-center">活动详情加载失败，请联系管理员</h3>
+                    });break;
+                case ActivityDetailMessage.ok:
+                    that.setState({
+                        openActivity:true,
+                        activity:res.activity
+                    });break;
+            }
+        })
     }
 
     /**
@@ -96,7 +116,7 @@ export class IndexMenu extends React.Component<{ user:string },
                <Col className="col-4" key={"col"+subIndex}>
                    <Card>
                        <Card.Header>
-                        <img src={"/image/"+activity.activityImg} alt="活动图片" className="activityImage"/>
+                        <Image src={prefix.image+activity.activityImg} className="activityImage"/>
                        </Card.Header>
                        <Card.Body>
                           <ListGroup>
@@ -109,10 +129,7 @@ export class IndexMenu extends React.Component<{ user:string },
                           </ListGroup>
                        </Card.Body>
                        <Card.Footer>
-                           <Button variant={"info"} onClick={()=>this.setState({
+                           <Button variant={"info"} onClick={()=>this.loadActivityWithId(activity.activityId)} className="mr-2">查看活动详情</Button>
-                               activity:this.loadActivityWithId(activity.activityId),
-                               openActivity:true
-                           })} className="mr-2">查看活动详情</Button>
                            <Button variant="primary" >帮助</Button>
                        </Card.Footer>
                    </Card>
@@ -139,8 +156,7 @@ export class IndexMenu extends React.Component<{ user:string },
                                                open={this.state.openActivity} titleId="view-active" menuName="活动详情"
                                                onClose={()=>this.setState({activity:undefined,openActivity:false})}/>:null}
 
-                <MyDialog content={this.state.result} open={this.state.result!==null} titleId="find-activity-tip" menuName="发布求助信息反馈" onClose={()=>this.setState({result:null})}/>
+                <MyDialog content={this.state.result} open={this.state.result!==null} titleId="find-activity-tip" menuName="活动提示" onClose={()=>this.setState({result:null})}/>
-
             </Container>
         )
     }

src/ui/Activity.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import {Button, Image} from "react-bootstrap";
 import {ActivityDetail} from "../entity";
 import moment from "moment";
+import {prefix} from "../interface";
 
 /**
  * 活动信息
@@ -22,7 +23,9 @@ export class Activity extends React.Component<
         render() {
             return (
                 <div className="overflow-auto activity-detail-height">
-                    <Image className="mb-3" src={this.props.activity.activityImg}/>
+                    <div className="text-center">
+                        <Image className="mb-3 activityImage" src={prefix.image+this.props.activity.activityImg}/>
+                    </div>
                     <h3 className="text-center">{this.props.activity.title}</h3>
                     <p className="p-2">{this.props.activity.content}</p>
                     <h5 className="text-center">{"活动开始时间："+moment(this.props.activity.activityStartTime).format("YYYY-MM-DD HH:mm:ss")}</h5>