商品详情: 添加商品品牌列表页

+<template>
+  <layout-app title="商品列表" class="brand-product-list">
+    <scroll-view
+      ref="scroll"
+      :data="brandProductList"
+      :options="scrollOption"
+      @pulling-down="onPullingDown">
+      <div class="list-wrapper" v-if="brandProductList != null">
+        <product-list :list="brandProductList" />
+      </div>
+    </scroll-view>
+  </layout-app>
+</template>
+
+<script>
+import { createNamespacedHelpers } from 'vuex';
+import ScrollView from 'components/layout/scroll-view';
+import ProductList from '../list/components/productList';
+
+const STORE_PATH = 'product';
+const { mapActions, mapState } = createNamespacedHelpers(STORE_PATH);
+
+export default {
+  name: 'BrandProductList',
+  props: ['productId'],
+  components: {
+    ProductList,
+    ScrollView,
+  },
+  data() {
+    return {
+      inLoading: false,
+      scrollOption: {
+        pullDownRefresh: {
+          threshold: 70,
+          stop: 90
+        },
+        observeDOM: false,
+        pullUpLoad: false,
+      },
+    };
+  },
+  computed: {
+    ...mapState(['topLists']),
+    brandProductList() {
+      return this.topLists[this.$route.params.productId];
+    },
+  },
+  asyncData({store, router}) {
+    return store.dispatch(`${STORE_PATH}/fetchBrandTop`, {productId: router.params.productId});
+  },
+  methods: {
+    ...mapActions(['fetchBrandTop']),
+    onPullingDown() {
+      this.fetchBrandTop({productId: this.productId});
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+  .brand-product-list /deep/ .scroll-view {
+    background: #f5f5f5;
+  }
+</style>

@@ -67,11 +67,11 @@ export default {
 
 
     span {
     span {
       font-size: 0.7em;
       font-size: 0.7em;
-      line-height: 1.4;
+      line-height: 1.8;
       border: 1px solid #feabac;
       border: 1px solid #feabac;
       color: #feabac;
       color: #feabac;
       text-align: center;
       text-align: center;
-      padding: 0 0.9em;
+      padding: 0 1.2em;
       margin-right: 0.8em;
       margin-right: 0.8em;
       display: inline-block;
       display: inline-block;
       position: relative;
       position: relative;

@@ -5,7 +5,7 @@
       <div @click="onAllClick">全部 <i class="cubeic-arrow"></i></div>
       <div @click="onAllClick">全部 <i class="cubeic-arrow"></i></div>
     </div>
     </div>
     <div class="row">
     <div class="row">
-      <div class="col" v-for="(product, idx) in list" :key="idx" @click="onItemClick(product)">
+      <div class="col" v-for="(product, idx) in viewList" :key="idx" @click="onItemClick(product)">
         <div class="product-item">
         <div class="product-item">
           <square-img :src="product.default_images" :width="300" :height="300" />
           <square-img :src="product.default_images" :width="300" :height="300" />
         </div>
         </div>
@@ -30,6 +30,11 @@ export default {
       default: [],
       default: [],
     },
     },
   },
   },
+  computed: {
+    viewList() {
+      return this.list && this.list.slice(0, 3) || [];
+    },
+  },
   methods: {
   methods: {
     onItemClick(item) {
     onItemClick(item) {
       this.$emit('itemClick', item);
       this.$emit('itemClick', item);

@@ -7,4 +7,9 @@ export default [{
       productId: parseInt(params.productId, 10),
       productId: parseInt(params.productId, 10),
     };
     };
   },
   },
+}, {
+  name: 'BrandProductList',
+  path: '/xianyu/brand-product/:productId.html',
+  component: () => import(/* webpackChunkName: "product" */ './brand-product-list'),
+  props: true,
 }];
 }];

@@ -201,7 +201,7 @@ export default {
     next();
     next();
   },
   },
   methods: {
   methods: {
-    ...mapActions(['fetchProductInfo', 'fetchTop3', 'fetchFav', 'toggleFav', 'updateTradeInfo', 'getSelectedTradeProduct', 'payment', 'resetSelectedSize']),
+    ...mapActions(['fetchProductInfo', 'fetchBrandTop', 'fetchFav', 'toggleFav', 'updateTradeInfo', 'getSelectedTradeProduct', 'payment', 'resetSelectedSize']),
     refresh() {
     refresh() {
       this.$refs.slide.refresh();
       this.$refs.slide.refresh();
     },
     },
@@ -218,7 +218,7 @@ export default {
     loadData(productId = this.productId, loading) {
     loadData(productId = this.productId, loading) {
       loading && loading.show();
       loading && loading.show();
 
 
-      this.fetchTop3({productId});
+      this.fetchBrandTop({productId});
       this.fetchFav({productId});
       this.fetchFav({productId});
 
 
       return this.fetchProductInfo({productId}).then(() => {
       return this.fetchProductInfo({productId}).then(() => {
@@ -273,23 +273,11 @@ export default {
       });
       });
     },
     },
     gotoBrand() {
     gotoBrand() {
-      // type: 4，品牌；5，系列
-      const query = {
-        type: 5,
-      };
-
-      if (this.productDetail.seriesId && this.productDetail.series_name) {
-        query.series = this.productDetail.seriesId;
-        query.title = this.productDetail.series_name;
-      } else {
-        query.type = 4;
-        query.brand = this.productDetail.brandId;
-        query.title = this.productDetail.brand_name;
-      }
-
       this.$router.push({
       this.$router.push({
-        name: 'List',
-        query,
+        name: 'BrandProductList',
+        params: {
+          productId: this.productId,
+        },
       });
       });
     },
     },
     showActivity() {
     showActivity() {

@@ -62,13 +62,13 @@ export default {
 
 
     commit(Types.UPDATE_PRODUCT_FAV, { productId, isFav });
     commit(Types.UPDATE_PRODUCT_FAV, { productId, isFav });
   },
   },
-  async fetchTop3({ commit }, { productId }) {
+  async fetchBrandTop({ commit }, { productId }) {
     const result = await this.$api.post('/api/ufo/product/top', { product_id: productId });
     const result = await this.$api.post('/api/ufo/product/top', { product_id: productId });
 
 
     if (result.code === 200) {
     if (result.code === 200) {
       const productList = result.data.product_list || [];
       const productList = result.data.product_list || [];
 
 
-      commit(Types.UPDATE_PRODUCT_TOP3, { productId, topList: productList.slice(0, 3) });
+      commit(Types.UPDATE_BRAND_PRODUCT_TOP_LIST, { productId, topList: productList});
     }
     }
   },
   },
   async toggleFav({ commit }, { productId, isFav }) {
   async toggleFav({ commit }, { productId, isFav }) {

@@ -30,7 +30,7 @@ export default {
     state.products = {...state.products, [payload.product_id]: payload};
     state.products = {...state.products, [payload.product_id]: payload};
     ensureSelectedProduct(state, payload.product_id);
     ensureSelectedProduct(state, payload.product_id);
   },
   },
-  [Types.UPDATE_PRODUCT_TOP3](state, { productId, topList }) {
+  [Types.UPDATE_BRAND_PRODUCT_TOP_LIST](state, { productId, topList }) {
     state.topLists = {...state.topLists, [productId]: topList};
     state.topLists = {...state.topLists, [productId]: topList};
   },
   },
   [Types.UPDATE_PRODUCT_FAV](state, { productId, isFav }) {
   [Types.UPDATE_PRODUCT_FAV](state, { productId, isFav }) {

@@ -3,4 +3,4 @@ export const ENSURE_PRODUCT_DETAIL = 'ENSURE_PRODUCT_DETAIL';
 export const UPDATE_PRODUCT_FAV = 'UPDATE_PRODUCT_FAV';
 export const UPDATE_PRODUCT_FAV = 'UPDATE_PRODUCT_FAV';
 export const UPDATE_SELECTED_PRODUCT_SIZE = 'UPDATE_SELECTED_PRODUCT_SIZE';
 export const UPDATE_SELECTED_PRODUCT_SIZE = 'UPDATE_SELECTED_PRODUCT_SIZE';
 export const RESET_SELECTED_PRODUCT_SIZE = 'RESET_SELECTED_PRODUCT_SIZE';
 export const RESET_SELECTED_PRODUCT_SIZE = 'RESET_SELECTED_PRODUCT_SIZE';
-export const UPDATE_PRODUCT_TOP3 = 'UPDATE_PRODUCT_TOP3';
+export const UPDATE_BRAND_PRODUCT_TOP_LIST = 'UPDATE_BRAND_PRODUCT_TOP_LIST';