订单列表

 <template>
-  <img v-lazy="currentSrc" :alt="alt" v-if="!refresh">
+  <img v-lazy="currentSrc" :alt="alt" v-if="!refresh" />
 </template>
 
 <script>
 export default {
-  name: 'ImgSize',
+  name: "ImgSize",
   props: {
     src: String,
     width: Number,
     height: Number,
-    alt: String,
+    alt: String
   },
   data() {
     return {
@@ -26,15 +26,12 @@ export default {
   },
   computed: {
     currentSrc() {
-      return (this.src || '')
-        .replace('http://', '//')
-        .replace('{width}', this.width)
-        .replace('{height}', this.height);
+      return (this.src || "")
+        .replace("http://", "//")
+        .replace("{width}", this.width)
+        .replace("{height}", this.height);
     }
   }
 };
 </script>
 
-<style>
-
-</style>

 <template>
   <div class="order-item-wrapper">
     <div class="item-img">
-      <img
+      <image-format
         alt=""
-        src="//img10.static.yhbimg.com/goodsimg/2019/06/17/16/01c74e27eab148e4731af0e53518878972.jpg?imageMogr2/thumbnail/235x314/position/center/quality/60/format/webp"
+        :src="goodsInfo.goodImg"
+        :width="180"
+        :height="180"
       />
     </div>
     <div class="item-info">
       <div class="price-status">
         <slot name="item-price">
-          <span class="price">¥299.00</span>
+          <span class="price">￥{{ goodsInfo.goodPrice }}</span>
         </slot>
-        <slot name="orderStatus" :orderStatus="orderStatus"></slot>
+        <slot name="orderStatus" :orderStatus="order.statuStr"></slot>
       </div>
       <p class="item-name">
-        Nike Air Max 97 秋季限定款Kobe签名独家发售 限购
+        {{ goodsInfo.productName }}
       </p>
       <slot name="item-spec">
         <p class="item-spec">
-          蓝色，39码
+          {{ spec }}
         </p>
       </slot>
     </div>
@@ -27,10 +29,20 @@
 
 <script>
 export default {
-  data() {
-    return {
-      orderStatus: "交易成功"
-    };
+  props: {
+    order: {
+      type: Object,
+      default: {}
+    }
+  },
+  computed: {
+    goodsInfo: function() {
+      return this.$props.order.goodsInfo;
+    },
+    spec: function() {
+      const { colorName, sizeName } = this.goodsInfo;
+      return `${colorName},${sizeName}码`;
+    }
   }
 };
 </script>
@@ -38,13 +50,16 @@ export default {
 <style lang="scss" scoped>
 .order-item-wrapper {
   display: flex;
+  margin: 40px 0;
 
   .item-img {
+    min-width: 180px;
     max-width: 180px;
     max-height: 180px;
+    display: inline-block;
+    text-align: center;
 
     & > img {
-      width: 100%;
       height: 100%;
     }
   }
@@ -59,8 +74,14 @@ export default {
 
   .item-info {
     display: flex;
-    justify-content: space-between;
-    align-items: center;
+    flex: 1;
+    flex-direction: column;
+    margin-left: 20px;
+
+    .price-status {
+      display: flex;
+      justify-content: space-between;
+    }
   }
 }
 </style>
\ No newline at end of file

 <template>
-  <div>
-    订单列表
-  </div>
+  <scroll :data="orderList" class="order-list-wrapper">
+    <order-list-item
+      v-for="order in orderList"
+      :key="order.orderCode"
+      :order="order"
+    >
+      <template #orderStatus="{orderStatus}">{{ orderStatus }}</template>
+    </order-list-item>
+  </scroll>
 </template>
 
 <script>
-import { Button } from "cube-ui";
+import { Button, Scroll } from "cube-ui";
+import { createNamespacedHelpers } from "vuex";
+import OrderListItem from "./components/order-list-item";
+
+const { mapActions, mapState } = createNamespacedHelpers("order/orderList");
 
 export default {
   components: {
-    Button
+    Button,
+    Scroll,
+    OrderListItem
+  },
+  computed: {
+    ...mapState(["orderList"])
   },
   // 获取订单数据
   asyncData({ store, router }) {
     const { owner, status } = router.params;
     store.dispatch("order/orderList/fetchOrderList", { owner, status });
+  },
+  mounted() {
+    const { owner, status } = this.$route.params;
+    this.fetchOrderList({ owner, status });
+  },
+  methods: {
+    ...mapActions(["fetchOrderList"]),
+    fetchMore() {
+      const { owner, status } = this.$route.params;
+      this.fetchOrderList({ owner, status });
+    }
   }
 };
 </script>
 <style lang="scss" scoped>
+.order-list-wrapper {
+  margin: 40px 20px;
+}
 </style>
\ No newline at end of file

@@ -4,7 +4,7 @@
 import store from 'yoho-store';
 import cookie from 'yoho-cookie';
 import components from '../components';
-import {each} from 'lodash';
+import { each } from 'lodash';
 
 export default {
   loadGlobalComponents(Vue) {
@@ -28,5 +28,5 @@ export default {
     // 附加Vue原型属性
     Vue.prop('store', store);
     Vue.prop('cookie', cookie);
-  }
+  },
 };

@@ -8,7 +8,7 @@ export default function() {
     modules: {
       priceChange: priceChange(),
       orderList: orderList(),
-      orderConfirm: orderConfirm()
-    }
+      orderConfirm: orderConfirm(),
+    },
   };
 }

@@ -2,39 +2,44 @@ export default function() {
   return {
     namespaced: true,
     state: {
-      status: null, // 订单状态
-      owner: '', // 订单来源
+      page: 1,
+      pageSize: 10,
+      pagetotal: 0,
+      orderList: [],
     },
     mutations: {
-      setRouteParam(state, { owner, status } = {}) {
-        state.owner = owner;
-        state.status = status;
+      setOrderList(state, res = {}) {
+        const { page, pagetotal, data } = res;
+
+        console.log('----------------', data);
+        state.page = page;
+        state.pagetotal = pagetotal;
+        state.orderList = data || [];
       },
-      setOrderList() {},
     },
     actions: {
       /**
        *  获取订单列表
        * @param {*}  param0 vue store context
-       * @param {*} param1 服务器端预加载数据参数
+       * @param {
+       *  owner: 订单来源
+       *  status: 订单状态
+       * }
+       * r
        */
-      async fetchOrderList({ commit, state }, preParam) {
-        const { owner, status } = preParam || state;
-
-        if (preParam) {
-          commit('setRouteParam');
-        }
+      async fetchOrderList({ commit }, { owner, status } = {}) {
         const res = await this.$api.get('/api/order/list', {
           tabType: owner,
           type: status,
           page: 1,
+          limit: 5,
 
           // Todo 删除
           uid: 600043484,
         });
 
         if (res.code === 200) {
-          commit('setOrderList', { list: res.data.data, owner });
+          commit('setOrderList', res.data);
         }
       },
     },

@@ -3,14 +3,15 @@ const merge = require('webpack-merge');
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
+  .BundleAnalyzerPlugin;
 const VueSSRClientPlugin = require('vue-server-renderer/client-plugin');
 let baseConfig = require('./webpack.base.conf');
 const isProd = process.env.NODE_ENV === 'production';
 
 const webpackConfig = merge(baseConfig, {
   entry: {
-    app: './apps/entry-client.js'
+    app: './apps/entry-client.js',
   },
   optimization: {
     runtimeChunk: true,
@@ -23,7 +24,7 @@ const webpackConfig = merge(baseConfig, {
           priority: -10,
           chunks: 'all',
           name: 'vendors',
-          test: /[\\/]node_modules[\\/]/
+          test: /[\\/]node_modules[\\/]/,
         },
         vue: {
           priority: 1,
@@ -48,9 +49,9 @@ const webpackConfig = merge(baseConfig, {
           chunks: 'all',
           name: 'lottie',
           test: /lottie-web/,
-        }
-      }
-    }
+        },
+      },
+    },
   },
   module: {
     rules: [
@@ -63,10 +64,12 @@ const webpackConfig = merge(baseConfig, {
           {
             loader: 'sass-loader',
             options: {
-              sourceMap: isProd
-            }
-          }]
-      }, {
+              sourceMap: isProd,
+            },
+          },
+        ],
+      },
+      {
         test: /\.styl(us)?$/,
         use: [
           isProd ? MiniCssExtractPlugin.loader : 'vue-style-loader',
@@ -77,47 +80,52 @@ const webpackConfig = merge(baseConfig, {
             options: {
               sourceMap: isProd,
               'resolve url': true,
-              import: [path.resolve(__dirname, '../apps/statics/scss/theme.styl')]
-            }
-          }]
-      }, {
+              import: [
+                path.resolve(__dirname, '../apps/statics/scss/theme.styl'),
+              ],
+            },
+          },
+        ],
+      },
+      {
         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
         use: {
           loader: 'file-loader',
           options: {
-            name: 'static/img/[name].[hash:7].[ext]'
-          }
-        }
-      }, {
+            name: 'static/img/[name].[hash:7].[ext]',
+          },
+        },
+      },
+      {
         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
         use: {
           loader: 'file-loader',
           options: {
-            name: 'static/img/[name].[hash:7].[ext]'
-          }
-        }
-      }
-    ]
+            name: 'static/img/[name].[hash:7].[ext]',
+          },
+        },
+      },
+    ],
   },
   resolve: {
     alias: {
       'create-api': 'common/create-api-client.js',
-      'report-error': 'common/report-error-client.js'
-    }
+      'report-error': 'common/report-error-client.js',
+    },
   },
   plugins: [
     new VueSSRClientPlugin({
-      filename: '../../manifest.json'
+      filename: '../../manifest.json',
     }),
     new webpack.DefinePlugin({
-      'process.env.VUE_ENV': '"client"'
+      'process.env.VUE_ENV': '"client"',
     }),
     new HtmlWebpackPlugin({
       filename: isProd ? '../../degrade.html' : 'degrade.html',
       template: 'apps/index.html',
-      inject: true
-    })
-  ]
+      inject: true,
+    }),
+  ],
 });
 
 if (process.argv.some(a => a === '--report')) {
@@ -127,8 +135,8 @@ if (isProd) {
   webpackConfig.plugins.push(
     new MiniCssExtractPlugin({
       filename: 'static/css/[name].[contenthash].css',
-      allChunks: true
-    })
+      allChunks: true,
+    }),
   );
 }
 module.exports = webpackConfig;

@@ -10,7 +10,6 @@ const isProduction = process.env.NODE_ENV === 'production';
 const isTest = process.env.NODE_ENV === 'test3';
 
 const domains = {
-
   // api: 'http://api.yoho.cn/',
   // service: 'http://service.yoho.cn/',
   // ufo: 'http://java-yohoufo-fore.test3.ingress.dev.yohocorp.com/ufo-gateway/',
@@ -41,13 +40,13 @@ module.exports = {
   yohoVerifyUdid: 'ca5c462a-e28b-407d-8061-5e204398e3cc',
   signExtend: {
     business_line: 'yohobuy',
-    business_client: 'h5/xianyu'
+    business_client: 'h5/xianyu',
   },
   report: {
     host: 'badjs.yoho.cn',
     port: 80,
     db: 'web-apm',
-    immediate: true
+    immediate: true,
   },
   subDomains: {
     host: '.m.yohobuy.com',
@@ -57,7 +56,7 @@ module.exports = {
     search: '//search.m.yohobuy.com',
     huodong: '//huodong.m.yohobuy.com',
     activity: '//activity.yohobuy.com',
-    index: '//m.yohobuy.com'
+    index: '//m.yohobuy.com',
   },
   useCache: false,
   loggers: {
@@ -71,7 +70,7 @@ module.exports = {
       maxsize: Math.pow(1024, 3),
       timestamp() {
         return new Date().toString();
-      }
+      },
     },
     errorFile: {
       close: true,
@@ -84,14 +83,14 @@ module.exports = {
       handleExceptions: true,
       timestamp() {
         return new Date().toString();
-      }
+      },
     },
     console: {
       level: 'debug',
       colorize: 'all',
       prettyPrint: true,
-      debugStdout: true
-    }
+      debugStdout: true,
+    },
   },
   zookeeperServer: '127.0.0.1:2181',
   jsSdk: '//cdn.yoho.cn/js-sdk/1.3.10/jssdk.js',
@@ -112,32 +111,32 @@ module.exports = {
         } else {
           return 1000 * 10;
         }
-      }
+      },
     },
     session: {
       host: '192.168.104.201',
       port: '6379',
-      prefix: 'yohobuy_session:'
-    }
+      prefix: 'yohobuy_session:',
+    },
   },
   qiniu: {
     ACCESS_KEY: 'BwWhoJN536BnV3CzlE20AjNKC9O2bP0l5tFpKsDU',
     SECRET_KEY: '_x2VtO7fEmylgjojmLi7qwTBtRm30S8BrO0FxOPK',
-    BUCKET_NAME: 'cmsimg01'
+    BUCKET_NAME: 'cmsimg01',
   },
   qiniuYohoCdn: {
     ACCESS_KEY: 'BwWhoJN536BnV3CzlE20AjNKC9O2bP0l5tFpKsDU',
     SECRET_KEY: '_x2VtO7fEmylgjojmLi7qwTBtRm30S8BrO0FxOPK',
     ORIGIN: 'https://cdn.yoho.cn',
-    BUCKET_NAME: 'yohocdn'
+    BUCKET_NAME: 'yohocdn',
   },
   mysql: {
     host: 'localhost',
     userName: 'root',
     password: 'root',
     port: '3306',
-    db: 'yoho_apm_test'
-  }
+    db: 'yoho_apm_test',
+  },
 };
 
 if (isProduction) {
@@ -167,20 +166,20 @@ if (isProduction) {
           } else {
             return 1000 * 10;
           }
-        }
+        },
       },
       session: {
         host: 'redis.web.yohoops.org',
         port: '6379',
         pass: 'redis9646',
-        prefix: 'yohobuy_session:'
-      }
+        prefix: 'yohobuy_session:',
+      },
     },
     report: {
       host: 'badjs.yohoops.org',
       port: 80,
       db: 'web-apm',
-      immediate: true
+      immediate: true,
     },
     monitorReport: {
       host: '10.66.4.25',
@@ -198,7 +197,7 @@ if (isProduction) {
         zippedArchive: true,
         timestamp() {
           return new Date().toString();
-        }
+        },
       },
       errorFile: {
         name: 'error',
@@ -211,31 +210,33 @@ if (isProduction) {
         handleExceptions: true,
         timestamp() {
           return new Date().toString();
-        }
+        },
       },
       console: {
         close: true,
         level: 'info',
         colorize: 'all',
         prettyPrint: true,
-        debugStdout: true
-      }
+        debugStdout: true,
+      },
     },
     mysql: {
       host: '10.66.0.139',
       port: '3306',
       db: 'webapm',
       userName: 'root',
-      password: 'yB877Jy7tV6juIYk'
-    }
+      password: 'yB877Jy7tV6juIYk',
+    },
   });
 } else if (isTest) {
   Object.assign(module.exports, {
     assetUrl: '//cdn.yoho.cn/yohobuywap-node/',
     domains: {
       api: process.env.TEST_API || 'http://api-test3.dev.yohocorp.com/',
-      ufo: process.env.UFO_API || 'http://java-yohoufo-fore.test3.ingress.dev.yohocorp.com/ufo-gateway/',
-      service: process.env.TEST_API || 'http://api-test3.dev.yohocorp.com/'
+      ufo:
+        process.env.UFO_API ||
+        'http://java-yohoufo-fore.test3.ingress.dev.yohocorp.com/ufo-gateway/',
+      service: process.env.TEST_API || 'http://api-test3.dev.yohocorp.com/',
     },
     useCache: false,
     monitorReport: {
@@ -254,7 +255,7 @@ if (isProduction) {
         maxsize: Math.pow(1024, 3),
         timestamp() {
           return new Date().toString();
-        }
+        },
       },
       errorFile: {
         name: 'error',
@@ -266,22 +267,22 @@ if (isProduction) {
         handleExceptions: true,
         timestamp() {
           return new Date().toString();
-        }
+        },
       },
       console: {
         close: false,
         level: 'info',
         colorize: 'all',
         prettyPrint: true,
-        debugStdout: true
-      }
+        debugStdout: true,
+      },
     },
     mysql: {
       host: '192.168.102.219',
       userName: 'yh_test',
       password: 'yh_test',
       port: '3306',
-      db: 'yoho_apm_test'
-    }
+      db: 'yoho_apm_test',
+    },
   });
 }