Merge remote-tracking branch 'origin/master'

.gitignore

@@ -1,8 +1,61 @@
-# dependencies
-node_modules
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
 
-# logs
-npm-debug.log
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
 
 # Nuxt build
 .nuxt

components/main/Nav.vue

@@ -1,7 +1,7 @@
 <template>
   <nav class="nav-list">
     <div class="container">
-      <nuxt-link to="/product/kind" class="item item-first">
+      <nuxt-link to="/product/kind/home" class="item item-first">
         <div>器件选型</div>
       </nuxt-link>
       <nuxt-link :to="'/'" class="item" exact>

components/product/BrandList.vue

@@ -33,11 +33,6 @@
         return this.$store.state.product.brand.brandList.data
       }
     }
-//    methods: {
-//      showList (keyword) {
-//        this.$store.dispatch('product/loadBrands', {'keyword': keyword})
-//      }
-//    }
   }
 </script>
 

components/product/CategoryNav.vue

@@ -0,0 +1,328 @@
+<template>
+  <div class="breadcrumbs container">
+    <ul class="list-unstyled list-inline">
+      <li class="crumb-item">
+        <nuxt-link :to="`/product/kind/home`">电子元器件</nuxt-link>
+      </li>
+      <li class="crumb-item crumb-item-angle" v-for="k in actives">
+        <i class="angle"></i>
+        <nuxt-link :to="`/product/kind/${k.id}`">
+          <span :title="k.nameCn">{{k.nameCn}}</span> <i class="fa fa-angle-down"></i>
+        </nuxt-link>
+        <div class="crumb-drop" v-if="k.bothers">
+          <ul class="list-unstyled list-inline" role="menu">
+            <li v-for="b in k.bothers"><nuxt-link :to="`/product/kind/${b.id}`">{{b.nameCn}}</nuxt-link></li>
+          </ul>
+        </div>
+        <i class="icon-glass"></i>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+  export default {
+    computed: {
+      actives () {
+        return this.$store.state.product.kind.kindsParentWithBother.data
+      }
+    }
+  }
+</script>
+
+<style>
+  /* breadcrumbs */
+  .breadcrumbs {
+    margin-top: 20px;
+  }
+  .breadcrumbs ul.list-unstyled.list-inline {
+    margin-left: 0px;
+    margin-bottom: 10px;
+  }
+  .breadcrumbs ul.list-inline.list-unstyled li.crumb-item {
+    position: relative;
+    padding-left: 0px;
+    padding-right: 0px;
+    padding-bottom: 1px;
+    height: 32px;
+    line-height: 30px;
+    background: #fff;
+    border: solid 1px #6493ff;
+  }
+  .breadcrumbs ul li.crumb-item-angle {
+    margin-left: -5px;
+  }
+  .breadcrumbs ul li.crumb-item>a {
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+    padding-left: 15px;
+    padding-right: 15px;
+    cursor: pointer;
+    text-decoration: none;
+    color: #323232;
+    font-size: 16px;
+  }
+  .breadcrumbs ul li.crumb-item:hover>a span,.breadcrumbs ul li.crumb-item:hover>a i{
+    color: #5078cb;
+  }
+  .breadcrumbs ul li.crumb-item>a i{
+    margin-right: 10px;
+  }
+  .breadcrumbs ul li.crumb-item:hover>a i{
+    transform: rotate(-180deg);
+  }
+  .breadcrumbs ul li.crumb-item .angle {
+    position: absolute;
+    left: -6px;
+    top: 50%;
+    margin-top: -5px;
+    height: 10px;
+    width: 10px;
+    border-bottom: 1px solid #6493ff;
+    border-left: 1px solid #6493ff;
+    background: white;
+    transform: rotate(45deg);
+    -ms-transform: rotate(45deg); 	/* IE 9 */
+    -moz-transform: rotate(45deg); 	/* Firefox */
+    -webkit-transform: rotate(45deg); /* Safari 和 Chrome */
+    -o-transform: rotate(45deg); 	/* Opera */
+    z-index: 14;
+  }
+  .breadcrumbs ul li.crumb-item .crumb-drop {
+    position: absolute;
+    display: none;
+    left: -1px;
+    top: 30px;
+    border: #6493ff 1px solid;
+    background: #fff;
+    z-index: 100;
+    width: 200px;
+  }
+  .breadcrumbs ul li.crumb-item .crumb-drop li {
+    line-height: 20px;
+  }
+  .breadcrumbs ul li.crumb-item .crumb-drop li a{
+    font-size: 12px;
+  }
+  li{
+    list-style: none;
+  }
+  .breadcrumbs ul li.crumb-item:hover .crumb-drop {
+    display: block;
+  }
+
+  .breadcrumbs ul li.crumb-item:hover>a {
+    border-color: #f50;
+    background: #ffffff;
+    z-index: 101;
+  }
+  .breadcrumbs ul li.crumb-item a{
+    color: #323232;
+  }
+  .breadcrumbs ul li.crumb-item a:hover{
+    color: #5078cb;
+  }
+  /* sl_warp */
+  .main-content .sl-wrap .sl-key>span {
+    color: #323232;
+    font-size: 14px;
+  }
+  .main-content .sl-wrap .sl-value ul li a{
+    color: #323232;
+    font-size: 14px;
+  }
+  .main-content .sl-wrap .sl-value ul li a:hover{
+    color: #5078cb;
+  }
+  .main-content .sl-wrap .sl-value .sl-selected a {
+    color: #666;
+    text-decoration: none;
+  }
+  .main-content .sl-wrap .sl-value .sl-selected:HOVER a {
+    color: #f50;
+  }
+  .main-content .sl-wrap .sl-value .sl-selected span {
+    display: inline-block;
+    position: absolute;
+    right: 0px;
+    top: 0px;
+    height: 100%;
+    width: 20px;
+    text-align: center;
+    background: #ccc;
+    color: #fff;
+  }
+  .main-content .sl-wrap .sl-value .sl-selected:HOVER span {
+    background: #f50;
+  }
+  .main-content .sl-wrap .sl-value ul {
+    margin-bottom: 0;
+  }
+  .main-content .sl-wrap .sl-value ul.list-inline li {
+    width: 16.6666%;
+    white-space:nowrap;
+    overflow:hidden;
+    text-overflow:ellipsis;
+  }
+  .main-content .sl-wrap .sl-value ul, .main-content .sl-set .sl-value ul{
+    min-height: 25px;
+  }
+  .main-content .sl-more a {
+    position: relative;
+    display: inline-block;
+    margin-top: -1px;
+    height: 30px;
+    line-height: 30px;
+    padding: 0 10px 0 10px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #FFF #DDD #DDD;
+    background: #fff;
+    cursor: pointer;
+    -webkit-transition: border-color .15s ease-in-out;
+    -moz-transition: border-color .15s ease-in-out;
+    transition: border-color .15s ease-in-out;
+  }
+  .main-content .sl-more:hover a {
+    color: #f39800;
+    border-color: #FFF #f39800 #f39800;
+    text-decoration: none;
+  }
+  .main-content .sl-more a:focus {
+    text-decoration: none;
+    color: #f39800;
+  }
+  .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th,
+  .table>thead>tr>td, .table>thead>tr>th {
+    padding: 10px 5px;
+  }
+  .pagging .pagging-count a {
+    color: white !important;
+    text-decoration: none !important;
+  }
+  .parameter-selection > div:first-child {
+    display: inline-block;
+    position: absolute;
+    top: 50%;
+    left: 8px;
+    transform: translateY(-50%);
+  }
+  .parameter-selection div:last-child {
+    display: inline-block;
+    position: absolute;
+    top: 50%;
+    left: 40px;
+    transform: translateY(-50%);
+  }
+  .div-table-right table thead tr td{
+    width: 140px;
+    text-align: center;
+    vertical-align: middle;
+    padding: 0;
+  }
+  thead tr {
+    /*background-image: url("static/img/product/th-tr-bg.png");
+        background-repeat: repeat-x;*/
+    background: linear-gradient(rgb(93, 134, 220), rgb(12, 53, 136));
+    color: #fff;
+    height: 48px;
+  }
+  .table>thead>tr>th{
+    padding:5px 5px;
+  }
+  /* scroll */
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+    background: #ededed;
+  }
+  ::-webkit-scrollbar-thumb {
+    background-color: #c1c1c1;
+    border-radius: 5px;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: #959595;
+  }
+  .container {
+    position: relative;
+    width: 1190px;
+  }
+  [split-dropdown] {
+    position: relative;
+  }
+  [split-dropdown-toggle] {
+    position: absolute;
+    display: none;
+    border: 1px solid #ccc;
+    background: #fff;
+    z-index: 100;
+    top: 40px !important;
+  }
+  .drop-down-list a{
+    padding: 0 10px;
+  }
+  .drop-down-list li:hover,.dropdown-menu li:hover a{
+    background: #5078cb;
+  }
+  .drop-down-list li:hover a,.dropdown-menu li:hover a{
+    color: #fff;
+  }
+  tr.properties-hint-tr > td.properties-hint-td > div {
+    /*position: relative;
+        left: -25em;*/
+    text-align: left;
+    margin-left: 38em;
+  }
+  /*修改样式*/
+  .main-content .table-bordered thead tr{
+    background: none;
+    line-height: 40px;
+    height: 40px;
+    color: #323232;
+  }
+  .div-table-left table thead tr td,.div-table-right table thead tr td{
+    border-bottom: none;
+  }
+  .div-table-left table tbody tr td,.div-table-right table tbody tr td{
+    font-size: 12px;
+  }
+  .div-table-left table tr td{
+    border-right: none;
+  }
+  .div-table-right table thead tr td:first-child{
+    border-left: none;
+  }
+  .table-bordered{
+    border: none;
+  }
+  .div-table-right table thead tr td:hover span{
+    color: #5078cb;
+  }
+  .div-table-right table thead tr td:hover span.fa-angle-down{
+    transform: rotate(-180deg);
+  }
+  .div-table-right table .td-properties{
+    text-align: center;
+  }
+  .div-table-right table .td-properties i,.div-table-left table i{
+    color: #5078cb;
+  }
+  .div-table-right table .td-properties{
+    border-bottom: none;
+  }
+  .div-table-left .table{
+    margin-bottom: 0;
+  }
+  .div-table-right tbody tr td:first-child{
+    border-left: none;
+  }
+  .text-length-more{
+    width: 100px;
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    float: left;
+  }
+</style>

components/product/CategoryProperty.vue

@@ -0,0 +1,720 @@
+<template>
+  <div class="main-content container">
+    <div class="selector" v-if="!kind.leaf">
+      <div class="sl-wrap" >
+        <div class="sl-key">
+          <span>分类：</span>
+        </div>
+        <div class="sl-value">
+          <ul class="list-inline">
+            <li v-for="c in children" :title="c.nameCn">
+              <nuxt-link :to="`/product/kind/${c.id}`">{{c.nameCn}}</nuxt-link>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="div-table" split-dropdown v-if="kind.leaf">
+      <div class="div-table-left">
+        <table class="table table-bordered">
+          <thead >
+          <tr>
+            <td class="td-width dropdown">
+              <span  class="dropdown-toggle dropdown-back" data-toggle="dropdown">品牌<span class="fa fa-angle-down td-icon"></span></span>
+              <ul class="dropdown-menu parameter-selection-ul" role="menu" aria-labelledby="dropdownMenu1">
+                <!--orderBy:'nameCn'-->
+                <li v-for="b in brands"><a @click="selectBrand(b)"><span>{{b.nameCn}}</span></a></li>
+              </ul>
+            </td>
+          </tr>
+          </thead>
+          <tbody>
+          <tr class="tr-brand">
+            <td class="td-brand" style="vertical-align: middle;">
+              <div class="sl-selected" v-if="selectedBrand.nameCn" @click="selectBrand()">
+                <nuxt-link class="text-num">{{selectedBrand.nameCn}}</nuxt-link>
+                <span><i class="fa fa-close"></i></span>
+              </div>
+              <div v-if="!selectedBrand.nameCn">
+                请选择品牌
+              </div>
+            </td>
+          </tr>
+          </tbody>
+      </table>
+    </div>
+    <div class="div-table-right" dropdown-scroll>
+        <table class="table table-bordered" style="table-layout:fixed;">
+          <thead>
+          <tr>
+            <td v-for="pro in properties" class="td-width word-break" split-dropdown-trigger="pro.id">
+              <span class="dropdown-toggle dropdown-back" data-toggle="dropdown"><span>{{pro.property.labelCn}}</span><span class="fa fa-angle-down td-icon"></span></span>
+            </td>
+          </tr>
+          </thead>
+          <tbody>
+          <tr v-if="hasProperties" class="tr-properties">
+            <td v-for="pro in properties" class="td-properties" style="vertical-align:middle;">
+ 								<span class="sl-selected" v-if="pro.selected" @click="selectProperty(pro)">
+ 									<a class="text-num">{{pro.selected.value}}</a>
+									<span><i class="fa fa-close"></i></span>
+ 								</span>
+            </td>
+          </tr>
+          <tr class="properties-hint-tr" v-if="!hasProperties">
+            <td :colspan="properties.length" class="properties-hint-td">
+              <div>请选择筛选属性</div>
+            </td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
+      <div>
+        <div v-for="pro in properties" split-dropdown-toggle="pro.id" style="top: 40px !important">
+          <ul class="parameter-selection-ul drop-down-list" role="menu" aria-labelledby="dropdownMenu1">
+            <!--|orderBy:'value'-->
+            <li v-for="v in pro.values"><a @click="selectPropertyValue(pro, value)" class="a-color"><span>{{v.value}}</span></a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    layout: 'main',
+    data () {
+      return {
+        hasProperties: false,
+        selectedBrand: {
+          nameCn: null
+        }
+      }
+    },
+    computed: {
+      kind () {
+        return this.$store.state.product.kind.kindsParentWithBother.data[this.$store.state.product.kind.kindsParentWithBother.data.length - 1]
+      },
+      children () {
+        return this.$store.state.product.kind.children.data
+      },
+      properties () {
+        return this.$store.state.product.kind.kindProperty.data
+      },
+      brands () {
+        return this.$store.state.product.kind.brands.data
+      }
+    },
+    methods: {
+      selectBrand (item) {
+        return null
+      },
+      selectProperty (item) {
+        return null
+      },
+      selectPropertyValue (item, value) {
+        return null
+      }
+    }
+  }
+</script>
+
+<style>
+  .clear, .clr {
+    clear: both;
+  }
+
+  /* breadcrumbs */
+  .breadcrumbs {
+    margin-top: 20px;
+  }
+
+  .breadcrumbs ul.list-unstyled.list-inline {
+    margin-left: 0px;
+  }
+
+  .breadcrumbs ul.list-inline.list-unstyled li.crumb-item {
+    position: relative;
+    padding-left: 0px;
+    padding-right: 0px;
+    padding-bottom: 1px;
+    height: 32px;
+    line-height: 30px;
+    background: #fff;
+    border: solid 1px #6493ff;
+  }
+
+  .breadcrumbs ul li.crumb-item-angle {
+    margin-left: -5px;
+  }
+
+  .breadcrumbs ul li.crumb-item>a {
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+    padding-left: 15px;
+    padding-right: 15px;
+    cursor: pointer;
+    text-decoration: none;
+    color: #323232;
+    font-size: 16px;
+  }
+  .breadcrumbs ul li.crumb-item:hover>a span,.breadcrumbs ul li.crumb-item:hover>a i{
+    color: #5078cb;
+  }
+  .breadcrumbs ul li.crumb-item>a i{
+    margin-right: 10px;
+  }
+  .breadcrumbs ul li.crumb-item:hover>a i{
+    transform: rotate(-180deg);
+  }
+  .breadcrumbs ul li.crumb-item .angle {
+    position: absolute;
+    left: -6px;
+    top: 50%;
+    margin-top: -5px;
+    height: 10px;
+    width: 10px;
+    border-bottom: 1px solid #6493ff;
+    border-left: 1px solid #6493ff;
+    background: white;
+    transform: rotate(45deg);
+    -ms-transform: rotate(45deg); 	/* IE 9 */
+    -moz-transform: rotate(45deg); 	/* Firefox */
+    -webkit-transform: rotate(45deg); /* Safari 和 Chrome */
+    -o-transform: rotate(45deg); 	/* Opera */
+    z-index: 14;
+  }
+
+  .breadcrumbs ul li.crumb-item .crumb-drop {
+    position: absolute;
+    display: none;
+    left: -1px;
+    top: 30px;
+    border: #6493ff 1px solid;
+    background: #fff;
+    z-index: 100;
+    width: 200px;
+  }
+
+  .breadcrumbs ul li.crumb-item .crumb-drop li {
+    line-height: 20px;
+  }
+  .breadcrumbs ul li.crumb-item .crumb-drop li a{
+    font-size: 12px;
+  }
+  li{
+    list-style: none;
+  }
+  .breadcrumbs ul li.crumb-item:hover .crumb-drop {
+    display: block;
+  }
+
+  .breadcrumbs ul li.crumb-item:hover>a {
+    border-color: #f50;
+    background: #ffffff;
+    z-index: 101;
+  }
+  .breadcrumbs ul li.crumb-item a{
+    color: #323232;
+  }
+  .breadcrumbs ul li.crumb-item a:hover{
+    color: #5078cb;
+  }
+  .kind-count-line {
+    line-height: 25px;
+    height: 25px;
+    color: #fff;
+    font-weight: 600;
+    background: #7bb4e1;
+  }
+
+  .kind-count-line .kind-count {
+    display: inline-block;
+    padding: 0 15px;
+    background-color: #f39800;
+  }
+
+  /* sl_warp */
+  .main-content .selector {
+    color: #666;
+    border: 1px solid #ddd;
+    border-top: #6493ff 2px solid;
+    margin-bottom: 30px;
+    padding: 10px 0;
+  }
+
+  .main-content .sl-wrap {
+    position: relative;
+    line-height: 22px;
+    padding: 5px 0;
+  }
+
+  .main-content .sl-wrap .sl-key {
+    float: left;
+    width: 100px;
+    padding: 0 8px;
+  }
+
+  .main-content .sl-wrap .sl-key>span {
+    color: #323232;
+    font-size: 14px;
+  }
+
+  .main-content .sl-wrap .sl-value {
+    margin-left: 110px;
+    overflow-y: auto;
+  }
+
+  .main-content .sl-wrap .sl-value ul li a{
+    color: #323232;
+    font-size: 14px;
+  }
+  .main-content .sl-wrap .sl-value ul li a:hover{
+    color: #5078cb;
+  }
+  .main-content .sl-wrap .sl-value .sl-selected {
+    display: inline-block;
+    position: relative;
+    padding-left: 10px;
+    padding-right: 30px;
+    border: 1px solid #ccc;
+    cursor: pointer;
+  }
+
+  .main-content .sl-wrap .sl-value .sl-selected a {
+    color: #666;
+    text-decoration: none;
+  }
+
+  .main-content .sl-wrap .sl-value .sl-selected:HOVER {
+    border: 1px solid #f50;
+  }
+
+  .main-content .sl-wrap .sl-value .sl-selected:HOVER a {
+    color: #f50;
+  }
+
+  .main-content .sl-wrap .sl-value .sl-selected span {
+    display: inline-block;
+    position: absolute;
+    right: 0px;
+    top: 0px;
+    height: 100%;
+    width: 20px;
+    text-align: center;
+    background: #ccc;
+    color: #fff;
+  }
+
+  .main-content .sl-wrap .sl-value .sl-selected:HOVER span {
+    background: #f50;
+  }
+
+  .main-content .sl-wrap .sl-value ul {
+    margin-bottom: 0;
+  }
+
+  .main-content .sl-wrap .sl-value ul.list-inline li {
+    width: 16.6666%;
+    white-space:nowrap;
+    overflow:hidden;
+    text-overflow:ellipsis;
+  }
+
+  .main-content .sl-wrap .sl-value ul, .main-content .sl-set .sl-value ul{
+    min-height: 25px;
+  }
+
+  .main-content .sl-wrap .sl-ext {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    width: 80px;
+  }
+
+  .main-content .sl-more {
+    position: relative;
+    top: -1px;
+    line-height: 30px;
+    text-align: center;
+    border-top: 1px solid #DDD;
+  }
+
+  .main-content .sl-more a {
+    position: relative;
+    display: inline-block;
+    margin-top: -1px;
+    height: 30px;
+    line-height: 30px;
+    padding: 0 10px 0 10px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #FFF #DDD #DDD;
+    background: #fff;
+    cursor: pointer;
+    -webkit-transition: border-color .15s ease-in-out;
+    -moz-transition: border-color .15s ease-in-out;
+    transition: border-color .15s ease-in-out;
+  }
+
+  .main-content .sl-more:hover {
+    border-top-color: #f39800;
+  }
+
+  .main-content .sl-more:hover a {
+    color: #f39800;
+    border-color: #FFF #f39800 #f39800;
+    text-decoration: none;
+  }
+
+  .main-content .sl-more a:focus {
+    text-decoration: none;
+    color: #f39800;
+  }
+
+  .main-content .sl-set {
+    position: relative;
+    line-height: 30px;
+    font-size: 14px;
+  }
+
+  .main-content .sl-set .sl-key {
+    float: left;
+    width: 100px;
+  }
+
+  .main-content .sl-set .sl-value {
+    margin-left: 110px;
+  }
+
+  .main-content .content {
+    position: relative;
+  }
+
+  .main-content .content .total {
+    position: relative;
+    margin-bottom: 10px;
+    line-height: 30px;
+    height: 30px;
+    background: #7bb4e1;
+    color: white;
+    font-weight: 700;
+  }
+
+  .main-content .info {
+    line-height: 24px;
+  }
+
+  .main-content .info .title {
+    display: inline-block;
+    width: 100px;
+    font-family: 'microsoft yahei';
+    font-weight: 600;
+  }
+
+  .main-content .info .content {
+    font-size: 14px;
+  }
+
+  .main-content .operate {
+    margin-bottom: 5px;
+  }
+
+  .main-content .operate .btn {
+    width: 100px;
+    text-align: left;
+  }
+
+  .main-content .content .view_all:hover {
+    text-decoration: none;
+    color: #f50;
+    background: #f5f5f5
+  }
+
+  .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th,
+  .table>thead>tr>td, .table>thead>tr>th {
+    padding: 10px 5px;
+  }
+
+  .total-content {
+    background-color: #f39800;
+    padding-left: 10px;
+  }
+
+  .btnactive {
+    background-color: #f39800;
+  }
+
+  .reserve {
+    color: white;
+    font-weight: 500;
+  }
+
+  .pagging .pagging-count {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+
+  .pagging .pagging-count:HOVER {
+    background: #4D7BA5;
+    cursor: pointer;
+  }
+
+  .pagging .pagging-count a {
+    color: white !important;
+    text-decoration: none !important;
+  }
+  .parameter-selection > div:first-child {
+    display: inline-block;
+    position: absolute;
+    top: 50%;
+    left: 8px;
+    transform: translateY(-50%);
+  }
+  .parameter-selection div:last-child {
+    display: inline-block;
+    position: absolute;
+    top: 50%;
+    left: 40px;
+    transform: translateY(-50%);
+  }
+  .div-table{
+    width:1190px;
+    height:120px;
+    border-top: #6493ff 2px solid;
+  }
+  .div-table-left{
+    width:135px;
+    float:left;
+    text-align: center;
+  }
+  .parameter-selection-ul{
+    min-height: 80px;
+    max-height: 176px;
+    overflow: scroll;
+    overflow-x:hidden;
+  }
+  .div-table-right{
+    float:left;
+    height:120px;
+    width:1055px;
+    overflow-x:auto;
+    overflow-y:hidden;
+    border:1px solid #DBDBDB;
+  }
+  .div-table-right .table{
+    margin-bottom: 0;
+  }
+  .div-table-right table thead tr td{
+    width: 140px;
+    text-align: center;
+    vertical-align: middle;
+    padding: 0;
+  }
+  .text-hidden {
+    text-overflow:ellipsis;
+    overflow:hidden;
+    white-space: nowrap;
+  }
+  .text-hidden:hover{
+    overflow: visible;
+  }
+  .td-width{
+    color: #323232;
+    font-size: 14px;
+  }
+  .td-icon{
+    font-size:18px;
+  }
+  .tr-brand{
+    height:80px;
+    vertical-align: middle;
+  }
+  .tr-properties{
+    height:65px;
+  }
+  .td-brand,.td-properties{
+    line-height: 20px;
+    word-wrap : break-word;
+    word-break : break-all;
+  }
+  thead tr {
+    background: linear-gradient(rgb(93, 134, 220), rgb(12, 53, 136));
+    color: #fff;
+    height: 48px;
+  }
+  .table>thead>tr>th{
+    padding:5px 5px;
+  }
+
+  .dropdown:hover>.dropdown-back {
+    border-color: transparent;
+    background-color: transparent;
+  }
+  /* scroll */
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+    background: #ededed;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: #c1c1c1;
+    border-radius: 5px;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: #959595;
+  }
+
+  .container {
+    position: relative;
+    width: 1190px;
+  }
+  .wrap {
+    position: relative;
+    width: 500px;
+    border: 1px solid #ccc;
+    overflow-x: auto;
+  }
+  .table {
+    display: table;
+    table-layout: fixed;
+    width: 100%;
+    border-collapse: collapse;
+    position: relative;
+    left: 0px;
+  }
+  .tr, .th {
+    display: table-row;
+
+  }
+  .th {
+    font-weight: 600;
+  }
+  .td {
+    display: table-cell;
+    padding: 5px;
+    width: 100px;
+    text-align: center;
+    border: 1px solid #ddd;
+  }
+  .dropdown-menu {
+    display: none;
+    position: absolute;
+    top: 100%;
+    background: #fff;
+    text-align: center;
+    cursor: pointer;
+  }
+  [split-dropdown] {
+    position: relative;
+  }
+
+  [split-dropdown-toggle] {
+    position: absolute;
+    display: none;
+    border: 1px solid #ccc;
+    background: #fff;
+    z-index: 100;
+    top: 40px !important;
+  }
+  .drop-down-list{
+    font-size: 14px;
+    min-width: 100px;
+    line-height: 1.75;
+    background: #fff;
+    text-align:center;
+    padding: 5px 0;
+    margin: 1px 0 0;
+  }
+  .drop-down-list a{
+    padding: 0 10px;
+  }
+  .drop-down-list li:hover,.dropdown-menu li:hover a{
+    background: #5078cb;
+  }
+  .drop-down-list li:hover a,.dropdown-menu li:hover a{
+    color: #fff;
+  }
+  .a-color {
+    color:black;
+    cursor: pointer;
+  }
+  tr.properties-hint-tr {
+    height: 65px;
+  }
+  tr.properties-hint-tr > td.properties-hint-td {
+    vertical-align: middle;
+    line-height: 20px;
+    border-bottom: none;
+  }
+  tr.properties-hint-tr > td.properties-hint-td > div {
+    /*position: relative;
+        left: -25em;*/
+    text-align: left;
+    margin-left: 38em;
+  }
+  .word-break {
+    word-break: break-word;
+  }
+  /*修改样式*/
+  .breadcrumbs,.main-content{
+    padding: 0;
+  }
+  .main-content .table-bordered{
+    border-top: none;
+  }
+  .main-content .table-bordered thead tr{
+    background: none;
+    line-height: 40px;
+    height: 40px;
+    color: #323232;
+  }
+  .div-table-left table thead tr td,.div-table-right table thead tr td{
+    border-bottom: none;
+  }
+  .div-table-left table tbody tr td,.div-table-right table tbody tr td{
+    font-size: 12px;
+  }
+  .div-table-left table tr td{
+    border-right: none;
+  }
+  .div-table-right table thead tr td:first-child{
+    border-left: none;
+  }
+  .table-bordered{
+    border: none;
+  }
+  .div-table-right table thead tr td:hover span{
+    color: #5078cb;
+  }
+  .div-table-right table thead tr td:hover span.fa-angle-down{
+    transform: rotate(-180deg);
+  }
+  .div-table-right table .td-properties{
+    text-align: center;
+  }
+  .div-table-right table .td-properties i,.div-table-left table i{
+    color: #5078cb;
+  }
+  .div-table-right table .td-properties{
+    border-bottom: none;
+  }
+  .div-table-left .table{
+    margin-bottom: 0;
+  }
+  .div-table-right tbody tr td:first-child{
+    border-left: none;
+  }
+  .text-length-more{
+    width: 100px;
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    float: left;
+  }
+</style>

components/product/ComponentGoods.vue

@@ -0,0 +1,273 @@
+<template>
+  <div class="component-table">
+    <!-- 筛选结果展示 -->
+    <div class="search-record">
+      筛选后现为您找到以下<span class="red">{{componentGoods.totalElements}}</span>个结果
+    </div>
+    <!-- 列表展示 -->
+    <table class="product-list">
+      <thead>
+      <tr style="height: 40px;">
+        <th width="80"></th>
+        <th width="160">品牌/型号</th>
+        <th width="100">包装/生产日期</th>
+        <th width="110">库存</th>
+        <th width="90">数量</th>
+        <th width="90">香港交货<span style="font-size: 12px;">($)</span></th>
+        <th width="100">大陆交货<span style="font-size: 12px;">(￥)</span></th>
+        <th width="100">交期(天)</th>
+        <th width="100">操作</th>
+      </tr>
+      </thead>
+      <tbody id="productList-content">
+      <!--| orderBy : dir + orderType  ng-class="{'tr-even' : !compGoods.isOdd}"-->
+      <tr v-for="compGoods in componentGoods.content">
+        <td>
+          <!--store/{{compGoods.storeId}}#/batchInfo/{{compGoods.batchCode}}-->
+          <a v-if="compGoods.batchCode" href="#">
+            <img :src="compGoods.img || '/images/all/default.png'"/>
+          </a>
+          <img v-if="!compGoods.batchCode" :src="compGoods.img || '/images/all/default.png'"/>
+          <!--store/{{compGoods.storeId}}#/home-->
+          <a href="#" class="contact" :title="compGoods.storeName">{{compGoods.storeName}}</a>
+        </td>
+        <td class="brand-code">
+          <div class="brand"><nuxt-link :to="`/product/brand/${compGoods.brand.uuid}/`" title="compGoods.brand.nameEn">{{compGoods.brand.nameEn}}</nuxt-link></div>
+          <div class="code"><nuxt-link :to="`/product/component/${compGoods.uuid}/`" :title="compGoods.code">{{compGoods.code}}</nuxt-link></div>
+        </td>
+        <td>
+          <div class="package">{{compGoods.packaging || '暂无包装方式信息'}}</div>
+          <div class="date">{{compGoods.produceDate || '-'}}</div>
+        </td>
+        <td class="text-left">
+          <div class="goods">
+            库存：<span>{{compGoods.reserve || '暂无库存'}}</span>
+          </div>
+          <div class="from" v-if="compGoods.reserve > 0">
+            起拍：<span>{{compGoods.minBuyQty}}</span>
+          </div>
+          <div class="multiple" v-if="compGoods.reserve > 0">
+            倍数：<span>{{compGoods.minPackQty}}</span>
+          </div>
+        </td>
+        <td>
+          <div v-if="!compGoods.prices">
+            <span>—</span>
+          </div>
+          <div v-for="price in compGoods.prices">
+            <!--| number-->
+            <span>{{price.start}}</span> +
+          </div>
+        </td>
+        <td>
+          <div v-if="(compGoods.currencyName && compGoods.currencyName.indexOf('USD')==-1) || !compGoods.prices">
+            <span>—</span>
+          </div>
+          <div v-for="price in compGoods.prices">
+            <!--| formateNumber : 6-->
+            <span>{{price.uSDPrice}}</span>
+          </div>
+        </td>
+        <td>
+          <div v-if="(compGoods.currencyName && compGoods.currencyName.indexOf('RMB')==-1) || !compGoods.prices">
+            <span>—</span>
+          </div>
+          <div v-for="price in compGoods.prices">
+            <!--formateNumber : 6-->
+            <span>{{price.rMBPrice}}</span>
+          </div>
+        </td>
+        <td>
+          <div v-if="!compGoods.b2cMinDelivery">
+            <span>—</span>
+          </div>
+          <div v-if="compGoods.b2cMinDelivery">交期：<span v-if="compGoods.b2cMinDelivery != compGoods.b2cMaxDelivery">{{compGoods.b2cMinDelivery + '-' + compGoods.b2cMaxDelivery}}</span>
+            <span v-if="compGoods.b2cMinDelivery == compGoods.b2cMaxDelivery">{{compGoods.b2cMinDelivery}}</span>
+          </div>
+        </td>
+        <td>
+          <div v-if="!compGoods.reserve">
+            <span>—</span>
+          </div>
+          <div v-if="compGoods.reserve > 0">
+            <button class="btn btn-primary btn-buy-now" @click="addToCart(compGoods, true)"><span class="watch">立即购买</span></button>
+          </div>
+          <div v-if="compGoods.reserve > 0">
+            <button class="btn btn-add-cart" @click="addToCart(compGoods, false)"><span class="watch">加入购物车</span></button>
+          </div>
+        </td>
+      </tr>
+      <tr v-if="componentGoods.totalElements == 0">
+        <td colspan="10" class="text-center" style="line-height: 40px; font-size: 20px;">
+          <i class="fa fa-smile-o fa-lg"></i> 暂无产品信息
+        </td>
+      </tr>
+      </tbody>
+    </table>
+    <div style="float: right;">
+      <el-pagination
+        :current-page.sync="pageParams.page"
+        :page-size="pageParams.count"
+        layout="prev, pager, next, jumper"
+        :total="componentGoods.totalElements"
+        @current-change="handleCurrentChange">
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    layout: 'mian',
+    data () {
+      return {
+        pageParams: {
+          page: 1,
+          count: 10,
+          filter: {
+            kindid: this.$route.params.id
+          }
+        }
+      }
+    },
+    computed: {
+      componentGoods () {
+        return this.$store.state.product.component.componentGoods.data
+      }
+    },
+    methods: {
+      addToCart: function (goods, buyNow) {
+        return null
+      },
+      handlerCurrentNode (data, node) {
+        this.pageParams.page = 1
+        this.pageCmpGoods(this.pageParams)
+      },
+      async pageCmpGoods (pageParams) {
+        let params = {}
+        params.filter = pageParams.filter
+        params.page = pageParams.page
+        params.count = pageParams.count
+        let { data } = await this.$http.get('/api/product/product/getCompGoodsByKindid', { params })
+        this.$store.commit('product/component/GET_CMPGOODS_SUCCESS', data)
+      },
+      handleCurrentChange (page) {
+        this.pageParams.page = page
+        this.pageCmpGoods(this.pageParams)
+      }
+    }
+  }
+</script>
+
+<style>
+  .product-list{
+    width: 1190px;
+    margin-bottom: 20px;
+  }
+  .product-list thead tr{
+    border-top: #6493ff 2px solid;
+    color: #323232;
+    background: none;
+  }
+  /* 物品列表 */
+  .product-list .brand-code {
+    font-size: 14px;
+    text-align: center;
+  }
+
+  .product-list .brand-code .code {
+    font-weight: 600;
+  }
+
+  .product-list th {
+    color: rgb(50,50,50);
+    font-size: 14px;
+    font-weight: 600;
+    background-color: #f7f7f7;
+    text-align: center;
+  }
+
+  .product-list tbody>tr {
+    border: 1px solid #e8e8e8;
+  }
+
+  .product-list tbody>tr img {
+    border: 1px solid #e8e8e8;
+    margin: 10px 0 5px 0;
+    width: 36px;
+    height: 36px;
+  }
+  .product-list tbody>tr .contact{
+    font-size: 14px;
+    color: #5078cb;
+    width: 90%;
+    margin: 0 auto;
+    display: inline-block;
+  }
+  .product-list tbody>tr .contact:hover{
+    color: #d32526;
+  }
+
+  .product-list td {
+    font-size: 12px;
+    color: #333;
+    text-align: center;
+    line-height: 20px;
+  }
+
+  /* 物品列表按钮 */
+  .product-list .btn-buy-now {
+    background-color: #5078CB;
+    color: #fff;
+    width: 80px;
+    height: 30px;
+    font-size: 12px;
+    border: 1px solid #5078cb;
+  }
+
+  .product-list .btn-add-cart {
+    margin-top: 10px;
+    color: #214797;
+    width: 80px;
+    height: 30px;
+    font-size: 12px;
+    background-color: #fff;
+    border: 1px solid #e8e8e8;
+  }
+  .product-list .btn-buy-now:hover{
+    background: #214797;
+  }
+  .product-list .btn-add-cart:hover{
+    background-color: #5078CB;
+    color: #fff;
+  }
+  .product-list .text-left{
+    text-align: left;
+  }
+  .product-list .text-left div{
+    margin-left: 30px;
+  }
+  .product-list tbody tr td{
+    padding: 10px 0;
+  }
+  .search-record{
+    width: 100%;
+    margin: 0 auto;
+    height: 40px;
+    font-size: 16px;
+    line-height: 40px;
+    margin-top: 20px;
+  }
+  .search-record span.red{
+    color: #ff0909;
+  }
+  .el-pagination .el-pager li.active{
+    background-color: #5078cb;
+    border-color: #337ab7;
+  }
+  <!-- 分页 -->
+  .el-pagination .el-pager li.active {
+    border-color: #5078cb !important;
+    background-color: #5078cb !important;
+  }
+</style>

components/product/brand/BrandComponent.vue

@@ -16,14 +16,14 @@
         </tr>
       </thead>
       <tbody>
-        <!--<tr class="text-center">-->
-          <!--<td><a href=""><span>xxx</span></a></td>-->
-          <!--<td><a href=""><button class="btn btn-default">Datasheet手册</button></a></td>-->
-          <!--<td>-->
-            <!--<button class="btn btn-default disabledbtn">申请样片</button>-->
-          <!--</td>-->
-        <!--</tr>-->
-        <tr>
+        <tr class="text-center" v-for="item in list.content">
+          <td><a :href="'product/component/'+item.uuid"><span>{{item.code}}</span></a></td>
+          <td><a :href="item.attach"><button class="btn btn-default"  :disabled="!item.attach" :class="{'disabledbtn':!item.attach}">Datasheet手册</button></a></td>
+          <td>
+            <button class="btn btn-default disabledbtn" :disabled="true">申请样片</button>
+          </td>
+        </tr>
+        <tr v-if="!list.content || list.content.length === 0">
           <td colspan="10" class="text-center">
             <div class="empty">
               <div class="empty-img">
@@ -38,11 +38,33 @@
         </tr>
       </tbody>
     </table>
+    <div style="float: right;">
+      <!--<page :total="totalCount" :page-size="pageSize" :current="nowPage"
+            v-on:childEvent="listenPage"></page>-->
+    </div>
   </div>
 </template>
 <script>
+  // import Page from '~components/common/page/pageComponent.vue'
   export default {
-    name: 'BrandComponent'
+    name: 'BrandComponent',
+    data () {
+      return {
+        pageSize: 10,
+        nowPage: 1
+      }
+    },
+    computed: {
+      lists () {
+        let components = this.$store.state.brandComponent.component
+        console.log(components)
+        return this.$store.state.brandComponent.component
+      },
+      list () {
+        console.log(this.lists.data)
+        return this.lists.data
+      }
+    }
   }
 </script>
 <style scoped>
@@ -111,6 +133,7 @@
     background: #f7f7f7;
     border-bottom: none !important;
     font-size: 14px;
+    text-align: center;
   }
   .component-list .empty{
     overflow: hidden;

components/product/brand/BrandDetail.vue

@@ -2,7 +2,7 @@
   <div class="brandDetail container">
     <div class="menu-com row">
       <div class="menu-title col-md-12">
-        <a href="product/brandList">品牌中心</a> > <span>{{list.nameEn}}</span></div>
+        <a href="/product/brand/brandList/ABC">品牌中心</a> > <span>{{list.nameEn}}</span></div>
     </div>
     <div id="brand">
       <div class="brand-logo">

components/product/brand/CategoriesList.vue

@@ -2,30 +2,12 @@
   <div class="categories-list container">
     <div class="categories-list-header">产品分类</div>
     <div class="categories-list-body" id="kinds">
-      <!--<ul class="list-unstyled">-->
-        <!--<li>-->
-          <!--<i class="fa fa-angle-right" aria-hidden="true"></i>-->
-          <!--<i class="fa fa-angle-down" aria-hidden="true"></i>-->
-          <!--<a>器件详情</a>-->
-          <!--<ul class="list-unstyled" style="margin-left: 10px;">-->
-            <!--<li>-->
-              <!--<i class="fa fa-angle-right" aria-hidden="true"></i>-->
-              <!--<i class="fa fa-angle-down" aria-hidden="true"></i>-->
-              <!--<a>sad</a>-->
-              <!--<ul class="list-unstyled" style="margin-left: 15px;">-->
-                <!--<li>-->
-                  <!--<i class="fa fa-angle-right" aria-hidden="true"></i>-->
-                  <!--<i class="fa fa-angle-down" aria-hidden="true"></i>-->
-                  <!--<a>萨达速度向</a>-->
-                <!--</li>-->
-              <!--</ul>-->
-            <!--</li>-->
-          <!--</ul>-->
+      <el-tree :data="list" :props="defaultProps" accordion :highlight-current="true" @current-change="handlerCurrentNode"></el-tree>
+      <!--<ul>-->
+        <!--<li v-for="kind in list[0]">-->
+          <!--{{kind.nameCn}}-->
         <!--</li>-->
       <!--</ul>-->
-      <div class="no-record">
-        暂无类目信息
-      </div>
     </div>
   </div>
 </template>
@@ -33,15 +15,80 @@
 <script>
   export default {
     name: 'CategoriesList',
-    date: {
-
-    },
     computed: {
-      lists () {
-        return this.$store.state.brandCategories.categories
-      },
       list () {
-        return this.lists.data
+        let brands = this.$store.state.brandCategories.categories.data
+        if (!brands || brands.length === 0) {
+          return []
+        }
+
+        // 处理第1层
+        if ((brands[0] && brands[0].length > 0) && (brands[1] && brands[1].length > 0)) {
+          for (let i = 0; i < brands[1].length; i++) {
+            for (let j = 0; j < brands[0].length; j++) {
+              if (brands[0][j].id === brands[1][i].parentid) {
+                if (!brands[0][j].children) {
+                  brands[0][j].children = []
+                }
+                brands[0][j].children.push(brands[1][i])
+                break
+              }
+            }
+          }
+        }
+
+        // 处理第2层
+        if ((brands[1] && brands[1].length > 0) && (brands[2] && brands[2].length > 0)) {
+          for (let i = 0; i < brands[2].length; i++) {
+            for (let j = 0; j < brands[1].length; j++) {
+              if (brands[1][j].id === brands[2][i].parentid) {
+                if (!brands[1][j].children) {
+                  brands[1][j].children = []
+                }
+                brands[1][j].children.push(brands[2][i])
+                break
+              }
+            }
+          }
+        }
+
+        // 处理第3层
+        if ((brands[2] && brands[2].length > 0) && (brands[3] && brands[3].length > 0)) {
+          for (let i = 0; i < brands[3].length; i++) {
+            for (let j = 0; j < brands[2].length; j++) {
+              if (brands[2][j].id === brands[3][i].parentid) {
+                if (!brands[2][j].children) {
+                  brands[2][j].children = []
+                }
+                brands[2][j].children.push(brands[3][i])
+                break
+              }
+            }
+          }
+        }
+        return brands[0] || []
+      }
+    },
+    data () {
+      return {
+        defaultProps: {
+          children: 'children',
+          label: 'nameCn'
+        }
+      }
+    },
+    methods: {
+      handlerCurrentNode (data, node) {
+//        if (this.parentId === data.id) {
+//          this.parentId = 0
+//          this.ids = null
+//          console.log('取消选中状态')
+//        } else {
+//          if (data.level === 1) {
+//            this.parentId = data.id
+//          }
+//        }
+        console.log('data', data.id + '-' + data.nameCn)
       }
     }
   }

components/product/component/ComponentDetail.vue

@@ -61,11 +61,6 @@
         return this.lists.data
       }
     },
-    fetch ({ store }) {
-      return Promise.all([
-        store.dispatch('loadComponentMenu', {id: store.state.componentDetail.detail.data.kind.level})
-      ])
-    },
     components: {
       ComponentMenu
     }

components/product/component/StoreInfo.vue

@@ -105,11 +105,18 @@
     name: 'StoreInfo',
     computed: {
       stores () {
-        return this.$store.state.componentStore.Store
+        return this.$store.state.componentStore.store
       },
       store () {
         console.log(this.stores.data)
         return this.stores.data
+      },
+      storeLists () {
+        return this.$store.state.componentInformation.information
+      },
+      storeList () {
+        console.log(this.storeLists.data)
+        return this.storeLists.data
       }
     }
   }

components/product/index.js

@@ -8,5 +8,8 @@ import OriginalDetail from './original/OriginalDetail.vue'
 import Recommends from './Recommends.vue'
 import BrandList from './BrandList.vue'
 import KindBox from './KindBox.vue'
-export { ComponentDetail, ComponentMenu, StoreInfo, BrandDetail, CategoriesList, BrandComponent, OriginalDetail, Recommends, BrandList, KindBox }
+import CategroyNav from './CategoryNav.vue'
+import CategoryProperty from './CategoryProperty.vue'
+import ComponentGoods from './ComponentGoods.vue'
 
+export { ComponentDetail, ComponentMenu, StoreInfo, BrandDetail, CategoriesList, BrandComponent, OriginalDetail, Recommends, BrandList, KindBox, CategroyNav, CategoryProperty, ComponentGoods }

components/provider/Suppliers.vue

@@ -13,7 +13,7 @@
 						</span>
           </div>
         </td>
-        <td width="150" style="vertical-align: middle"><span>入驻商家：</span><span class="text-message">{{stores ? stores.length : 0}}</span><span>家</span></td>
+        <td width="150" style="vertical-align: middle"><span>入驻商家：</span><span class="text-message">{{stores ? stores.totalElements : 0}}</span><span>家</span></td>
         <td width="150">
           <a href="vendor#/store-apply"><button class="btn btn-primary" style="margin-left: 6px;">立即入驻</button></a>
         </td>
@@ -21,7 +21,7 @@
       </thead>
       <tbody>
       <!--<tr>{{$data}}</tr>-->
-      <tr v-for="store in stores">
+      <tr v-for="store in stores.content" v-if="store">
         <td>
           <div class="logo">
             <a :href="'/store/' + store.uuid"><img :src="store.logoUrl || '/images/store/common/default.png'" :alt="store.storeName"></a>
@@ -31,7 +31,7 @@
           <a class="store-name" :href="'/store/' + store.uuid" target="_blank"><div :title="store.storeName">{{store.storeName}}</div></a>
           <div class="store-message">
             <span>商家介绍：</span>
-            <span>{{store.description.slice(0,160)}}<em v-if="store.description.length > 160">...</em></span>
+            <span>{{showLittleDescription(store.description)}}<em v-if="store.description.length > 160">...</em></span>
           </div>
         </td>
         <td class="vertical-middle">
@@ -45,16 +45,31 @@
       </tr>
       </tbody>
     </table>
+    <div style="float: right;">
+      <el-pagination
+        :current-page.sync="pageParams.page"
+        :page-size="pageParams.count"
+        layout="prev, pager, next, jumper"
+        :total="stores.totalElements"
+        @current-change="handleCurrentChange">
+      </el-pagination>
+    </div>
   </div>
 </template>
 <script>
 
 export default {
   name: 'suppliers',
-  props: ['op'],
+  props: ['types'],
   data () {
     return {
-      keyword: ''
+      keyword: '',
+      pageParams: {
+        page: 1,
+        count: 10,
+        keyword: '',
+        types: this.types
+      }
     }
   },
   computed: {
@@ -64,13 +79,42 @@ export default {
   },
   methods: {
     search () {
-      let params = { op: this.op, keyword: this.keyword }
-      this.$store.dispatch('provider/findStoreList', params)
+      this.pageParams.page = 1
+      this.pageParams.keyword = this.keyword === '' ? null : this.keyword
+      this.$store.dispatch('provider/findStoreList', this.pageParams)
+    },
+    showLittleDescription (description) {
+      if (!description || description === '') {
+        return '暂无简介'
+      }
+      return description.slice(0, 160)
+    },
+    async pageCommodity (pageParams) {
+      pageParams.op = 'pageByType'
+
+      try {
+        let { data } = await this.$http.get('/api/store-service/stores', { params: pageParams })
+        console.log('DATA', data)
+        this.$store.commit('provider/stores/GET_STORE_LIST_SUCCESS', data)
+      } catch (err) {
+        this.$store.commit('provider/stores/GET_STORE_LIST_FAILURE', err)
+      }
+    },
+    handleCurrentChange (page) {
+      this.pageParams.page = page
+      this.pageParams.keyword = this.keyword === '' ? null : this.keyword
+
+      this.pageCommodity(this.pageParams)
     }
   }
 }
 </script>
-<style scoped>
+<style>
+  .el-pagination .el-pager li.active{
+    background-color: #5078cb;
+    border-color: #337ab7;
+  }
+
   #store-list{
 		width: 1190px;
 		padding: 0;

components/store/Breadcrumb.vue

@@ -1,25 +0,0 @@
-<template>
-  <div>
-    <el-breadcrumb separator=">">
-      <el-breadcrumb-item v-for="(breadcrumb, index) in breadcrumbs" :key="index" :to="breadcrumb.to || {}" v-text="breadcrumb.name">首页</el-breadcrumb-item>
-      <!--<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
-      <el-breadcrumb-item>活动管理</el-breadcrumb-item>
-      <el-breadcrumb-item>活动列表</el-breadcrumb-item>
-      <el-breadcrumb-item>活动详情</el-breadcrumb-item>-->
-    </el-breadcrumb>
-  </div>
-</template>
-<script>
-
-export default {
-  name: 'breadcrumb',
-  props: ['breadcrumbs']
-}
-</script>
-<style lang="scss" scoped>
-  @import '~assets/scss/variables';
-
-  el-breadcrumb {
-    font-size: 14px;
-  }
-</style>

components/store/CommodityList.vue

@@ -194,8 +194,12 @@ export default {
       params.page = pageParams.page
       params.count = pageParams.count
 
-      let { data } = await this.$http.get('/api/commodity/commodities', { params })
-      this.$store.commit('shop/storeInfo/GET_STORE_COMMODITY_SUCCESS', data)
+      try {
+        let { data } = await this.$http.get('/api/commodity/commodities', { params })
+        this.$store.commit('shop/storeInfo/GET_STORE_COMMODITY_SUCCESS', data)
+      } catch (err) {
+        this.$store.commit('shop/storeInfo/GET_STORE_COMMODITY_FAILURE', err)
+      }
     },
     handleCurrentChange (page) {
       console.log(page)

components/store/index.js

@@ -1,5 +1,5 @@
-import StoreHeader from './StoreHeader.vue'
-import StoreTitle from './StoreTitle.vue'
+import StoreHeader from './common/StoreHeader.vue'
+import StoreTitle from './common/StoreTitle.vue'
 import BaseInfo from './BaseInfo.vue'
 import ComponentInfo from './ComponentInfo.vue'
 import CommodityInfo from './CommodityInfo.vue'

package.json

@@ -11,7 +11,6 @@
     "cross-env": "^3.1.4",
     "element-ui": "^1.3.7",
     "express": "^4.14.1",
-    "font-awesome": "^4.7.0",
     "http-proxy-middleware": "^0.17.4",
     "nuxt": "0.10.6",
     "iview": "^2.0.0-rc.19",

pages/product/brand/_code.vue

@@ -18,10 +18,9 @@
       CategoriesList,
       BrandComponent
     },
-    fetch ({ store, route }) {
+    fetch ({ store, params }) {
       return Promise.all([
-        store.dispatch('loadBrandDetail', {id: route.params.code}),
-        store.dispatch('loadBrandCategories', {id: route.params.code.id})
+        store.dispatch('loadBrandDetail', {id: params.code})
       ])
     }
   }

pages/product/component/_uuid.vue

@@ -17,8 +17,8 @@
     fetch ({ store, route }) {
       console.log(route.params.uuid)
       return Promise.all([
-        store.dispatch('loadComponentDetail', {id: route.params.uuid})
-//        store.dispatch('loadComponentMenu', {id: store.state.componentDetail.detail.data.kind.level.id})
+        store.dispatch('loadComponentDetail', {id: route.params.uuid}),
+        store.dispatch('loadComponentInformation', {count: 10, filter: { uuid: route.params.uuid.uuid, ignoreUMall: route.params.uuid.ignoreUMall, ignoreStore: route.params.uuid.ignoreStore, storeIds: route.params.uuid.storeIds }, page: 1, sorting: {minPriceRMB: route.params.uuid.minPriceRMB}})
       ])
     },
     created () {

pages/product/kind.vue

@@ -1,21 +1,11 @@
 <template>
   <div>
-    <kind-box></kind-box>
+    <nuxt-child></nuxt-child>
   </div>
 </template>
 
 <script>
-import { KindBox } from '~components/product'
-
-export default {
-  layout: 'main',
-  fetch ({store}) {
-    return Promise.all([
-      store.dispatch('product/loadAllProductKinds', { id: 0 })
-    ])
-  },
-  components: {
-    KindBox
+  export default {
+    layout: 'main'
   }
-}
 </script>

pages/product/kind/_id.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="container">
+    <categroy-nav></categroy-nav>
+    <category-property></category-property>
+    <component-goods></component-goods>
+  </div>
+</template>
+
+<script>
+  import { CategroyNav, CategoryProperty, ComponentGoods } from '~components/product'
+
+  export default {
+    layout: 'main',
+    fetch ({store, route}) {
+      return Promise.all([
+        store.dispatch('product/loadKindParentsWithBothers', {id: route.params.id}),
+        store.dispatch('product/loadKindBrands', {id: route.params.id}),
+        store.dispatch('product/pageComGoods', {kindid: route.params.id})
+      ])
+    },
+    components: {
+      CategroyNav,
+      CategoryProperty,
+      ComponentGoods
+    }
+  }
+</script>
+
+<style>
+  .container {
+    position: relative;
+    width: 1190px;
+    margin-right: auto;
+    margin-left: auto;
+  }
+</style>

pages/product/kind/home.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <kind-box></kind-box>
+  </div>
+</template>
+
+<script>
+  import { KindBox } from '~components/product'
+
+  export default {
+    layout: 'main',
+    fetch ({store}) {
+      return Promise.all([
+        store.dispatch('product/loadAllProductKinds', { id: 0 })
+      ])
+    },
+    components: {
+      KindBox
+    }
+  }
+</script>

pages/provider/factories.vue

@@ -6,7 +6,7 @@
 
     <recommend-original/>
 
-    <suppliers :op="'findByOriginal'"/>
+    <suppliers :types="'ORIGINAL_FACTORY'"/>
   </div>
 </template>
 <script>
@@ -20,7 +20,7 @@ export default {
       store.dispatch('provider/loadSalesStore', { isOriginal: true }),
       store.dispatch('provider/loadNewStores', { types: 'ORIGINAL_FACTORY' }),
       store.dispatch('provider/loadRecommendOriginal'),
-      store.dispatch('provider/findStoreList', { op: 'findByOriginal' })
+      store.dispatch('provider/findStoreList', { page: 1, count: 10, types: 'ORIGINAL_FACTORY' })
     ])
   },
   components: {

pages/provider/list.vue

@@ -2,7 +2,7 @@
   <div>
     <excellent-suppliers :isShowMore="false"/>
 
-    <suppliers :op="'findByAGENCY'"/>
+    <suppliers :types="'AGENCY-DISTRIBUTION'"/>
   </div>
 </template>
 <script>
@@ -13,7 +13,7 @@ export default {
   fetch ({ store }) {
     return Promise.all([
       store.dispatch('provider/loadRecommendStores'),
-      store.dispatch('provider/findStoreList', { op: 'findByAGENCY' })
+      store.dispatch('provider/findStoreList', { page: 1, count: 10, types: 'AGENCY-DISTRIBUTION' })
     ])
   },
   components: {

store/brandComponent.js

@@ -0,0 +1,18 @@
+export const state = () => ({
+  component: {
+    fetching: false,
+    data: []
+  }
+})
+export const mutations = {
+  REQUEST_COMPONENT (state) {
+    state.component.fetching = true
+  },
+  GET_COMPONENT_FAILURE (state) {
+    state.component.fetching = false
+  },
+  GET_COMPONENT_SUCCESS (state, result) {
+    state.component.fetching = false
+    state.component.data = result
+  }
+}

store/componentInformation.js

@@ -0,0 +1,18 @@
+export const state = () => ({
+  information: {
+    fetching: false,
+    data: []
+  }
+})
+export const mutations = {
+  REQUEST_INFORMATION (state) {
+    state.information.fetching = true
+  },
+  GET_INFORMATION_FAILURE (state) {
+    state.information.fetching = false
+  },
+  GET_INFORMATION_SUCCESS (state, result) {
+    state.information.fetching = false
+    state.information.data = result
+  }
+}

store/componentMenu.js

@@ -5,13 +5,13 @@ export const state = () => ({
   }
 })
 export const mutations = {
-  REQUEST_Menu (state) {
+  REQUEST_MENU (state) {
     state.menu.fetching = true
   },
-  GET_Menu_FAILURE (state) {
+  GET_MENU_FAILURE (state) {
     state.menu.fetching = false
   },
-  GET_Menu_SUCCESS (state, result) {
+  GET_MENU_SUCCESS (state, result) {
     state.menu.fetching = false
     state.menu.data = result
   }

store/index.js

@@ -1,5 +1,28 @@
 import axios from '~plugins/axios'
 
+// 获取品牌详情产品分类信息
+function loadBrandCategories ({commit}, params = {}) {
+  let id = params.id
+  commit('brandCategories/REQUEST_CATEGORIES', params)
+  return axios.get(`/api/product/brand/${id}/kinds`)
+    .then(response => {
+      commit('brandCategories/GET_CATEGORIES_SUCCESS', response.data)
+    }, err => {
+      commit('brandCategories/GET_CATEGORIES_FAILURE', err)
+    })
+}
+
+// 获取品牌详情型号列表数据
+function loadBrandComponent ({commit}, params = {}) {
+  commit('brandComponent/REQUEST_COMPONENT', params)
+  return axios.get('/api/product/component/list', { params })
+    .then(response => {
+      commit('brandComponent/GET_COMPONENT_SUCCESS', response.data)
+    }, err => {
+      commit('brandComponent/GET_COMPONENT_FAILURE', err)
+    })
+}
+
 export const actions = {
   // 全局服务初始化
   nuxtServerInit (store, { params, route, isServer, req }) {
@@ -119,12 +142,22 @@ export const actions = {
   // 获得器件详情信息
   loadComponentDetail ({commit}, params = {}) {
     let id = params.id
-    console.log(id)
+    // console.log(id)
     commit('componentDetail/REQUEST_DETAIL', params)
     return axios.get(`/api/product/component/${id}`)
       .then(response => {
         console.log('response', response.data)
         commit('componentDetail/GET_DETAIL_SUCCESS', response.data)
+        if (response.data) {
+          commit('componentMenu/REQUEST_MENU', params)
+          return axios.get(`/api/product/kind/structing/${response.data.kindid}`)
+            .then(response => {
+              console.log('response', response.data)
+              commit('componentMenu/GET_MENU_SUCCESS', response.data)
+            }, err => {
+              commit('componentMenu/GET_MENU_FAILURE', err)
+            })
+        }
       }, err => {
         commit('componentDetail/GET_DETAIL_FAILURE', err)
       })
@@ -154,16 +187,31 @@ export const actions = {
         commit('componentStore/GET_STORE_FAILURE', err)
       })
   },
+  // 器件详情页商家信息列表
+  loadComponentInformation ({commit}, params = {}) {
+    commit('componentInformation/REQUEST_INFORMATION', params)
+    return axios.get('/api/commodity/goods/page', { params })
+      .then(response => {
+        console.log('loadComponentInformation', response.data)
+        commit('componentInformation/GET_INFORMATION_SUCCESS', response.data)
+      }, err => {
+        commit('componentInformation/GET_INFORMATION_FAILURE', err)
+      })
+  },
   // 品牌详情页面
   // 获得品牌详情信息
-  loadBrandDetail ({commit}, params = {}) {
+  loadBrandDetail ({commit, dispatch}, params = {}) {
     let id = params.id
-    console.log(id)
     commit('brandDetail/REQUEST_DETAIL', params)
     return axios.get(`/api/product/brand/${id}`)
       .then(response => {
-        console.log('response', response.data)
+        let brand = response.data || {}
+        console.log('loadBrandDetail', response.data !== null)
         commit('brandDetail/GET_DETAIL_SUCCESS', response.data)
+        return Promise.all([
+          loadBrandCategories({ commit }, {id: brand.id}),
+          loadBrandComponent({ commit }, {count: 10, filter: { brandid: brand.id }, page: 1})
+        ])
       }, err => {
         commit('brandDetail/GET_DETAIL_FAILURE', err)
       })
@@ -174,12 +222,21 @@ export const actions = {
     commit('brandCategories/REQUEST_CATEGORIES', params)
     return axios.get(`/api/product/brand/${id}/kinds`)
       .then(response => {
-        console.log('response', response.data)
         commit('brandCategories/GET_CATEGORIES_SUCCESS', response.data)
       }, err => {
         commit('brandCategories/GET_CATEGORIES_FAILURE', err)
       })
   },
+  // 获取品牌详情型号列表数据
+  loadBrandComponent ({commit}, params = {}) {
+    commit('brandComponent/REQUEST_COMPONENT', params)
+    return axios.get('/api/product/component/list', { params })
+      .then(response => {
+        commit('brandComponent/GET_COMPONENT_SUCCESS', response.data)
+      }, err => {
+        commit('brandComponent/GET_COMPONENT_FAILURE', err)
+      })
+  },
   // 获取帮助中心信息
   loadHelpSnapsho ({ commit }, params = {}) {
     commit('help/REQUEST_SNAPSHO')

store/product.js

@@ -44,5 +44,58 @@ export const actions = {
       }, err => {
         commit('kind/GET_KIND_FAILURE', {id, err})
       })
+  },
+  loadKindParentsWithBothers ({ commit }, params = {}) {
+    let id = params.id
+    commit('kind/REQUEST_KINDPARENTSWITHBOTHERS', params)
+    return axios.get(`/api/product/kind/${id}/parentsWithBothers`)
+      .then(response => {
+        commit('kind/GET_KINDPARENTSWITHBOTHERS_SUCCESS', response.data)
+        if (response.data) {
+          if (!response.data[response.data.length - 1].leaf) {
+            commit('kind/REQUEST_CHILDREN')
+            return axios.get(`/api/product/kind/${id}/children`)
+              .then(response => {
+                commit('kind/GET_CHILDREN_SUCCESS', response.data)
+              }, err => {
+                commit('kind/GET_CHILDREN_FAILURE', err)
+              })
+          } else {
+            commit('kind/REQUEST_KINDPROPERTY')
+            return axios.get(`/api/product/kind/${id}/properties/values`)
+              .then(response => {
+                commit('kind/GET_KINDPROPERTY_SUCCESS', response.data)
+              }, err => {
+                commit('kind/GET_KINDPROPERTY_FAILURE', err)
+              })
+          }
+        }
+      }, err => {
+        commit('kind/GET_KINDPARENTSWITHBOTHERS_FAILURE', err)
+      })
+  },
+  loadKindBrands ({ commit }, params = {}) {
+    let id = params.id
+    commit('kind/REQUEST_KINDBRANDS')
+    return axios.get(`/api/product/kind/${id}/brands`)
+      .then(response => {
+        commit('kind/GET_KINDBRANDS_SUCCESS', response.data)
+      }, err => {
+        commit('kind/GET_KINDBRANDS_FAILURE', err)
+      })
+  },
+  pageComGoods ({ commit }, kindid = '', pageParams = { page: 1, count: 10 }) {
+    let params = {}
+    let filter = {kindid: kindid.kindid}
+    params.filter = filter
+    params.page = pageParams.page
+    params.count = pageParams.count
+    commit('component/REQUEST_CMPGOODS')
+    return axios.get('/api/product/product/getCompGoodsByKindid', { params })
+      .then(response => {
+        commit('component/GET_CMPGOODS_SUCCESS', response.data)
+      }, err => {
+        commit('component/GET_CMPGOODS_FAILURE', err)
+      })
   }
 }

store/product/component.js

@@ -0,0 +1,19 @@
+export const state = () => ({
+  componentGoods: {
+    fetching: false,
+    data: []
+  }
+})
+
+export const mutations = {
+  REQUEST_CMPGOODS (state) {
+    state.componentGoods.fetching = true
+  },
+  GET_CMPGOODS_SUCCESS (state, result) {
+    state.componentGoods.fetching = false
+    state.componentGoods.data = result
+  },
+  GET_CMPGOODS_FAILURE (state) {
+    state.fetching = false
+  }
+}

store/product/kind.js

@@ -2,6 +2,22 @@ export const state = () => ({
   kinds: {
     fetching: false,
     data: []
+  },
+  kindsParentWithBother: {
+    fetching: false,
+    data: []
+  },
+  children: {
+    fetching: false,
+    data: []
+  },
+  kindProperty: {
+    fetching: false,
+    data: []
+  },
+  brands: {
+    fetching: false,
+    data: []
   }
 })
 
@@ -40,5 +56,45 @@ export const mutations = {
         kind.children = action.result
       }
     }
+  },
+  REQUEST_KINDPARENTSWITHBOTHERS (state) {
+    state.kindsParentWithBother.fetching = true
+  },
+  GET_KINDPARENTSWITHBOTHERS_SUCCESS (state, result) {
+    state.kindsParentWithBother.fetching = false
+    state.kindsParentWithBother.data = result
+  },
+  GET_KINDPARENTSWITHBOTHERS_FAILURE (state) {
+    state.kindsParentWithBother.fetching = false
+  },
+  REQUEST_CHILDREN (state) {
+    state.children.fetching = true
+  },
+  GET_CHILDREN_SUCCESS (state, result) {
+    state.children.fetching = false
+    state.children.data = result
+  },
+  GET_CHILDREN_FAILURE (state) {
+    state.children.fetching = false
+  },
+  REQUEST_KINDPROPERTY (state) {
+    state.kindProperty.fetching = true
+  },
+  GET_KINDPROPERTY_SUCCESS (state, result) {
+    state.kindProperty.fetching = false
+    state.kindProperty.data = result
+  },
+  GET_KINDPROPERTY_FAILURE (state) {
+    state.kindProperty.fetching = false
+  },
+  REQUEST_KINDBRANDS (state) {
+    state.brands.fetching = true
+  },
+  GET_KINDBRANDS_SUCCESS (state, result) {
+    state.brands.fetching = false
+    state.brands.data = result
+  },
+  GET_KINDBRANDS_FAILURE (state) {
+    state.brands.fetching = false
   }
 }

store/provider.js

@@ -96,6 +96,7 @@ export const actions = {
       })
   },
   findStoreList ({ commit }, params = {}) {
+    params.op = 'pageByType'
     commit('stores/REQUEST_STORE_LIST')
     return axios.get('/api/store-service/stores', { params })
       .then(response => {

store/provider/storeCms.js

@@ -61,7 +61,6 @@ export const mutations = {
   GET_RECOMMEND_STORE_SUCCESS (state, result) {
     state.recommendStore.fetching = false
     state.recommendStore.data = result
-    console.log('Recommend Store', result.length)
   },
   REQUEST_HOT_COMPONENTS (state) {
     state.hotComponents.fetching = true

store/provider/stores.js

@@ -1,7 +1,7 @@
 export const state = () => ({
   storeList: {
     fetching: false,
-    data: []
+    data: {}
   }
 })
 
@@ -12,7 +12,7 @@ export const mutations = {
   GET_STORE_LIST_FAILURE (state) {
     state.storeList.fetching = false
   },
-  GET_STORE_LIST_SUCCESS (state, result) {
+  GET_STORE_LIST_SUCCESS (state, result = {}) {
     state.storeList.fetching = false
     state.storeList.data = result
   }