pcb侧边导航

components/pcb/home/CommodityList.vue

@@ -2,7 +2,11 @@
   <div id="goods-list-fragment">
     <div class="container">
       <div class="content-adv">
-        <div class="title-adv"><span>全球共享交易平台</span><span>全球共享询价平台</span></div>
+        <div class="title-adv">
+          <span>PCB专区</span>
+          <span><i class="fa fa-angle-right"></i>{{nameCn02}}</span>
+          <span v-if="nameCn03"><i class="fa fa-angle-right"></i>{{nameCn03}}</span>
+        </div>
         <div class="input-group">
           <input type="search" class="form-control" id="search_input" title="code" placeholder="型号/品牌"
                  v-model="searchCode" @search="goodsSearch(searchCode)"/>
@@ -156,6 +160,10 @@
       kindIds: {
         type: String,
         default: Boolean
+      },
+      kindItem: {
+        type: Object,
+        default: {}
       }
     },
     components: {
@@ -177,7 +185,9 @@
         parentKindId: 0,
         ids: null,
         showLinkBox: false,
-        tel: ''
+        tel: '',
+        nameCn02: '全部',
+        nameCn03: ''
       }
     },
     filters: {
@@ -264,6 +274,20 @@
            this.pageParams.page = 1
            this.pageCommodity(this.pageParams, this.ids)
          }
+      },
+      kindItem: {
+        handler: function (val) {
+          if (val.kinds === null || val.kind === null) return
+          if (val.kinds.level === 2) {
+            this.nameCn02 = val.kinds.nameCn
+            if (val.kinds.nameCn === val.kind.nameCn) {
+              this.nameCn03 = ''
+            }
+          }
+          if (val.kind.level === 3) {
+            this.nameCn03 = val.kind.nameCn
+          }
+        }
       }
   },
     methods: {
@@ -824,5 +848,17 @@
   #goods-list-fragment .goods-area div>.page-wrap{
     margin: 0;
   }
+  #goods-list-fragment .container .content-adv .title-adv span{
+    font-size: 16px;
+    color: #333;
+    font-weight: normal;
+    margin-right: 10px;
+  }
+  #goods-list-fragment .container .content-adv .title-adv span:first-child{
+    margin-left: 0;
+  }
+  #goods-list-fragment .container .content-adv .title-adv span i{
+    margin-right: 10px;
+  }
 </style>
 

components/pcb/home/EnterpriseInfo.vue

@@ -22,7 +22,7 @@
         </li>
         <li>
           <div style="width: 962px; margin-left: 3px;">
-            <commodity-list :kindIds="kindIds"></commodity-list>
+            <commodity-list :kindIds="kindIds" :kindItem="kindItem"></commodity-list>
           </div>
         </li>
       </ul>
@@ -78,6 +78,10 @@
       kindIds: {
         type: String,
         default: null
+      },
+      kindItem: {
+        type: Object,
+        default: {}
       }
     },
     data () {

components/pcb/home/StoreBanner.vue

@@ -1,11 +1,39 @@
-\<template>
-  <div class="container" id="title-fragment">
+<template>
+  <div class="container" id="title-fragment" @mouseleave="hideChildrenLayout()">
     <div class="container">
       <div class="shop-pcb">
         <ul class="pk-list">
-          <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>
+          <li class="pk-item"
+              @click="setKindIds(null, null, -1)"
+              :class="{active: selectedIndex === -1}"
+              @mouseenter="hideChildrenLayout()">全部
+          <li @click="setKindIds(kind, kind, index)" class="pk-item"
+              :class="{active: selectedIndex === index}"
+              v-for="(kind, index) in kinds"
+              :key="kind.id"
+              @mouseenter="showChildrenLayout(kind, index)">{{kind.nameCn}}<i class="icon-arrow-right iconfont"></i></li>
         </ul>
+        <!-- 子类目 -->
+        <transition name="fade" mode="out-in">
+          <div class="kind-children" v-if="show">
+            <div class="kind-children-layout" v-for="(kind, index) in kinds" :key="index" v-if="index === selectedIndex">
+              <empty-box v-if="!kind.fetching && kind.children && !kind.children.length"></empty-box>
+              <loading-box v-else-if="kind.fetching" color="rgba(80, 120, 203, 0.9)"></loading-box>
+              <div class="kind-children-item-wrap" v-else>
+                <dl class="kind-children-item dl-horizontal">
+                  <dt></dt>
+                  <dd>
+                    <ul class="list-unstyled list-inline">
+                      <li v-for="(c, index) in kind.children">
+                        <span @click.stop.prevent="setKindIds(kind, c, index)">{{ c.nameCn }}</span>
+                      </li>
+                    </ul>
+                  </dd>
+                </dl>
+              </div>
+            </div>
+          </div>
+        </transition>
       </div>
       <div class="pcb-banner">
         <img :src="storeInfo.bannerUrl || '/images/store/default/shop_banner.png'">
@@ -19,11 +47,13 @@ export default {
   name: 'store-banner',
   data () {
     return {
-      selectedIndex: -1
+      selectedIndex: -1,
+      show: false
     }
   },
   computed: {
     kinds () {
+      console.log(this.$store.state.pcb.kindsData.kinds.data, 'pcb')
       return this.$store.state.pcb.kindsData.kinds.data
     },
     storeInfo () {
@@ -31,24 +61,42 @@ export default {
     }
   },
   methods: {
-    setKindIds (kind, index) {
+    setKindIds (kinds, kind, index) {
       let idsArr = []
+      let item = {}
+      item.kind = kind
+      item.kinds = kinds
       if (kind) {
         if (kind.children && kind.children.length) {
+          this.show = true
           kind.children.forEach(item => {
             idsArr.push(item.id)
           })
         } else {
+          this.show = false
           idsArr.push(kind.id)
         }
       }
       this.selectedIndex = index
       this.$emit('kindAction', idsArr.join(','))
+      this.$emit('kindsAction', item)
+    },
+    showChildrenLayout (kind, index) {
+      this.selectedIndex = index
+      if (!kind.children) {
+        this.show = false
+      } else {
+        this.show = true
+      }
+    },
+    hideChildrenLayout () {
+      this.show = false
     }
   }
 }
 </script>
 <style lang="scss" scoped>
+  @import '~assets/scss/variables';
   #title-fragment {
 		padding: 0;
 	}
@@ -93,6 +141,82 @@ export default {
         }
       }
     }
+    .kind-children .kind-children-layout{
+      width: 963px;
+      height: 300px;
+      padding: 15px 0 0 0;
+    }
+    .kind-children {
+      position: absolute;
+      top: 0;
+      left: 220px;
+      z-index: 9;
+      overflow: hidden;
+      width: 963px;
+      height: 300px;
+      background-color: #ffffff;
+      -webkit-box-shadow: 0px 0px 5px 0px rgba(51, 51, 51, 0.5);
+      box-shadow: 0px 0px 5px 0px rgba(51, 51, 51, 0.5);
+      .kind-children-layout {
+        background-color: #fff;
+        width: 963px;
+        height: 300px;
+        font-size: 12px;
+        overflow-y: auto;
+        a {
+          color: #000;
+        }
+        a:hover {
+          color: #ff0006;
+        }
+        .kind-children-item-wrap {
+          height: 100%;
+          width: 100%;
+
+          .kind-children-item {
+            margin-bottom: $md-pad;
+            dt {
+              span {
+                width: 90%;
+                display: inline-block;
+                font-weight: bold;
+                overflow: hidden;
+                clear: left;
+                text-align: right;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+              }
+              i{
+                font-size: 12px;
+              }
+            }
+            dd {
+              margin-left: 98px;
+              text-align: left;
+              ul {
+                margin: 0;
+                padding: 0;
+
+                li {
+                  border-left: $border;
+                  margin-bottom: $pad;
+                  span {
+                    margin: 0 $sm-pad;
+                    cursor: pointer;
+                  }
+                  &:first-child {
+                    border-left: none;
+                  }
+                  &:hover span, &.active span{
+                    color: #f31717;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
   }
   #title-fragment .pcb-banner {
     float: left;

pages/pcb/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
     <div class="store-banner">
-      <store-banner @kindAction="kindAction"></store-banner>
+      <store-banner @kindAction="kindAction" @kindsAction="kindsAction"></store-banner>
     </div>
-    <enterprise-info :kindIds="ids"></enterprise-info>
+    <enterprise-info :kindIds="ids" :kindItem="item"></enterprise-info>
   </div>
 </template>
 <script>
@@ -12,7 +12,8 @@
     layout: 'pcb',
     data () {
       return {
-        ids: ''
+        ids: '',
+        item: {}
       }
     },
     fetch ({ store }) {
@@ -31,6 +32,9 @@
     methods: {
       kindAction (ids) {
         this.ids = ids || null
+      },
+      kindsAction(item) {
+        this.item = item || {}
       }
     }
   }