订单列表

@@ -53,9 +53,8 @@ export default {
   display: flex;
 
   .item-img {
-    min-width: 180px;
-    max-width: 180px;
-    max-height: 180px;
+    width: 180px;
+    height: 180px;
     display: inline-block;
     text-align: center;
 

@@ -3,9 +3,14 @@
     <scroll ref="statusScroll" :data="statusList" direction="horizontal">
       <ul class="list-wrapper">
         <li
-          :class="i === 1 ? 'list-item active' : 'list-item'"
+          :class="
+            currentStatus === statusInfo.value
+              ? 'list-item active'
+              : 'list-item'
+          "
           v-for="(statusInfo, i) in statusList"
           :key="i"
+          @click="() => onHandleClick(statusInfo.value)"
         >
           {{ statusInfo.text }}
         </li>
@@ -23,17 +28,28 @@ import {
   ownType
 } from "../../../../../constants/order-constants";
 
+import { createNamespacedHelpers } from "vuex";
+
+const { mapState } = createNamespacedHelpers("order/orderList");
+
 export default {
   components: {
     Scroll
   },
   computed: {
+    ...mapState(["currentStatus"]),
     statusList: function() {
       const { owner } = this.$route.params;
       return owner === ownType.BUY
         ? buyerOrderStatusList
         : sellerOrderStatusList;
     }
+  },
+  methods: {
+    onHandleClick(status) {
+      const { owner } = this.$route.params;
+      this.$router.push({ name: "OrderList", params: { owner, status } });
+    }
   }
 };
 </script>

@@ -3,7 +3,7 @@ const routers = [
   // owner: {sell, buy} 订单来源
   // status: 订单状态
   {
-    name: 'BuyerOrderList',
+    name: 'OrderList',
     path: '/xianyu/:owner/order/list/:status?',
     component: () => import('./order-list'),
   },

 <template>
-  <div>
+  <div class="content-wrapper">
     <status-nav />
-    <scroll :data="orderList" class="order-list-scroll-wrap">
+    <scroll
+      @pulling-up="fetchMore"
+      :options="options"
+      :data="orderList"
+      class="order-list-scroll-wrap"
+    >
       <ul class="list-wrapper">
         <li v-for="order in orderList" :key="order.orderCode">
           <order-list-item :order="order">
@@ -34,14 +39,21 @@ export default {
     StatusNav
   },
   computed: {
-    ...mapState(["orderList"])
+    ...mapState(["orderList", "pullUpLoad"]),
+    options: function() {
+      return {
+        pullUpLoad: this.pullUpLoad
+      };
+    }
   },
+
   // 获取订单数据
   asyncData({ store, router }) {
     const { owner, status } = router.params;
     store.dispatch("order/orderList/fetchOrderList", { owner, status });
   },
   mounted() {
+    console.log("-------------------", this.$route.params);
     const { owner, status } = this.$route.params;
     this.fetchOrderList({ owner, status });
   },
@@ -55,41 +67,48 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.order-list-scroll-wrap {
-  .list-wrapper {
-    li {
-      padding: 40px 40px;
-      border-bottom: 1px solid #eee;
-    }
+.content-wrapper {
+  height: calc(100vh);
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-box-orient: vertical;
 
-    & :last-child {
-      border-bottom: 0;
+  .order-list-scroll-wrap {
+    .list-wrapper {
+      li {
+        padding: 40px 40px;
+        border-bottom: 1px solid #eee;
+      }
+
+      & :last-child {
+        border-bottom: 0;
+      }
     }
-  }
 
-  .actions {
-    display: flex;
-    justify-content: flex-end;
-    margin-top: 40px;
+    .actions {
+      display: flex;
+      justify-content: flex-end;
+      margin-top: 40px;
 
-    button {
-      font-size: 24px;
-      padding: 24px 64px 22px 64px;
-      color: #999;
-      letter-spacing: 0;
-      border-radius: 0;
-      background: #fff;
-      border: 1px solid #ccc;
-      line-height: 1.3;
-      width: 224px;
-      margin-right: 20px;
-    }
+      button {
+        font-size: 24px;
+        padding: 24px 64px 22px 64px;
+        color: #999;
+        letter-spacing: 0;
+        border-radius: 0;
+        background: #fff;
+        border: 1px solid #ccc;
+        line-height: 1.3;
+        width: 224px;
+        margin-right: 20px;
+      }
 
-    & :last-child {
-      background: #002b47;
-      color: #fff;
-      border: 1px solid #002b47;
-      margin-right: 0;
+      & :last-child {
+        background: #002b47;
+        color: #fff;
+        border: 1px solid #002b47;
+        margin-right: 0;
+      }
     }
   }
 }

@@ -27,8 +27,6 @@ export function createStore(context) {
 
       // 买家订单列表
       notice: storeNotice(),
-      // buyerOderList: buyerOderList(),
-
     },
 
     strict: process.env.NODE_ENV !== 'production',

@@ -5,16 +5,26 @@ export default function() {
       page: 1,
       pageSize: 10,
       pagetotal: 0,
-      orderList: [],
+      orderList: [], // 订单列表
+      // scroll 组件参数，是否触发上拉事件
+      pullUpLoad: true,
+      currentStatus: 1,
     },
     mutations: {
       setOrderList(state, res = {}) {
-        const { page, pagetotal, data } = res;
+        let { page, pagetotal, data = [] } = res;
 
-        console.log('----------------', data);
-        state.page = page;
+        state.page = ++page;
         state.pagetotal = pagetotal;
-        state.orderList = data || [];
+        state.orderList = state.orderList.concat(data);
+
+        // 分页结束
+        if (page > pagetotal) {
+          state.pullUpLoad = false;
+        }
+      },
+      setOrderState(state, currentStatus) {
+        state.currentStatus = +currentStatus;
       },
     },
     actions: {
@@ -23,15 +33,21 @@ export default function() {
        * @param {*}  param0 vue store context
        * @param {
        *  owner: 订单来源
-       *  status: 订单状态
+       *  status: 订单状态 默认全部
        * }
        * r
        */
-      async fetchOrderList({ commit }, { owner, status } = {}) {
+      async fetchOrderList(
+        {
+          commit,
+          state: { page },
+        },
+        { owner, status = 1 } = {},
+      ) {
         const res = await this.$api.get('/api/order/list', {
           tabType: owner,
           type: status,
-          page: 1,
+          page,
           limit: 5,
 
           // Todo 删除
@@ -40,6 +56,7 @@ export default function() {
 
         if (res.code === 200) {
           commit('setOrderList', res.data);
+          commit('setOrderState', status);
         }
       },
     },