feature/2.9.42311.02-我的薪资福利移动端列表查看

pc4mobx/hrmSalary/pages/mySalaryMobile/components/payrollList/index.js

@@ -13,12 +13,12 @@ const getLabel = WeaLocaleProvider.getLabel;
 class Index extends Component {
 
   render() {
-    const { dataSource } = this.props;
+    const { dataSource, isMore, loading } = this.props;
     return (
       <ul className="payrollList-wrapper">
         {
           _.map(dataSource, it => {
-            return <li>
+            return <li className="item">
               <div className="salaryMonth"><span>{moment(it.salaryYearMonth).format("YYYY-MM")}</span></div>
               <div className="sendTime">
                 <span>{getLabel(111, "发放时间")}</span>
@@ -28,6 +28,12 @@ class Index extends Component {
             </li>;
           })
         }
+        {
+          loading && <li className="more">{getLabel(31230, "加载中")}</li>
+        }
+        {
+          !isMore && <li className="empty">{getLabel(83553, "暂无数据")}</li>
+        }
       </ul>
     );
   }

pc4mobx/hrmSalary/pages/mySalaryMobile/index.js

@@ -6,7 +6,6 @@
  */
 import React, { Component } from "react";
 import { WeaLocaleProvider, WeaTab } from "ecCom";
-import { message } from "antd";
 import moment from "moment";
 import MobileDatePicker from "./components/mobileDatePicker";
 import PayrollList from "./components/payrollList";
@@ -20,7 +19,8 @@ class Index extends Component {
     super(props);
     this.state = {
       dataSource: [], loading: false, pageInfo: { current: 1, pageSize: 10, total: 0 },
-      salaryYearMonth: [moment().startOf("year").format("YYYY-MM"), moment().startOf("month").format("YYYY-MM")]
+      salaryYearMonth: [moment().startOf("year").format("YYYY-MM"), moment().startOf("month").format("YYYY-MM")],
+      isMore: true //是否还有更多数据
     };
   }
 
@@ -48,14 +48,20 @@ class Index extends Component {
         const { datas: dataSource, pageInfo: pageResult } = data;
         const { pageNum: current, pageSize, total } = pageResult;
         this.setState({
-          dataSource, pageInfo: { ...pageInfo, current, pageSize, total }
-        });
+          dataSource: [...this.state.dataSource, ...dataSource],
+          pageInfo: { ...pageInfo, current, pageSize, total }
+        }, () => this.setState({ isMore: this.state.dataSource.length < total }));
       }
     }).catch(() => this.setState({ loading: false }));
   };
   handleLoadMore = () => {
     // 为测试效果临时使用 message
-    message.info("触底了~");
+    const { pageInfo, isMore } = this.state;
+    if (!isMore) return;
+    const { current } = pageInfo;
+    this.setState({
+      pageInfo: { ...pageInfo, current: current + 1 }
+    }, () => this.getMySalaryBillList());
   };
   isTouchBottom = (handler) => {
     const div = document.getElementById("mySalaryMobile");
@@ -70,7 +76,7 @@ class Index extends Component {
   };
 
   render() {
-    const { salaryYearMonth, dataSource } = this.state;
+    const { salaryYearMonth, dataSource, isMore, loading } = this.state;
     const [salaryStartYearMonth, salaryEndYearMonth] = salaryYearMonth;
     return (
       <div id="mySalaryMobile" className="salary-mobile-list-wrapper">
@@ -86,7 +92,7 @@ class Index extends Component {
           <span className="to">{getLabel(15322, "至")}</span>
           <MobileDatePicker value={salaryEndYearMonth} onChange={(v) => this.handleChange("salaryEndYearMonth", v)}/>
         </div>
-        <PayrollList dataSource={dataSource}/>
+        <PayrollList dataSource={dataSource} isMore={isMore} loading={loading}/>
       </div>
     );
   }

pc4mobx/hrmSalary/pages/mySalaryMobile/index.less

@@ -59,7 +59,12 @@
   padding: 8px 0;
   margin-top: 87px;
 
-  li {
+  li.empty, li.more {
+    text-align: center;
+    color: #999;
+  }
+
+  li.item {
     display: flex;
     flex-direction: column;
     border-radius: 5px;