订单列表增加上拉加载更多

src/App.vue

@@ -1,8 +1,6 @@
 <template>
     <div id="app">
-        <keep-alive>
-            <router-view id="router_view"></router-view>
-        </keep-alive>
+        <router-view id="router_view"></router-view>
         <loading v-model="isLoading"></loading>
     </div>
 </template>

src/components/order/list/OrderList.vue

@@ -1,5 +1,5 @@
 <script>
-    import {Flexbox, FlexboxItem, Divider} from 'vux'
+    import {Flexbox, FlexboxItem, Divider, LoadMore} from 'vux'
     import {dateFormat} from 'vux'
     import Api from "../../../lib/api"
     import WebView from "../../other/webview.vue"
@@ -9,32 +9,32 @@
             return {
                 datas: null,
                 action_id: -1,
-                has_loaded: false
+                has_loaded: false,
+                hasmore: false,
+                curpage: 1,
+                scrollTop: 0,
+                documentHeight: 0,
+                windowHeight: 0,
+                isload: false
             }
         },
         props: [
             "page",
         ],
-        render(h){
-
-            let getParamState = (state) => {
-                if (state === 10) {
-                    return "state_new";
-                } else if (state === 20) {
-                    return "state_pay";
-                } else if (state === 30) {
-                    return "state_send";
-                } else if (state === 40) {
-                    return "state_success";
-                } else {
-                    return "";
-                }
-            }
+        created(){
+            this.getData();
+        },
+        methods: {
+            getData(){
+                let _self = this;
+                if (this.datas == null && !(_self.page.isUpdate && !this.has_loaded))
+                    return
 
-            let _self = this;
-            if (_self.page.isUpdate && !this.has_loaded) {
+                this.isload = true;
                 this.$store.commit('updateLoadingStatus', {isLoading: true});
-                this.$http.jsonp(Api.orderList(), {params: {state_type: getParamState(_self.page.state)}},{_timeout:5000}).then(function (res) {
+                this.$http.jsonp(Api.orderList() + '&curpage=' + this.curpage, {params: {state_type: _self.getParamState(_self.page.state)}}, {_timeout: 5000}).then(function (res) {
+                    this.isload = false;
+                    this.$store.commit('updateLoadingStatus', {isLoading: false});
                     if (res.body.code != 200) {
                         this.$vux.toast.show({
                             type: 'text',
@@ -44,18 +44,56 @@
                         });
                         return;
                     }
-                    _self.has_loaded = true;
-                    _self.datas = res.body.datas;
-                    _self.page.isUpdate = false;
+                    if (_self.curpage == 1) {
+                        _self.has_loaded = true;
+                        _self.page.isUpdate = false;
+                        _self.datas = res.body.datas;
+                    } else {
+                        _self.datas.orders = _self.datas.orders.concat(res.body.datas.orders);
+                        _self.datas.mobile_page = res.body.datas.mobile_page;
+                    }
+                    window.removeEventListener('scroll', _self.loadMoreCallback);
+                    let body = JSON.parse(res.bodyText);
+                    _self.hasmore = body.datas['mobile_page'].hasmore;
+                    if (body.datas['mobile_page'].hasmore) {
+                        this.curpage += 1;
+                        setTimeout(function () {
+                            window.addEventListener('scroll', _self.loadMoreCallback);
+                        }, 1000)
+                    }
+                }, (err) => {
                     this.$store.commit('updateLoadingStatus', {isLoading: false});
-                },(err) => {
                     this.$vux.toast.show({
-                    type: 'text',
-                    text: "网络错误",
-                    position: 'middle'
+                        type: 'text',
+                        text: "网络错误",
+                        position: 'middle'
+                    })
                 })
-            })
+            },
+            loadMoreCallback(){
+                this.scrollTop = document.body.scrollTop;
+                this.documentHeight = document.body.scrollHeight;
+                this.windowHeight = window.screen.height * 2;
+                if (!this.isload && (this.scrollTop + this.windowHeight >= this.documentHeight)) {
+                    this.getData();
+                }
+            },
+            getParamState(state){
+                if (state === 10) {
+                    return "state_new";
+                } else if (state === 20) {
+                    return "state_pay";
+                } else if (state === 30) {
+                    return "state_send";
+                } else if (state === 40) {
+                    return "state_success";
+                } else {
+                    return "";
+                }
             }
+        },
+        render(h){
+            let _self = this;
             let ui;
             if (!_self.datas || (this.datas.hasOwnProperty("orders") && this.datas.orders.length === 0)) {
                 ui = <p style="text-align:center;margin-top:200px">您不存在{this.page.title}的订单</p>
@@ -103,7 +141,7 @@
                 //退款
                 let refundOrder = (order_sn) => {
                     this.$store.commit('updateLoadingStatus', {isLoading: true});
-                    this.$http.jsonp(Api.refundOrder(),{_timeout:5000},{
+                    this.$http.jsonp(Api.refundOrder(), {_timeout: 5000}, {
                         params: {
                             order_sn: order_sn,
                         }
@@ -119,19 +157,19 @@
                         }
                         _self.$store.commit("updateOrderState", {action: res.body.datas, action_id: new Date()});
                         this.$store.commit('updateLoadingStatus', {isLoading: false});
-                    },(err) => {
+                    }, (err) => {
                         this.$vux.toast.show({
-                        type: 'text',
-                        text: "网络错误",
-                        position: 'middle'
+                            type: 'text',
+                            text: "网络错误",
+                            position: 'middle'
+                        })
                     })
-                })
                 }
 
                 //通知服务器改变状态
                 let changeState = (action, order_id) => {
                     this.$store.commit('updateLoadingStatus', {isLoading: true});
-                    this.$http.jsonp(Api.changeOrderState(),{_timeout:5000},{
+                    this.$http.jsonp(Api.changeOrderState(), {_timeout: 5000}, {
                         params: {
                             act_type: action,
                             order_id: order_id
@@ -148,13 +186,13 @@
                         }
                         _self.$store.commit("updateOrderState", {action: res.body.datas, action_id: new Date()});
                         this.$store.commit('updateLoadingStatus', {isLoading: false});
-                    },(err) => {
+                    }, (err) => {
                         this.$vux.toast.show({
-                        type: 'text',
-                        text: "网络错误",
-                        position: 'middle'
+                            type: 'text',
+                            text: "网络错误",
+                            position: 'middle'
+                        })
                     })
-                })
                 }
                 //处理服务器返回的状态
                 let global_state = _self.$store.state.changeState;
@@ -320,8 +358,18 @@
                     </div>
                 })
             }
+            let loadMore = "";
+            if (this.hasmore) {
+                loadMore = <div style={{backgroundColor: "#f9f9f9"}}>
+                    <LoadMore tip="正在为您全力加载" backgroundColor="red" style={{margin: "0 auto"}}></LoadMore>
+                </div>
+            }
             return (
-                    <div>{ui}</div>
+                    <div>
+                        <div>{ui}</div>
+                        <div>{loadMore}</div>
+                    </div>
+
             );
         }
     }

src/lib/api.js

@@ -45,7 +45,7 @@ class Api {
     }
 
     static orderList() {
-        return this.host() + '/mobile/index.php?act=member_order&page=30&op=list&curpage=1&client_type=ajax'
+        return this.host() + '/mobile/index.php?act=member_order&page=30&op=list&page=15&client_type=ajax'
     }
 
     static refundOrder() {