商品详情: 添加top3到商品列表跳转

@@ -4,10 +4,14 @@
       <div class="title">相关商品</div>
       <div @click="onAllClick">全部 <i class="cubeic-arrow"></i></div>
     </div>
-    <div class="product-item" v-for="(product, idx) in list" :key="idx" @click="onItemClick(product)">
-      <square-img :src="product.default_images" :width="300" :height="300" />
-      <div class="name"><span>{{product.product_name}}</span></div>
-      <div class="price"><i>¥</i>{{product.price}}</div>
+    <div class="row">
+      <div class="col" v-for="(product, idx) in list" :key="idx">
+        <div class="product-item" @click="onItemClick(product)">
+          <square-img :src="product.default_images" :width="300" :height="300" />
+          <div class="name"><span>{{product.product_name}}</span></div>
+          <div class="price"><i>¥</i>{{product.price}}</div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -42,9 +46,6 @@ export default {
 
   .associated-products {
     margin-top: 30px;
-    display: flex;
-    flex-flow: wrap;
-    justify-content: space-between;
 
     .header {
       padding: 20px 0;
@@ -61,9 +62,19 @@ export default {
       color: #000;
     }
 
+    .row {
+      overflow: hidden;
+      margin: -8px;
+
+      .col {
+        width: 33.3333%;
+        padding: 0 8px;
+        float: left;
+      }
+    }
+
     .product-item {
       margin-top: 10px;
-      width: 30%;
       text-align: center;
       overflow: hidden;
     }

@@ -174,18 +174,11 @@ export default {
       return get(this.productDetail, 'goods_list[0].size_list', null);
     },
   },
-  beforeRouteUpdate(to, from, next) {
-    // const loading = this.createLoading();
-
-    this.loadData(to.params.productId);
-    next();
-  },
   mounted() {
-    this.loadData(this.productId);
     this.imageHideThreadhold = -window.innerWidth * 0.693;
   },
   activated() {
-    this.refresh();
+    this.loadData(this.productId);
   },
   methods: {
     ...mapActions(['fetchProductInfo', 'fetchTop3', 'toggleFav', 'updateTradeInfo', 'getSelectedTradeProduct']),
@@ -239,11 +232,21 @@ export default {
       });
     },
     gotoBrand() {
+      // type: 4，品牌；5，系列
+      const query = {
+        type: 5,
+      };
+
+      if (this.productDetail.seriesId) {
+        query.series = this.productDetail.seriesId;
+      } else {
+        query.type = 4;
+        query.brand = this.productDetail.brandId;
+      }
+
       this.$router.push({
-        name: '',
-        params: {
-          productId: this.productDetail.product_id,
-        },
+        name: 'List',
+        query,
       });
     },
     showActivity() {
@@ -430,12 +433,13 @@ export default {
   }
 
   .recommend {
-    margin-top: 20px;
+    padding-top: 20px;
+    background: #f5f5f5;
 
     h2 {
       font-size: 36px;
       line-height: 50px;
-      padding: 20px 0;
+      padding: 20px 0 0;
       margin: 0 40px;
     }
   }