对接服务端

1.个人信息-我的留言

src/entity.ts

@@ -346,3 +346,38 @@ export enum ActivityStatus {
     join = "join",
     complete = "complete"
 }
+
+/**
+ * 留言信息
+ */
+export interface LeaveWord {
+    //    留言用户id
+    userId:string;
+    //    留言用户姓名
+    name:string;
+    //    留言用户头像
+    headImg:string;
+    //    留言类型
+    type:LeaveWordType;
+    //   活动id
+    activityId:number|null;
+    // 留言用户简介
+    info:string;
+    //活动标题
+    title:string;
+    //活动内容
+    content:string;
+}
+
+export enum LeaveWordType {
+    //推荐
+    recommend = "recommend",
+    //报名
+    apply = "apply",
+    //参与
+    join = "join",
+    //完成
+    complete = "complete",
+    //好友验证
+    friend = "friend"
+}

src/interface.ts

@@ -20,6 +20,8 @@ export const API={
         update:prefix.user+"/update",
         //更新密码
         updatePwd:prefix.user+"/updatePwd",
+        //查看留言
+        leaveWord:prefix.user+"/find/leaveWord"
     },
     main:{
         activity: {

src/my/MyLeaveWord.tsx

@@ -1,85 +1,67 @@
 import React from "react";
 import {Button, Col, Container, Image, Row} from "react-bootstrap";
-import {ActivityDetail, User} from "../entity";
+import {LeaveWord, LeaveWordType} from "../entity";
 import {Tooltip} from "@material-ui/core";
 import {MyDialog} from "../ui/MyDialog";
 import {MyInfo} from "./MyInfo";
 import {Activity} from "../ui/Activity";
-import {activityObj, userObj} from "../ui/TestData";
+import {API, Method, prefix, request} from "../interface";
-
+import {LeaveWordRes, LeaveWordTransform, PageDataMessage} from "../result";
-enum LeaveWordType {
-    //推荐
-    recommend="recommend",
-    //报名
-    apply="apply",
-    //参与
-    join="join",
-    //完成
-    complete="complete",
-    //好友验证
-    friend="friend"
-}
-
-interface Type1{
-    activity:ActivityDetail;
-    user:User;
-    type:LeaveWordType;
-}
-
-interface Type2 {
-    user:User;
-    type:LeaveWordType;
-}
 
 /**
  * 我的留言
  */
-export class MyLeaveWord extends React.Component<{ user:string },
+export class MyLeaveWord extends React.Component<
     {
+        user:string
+    },
+{
     //留言信息
-    data:Array<Type1|Type2>;
+    data?:Array<LeaveWord>;
     //打开用户信息弹框
     openUserInfo:boolean;
     //用户id
     userId?:string;
-    //打开活动信息弹框
-    openActivity:boolean;
     //活动详情
-    activity?:ActivityDetail;
+    activityId:number|null,
+    //加载提示
+    result:JSX.Element|null
 }>{
 
 
     constructor(props: Readonly<any>) {
         super(props);
 
-        this.state={data:[],openUserInfo:false,openActivity:false}
+        this.state={
+            result: <h3 className="text-info text-center">留言列表加载中</h3>,
+            activityId: null,
+            data:[],
+            openUserInfo:false
+        }
     }
 
     componentDidMount() {
-        this.loadLeaveWord()
+        this.loadLeaveWord(1)
     }
 
     /**
      * 加载留言
      */
-    loadLeaveWord(){
+    loadLeaveWord(page:number){
-        this.setState({
+
-            data:[
+        let that=this
-                {
+
-                    user:userObj,
+        request(API.account.leaveWord+"?currentPage="+page,Method.GET,{},new LeaveWordTransform(),function (res:LeaveWordRes) {
-                    activity:activityObj,
+            switch (res.customResult) {
-                    type:LeaveWordType.recommend
+                case PageDataMessage.ok:
-                },
+                    that.setState({
-                {
+                        data:res.dataList
-                    user:userObj,
+                    });break
-                    activity:activityObj,
+                case PageDataMessage.fail:
-                    type:LeaveWordType.apply
+                    that.setState({
-                },
+                        result:<h3 className="text-danger text-center">留言列表加载失败</h3>
-                {
+                    })
-                    user:userObj,
+            }
-                    type:LeaveWordType.friend
-                }
-            ]
         })
     }
 
@@ -102,18 +84,18 @@ export class MyLeaveWord extends React.Component<{ user:string },
      * @param data
      * @param index
      */
-    getData(data:Type1|Type2,index:number){
+    getData(data:LeaveWord,index:number){
         let body
-       if("activity" in data ){
+       if(data.activityId!=null){
            body=<Col>
                <div>
-                   <h5 className="text-center">{data.activity.title}</h5>
+                   <h5 className="text-center">{data.title}</h5>
                </div>
                <div>
-                   <p className="text-ellipsis leave-word-height">{data.activity.content}</p>
+                   <p className="text-ellipsis leave-word-height">{data.content}</p>
                </div>
                <div className="text-center">
-                   <Button variant={"primary"} onClick={()=>this.setState({openActivity:true,activity:data.activity})}>查看活动详情</Button>
+                   <Button variant={"primary"} onClick={()=>this.setState({activityId:data.activityId})}>查看活动详情</Button>
                </div>
            </Col>
        }else{
@@ -123,7 +105,7 @@ export class MyLeaveWord extends React.Component<{ user:string },
                        <h5>~</h5>
                    </div>
                   <div>
-                      <p className="text-ellipsis leave-word-height">{data.user.info}</p>
+                      <p className="text-ellipsis leave-word-height">{data.info}</p>
                   </div>
                    <div className="text-center">
                        <Button variant={"primary"} className="mr-2">同意</Button>
@@ -141,12 +123,12 @@ export class MyLeaveWord extends React.Component<{ user:string },
                 </Row>
                 <Row>
                     <Col xs={3}>
-                        <Image src={data.user.headImg} className="leave-word-headImg"/>
+                        <Image src={prefix.image+data.headImg} className="leave-word-headImg"/>
-                        <span className="text-center user-name ml-3">{data.user.name}</span>
+                        <span className="text-center user-name ml-3">{data.name}</span>
 
                             {data.type===LeaveWordType.friend?
                                 <Tooltip title="查看用户信息" placement="right">
-                                <Image src="user.svg" className="ml-1 mb-1 userIcon" onClick={()=>this.setState({openUserInfo:true,userId:data.user.userId})}/>
+                                <Image src="user.svg" className="ml-1 mb-1 userIcon" onClick={()=>this.setState({openUserInfo:true,userId:data.userId})}/>
                                 </Tooltip>:null}
                     </Col>
                     {body}
@@ -160,14 +142,14 @@ export class MyLeaveWord extends React.Component<{ user:string },
     render() {
         return (
             <div className="overflow-auto my-leave-world-height">
-                {this.state.data.map((data,index) =>this.getData(data,index))}
+                {this.state.data?this.state.data.map((data,index) =>this.getData(data,index)):this.state.result}
                 <MyDialog titleId="view-user" menuName="用户信息"
                           content={<MyInfo isOwn={false} isMyFriend={false} isAdd={false} userId={this.state.userId?this.state.userId:""}/>}
                           open={this.state.openUserInfo} onClose={()=>this.setState({openUserInfo:false})}/>
 
-                {this.state.activity?<MyDialog content={<Activity activity={this.state.activity} showButton={false} />}
+                <MyDialog content={<Activity activityId={this.state.activityId} showButton={false} />}
-                                               open={this.state.openActivity} titleId="view-activity" menuName="活动详情"
+                                               open={this.state.activityId!=null} titleId="view-activity" menuName="活动详情"
-                                               onClose={()=>this.setState({activity:undefined,openActivity:false})}/>:null}
+                                               onClose={()=>this.setState({activityId:null})}/>
             </div>
         )
     }

src/result.ts

@@ -2,7 +2,7 @@
  * 返回信息
  */
 import {JSONResponse, Result, TransformData} from "./interface";
-import {ActivityDetail, PageProps, SeekHelpState, User, UserEdit, UserType} from "./entity";
+import {ActivityDetail, LeaveWord, PageProps, SeekHelpState, User, UserEdit, UserType} from "./entity";
 
 /**
  * 空body响应
@@ -127,7 +127,6 @@ export abstract class PageDataTransform<T extends PageDataRes> extends Transform
  */
 export class FindActivityRes extends PageDataRes{
     dataList?:Array<Array<ActivityDetail>>
-    page?:PageProps
 }
 
 /**
@@ -145,7 +144,6 @@ export class FindActivityTransform extends PageDataTransform<FindActivityRes>{
  */
 export class FindUserRes extends PageDataRes{
     dataList?:Array<Array<User>>
-    page?:PageProps
 }
 
 /**
@@ -237,5 +235,16 @@ export class SeekHelpUserTransform extends TransformData<SimpleMessage, SeekHelp
     }
 }
 
+/**
+ * 留言信息转换
+ */
+export class LeaveWordRes extends PageDataRes{
+    dataList?:Array<LeaveWord>
+}
 
+export class LeaveWordTransform extends PageDataTransform<LeaveWordRes>{
+    protected newObject(): LeaveWordRes {
+        return new LeaveWordRes();
+    }
+}
 

src/sub/IndexMenu.tsx

@@ -7,15 +7,7 @@ import {MyDialog} from "../ui/MyDialog";
 import {Activity} from "../ui/Activity";
 import {Input} from "../ui/InputGroup";
 import {API, JSONResponse, Method, prefix, request} from "../interface";
-import {
+import {EmptyBodyTransform, FindActivityRes, FindActivityTransform, PageDataMessage, SimpleMessage} from "../result";
-    ActivityDetailRes,
-    ActivityDetailTransform,
-    EmptyBodyTransform,
-    FindActivityRes,
-    FindActivityTransform,
-    PageDataMessage,
-    SimpleMessage
-} from "../result";
 import {Cookies} from "react-cookie";
 import {user_type_cookie} from "../account/PropCookie";
 
@@ -23,18 +15,16 @@ import {user_type_cookie} from "../account/PropCookie";
  * 首页
  */
 export class IndexMenu extends React.Component<{ cookies:Cookies },
+
     {
         //活动数据
         activityList?:Array<Array<ActivityDetail>>;
         //分页信息
         page?:PageProps;
-        //活动
-        activity?:ActivityDetail;
-        //打开活动
-        openActivity:boolean;
         //检索活动标题
         title:string;
         result:JSX.Element|null;
+        activeId:number|null;
     }>{
 
 
@@ -43,7 +33,8 @@ export class IndexMenu extends React.Component<{ cookies:Cookies },
         super(props);
 
         this.state={
-            result: null,openActivity:false,
+            activeId: null,
+            result: null,
             title:""
         }
     }
@@ -79,29 +70,6 @@ export class IndexMenu extends React.Component<{ cookies:Cookies },
         })
     }
 
-    /**
-     * 查找活动
-     * @param activityId
-     */
-    loadActivityWithId(activityId:number){
-        console.debug("activityId="+activityId)
-
-        let that=this
-        request(API.main.activity.find+"/"+activityId,Method.GET,{},new ActivityDetailTransform(),function(res:ActivityDetailRes){
-            switch (res.customResult) {
-                case SimpleMessage.fail:
-                    that.setState({
-                        result:<h3 className="text-danger text-center">活动详情加载失败，请联系管理员</h3>
-                    });break;
-                case SimpleMessage.ok:
-                    that.setState({
-                        openActivity:true,
-                        activity:res.activity
-                    });break;
-            }
-        })
-    }
-
     /**
      * 加载活动列表
      * @param page
@@ -152,7 +120,7 @@ export class IndexMenu extends React.Component<{ cookies:Cookies },
                           </ListGroup>
                        </Card.Body>
                        <Card.Footer>
-                           <Button variant={"info"} onClick={()=>this.loadActivityWithId(activity.activityId)} className="mr-2">查看活动详情</Button>
+                           <Button variant={"info"} onClick={()=>this.setState({activeId:activity.activityId})} className="mr-2">查看活动详情</Button>
                            {this.props.cookies.get(user_type_cookie)===UserType.help?<Button variant="primary" onClick={()=>this.apply(activity.activityId)}>帮助</Button>:null}
                        </Card.Footer>
                    </Card>
@@ -175,12 +143,12 @@ 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}
 
-                {this.state.activity?<MyDialog content={<Activity activity={this.state.activity} showButton={true} applyFunction={(activeId:number)=>{
+                <MyDialog content={<Activity activityId={this.state.activeId} showButton={true} applyFunction={(activeId:number)=>{
                     this.apply(activeId)
-                    this.setState({activity:undefined,openActivity:false})
+                    this.setState({activeId:null})
                 }} />}
-                                               open={this.state.openActivity} titleId="view-active" menuName="活动详情"
+                          open={this.state.activeId!=null} titleId="view-active" menuName="活动详情"
-                                               onClose={()=>this.setState({activity:undefined,openActivity:false})}/>:null}
+                          onClose={()=>this.setState({activeId:null})}/>
 
                 <MyDialog content={this.state.result} open={this.state.result!==null} titleId="find-activity-tip" menuName="活动提示" onClose={()=>this.setState({result:null})}/>
             </Container>

src/sub/SendHelp.tsx

@@ -159,7 +159,9 @@ export class SendHelp extends React.Component<{ onSendActivityOK:Function }, Sen
                 <UploadImg tip={"请上传活动背景图"} maxImageSize={maxImageSize} onChange={(value:string)=>this.setState({activityImgFile:value})} />
 
                 {/*服务地点*/}
-                <Address onChange={(value:string)=>this.setState({serviceAddress:value})}/>
+                <div className="mt-3">
+                 <Address onChange={(value:string)=>this.setState({serviceAddress:value})}/>
+                </div>
 
                 <InputGroup className={"mt-3 col-3 ml-auto mr-auto "+(this.state.serviceAddress.length>0?"":"d-none")}>
                     <InputGroup.Prepend>

src/ui/Activity.tsx

@@ -2,14 +2,15 @@ import React from "react";
 import {Button, Image} from "react-bootstrap";
 import {ActivityDetail} from "../entity";
 import moment from "moment";
-import {prefix} from "../interface";
+import {API, Method, prefix, request} from "../interface";
+import {ActivityDetailRes, ActivityDetailTransform, SimpleMessage} from "../result";
 
 /**
  * 活动信息
  */
 export class Activity extends React.Component<
     {
-        activity:ActivityDetail;
+        activityId:number|null;
         /**
          * 显示报名按钮
          */
@@ -18,20 +19,63 @@ export class Activity extends React.Component<
          * 报名方法
          */
         applyFunction?:Function;
-    }, { undefined?:undefined }>{
+    },
+    {
+        activity?:ActivityDetail ,
+        result:JSX.Element
+    }>{
+
+
+    constructor(props: Readonly<{ activityId: number | null; showButton: boolean; applyFunction?: Function }>) {
+        super(props);
+
+        this.state={
+            result:<h3 className="text-info text-center">活动详情加载中</h3>
+        }
+    }
+
+    componentDidMount() {
+        if(this.props.activityId) {
+            this.loadActivityWithId()
+        }
+    }
+
+        /**
+         * 查找活动
+         */
+        loadActivityWithId(){
+            let that=this
+
+            request(API.main.activity.find+"/"+this.props.activityId,Method.GET,{},new ActivityDetailTransform(),function(res:ActivityDetailRes){
+                switch (res.customResult) {
+                    case SimpleMessage.fail:
+                        that.setState({
+                            result:<h3 className="text-danger text-center">活动详情加载失败，请联系管理员</h3>
+                        });break;
+                    case SimpleMessage.ok:
+                        that.setState({
+                            activity:res.activity
+                        });break;
+                }
+            })
+        }
 
         render() {
             return (
                 <div className="overflow-auto activity-detail-height">
-                    <div className="text-center">
+                    {this.state.activity?
-                        <Image className="mb-3 activityImage" src={prefix.image+this.props.activity.activityImg}/>
+                        <div>
+                            <div className="text-center">
+                                <Image className="mb-3 activityImage" src={prefix.image+this.state.activity.activityImg}/>
+                            </div>
+                            <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.showButton?<div className="text-center"><Button onClick={()=>this.props.applyFunction?this.props.applyFunction(this.props.activityId):null}>帮助</Button></div>:null}
+                        </div>
+                    :this.state.result}
                     </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>
-                    <h5 className="text-center mb-3">{"活动结束时间："+moment(this.props.activity.activityStartTime).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.activity.activityId):null}>帮助</Button></div>:null}
-                </div>
             );
         }
 }