瀏覽代碼

修复订单tab上拉加载更多问题

DESKTOP-SYIYI\Dell 7 年之前
父節點
當前提交
5a2ff86444

+ 0 - 2
src/components/blocks/util/blockUtil.js

@@ -22,7 +22,6 @@ import FCode from '../fcode.vue'
 import GoodsTop from '../goods_top.vue'
 class BlockUtil {
     static createBlockComp(createElement, special, proxy) {
-        console.log(special);
         let comp;
         let params = {
             props: {
@@ -119,7 +118,6 @@ class BlockUtil {
                     break;
             }
         } catch (e) {
-            // comp = createElement('div', '<p>创建失败</p>');
             comp = createElement('div', '创建失败:'+e);
         }
         return comp;

+ 8 - 8
src/components/main/mine/mine.vue

@@ -9,24 +9,24 @@
             </cell>
         </group>
         <group>
-            <cell title="我的订单" value="查看全部订单" is-link link="/order_tabs?index=0" style="padding: 50px 40px;"></cell>
+            <cell title="我的订单" value="查看全部订单" is-link link="/order_tabs/全部/0/0" style="padding: 50px 40px;"></cell>
             <cell class="order_classify">
                 <flexbox>
                     <flexbox-item>
-                        <router-link :to="{ path: '/order_tabs', query: { index: 1}}">
+                        <router-link :to="{ path: '/order_tabs/待付款/1/10'}">
                             <div class="order_classify_icon order_classify_icon_1"></div>
                             <p class="item_title">待付款</p>
                         </router-link>
                     </flexbox-item>
                     <flexbox-item>
-                        <router-link :to="{ path: '/order_tabs', query: { index: 2}}">
+                        <router-link :to="{ path: '/order_tabs/待发货/2/20'}">
                             <div class="order_classify_icon order_classify_icon_2"></div>
                             <p class="item_title">待发货</p>
                         </router-link>
                     </flexbox-item>
                     </flexbox-item>
                     <flexbox-item>
-                        <router-link :to="{ path: '/order_tabs', query: { index: 3}}">
+                        <router-link :to="{ path: '/order_tabs/待收货/3/30'}">
                             <div class="order_classify_icon order_classify_icon_3">
                             </div>
                             <p class="item_title">待收货</p>
@@ -34,7 +34,7 @@
                     </flexbox-item>
                     </flexbox-item>
                     <flexbox-item>
-                        <router-link :to="{ path: '/order_tabs', query: { index: 4}}">
+                        <router-link :to="{ path: '/order_tabs/已收货/4/40'}">
                             <div class="order_classify_icon order_classify_icon_4"></div>
                             <p class="item_title">已收货</p>
                         </router-link>
@@ -81,10 +81,10 @@
     export default {
         created(){
             let shareMsg = {
-                title:'熊猫美妆商城',
+                title: '熊猫美妆商城',
                 desc: '熊猫美妆极速商城',
-                link: "http://"+window.location.host+'/mobile/index.html?#',
-                img_url:'http://a.lrlz.com/data/upload/shop/store/goods/6/6_05342032688036066_1280.jpg'
+                link: "http://" + window.location.host + '/mobile/index.html?#',
+                img_url: 'http://a.lrlz.com/data/upload/shop/store/goods/6/6_05342032688036066_1280.jpg'
             };
             let WxShare = new WechatShare(shareMsg);
             if (this.$store.state.isLogIn) {

+ 33 - 9
src/components/order/list/OrderList.vue

@@ -7,6 +7,7 @@
     export default {
         data(){
             return {
+                page: null,
                 datas: null,
                 action_id: -1,
                 has_loaded: false,
@@ -17,13 +18,35 @@
                 windowHeight: 0,
             }
         },
-        props: [
-            "page",
-        ],
+        watch: {
+            '$route' (to, from) {
+                if (to.path != from.path) {
+                    this.page = null;
+                    this.datas = null;
+                    this.action_id = -1;
+                    this.has_loaded = false;
+                    this.hasmore = false;
+                    this.curpage = 1;
+                    this.scrollTop = 0;
+                    this.documentHeight = 0;
+                    this.windowHeight = 0;
+                    this.initParams();
+                }
+            }
+        },
         created(){
-            this.getData();
+            this.initParams();
         },
         methods: {
+            initParams(){
+                let title = this.$route.params.title;
+                let index = this.$route.params.index;
+                let state = this.$route.params.state;
+                this.page = {
+                    title: title, index: index, state: state
+                };
+                this.getData();
+            },
             getData(){
                 let _self = this;
                 this.$store.commit('updateLoadingStatus', {isLoading: true});
@@ -68,18 +91,18 @@
                 this.scrollTop = document.body.scrollTop;
                 this.documentHeight = document.body.scrollHeight;
                 this.windowHeight = window.screen.height * 2;
-                if (!this.isload && (this.documentHeight-(this.scrollTop + this.windowHeight) <= 100)) {
+                if (!this.isload && (this.documentHeight - (this.scrollTop + this.windowHeight) <= 100)) {
                     this.getData();
                 }
             },
             getParamState(state){
-                if (state === 10) {
+                if (state == 10) {
                     return "state_new";
-                } else if (state === 20) {
+                } else if (state == 20) {
                     return "state_pay";
-                } else if (state === 30) {
+                } else if (state == 30) {
                     return "state_send";
-                } else if (state === 40) {
+                } else if (state == 40) {
                     return "state_success";
                 } else {
                     return "";
@@ -407,6 +430,7 @@
         display: inline-block;
         float: right;
     }
+
     .weui-dialog__bd {
         font-size: 30px;
     }

+ 13 - 15
src/components/order/list/OrderTabs.vue

@@ -1,21 +1,21 @@
 <script>
-    import { Tab, TabItem, Swiper, SwiperItem} from 'vux'
+    import {Tab, TabItem, Swiper, SwiperItem} from 'vux'
     import OrderList from  "./OrderList.vue"
 
     export default {
         computed: {
             current_index: function () {
-                return this.selected_page === -1 ? parseInt(this.$route.query["index"]) : this.selected_page;
+                return this.selected_page = parseInt(this.$route.params["index"]) ;
             }
         },
         data(){
             return {
                 pages: [
-                    { title: "全部", index: 0, state: 0},
-                    { title: "待付款", index: 1, state: 10},
-                    { title: "待发货", index: 2, state: 20},
-                    { title: "待收货", index: 3, state: 30},
-                    { title: "已收货", index: 4, state: 40},
+                    {title: "全部", index: 0, state: 0},
+                    {title: "待付款", index: 1, state: 10},
+                    {title: "待发货", index: 2, state: 20},
+                    {title: "待收货", index: 3, state: 30},
+                    {title: "已收货", index: 4, state: 40},
                 ],
                 selected_page: -1
             }
@@ -23,23 +23,21 @@
         render(h){
             let _self = this;
             let nativeClickHandler = (index = 0) => {
-                _self.selected_page = index;
+                let page = _self.pages[index];
+                _self.$router.push(`/order_tabs/${page.title}/${page.index}/${page.state}`);
             };
             //tab
             const tabs = this.pages.map((item, index) => {
                 return <TabItem selected={_self.current_index === index}
                                 nativeOnClick={ () => nativeClickHandler(index)}>{ _self.pages[index].title}</TabItem>
             })
-            //pages
-            const lists = this.pages.map((item, index) => {
-                return <OrderList page={item} class={{order_hide: this.current_index !== index}}/>
-            })
-
             return (
                     <div>
                         <div v-document_title>我的订单</div>
-                        <Tab>{tabs}</Tab>
-                        <div class="order_container">{lists}</div>
+                        <Tab >
+                            {tabs}
+                        </Tab>
+                        <router-view class="order_container"></router-view>
                     </div>
             )
         }

+ 4 - 1
src/router/routes.js

@@ -94,12 +94,15 @@ export default [
         component: SearchPage
     },
     {
-        path: '/order_tabs',
+        path: '/order_tabs/:title/:index/:state',
         component: OrderTabs,
         children: [
             {
                 path: 'list',
                 component: OrderList
+            },{
+                path:"/",
+                component: OrderList
             }
         ]
     },