对接服务端

发布求助信息推荐给指定好友

src/entity.ts

@@ -41,9 +41,12 @@ export interface VolunteerProps {
  * 推荐方式
  */
 export enum RecommendType {
-    no="不推荐",
-    choose="手动推荐",
-    auto="系统推荐"
+    //不推荐
+    no="no",
+    //手动推荐
+    choose="choose",
+    //系统推荐
+    auto="auto"
 }
 
 /**
@@ -102,7 +105,7 @@ export interface SendHelpState extends BaseHelp{
     //服务地点
     serviceAddress:string;
     //推荐方式
-    recommendType:RecommendType;
+    recommendType:string;
     //好友列表
     friendList:Array<User>;
     //已选中好友列表

src/interface.ts

@@ -1,5 +1,6 @@
 //服务端地址
 
+
 const server="http://localhost:8080"
 
 export const prefix={
@@ -110,14 +111,24 @@ export abstract class TransformData<Q,T extends JSONResponse<Q>> {
 }
 
 //发送请求
-export function request<Q,E extends JSONResponse<Q>,T extends TransformData<Q,E>>(api:string,method:Method,formParams: {[propName:string]: string | Blob},transform:T,callback:Function) {
+export function request<Q,E extends JSONResponse<Q>,T extends TransformData<Q,E>>(api:string,method:Method,formParams: {[propName:string]: string | Blob|Array<string>},transform:T,callback:Function) {
     let formData
     if(method===Method.GET) {
         formData=null
     }else{
         formData=new FormData()
         for (let formParam in formParams) {
-            formData.append(formParam, formParams[formParam])
+            let params= formParams[formParam]
+            if(params instanceof  Array){
+                for(let value in params){
+                    if(params.hasOwnProperty(value)) {
+                        formData.append(formParam + '[]', params[value])
+                    }
+                }
+            }else if(params instanceof Blob||typeof params==="string"){
+                formData.append(formParam,params)
+            }
+
         }
 
     }

src/my/MyFriend.tsx

@@ -8,6 +8,7 @@ import {MyDialog} from "../ui/MyDialog";
 import {userObj} from "../ui/TestData";
 import {API, JSONResponse, Method, request} from "../interface";
 import {EmptyBodyTransform, PageDataMessage, SimpleMessage, UserRes, UserTransform} from "../result";
+import {loadMyFriend} from "../public";
 
 const maxLength=150
 /**
@@ -61,7 +62,7 @@ export class MyFriend extends React.Component<
     }
 
     componentDidMount() {
-        this.loadMyFriend()
+        loadMyFriend('',this)
         this.joinChat()
     }
 
@@ -124,25 +125,6 @@ export class MyFriend extends React.Component<
         }
     }
 
-    //查找我的好友
-    loadMyFriend(){
-
-        let that=this
-        request(API.account.myFriend+"?currentPage=1",Method.GET, {},new UserTransform(),function (res:UserRes) {
-            switch (res.customResult) {
-                case PageDataMessage.ok:
-                    that.setState({
-                        friendList:res.dataList
-                    })
-                    break
-                case PageDataMessage.fail:
-                    that.setState({
-                        result:<h3 className="text-danger text-center">查找好友失败，请联系管理员</h3>
-                    })
-            }
-        })
-
-    }
 
     //加载聊天记录
     loadMyChat(user:User){
@@ -165,7 +147,7 @@ export class MyFriend extends React.Component<
                                     this.setState({
                                         queryFriend:e.target.value
                                     })
-                                    this.loadMyFriend()
+                                    loadMyFriend(e.target.value,this)
                                 }}/>
                             </ListGroup.Item>
                             {this.state.friendList?this.state.friendList.map((friend:User,index:number)=>

src/my/MyLeaveWord.tsx

@@ -1,12 +1,13 @@
 import React from "react";
 import {Button, Col, Container, Image, Row} from "react-bootstrap";
-import {LeaveWord, LeaveWordType} from "../entity";
+import {ActivityStatus, 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 {API, JSONResponse, Method, prefix, request} from "../interface";
 import {EmptyBodyTransform, LeaveWordRes, LeaveWordTransform, PageDataMessage, SimpleMessage} from "../result";
+import {changeActivity} from "../public";
 
 /**
  * 我的留言
@@ -188,7 +189,6 @@ export class MyLeaveWord extends React.Component<
         )
     }
 
-
     render() {
         return (
             <div className="overflow-auto my-leave-world-height">
@@ -197,7 +197,11 @@ 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} showButton={false} />}
+                <MyDialog content={<Activity activityId={this.state.activityId} hideButton={false} applyFunction={(activeId:number)=>{
+                    changeActivity(activeId,ActivityStatus.apply, this,function () {
+                    })
+                    this.setState({activityId:null})
+                }} />}
                                                open={this.state.activityId!=null} titleId="view-activity" menuName="活动详情"
                                                onClose={()=>this.setState({activityId:null})}/>
 

src/public.tsx

@@ -1,9 +1,23 @@
 // 一些组件公用函数
 import {API, Method, request} from "./interface";
 import {ActivityStatus} from "./entity";
-import {ChangeActivityRes, ChangeActivityTransform, SimpleMessage} from "./result";
+import {
+    ChangeActivityRes,
+    ChangeActivityTransform,
+    PageDataMessage,
+    SimpleMessage,
+    UserRes,
+    UserTransform
+} from "./result";
 import React from "react";
 
+/**
+ * 更新活动状态
+ * @param activityId
+ * @param activityStatus
+ * @param that
+ * @param callback
+ */
 export function changeActivity(activityId:number,activityStatus:ActivityStatus,that:React.Component,callback:Function){
 
     request(API.main.activity.apply,Method.POST,{
@@ -32,3 +46,22 @@ export function getStatus(status:ActivityStatus){
         case ActivityStatus.complete:return "完成"
     }
 }
+
+
+//查找我的好友
+export function loadMyFriend(name:string,that:React.Component){
+    request(API.account.myFriend+"?currentPage=1&name="+name,Method.GET, {},new UserTransform(),function (res:UserRes) {
+        switch (res.customResult) {
+            case PageDataMessage.ok:
+                that.setState({
+                    friendList:res.dataList
+                })
+                break
+            case PageDataMessage.fail:
+                that.setState({
+                    result:<h3 className="text-danger text-center">查找好友失败，请联系管理员</h3>
+                })
+        }
+    })
+
+}

src/sub/IndexMenu.tsx

@@ -16,7 +16,6 @@ import {changeActivity} from "../public";
  * 首页
  */
 export class IndexMenu extends React.Component<{ cookies:Cookies },
-
     {
         //活动数据
         activityList?:Array<Array<ActivityDetail>>;
@@ -25,7 +24,9 @@ export class IndexMenu extends React.Component<{ cookies:Cookies },
         //检索活动标题
         title:string;
         result:JSX.Element|null;
-        activeId:number|null;
+        activityId:number|null;
+        //显示帮助按钮
+        hideButton:boolean;
     }>{
 
 
@@ -34,7 +35,8 @@ export class IndexMenu extends React.Component<{ cookies:Cookies },
         super(props);
 
         this.state={
-            activeId: null,
+            hideButton: true,
+            activityId: null,
             result: null,
             title:""
         }
@@ -93,8 +95,13 @@ export class IndexMenu extends React.Component<{ cookies:Cookies },
                           </ListGroup>
                        </Card.Body>
                        <Card.Footer>
-                           <Button variant={"info"} onClick={()=>this.setState({activeId:activity.activityId})} 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={()=> {
+                           <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
                                changeActivity(activity.activityId,ActivityStatus.apply, this,function(){
                                    that.loadActivity(1)
@@ -121,15 +128,15 @@ 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.activeId} showButton={true} applyFunction={(activeId:number)=>{
+                <MyDialog content={<Activity activityId={this.state.activityId} hideButton={this.state.hideButton} applyFunction={(activeId:number)=>{
                     let that=this
                     changeActivity(activeId,ActivityStatus.apply, this,function () {
                         that.loadActivity(1)
                     })
-                    this.setState({activeId:null})
+                    this.setState({activityId:null})
                 }} />}
-                          open={this.state.activeId!=null} titleId="view-active" menuName="活动详情"
-                          onClose={()=>this.setState({activeId:null})}/>
+                          open={this.state.activityId!=null} titleId="view-active" menuName="活动详情"
+                          onClose={()=>this.setState({activityId: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

@@ -7,10 +7,10 @@ import "react-datetime/css/react-datetime.css";
 import moment from 'moment';
 import {Address} from "../ui/Address";
 import {UploadImg} from "../ui/UploadImg";
-import {userObj} from "../ui/TestData";
 import {API, JSONResponse, Method, request} from "../interface"
 import {EmptyBodyTransform, SimpleMessage} from "../result";
 import {MyDialog} from "../ui/MyDialog";
+import {loadMyFriend} from "../public";
 
 /**
  * 活动内容限长字符数
@@ -56,31 +56,6 @@ export class SendHelp extends React.Component<{ onSendActivityOK:Function }, Sen
         this.friendIndex=React.createRef()
     }
 
-    /**
-     * 搜索好友
-     */
-    searchFriend(keyword:string){
-        this.setState({friendList:[
-            userObj,
-            userObj]})
-    }
-
-    /**
-     * 获取推荐类型
-     * @param value
-     */
-    getRecommendType(value:string){
-        switch (value) {
-            case RecommendType.no:
-                return RecommendType.no;
-            case RecommendType.auto:
-                return RecommendType.auto;
-            case RecommendType.choose:
-                return RecommendType.choose;
-        }
-        return RecommendType.no
-    }
-
     //发布求助信息
     sendHelp(){
             let that=this
@@ -90,7 +65,10 @@ export class SendHelp extends React.Component<{ onSendActivityOK:Function }, Sen
                 activityStartTime:this.state.activityStartTime,
                 activityEndTime:this.state.activityEndTime,
                 activityImgFile:this.state.activityImgFile,
-                serviceAddress:this.state.serviceAddress
+                serviceAddress:this.state.serviceAddress,
+                recommendType:this.state.recommendType,
+                friendUserId:Object.keys(this.state.chooseFriendList).map(value => this.state.chooseFriendList[value].userId)
+
             },new EmptyBodyTransform(),function (res:JSONResponse<SimpleMessage>) {
                 switch (res.customResult) {
                     case SimpleMessage.ok:
@@ -119,6 +97,14 @@ export class SendHelp extends React.Component<{ onSendActivityOK:Function }, Sen
         return this.isNotEmpty(this.state.title,this.state.content,this.state.serviceAddress)&&this.state.activityImgFile!=null
     }
 
+    getRecommendType(type:RecommendType){
+        switch (type) {
+            case RecommendType.auto:return "系统推荐"
+            case RecommendType.choose:return "手动推荐"
+            case RecommendType.no:return "不推荐"
+        }
+    }
+
     render() {
         return (
             <Container>
@@ -169,9 +155,9 @@ export class SendHelp extends React.Component<{ onSendActivityOK:Function }, Sen
                     </InputGroup.Prepend>
                     <Form.Control as="select" custom onChange={(e)=>
                     {
-                        this.setState({recommendType:this.getRecommendType(e.target.value)})
+                        this.setState({recommendType:e.target.value})
                     }}>
-                        {recommendType.map((value:RecommendType,index:number) => <option key={"option"+index} value={value}>{value}</option>)}
+                        {recommendType.map((value:RecommendType,index:number) => <option key={"option"+index} value={value}>{this.getRecommendType(value)}</option>)}
                     </Form.Control>
                 </InputGroup>
 
@@ -180,7 +166,7 @@ export class SendHelp extends React.Component<{ onSendActivityOK:Function }, Sen
                         <InputGroup.Text>推荐好友</InputGroup.Text>
                     </InputGroup.Prepend>
                     <InputGroup.Prepend>
-                        <FormControl placeholder="请输入好友关键字" onChange={(e)=>this.searchFriend(e.target.value)}/>
+                        <FormControl placeholder="请输入好友关键字" onChange={(e)=>loadMyFriend(e.target.value,this)}/>
                     </InputGroup.Prepend>
                     <Form.Control as="select" custom ref={this.friendIndex}>
                         {this.state.friendList.map((friend:User,index:number)=><option key={"option"+index} value={index+""}>{friend.name}</option>)}

src/ui/Activity.tsx

@@ -12,9 +12,9 @@ export class Activity extends React.Component<
     {
         activityId:number|null;
         /**
-         * 显示报名按钮
+         * 隐藏帮助按钮
          */
-        showButton:boolean;
+        hideButton:boolean;
         /**
          * 报名方法
          */
@@ -26,7 +26,7 @@ export class Activity extends React.Component<
     }>{
 
 
-    constructor(props: Readonly<{ activityId: number | null; showButton: boolean; applyFunction?: Function }>) {
+    constructor(props: Readonly<{ activityId: number | null; hideButton: boolean; applyFunction?: Function }>) {
         super(props);
 
         this.state={
@@ -72,7 +72,7 @@ export class Activity extends React.Component<
                             <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}
+                            {this.props.hideButton?null:<div className="text-center"><Button onClick={()=>this.props.applyFunction?this.props.applyFunction(this.props.activityId):null}>帮助</Button></div>}
                         </div>
                     :this.state.result}
                     </div>

src/ui/UploadImg.tsx

@@ -54,6 +54,9 @@ export class UploadImg extends React.Component<
                         accept="image/*"
                         onChange={(e:any)=>{
                             const file=e.target.files[0]
+                            if(!file){
+                                return
+                            }
                             this.setState({
                                 imgObj:URL.createObjectURL(file),
                                 imageName:e.target.value