二手列表页

+<template>
+  <div class="bg" v-if="list.length">
+    <div class="second-list-item" v-for="(product,index) in list" @click="goDetail(product, index)"
+         :key="index" :class="(index) % 2 === 0 && 'magrin-right'">
+      <ImgSize class="item-imge" :src="product.secondhand_image" :width="343" :height="343"/>
+      <div class="item-bottom">
+        <div class="item-price">
+          <span>{{product.skup_price && '¥'}}</span><span>{{product.skup_price || ' '}}</span>
+          <p v-if="product.pre_sale_flag" class="sale_flag">{{product.pre_sale_flag === 6 ? '全新瑕疵' : '二手'}}</p>
+        </div>
+        <div class="size-flag">{{product.size_name}}码</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ImgSize from '../../../components/img-size';
+
+export default {
+  props: {
+    list: Array
+  },
+  components: {
+    ImgSize,
+  },
+  data: function() {
+    return {
+    };
+  },
+  methods: {
+    goDetail(product, index) {
+      this.$router.push({
+        name: 'SecondProductDetail',
+        params: {
+          skup: product.skup
+        }
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+  .magrin-right {
+    margin-right: 14px;
+  }
+
+  .second-list-item {
+    border-radius: 16px;
+    width: 344px;
+    background: #fff;
+    margin-bottom: 16px;
+  }
+
+  .item-imge {
+    width: 344px;
+    height: 344px;
+    border-top-left-radius: 16px;
+    border-top-right-radius: 16px;
+  }
+
+  .item-bottom {
+    padding: 20px 14px 30px 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .item-price {
+    color: #000;
+    font-size: 32px;
+    vertical-align: center;
+    display: flex;
+    flex-direction: row;
+    @include num
+  }
+
+  .sale_flag {
+    background: #000;
+    color: #fff;
+    margin-left: 8px;
+    padding: 8px;
+    font-size: 9px;
+    line-height: 26px;
+    border-radius: 5px;
+  }
+
+  .size-flag {
+    font-size: 22px;
+    line-height: 26px;
+  }
+
+  .bg {
+    padding: 24px 24px 8px;
+    display: flex;
+    flex-wrap: wrap;
+  }
+</style>

 <template>
-  <LayoutApp :show-back="true" title="二手">
-
+  <LayoutApp :show-back="true" title="二手" class="list-wrapper">
+    <LayoutScroll
+      ref="scrolllist"
+      @pulling-up="fetchSkupList(isMore)"
+      v-if="secondList.length"
+      class="list-scroll-bg"
+    >
+      <SecondList :list="secondList"></SecondList>
+    </LayoutScroll>
   </LayoutApp>
 </template>
 
 <script>
+import SecondList from "./components/second-list";
+
+import { createNamespacedHelpers } from "vuex";
+const { mapState, mapActions } = createNamespacedHelpers("second/skupList");
+
 export default {
-  name: 'UfoSecondListPage'
+  name: 'UfoSecondListPage',
+  components: {
+    SecondList
+  },
+  data() {
+    return {
+      secondList : [
+      {
+        size_name: "37 2/3",
+        skup: 24066,
+        product_id: 10014795,
+        pre_sale_flag: 6,
+        size_id: 292,
+        skup_price: 99,
+        secondhand_image: "http://img11.static.yhbimg.com/goodsimg/2019/05/28/14/01d668690176efa91b99042ceed94eaee3.jpg?imageMogr2/thumbnail/{width}x{height}/background/d2hpdGU=/position/center/quality/80",
+        product_name: "DXF测试商品",
+        save_price: null
+      },
+      {
+        size_name: "36.5",
+        skup: 18328,
+        product_id: 10014834,
+        pre_sale_flag: 5,
+        size_id: 1214,
+        skup_price: 9,
+        secondhand_image: "http://img11.static.yhbimg.com/goodsimg/2019/05/28/14/01d668690176efa91b99042ceed94eaee3.jpg?imageMogr2/thumbnail/{width}x{height}/background/d2hpdGU=/position/center/quality/80",
+        product_name: "wyc的专用球鞋02",
+        save_price: null
+      },
+      {
+        size_name: "41",
+        skup: 18304,
+        product_id: 10001280,
+        pre_sale_flag: 6,
+        size_id: 314,
+        skup_price: 111,
+        secondhand_image: "http://img11.static.yhbimg.com/goodsimg/2019/05/28/14/01d668690176efa91b99042ceed94eaee3.jpg?imageMogr2/thumbnail/{width}x{height}/background/d2hpdGU=/position/center/quality/80",
+        product_name: "出售类型测试商品-cuicui",
+        save_price: null
+      }]
+    }
+  },
+  computed: {
+    ...mapState(["skupList", "isMore"])
+  },
+  methods: {
+    ...mapActions(["fetchSecondSkupList"]),
+
+    async fetchSkupList(isMore) {
+      if (this.isMore) {
+        await this.fetchSecondSkupList({ isReset: false });
+      }
+    }
+  },
+  activated() {
+    this.fetchSecondSkupList({ isReset: true });
+  }
 };
 </script>
 
 <style lang="scss" scoped>
+.list-wrapper {
+  /deep/ .layout-context {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .empty {
+    flex: 1;
+  }
+}
+
+.list-scroll-bg {
+  background-color: #f5f5f5;
+  flex: 1;
+}
 </style>

 import actions from './actions';
 import mutations from './mutations';
+import skupList from './skupList';
 
 export default function() {
   return {
@@ -7,5 +8,8 @@ export default function() {
     state: {},
     mutations,
     actions,
+    modules: {
+      skupList: skupList(),
+    }
   };
 }

+import Vue from 'vue';
+
+export default function() {
+  return {
+    namespaced: true,
+    state: {
+      page: 1,
+      pageTotal: 0,
+      skupList: {
+        list: []
+      },
+      isMore: false,
+      isShowEmpty: false
+    },
+    mutations: {
+      addList(state, { data, isReset }) {
+        if (data && data.skup_list) {
+          let { page, skup_list = [], page_total } = data;
+
+          if (page_total > page) {
+            state.isMore = true;
+            state.pageTotal = page_total;
+            state.page = page + 1;
+          } else {
+            state.isMore = false;
+          }
+
+          if (isReset) {
+            state.skupList.list = skup_list;
+          } else {
+            let list = state.skupList.list.concat(skup_list);
+
+            Vue.set(state.skupList, 'list', list);
+          }
+        }
+      },
+      errorData(state) {
+        state.isShowEmpty = true;
+      }
+    },
+    actions: {
+      async fetchSecondSkupList({ commit, state }, {isReset} = {}) {
+        let page = 1;
+
+        if (isReset) {
+          page = 1;
+        } else {
+          page = state.page;
+        }
+
+        let limit = 10;
+        const result = await this.$api.get('/api/ufo/home/favoriteProduct', {page, limit});
+
+        if (result.code === 200) {
+          let data = result.data;
+
+          commit('addList', { data, isReset });
+        } else {
+          commit('errorData');
+        }
+        return result.data || [];
+      },
+    },
+  };
+}