pcb

components/pcb/home/CommodityList.vue

@@ -151,7 +151,13 @@
   import LinkSalerBox from '~components/common/LinkSalerBox.vue'
   export default {
     name: 'commodity-list',
-    props: ['kinds'],
+    props: {
+      kinds: {},
+      kindIds: {
+        type: String,
+        default: Boolean
+      }
+    },
     components: {
       Buy,
       Page,
@@ -251,7 +257,14 @@
            }
          },
          immediate: true
-       }
+       },
+      kindIds: {
+         handler: function (val) {
+           this.ids = val
+           this.pageParams.page = 1
+           this.pageCommodity(this.pageParams, this.ids)
+         }
+      }
   },
     methods: {
       sendprove: function () {

components/pcb/home/EnterpriseInfo.vue

@@ -22,7 +22,7 @@
         </li>
         <li>
           <div style="width: 962px; margin-left: 3px;">
-            <commodity-list></commodity-list>
+            <commodity-list :kindIds="kindIds"></commodity-list>
           </div>
         </li>
       </ul>
@@ -74,6 +74,12 @@
   import LinkSalerBox from '~components/common/LinkSalerBox.vue'
   export default {
     name: 'product-recommend-self',
+    props: {
+      kindIds: {
+        type: String,
+        default: null
+      }
+    },
     data () {
       return {
         dialogVisible: false,

components/pcb/home/StoreBanner.vue

@@ -3,7 +3,8 @@
     <div class="container">
       <div class="shop-pcb">
         <ul class="pk-list">
-          <nuxt-link :to="`/pcb/search/?w=${encodeURIComponent(kind.nameCn)}`" tag="li" class="pk-item" v-for="kind in kinds" :key="kind.id">{{kind.nameCn}}<i class="icon-arrow-right iconfont"></i></nuxt-link>
+          <li class="pk-item" @click="setKindIds(null, -1)" :class="{active: selectedIndex === -1}">全部<i class="icon-arrow-right iconfont"></i></li>
+          <li @click="setKindIds(kind, index)" class="pk-item" :class="{active: selectedIndex === index}" v-for="(kind, index) in kinds" :key="kind.id">{{kind.nameCn}}<i class="icon-arrow-right iconfont"></i></li>
         </ul>
       </div>
       <div class="pcb-banner">
@@ -16,6 +17,11 @@
 <script>
 export default {
   name: 'store-banner',
+  data () {
+    return {
+      selectedIndex: -1
+    }
+  },
   computed: {
     kinds () {
       return this.$store.state.pcb.kindsData.kinds.data
@@ -23,6 +29,22 @@ export default {
     storeInfo () {
       return this.$store.state.shop.storeInfo.store.data
     }
+  },
+  methods: {
+    setKindIds (kind, index) {
+      let idsArr = []
+      if (kind) {
+        if (kind.children && kind.children.length) {
+          kind.children.forEach(item => {
+            idsArr.push(item.id)
+          })
+        } else {
+          idsArr.push(kind.id)
+        }
+      }
+      this.selectedIndex = index
+      this.$emit('kindAction', idsArr.join(','))
+    }
   }
 }
 </script>
@@ -44,19 +66,23 @@ export default {
     line-height: 210px;
     position: relative;
     background: #fff;
-    overflow: hidden;
     .pk-list {
       height:300px;
+      position: relative;
+      left: -1px;
+      width: 220px;
       .pk-item{
-        height:50px;
-        line-height: 50px;
+        height:43px;
+        line-height:43px;
         border-bottom:1px solid #e7e7e7;
         cursor:pointer;
         text-align: left;
         color: #666;
         padding-left:20px;
-        &:hover{
-          background: #e7e7e7;
+        &:hover,
+        &.active{
+          background: #2496f1;
+          color: #fff;
         }
         &:last-child{
           border:none;

pages/pcb/index.vue

@@ -1,15 +1,20 @@
 <template>
   <div>
     <div class="store-banner">
-      <store-banner></store-banner>
+      <store-banner @kindAction="kindAction"></store-banner>
     </div>
-    <enterprise-info></enterprise-info>
+    <enterprise-info :kindIds="ids"></enterprise-info>
   </div>
 </template>
 <script>
   import { EnterpriseInfo, StoreBanner } from '~components/pcb'
   export default {
     layout: 'pcb',
+    data () {
+      return {
+        ids: ''
+      }
+    },
     fetch ({ store }) {
       return Promise.all([
         store.dispatch('pcb/getPcbKinds', {parentId: 3825}),
@@ -22,6 +27,11 @@
     components: {
       EnterpriseInfo,
       StoreBanner
+    },
+    methods: {
+      kindAction (ids) {
+        this.ids = ids || null
+      }
     }
   }
 </script>