商品列表

+<template>
+  <div>
+    <div class="item" v-if="list.length" v-for="(product,index) in list"
+         :class="((index === 0 || index === 1) ? 'top-line':'') +' '+((index) % 2 === 0 ? 'right-line' :'')"
+         :key="index">
+      <div class="item-price">{{product.price ? '¥' + product.price : ' '}}</div>
+      <ImgSize class="item-imge" :src="product.default_images" :width="300" :height="300"/>
+      <div class="item-name">{{product.product_name}}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {Scroll} from 'cube-ui';
+import ImgSize from '../../../components/img-size';
+
+export default {
+  props: {
+    list: Array,
+  },
+  methods: {},
+  components: {
+    ImgSize,
+    Scroll,
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+  .top-line {
+    border-top: 1px #ddd solid;
+  }
+
+  .right-line {
+    border-right: 1px #ddd solid;
+  }
+
+  .item {
+    width: 9.37rem;
+    border-bottom: 1px #ddd solid;
+    padding: 28px 38px 0 38px;
+    float: left;
+    overflow: hidden;
+    height: 560px;
+  }
+
+  .item-price {
+    margin-bottom: 38px;
+    font-size: 28px;
+    color: #000;
+    letter-spacing: 0;
+  }
+
+  .item-imge {
+    width: 300px;
+    height: 300px;
+  }
+
+  .item-name {
+    font-size: 28px;
+    color: #000;
+    letter-spacing: 0;
+    text-align: center;
+    line-height: 40px;
+    margin-top: 38px;
+    margin-bottom: 44px;
+  }
+</style>

 export default [{
+  name: 'list',
   path: '/xianyu/list',
-  component: () => null
+  component: () => import(/* webpackChunkName: "list" */ './list')
+},
+{
+  name: 'filter',
+  path: '/xianyu/list/filter',
+  component: () => import(/* webpackChunkName: "filter" */ './filter')
+},
+{
+  name: 'search',
+  path: '/xianyu/list/search',
+  component: () => import(/* webpackChunkName: "search" */ './search')
 }];

+<template>
+  <LayoutApp :show-back="true">
+    <Scroll :scrollEvents="['scroll']" :options="scrollOptions" @scroll="scroll"
+            @pulling-up="onPullingUp">
+      <ProductList :list="productList.list"></ProductList>
+    </Scroll>
+  </LayoutApp>
+</template>
+<script>
+import ProductList from './components/productList';
+import {Scroll} from 'cube-ui';
+import {createNamespacedHelpers} from 'vuex';
+
+const {mapState, mapActions} = createNamespacedHelpers('list');
+
+export default {
+  name: 'list',
+  components: {
+    ProductList,
+    Scroll
+  },
+  data() {
+    return {
+      scrollOptions: {
+        bounce: {
+          top: false
+        },
+        pullUpLoad: true
+      },
+      fixed: false
+    };
+  },
+  mounted() {
+    this.fetchProductList();
+  },
+  methods: {
+    ...mapActions(['fetchProductList']),
+
+    async onPullingUp() {
+      await this.fetchProductList();
+    },
+    scroll({ y }) {
+      const height = this.$refs.banner.$el.offsetHeight + this.$refs.header.offsetHeight;
+
+      if (-y >= height) {
+        this.fixed = true;
+      } else {
+        this.fixed = false;
+      }
+    }
+  },
+  computed: {
+    ...mapState(['productList']),
+  },
+};
+</script>
+
+<style scoped>
+</style>

-import { get } from 'lodash';
-import { getImgUrl } from '../../common/utils';
+import {get} from 'lodash';
+import Vue from 'vue';
 
 export default function() {
   return {
     namespaced: true,
     state: {
+      productList: {
+        showErrorPage: false,
+        isFetching: false,
+        error: null,
+        page: 0, // 当前页
+        page_size: 10, // 每页数量
+        page_total: 0, // 总共多少页
+        total: 0, // 总共多少条
+        endReached: false, // 到达底部
+        list: [], // 商品列表
+        isEmpty: false,
+      },
+      searchParams: {
+        type: 0, // type：0，推荐；1，热销；2，即将发售; 3，品类； 4，品牌；5，系列；6，搜索 7, 收藏
+        order: null, // 指定排序
+        productPool: null, // 商品池id
+        sort: null, // 品类id
+        brand: null, // 品牌id
+        series: null, // 系列id
+        gender: null, // 性别
+        size: null, // 尺码id
+        isSoonSale: null, // 是否是即将售卖
+        query: null, // 搜索词
+        limit: null, // 每页记录数
+        page: null, // 当前页号
+        coupon_token: null, // 优惠券token
+      },
+      filterParams: {
+        sort: [], // 品类id
+        brand: [], // 品牌id
+        gender: [], // 性别
+        size: [], // 尺码id
+      },
+      filterData: [],
+      filterVisible: false,
     },
     mutations: {
+      addProductList(state, {data}) {
+        Vue.set(state.productList, 'list', state.productList.list.concat(data.product_list));
+        Vue.set(state.productList, 'page', data.page);
+      },
     },
     actions: {
+      async fetchProductList({commit, state}) {
+        let page = state.productList.page;
+        let size = state.productList.page_size;
+        const result = await this.$api.get('/api/ufo/list/productList', {
+          page: page + 1,
+          size: size
+        });
+
+        if (result.code === 200) {
+          commit('addProductList', {data: result.data});
+        }
+
+        return result.data ? result.data.length : 0;
+      },
     },
   };
 }

 module.exports = {
+  '/api/ufo/list/productList': {
+    ufo: true,
+    api: 'ufo.product.search.list',
+    params: {
+      page: {type: Number},
+      size: {type: Number},
+      type: {type: Number}, // type：0，推荐；1，热销；2，即将发售; 3，品类； 4，品牌；5，系列；6，搜索 7, 收藏
+      order: {type: String}, // 指定排序
+      productPool: {type: Number}, // 商品池id
+      sort: {type: Number}, // 品类id
+      brand: {type: Number}, // 品牌id
+      series: {type: Number}, // 系列id
+      gender: {type: String}, // 性别
+      query: {type: String}, // 搜索词
+      limit: {type: Number}, // 每页记录数
+      coupon_token: {type: String}, // 优惠券token
+    },
+  },
 };