add list page

 <template>
   <LayoutApp :title="title">
     <DateFilter class="date-filter-wrapper" v-show="showFilter" @on-change="dateHandler"></DateFilter>
-    <DetailList @on-date-pick="dateHandler"></DetailList>
+    <DetailList ref="list" @on-date-pick="dateHandler"></DetailList>
   </LayoutApp>
 </template>
 
@@ -9,6 +9,7 @@
 import LayoutApp from '../components/layout/layout-app';
 import DetailList from './detailList/detail-list';
 import DateFilter from './detailList/components/date-filter';
+import {Loading} from 'cube-ui';
 
 import {createNamespacedHelpers} from 'vuex';
 
@@ -19,18 +20,21 @@ export default {
   components: {
     LayoutApp,
     DetailList,
-    DateFilter
+    DateFilter,
+    Loading
   },
   data() {
     return {
       title: '全部佣金'
     };
   },
-  mounted() {
-    this.fetchOrderDetailList();
+  async mounted() {
+    const result = await this.fetchOrderDetailList();
+
+    this.$refs.list.forceUpdate(result);
   },
   computed: {
-    ...mapState(['showFilter', 'date'])
+    ...mapState(['showFilter', 'date', 'recordDetailList'])
   },
   methods: {
     ...mapMutations({
@@ -56,9 +60,13 @@ export default {
 
       this.timePicker.show();
     },
-
-    selectHandle(date, selectedVal) {
+    async selectHandle(date, selectedVal) {
       this.setDate({value: [...selectedVal]});
+
+      this.$refs.list.forceUpdate();
+      const result = await this.fetchOrderDetailList();
+
+      this.$refs.list.forceUpdate(result);
     },
     cancelHandle() {
     }
@@ -75,4 +83,5 @@ export default {
     padding-left: 40px;
     z-index: 2;
   }
+
 </style>

@@ -4,7 +4,7 @@
       {{date[0]}}年{{date[1]}}月 <i class="arrow"></i>
     </div>
     <div class="account">
-      总佣金：{{total.totalSettleAmount}} &nbsp; 已打款：{{total.totalPaidAmount}}  &nbsp; 未打款：{{total.totalWaitPayAmount}}
+      总佣金：{{total.totalSettleAmount || '¥0.0'}} &nbsp; 已打款：{{total.totalPaidAmount || '¥0.0'}}  &nbsp; 未打款：{{total.totalWaitPayAmount || '¥0.0'}}
     </div>
   </div>
 </template>

@@ -13,14 +13,14 @@
 
       <div class="item">
         <span class="label">卖家昵称：</span>
-        <span class="tip">{{data.sellerName}}</span>
+        <span class="tip">{{data.sellerName || '----'}}</span>
       </div>
     </div>
 
     <div class="item-right">
       <div class="money-wrapper">
         <span class="desc">返：</span>
-        <span class="money">{{'¥' +data.settleAmount}}</span>
+        <span class="money">{{data.settleAmount}}</span>
       </div>
 
       <div class="status">

 <template>
   <div>
-    <RecordItem class="record-item-wrapper" v-for="(item, index) in data" :data="item"></RecordItem>
+    <RecordItem class="record-item-wrapper" v-for="(item, index) in data" :data="item" :key="item.buyerOrderCode"></RecordItem>
   </div>
 </template>
 

 <template>
-  <Scroll class="detail-list-wrapper" :options="options" :scrollEvents="['scroll']" @scroll="scrollHandler">
+  <Scroll ref="scroll" class="detail-list-wrapper" :data="recordDetailList" :options="options" :scrollEvents="['scroll']"
+          @scroll="scrollHandler"
+          @pulling-up="onPullingUp"
+  >
     <TabBar class="tab-bar-wrapper" :data="tabs"
             v-model="selectedTabs"
             @click="clickHandler"
@@ -8,7 +11,16 @@
 
     <DateFilter class="date-filter-wrapper" @on-change="changeHandler"></DateFilter>
 
-    <RecordList class="record-list-wrapper" :data="recordDetailList"></RecordList>
+    <template v-if="fetchRecordDetailListRequest && pager.page === 0">
+      <div class="loading-wrapper">
+        <Loading class="loading"></Loading>
+      </div>
+    </template>
+
+    <template v-else>
+      <div v-if="recordDetailList.length === 0" class="no-data">当前月份无数据</div>
+      <RecordList v-else class="record-list-wrapper" :data="recordDetailList"></RecordList>
+    </template>
 
   </Scroll>
 </template>
@@ -17,11 +29,11 @@
 import TabBar from './components/tab-bar';
 import DateFilter from './components/date-filter';
 import RecordList from './components/record-list';
-import {Scroll} from 'cube-ui';
+import {Scroll, Loading} from 'cube-ui';
 import {throttle} from 'lodash';
 
 import {createNamespacedHelpers} from 'vuex';
-const {mapState, mapMutations} = createNamespacedHelpers('invite/invite');
+const {mapState, mapMutations, mapActions} = createNamespacedHelpers('invite/invite');
 
 export default {
   name: 'DetailList',
@@ -29,7 +41,8 @@ export default {
     TabBar,
     DateFilter,
     RecordList,
-    Scroll
+    Scroll,
+    Loading
   },
   data() {
     return {
@@ -65,8 +78,14 @@ export default {
       showFilter: 'SET_FILTER_TOP',
       setTab: 'SET_TAB'
     }),
-    clickHandler(p) {
+    ...mapActions(['fetchOrderDetailList']),
+    async clickHandler(p) {
       this.setTab({value: p});
+
+      this.forceUpdate();
+      const result = await this.fetchOrderDetailList();
+
+      this.forceUpdate(result);
     },
     onDounceScroll(p) {
       if (Math.abs(p.y) >= this.filterTop) {
@@ -80,10 +99,20 @@ export default {
     },
     changeHandler(p) {
       this.$emit('on-date-pick', p);
+
+      this.forceUpdate();
+    },
+    async onPullingUp() {
+      const result = await this.fetchOrderDetailList();
+
+      this.forceUpdate(result);
+    },
+    forceUpdate(force = true) {
+      this.$refs.scroll.forceUpdate(force);
     }
   },
   computed: {
-    ...mapState(['filterTop', 'recordDetailList'])
+    ...mapState(['filterTop', 'recordDetailList', 'fetchRecordDetailListRequest', 'pager'])
   }
 };
 </script>
@@ -108,4 +137,21 @@ export default {
   .record-list-wrapper {
     padding: 0 40px;
   }
+
+  .no-data {
+    margin-top: 270px;
+    font-size: 24px;
+    width: 100%;
+    text-align: center;
+  }
+
+  .loading-wrapper {
+    margin-top: 40px;
+    text-align: center;
+  }
+
+  .loading {
+    display: inline-block;
+    margin: 0 auto;
+  }
 </style>

@@ -40,15 +40,26 @@ export default {
   },
 
   async fetchOrderDetailList({ commit, state }) {
+    if (state.pager.page === 0) {
+      commit(Types.FETCH_INVITE_ORDER_DETAIL_LIST_REQUEST, true);
+      commit(Types.FETCH_INVITE_ORDER_DETAIL_LIST, { list: [] });
+    }
+
     const result = await this.$api.get('/api/ufo/invite/recordDetailList', {
       month: `${state.date[0]}${state.date[1] > 10 ? state.date[1] : '0' + state.date[1]}`,
       tab: state.selectTab,
-      page: state.pager.page,
+      page: state.pager.page + 1,
       limit: state.pager.pageSize
     });
 
     if (result.code === 200) {
-      commit(Types.FETCH_INVITE_ORDER_DETAIL_LIST, { list: get(result, 'data.list', []) });
+      const list =  get(result, 'data.list', []);
+
+      if (state.pager.page === 0) {
+        commit(Types.FETCH_INVITE_ORDER_DETAIL_LIST, { list });
+      } else {
+        commit(Types.FETCH_INVITE_ORDER_DETAIL_LIST, { list: state.recordDetailList.concat(list)});
+      }
 
       commit(Types.SET_PAGER, {
         page: result.data.page,
@@ -61,6 +72,13 @@ export default {
         totalPaidAmount: result.data.totalPaidAmount,
         totalWaitPayAmount: result.data.totalWaitPayAmount
       });
+
+      return result.data.page < result.data.pageTotal;
+
+    } else {
+      commit(Types.FETCH_INVITE_ORDER_DETAIL_LIST_REQUEST, false)
     }
+
+    return false;
   },
 };

@@ -7,6 +7,8 @@ export default function() {
     state: {
       card: null,
       recordList: [],
+      fetchRecordDetailListRequest: false,
+      refresh: false,
       recordDetailList: [],
       inviteCode: {
         showInviteCode: '',
@@ -24,7 +26,7 @@ export default function() {
         new Date().getMonth() + 1
       ],
       pager: {
-        page: 1,
+        page: 0,
         pageSize: 10,
         pageTotal: 0
       },

@@ -18,6 +18,11 @@ export default {
   },
   [Types.SET_DATE](state, {value}) {
     state.date = value;
+    state.pager = {
+      page: 0,
+      pageSize: 10,
+      pageTotal: 0
+    };
   },
   [Types.SET_PAGER](state, pager) {
     state.pager = pager;
@@ -27,8 +32,19 @@ export default {
   },
   [Types.FETCH_INVITE_ORDER_DETAIL_LIST](state, {list}) {
     state.recordDetailList = list;
+    if (list.length > 0) {
+      state.fetchRecordDetailListRequest = false;
+    }
+  },
+  [Types.FETCH_INVITE_ORDER_DETAIL_LIST_REQUEST](state, value) {
+    state.fetchRecordDetailListRequest = value;
   },
   [Types.SET_TAB](state, {value}) {
     state.selectTab = value;
+    state.pager = {
+      page: 0,
+      pageSize: 10,
+      pageTotal: 0
+    };
   }
 };

@@ -13,5 +13,6 @@ export const SET_DATE = 'SET_DATE';
 
 export const SET_PAGER = 'SET_PAGER';
 export const SET_TOTAL = 'SET_TOTAL';
+export const FETCH_INVITE_ORDER_DETAIL_LIST_REQUEST = 'FETCH_INVITE_ORDER_DETAIL_LIST_REQUEST';
 export const FETCH_INVITE_ORDER_DETAIL_LIST = 'FETCH_INVITE_ORDER_DETAIL_LIST';
 export const SET_TAB = 'SET_TAB';