完善我的帮助、我的求助分页逻辑

src/my/MyHelp.tsx

@@ -5,11 +5,12 @@ import moment from "moment";
 import {JSONResponse, Method, request} from "../interface";
 import {EmptyBodyTransform, HelpRes, HelpTransform, PageDataMessage, SimpleMessage} from "../result";
 import {MyDialog} from "../ui/MyDialog";
-import {changeActivity} from "../public";
+import {changeActivity, scrollBottom} from "../public";
 import {Input} from "../ui/InputGroup";
 import {Cookies} from "react-cookie";
 import {time_score} from "../account/PropCookie";
 import {Api, prefix} from "../api";
+import {SimpleSnackbar} from "../ui/toast";
 
 const classList="border-info border d-flex justify-content-center align-items-center"
 
@@ -24,12 +25,14 @@ export class MyHelp extends React.Component<{
 
     {
         data?:Array<HelpEntity>,
-        page?:PageProps ,
         result:JSX.Element|null,
         //活动评价
         activeScore:number,
         historyId:number|null;
         timeScore?:string;
+        //分页信息
+        page?:PageProps;
+        scrollTip:string|null
     }>{
 
 
@@ -39,7 +42,8 @@ export class MyHelp extends React.Component<{
         this.state= {
             activeScore: 5,
             result:null,
-            historyId:null
+            historyId:null,
+            scrollTip:null
         }
     }
 
@@ -133,7 +137,9 @@ export class MyHelp extends React.Component<{
             switch (res.customResult) {
                 case PageDataMessage.ok:
                     that.setState({
-                        data:res.dataList
+                        data: (that.state.data||[]).concat(res.dataList||[]),
+                        page: res.page,
+                        scrollTip: page > 1 ? '成功加载第' + page + '页数据' : null,
                     })
                     break
                 case PageDataMessage.fail:
@@ -146,8 +152,11 @@ export class MyHelp extends React.Component<{
     }
 
     render() {
+        let that=this
         return (
-            <div className="overflow-auto my-help-height w-100">
+            <div className="overflow-auto my-help-height w-100" onScroll={event => scrollBottom(event,this,function () {
+                that.loadMyHelp((that.state.page?.currentPage||1)+1)
+            })}>
                 {this.state.data?this.state.data.length===0?<h3 className="text-info text-center">没有找到帮助记录</h3>:this.state.data.map((help:HelpEntity,index:number)=>
                     <div key={"list"+index} className="mt-3 mb-3 border-info border">
                         <Container>
@@ -215,6 +224,9 @@ export class MyHelp extends React.Component<{
                     <Button variant={"info"} block={true} className="col-3 ml-auto mr-auto mt-3" onClick={()=>this.score()}>评价</Button>
                 </div>} open={this.state.historyId!==null} titleId="score-dialog" menuName="评分" onClose={()=>this.setState({historyId:null})}/>
 
+                {this.state.scrollTip!==null?<SimpleSnackbar message={this.state.scrollTip} onClose={()=>this.setState({scrollTip:null})} duration={1000}/>:null}
+
+
             </div>
         )
     }

src/my/SeekHelp.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import {Button, ButtonGroup, Col, Container, Image, ListGroup, Row} from "react-bootstrap";
-import {ActivityStatus, SeekHelpState, User} from "../entity";
+import {ActivityStatus, PageProps, SeekHelpState, User} from "../entity";
 import moment from "moment";
 import Dialog from "@material-ui/core/Dialog";
 import {CloseDialog} from "../ui/CloseDialog";
@@ -9,9 +9,17 @@ import Draggable from "react-draggable";
 import {MyDialog} from "../ui/MyDialog";
 import {MyInfo} from "./MyInfo";
 import {Method, request} from "../interface";
-import {SeekHelpInfoRes, SeekHelpInfoTransform, SeekHelpUser, SeekHelpUserTransform, SimpleMessage} from "../result";
+import {
-import {getStatus} from "../public";
+    PageDataMessage,
+    SeekHelpInfoRes,
+    SeekHelpInfoTransform,
+    SeekHelpUser,
+    SeekHelpUserTransform,
+    SimpleMessage
+} from "../result";
+import {getStatus, scrollBottom} from "../public";
 import {Api, prefix} from "../api";
+import {SimpleSnackbar} from "../ui/toast";
 
 const titleId="seek-help-dialog"
 
@@ -34,6 +42,9 @@ export class SeekHelp extends React.Component<{ user:string },
     userId?:string;
     //操作反馈弹窗
     result:JSX.Element|null;
+    //分页信息
+    page?:PageProps;
+    scrollTip:string|null
     }>{
 
 
@@ -44,30 +55,35 @@ export class SeekHelp extends React.Component<{ user:string },
             data:[],
             open:false,
             openUserInfo:false,
-            result:null
+            result:null,
+            scrollTip:null
         }
     }
 
     componentDidMount() {
-        this.loadHelp()
+        this.loadHelp(1)
     }
 
     /**
      * 加载我的求助信息
      */
-    loadHelp(){
+    loadHelp(page:number){
         let that=this
-        request(Api.main.activity.seekHelp,Method.GET, {},new SeekHelpInfoTransform(),function (res:SeekHelpInfoRes) {
+        request(Api.main.activity.seekHelp,Method.GET, {
+            currentPage:String(page)
+        },new SeekHelpInfoTransform(),function (res:SeekHelpInfoRes) {
                 switch (res.customResult) {
-                    case SimpleMessage.fail:
+                    case PageDataMessage.ok:
                         that.setState({
-                            result:<h3 className="text-danger text-center">获取求助信息失败，请联系管理员</h3>
+                            data: (that.state.data||[]).concat(res.dataList||[]),
-                        });
+                            page: res.page,
+                            scrollTip: page > 1 ? '成功加载第' + page + '页数据' : null,
+                        })
                         break
-                    case SimpleMessage.ok:
+                    case PageDataMessage.fail:
                         that.setState({
-                            data:res.dataList
+                            result:<h3 className="text-danger text-center">获取求助信息失败，请联系管理员</h3>
-                        })
+                        });
                         break
                 }
         })
@@ -102,8 +118,11 @@ export class SeekHelp extends React.Component<{ user:string },
 
 
     render() {
+        let that=this
         return (
-            <div className="overflow-auto seek-help-height w-100">
+            <div className="overflow-auto seek-help-height w-100" onScroll={event => scrollBottom(event,this,function () {
+                    that.loadHelp((that.state.page?.currentPage||1)+1)
+            })}>
                 {this.state.data?this.state.data.length===0?<h3 className="text-info text-center">没有找到求助记录</h3>:this.state.data.map((help:SeekHelpState, index:number)=>
                     <div key={"list"+index} className="mt-3 mb-3 border-info border">
                         <Container>
@@ -158,6 +177,8 @@ export class SeekHelp extends React.Component<{ user:string },
 
                 <MyDialog content={this.state.result} open={this.state.result!==null} titleId="seek-help-dialog"
                           menuName="求助信息提示" onClose={()=>this.setState({result:null})} />
+
+                {this.state.scrollTip!==null?<SimpleSnackbar message={this.state.scrollTip} onClose={()=>this.setState({scrollTip:null})} duration={1000}/>:null}
             </div>
         )
     }

src/result.ts

@@ -200,22 +200,17 @@ export class ModifyPwdTransform extends EmptyBodyDiffMsg<ModifyPwdMessage>{
 }
 
 
-export class SeekHelpInfoRes extends JSONResponse<SimpleMessage>{
+export class SeekHelpInfoRes extends PageDataRes{
     dataList?:Array<SeekHelpState>
 }
 
 /**
  * 求助信息转换
  */
-export class SeekHelpInfoTransform extends TransformData<SimpleMessage, SeekHelpInfoRes>{
+export class SeekHelpInfoTransform extends PageDataTransform<SeekHelpInfoRes>{
     protected newObject(): SeekHelpInfoRes {
         return new SeekHelpInfoRes();
     }
-
-
-    protected transformBody(data: any) {
-        this.target.dataList=data.body
-    }
 }
 
 export class SeekHelpUser extends JSONResponse<SimpleMessage>{