新版器件选型页

components/product/CategoryNav.vue

@@ -2,16 +2,17 @@
   <div class="breadcrumbs container">
     <ul class="list-unstyled list-inline">
       <li class="crumb-item">
-        <nuxt-link :to="`/product/kind/home`">电子元器件</nuxt-link>
+        <nuxt-link :to="`/product/kind/home`">全部器件</nuxt-link><span>> </span>
       </li>
-      <li class="crumb-item crumb-item-angle" v-for="k in actives">
-        <i class="angle"></i>
+      <li class="crumb-item crumb-item-angle" v-for="(k, index) 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">
+          <span :title="k.nameCn">{{k.nameCn | nameFilter}}</span> <i class="fa fa-angle-down td-icon"></i>
+        </nuxt-link><span v-if="index<actives.length-1">> </span>
+        <div class="crumb-drop crumb-drop-angle" v-if="k.bothers">
+          <div><i class="angle"></i></div>
           <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>
+            <li v-for="(b, index) in k.bothers" :style="index == k.bothers.length-1?'border-right: none;': ''"><nuxt-link :to="`/product/kind/${b.id}`"><span>{{b.nameCn}}</span> </nuxt-link></li>
           </ul>
         </div>
         <i class="icon-glass"></i>
@@ -22,6 +23,31 @@
 
 <script>
   export default {
+    filters: {
+      nameFilter: function (title) {
+        if (title === '') {
+          return title
+        }
+        let len = 0
+        let index = 0
+        for (let i = 0; i < title.length; i++) {
+          if (index === 0 && title.charAt(i).charCodeAt(0) > 255) {
+            len = len + 2
+          } else {
+            len++
+          }
+          if (len > 20) {
+            index = i
+            break
+          }
+        }
+        if (index > 0) {
+          return title.substring(0, index) + '...'
+        } else {
+          return title
+        }
+      }
+    },
     computed: {
       actives () {
         return this.$store.state.product.kind.kindsParentWithBother.data
@@ -30,7 +56,7 @@
   }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
   /* breadcrumbs */
   .breadcrumbs {
     margin-top: 20px;
@@ -42,29 +68,32 @@
   .breadcrumbs ul.list-inline.list-unstyled li.crumb-item {
     position: relative;
     padding-left: 0px;
-    padding-right: 0px;
+    padding-right: 10px;
     padding-bottom: 1px;
-    height: 32px;
+    height: 30px;
     line-height: 30px;
     background: #fff;
-    border: solid 1px #6493ff;
+    span{
+      padding-left: 6px;
+    }
   }
   .breadcrumbs ul li.crumb-item-angle {
     margin-left: -5px;
   }
   .breadcrumbs ul li.crumb-item>a {
+    border: 1px solid #ddd;
     display: inline-block;
-    width: 100%;
-    height: 100%;
+    height: 30px;
+    line-height: 30px;
     padding-left: 15px;
     padding-right: 15px;
     cursor: pointer;
     text-decoration: none;
-    color: #323232;
-    font-size: 16px;
+    color: #666;
+    font-size: 14px;
   }
   .breadcrumbs ul li.crumb-item:hover>a span,.breadcrumbs ul li.crumb-item:hover>a i{
-    color: #5078cb;
+    color: #0056d7;
   }
   .breadcrumbs ul li.crumb-item>a i{
     margin-right: 10px;
@@ -72,44 +101,102 @@
   .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;
+  .crumb-drop-angle div{
+    width: 133px;
     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 {
+    display: none;
+  }
+  /* .crumb-drop-angle .angle {
+     position: absolute;
+     background-color: #404040;
+     opacity: 0.6;
+     left: 35px;
+     top: 32px;
+     height: 10px;
+     width: 10px;
+     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 *!
+     display: none;
+     z-index: 98;
+   }*/
+  .crumb-drop-angle .angle{
     position: absolute;
+    top: 29px;
+    left: 30px;
+    width: 0;
+    height: 0;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-bottom: 7px solid #404040;
+    z-index: 115;
+    opacity: 0.9;
+  }
+  .breadcrumbs ul li.crumb-item .crumb-drop ul{
+    padding: 15px 0px;
+    position: absolute;
+    top: 36px;
     display: none;
-    left: -1px;
-    top: 30px;
-    border: #6493ff 1px solid;
-    background: #fff;
     z-index: 100;
-    width: 200px;
+    width: 403px;
+    background-color: #404040;
+    opacity: 0.9;
+    max-height: 170px;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+  /*滚动条样式*/
+  .breadcrumbs ul li.crumb-item .crumb-drop ul::-webkit-scrollbar {/*滚动条整体样式*/
+    width: 12px;     /*高宽分别对应横竖滚动条的尺寸*/
+  }
+  .breadcrumbs ul li.crumb-item .crumb-drop ul::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
+    border-radius: 3px;
+    background: #606060;
+    border-left: 1px solid #0d0c0f;
+    border-right: 1px solid #0d0c0f;
+  }
+  .breadcrumbs ul li.crumb-item .crumb-drop ul::-webkit-scrollbar-track {/*滚动条里面轨道*/
+    border-radius: 0;
+    border: 1px solid #0d0c0f;
+    background: #161618;
   }
   .breadcrumbs ul li.crumb-item .crumb-drop li {
+    float: left;
     line-height: 20px;
+    height: 20px;
+    width: 133px;
+    border-right: 1px dashed #fff;
+    &:nth-child(3n){
+      border-right: none;
+    }
   }
-  .breadcrumbs ul li.crumb-item .crumb-drop li a{
-    font-size: 12px;
+  .breadcrumbs ul li.crumb-item .crumb-drop li a {
+    display: inline-block;
+    font-size: 14px;
+    width: 100%;
+    overflow: hidden;
+    text-overflow:ellipsis;
+    white-space: nowrap;
+    color: #fff;
+    padding-left: 10px;
+    &:hover{
+      color: rgba(255,255,255,0.5);
+      border: none;
+      span{
+        color: rgba(255,255,255,0.5);
+        text-decoration: underline;
+      }
+    }
   }
   li{
     list-style: none;
   }
   .breadcrumbs ul li.crumb-item:hover .crumb-drop {
-    display: block;
+    ul, div ,.angle{
+      display: block;
+    }
   }
 
   .breadcrumbs ul li.crumb-item:hover>a {
@@ -121,7 +208,8 @@
     color: #323232;
   }
   .breadcrumbs ul li.crumb-item a:hover{
-    color: #5078cb;
+    color: #0056d7;
+    border: 1px solid #0056d7;
   }
   /* sl_warp */
   .main-content .sl-wrap .sl-key>span {
@@ -299,6 +387,12 @@
   .div-table-right table thead tr td:hover span{
     color: #5078cb;
   }
+  .td-icon{
+    font-size: 20px;
+    position: relative;
+    top: 2px;
+    margin-left: 10px;
+  }
   .div-table-right table thead tr td:hover span.fa-angle-down{
     transform: rotate(-180deg);
   }

components/product/CategoryProperty.vue

@@ -2,19 +2,19 @@
   <div class="main-content container">
     <div class="selector" v-if="kind && !kind.leaf">
       <div class="sl-wrap" >
-        <div class="sl-key">
+        <!--<div class="sl-key">
           <span>分类：</span>
-        </div>
+        </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>
+              <nuxt-link :to="`/product/kind/${c.id}`"><span>{{c.nameCn}}</span></nuxt-link>
             </li>
           </ul>
         </div>
       </div>
     </div>
-    <div class="div-table" split-dropdown v-if="kind && kind.leaf">
+    <!--<div class="div-table" split-dropdown v-if="kind && kind.leaf">
       <div class="div-table-left">
         <table class="table table-bordered">
           <thead >
@@ -22,7 +22,7 @@
             <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" style="top: 38px;">
-                <!--orderBy:'nameCn'-->
+                &lt;!&ndash;orderBy:'nameCn'&ndash;&gt;
                 <li v-for="b in brands"><a @click="selectBrand(b)"><span>{{b.nameCn}}</span></a></li>
               </ul>
             </td>
@@ -77,7 +77,7 @@
               </a>
             </li>
           </ul>
-    </div>
+    </div>-->
   </div>
 </template>
 
@@ -182,7 +182,7 @@
   }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
   .clear, .clr {
     clear: both;
   }
@@ -300,8 +300,7 @@
   .main-content .selector {
     color: #666;
     border: 1px solid #ddd;
-    border-top: #6493ff 2px solid;
-    margin-bottom: 30px;
+    /*border-top: #6493ff 2px solid;*/
     padding: 10px 0;
   }
 
@@ -309,6 +308,7 @@
     position: relative;
     line-height: 22px;
     padding: 5px 0;
+    /*border: 1px solid red;*/
   }
 
   .main-content .sl-wrap .sl-key {
@@ -323,16 +323,51 @@
   }
 
   .main-content .sl-wrap .sl-value {
-    margin-left: 110px;
+    max-height: 117px;
     overflow-y: auto;
+    overflow-x: hidden;
+    padding-left: 10px;
+  }
+  /*滚动条样式*/
+  .main-content .sl-wrap .sl-value::-webkit-scrollbar {/*滚动条整体样式*/
+    width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
+  }
+  .main-content .sl-wrap .sl-value::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
+    border-radius: 3px;
+    background: #ccc;
+    border-left: 1px solid #f1f1f1;
+    border-right: 1px solid #f1f1f1;
+  }
+  .main-content .sl-wrap .sl-value::-webkit-scrollbar-track {/*滚动条里面轨道*/
+    border-radius: 0;
+    border: 1px solid #f1f1f1;
+    background: #f1f1f1;
+  }
+  .main-content .sl-wrap .sl-value ul {
+    width: 100%;
+    padding-top: 5px;
+  }
+  .main-content .sl-wrap .sl-value ul li {
+    width: 20% !important;
+    text-align: center;
   }
-
   .main-content .sl-wrap .sl-value ul li a{
-    color: #323232;
+    color: #333;
     font-size: 14px;
+    span{
+      display: inline-block;
+      width: 100%;
+      overflow: hidden;
+      text-overflow:ellipsis;
+      white-space: nowrap;
+    }
   }
   .main-content .sl-wrap .sl-value ul li a:hover{
-    color: #5078cb;
+    color: #f54802;
+    span{
+      color: #f54802;
+      text-decoration: underline;
+    }
   }
   .main-content .sl-wrap .sl-value .sl-selected {
     display: inline-block;

components/product/ComponentGoods.vue

@@ -8,45 +8,52 @@
     <table class="product-list">
       <thead>
       <tr style="height: 40px;">
-        <th width="80"></th>
-        <th width="150">品牌/类目/型号/规格</th>
+        <th width="180">品牌/类目/型号/规格</th>
         <th width="100">包装/生产日期</th>
-        <th width="130">库存</th>
-        <th width="90">梯度/pcs</th>
-        <th width="90">香港交货<span style="font-size: 12px;">($)</span></th>
-        <th width="100">大陆交货<span style="font-size: 12px;">(￥)</span></th>
-        <th width="90">交期(天)</th>
+        <th width="120">商家名称</th>
+        <th width="110">库存</th>
+        <th width="210">价格梯度(PCS)</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 style="position: relative">
-          <img class="sellout-flag" v-if="compGoods.status === 602" src="/images/search/sellout-search.png" alt="">
-          <!--store/{{compGoods.storeId}}#/batchInfo/{{compGoods.batchCode}}-->
-          <nuxt-link v-if="compGoods.batchCode" :to="`/store/productDetail/${compGoods.batchCode}`" target="_blank">
-            <img :src="compGoods.img?compGoods.img:compGoods.brand&&compGoods.brand.logoUrl?compGoods.brand.logoUrl:'/images/all/default.png'"/>
+        <!--<td>
+          &lt;!&ndash;store/{{compGoods.storeId}}#/batchInfo/{{compGoods.batchCode}}&ndash;&gt;
+          <nuxt-link v-if="compGoods.batchCode" :to="`/store/${compGoods.storeId}/${compGoods.batchCode}`" target="_blank">
+            <img :src="compGoods.img?compGoods.img:'/images/all/default.png'"/>
           </nuxt-link>
-            <img v-if="!compGoods.batchCode" :src="compGoods.img?compGoods.img:compGoods.brand&&compGoods.brand.logoUrl?compGoods.brand.logoUrl:'/images/all/default.png'"/>
-          <!--store/{{compGoods.storeId}}#/home-->
+          <img v-if="!compGoods.batchCode" :src="compGoods.img || '/images/all/default.png'"/>
+          &lt;!&ndash;store/{{compGoods.storeId}}#/home&ndash;&gt;
           <nuxt-link :to="'/store/' + compGoods.storeId" class="contact" :title="compGoods.storeName" target="_blank">{{compGoods.storeName}}</nuxt-link>
-        </td>
+        </td>-->
         <td class="brand-code">
-          <div class="brand" v-if="compGoods.brand.nameEn"><nuxt-link :to="`/product/brand/${compGoods.brand.uuid}/`" title="compGoods.brand.nameEn">{{compGoods.brand.nameEn}}</nuxt-link></div>
+          <div class="brand" v-if="compGoods.brand.nameEn"><nuxt-link :to="`/product/brand/${compGoods.brand.uuid}/`" :title="compGoods.brand.nameEn">{{compGoods.brand.nameEn | nameFilter}}</nuxt-link></div>
           <div class="brand" v-if="!compGoods.brand.nameEn">—</div>
-          <div class="brand">
-            <nuxt-link v-if="compGoods.kind&&compGoods.kind.nameCn" :to="`/product/kind/${compGoods.kindid}`" v-text="compGoods.kind.nameCn"></nuxt-link>
-          </div>
-          <div v-if="!compGoods.kind||!compGoods.kind.nameCn">{{compGoods.kindName || '—'}}</div>
-          <div class="code" v-if="compGoods.code"><nuxt-link :to="`/product/component/${compGoods.uuid}/`" :title="compGoods.code">{{compGoods.code}}</nuxt-link></div>
+          <div class="list" v-if="compGoods.kind"><nuxt-link :to="`/product/kind/${compGoods.kind.id}`" :title="compGoods.kind.nameCn">{{compGoods.kind.nameCn | listFilter}}</nuxt-link></div>
+          <div class="list" v-if="!compGoods.kind">—</div>
+          <div class="code" v-if="compGoods.code"><nuxt-link :to="`/product/component/${compGoods.uuid}/`" :title="compGoods.code">{{compGoods.code | codeFilter}}</nuxt-link></div>
           <div class="code" v-if="!compGoods.code">—</div>
-          <div class="brand" style="width: 160px;">{{compGoods.spec || '—'}}</div>
+          <div class="code" :title="compGoods.spec"><span class="text-ellipse inline-block fl" style="width: 160px">{{compGoods.spec || '-'}}</span></div>
         </td>
         <td>
           <div class="package" v-if="compGoods.packaging">{{compGoods.packaging}}</div>
+          <div class="package" v-if="!compGoods.packaging && compGoods.produceDate">—</div>
           <div v-if="!compGoods.produceDate && !compGoods.packaging">—</div>
           <div class="date" v-if="compGoods.produceDate">{{compGoods.produceDate}}</div>
+          <div class="date" v-if="!compGoods.produceDate && compGoods.packaging">—</div>
+        </td>
+        <td class="merchantName">
+          <div v-if="!compGoods.storeName" style="margin-top: 20px;">—</div>
+          <!--<div v-for="price in compGoods.prices">
+            &lt;!&ndash;| number&ndash;&gt;
+            <span>{{price.start}}</span> +
+          </div>-->
+          <div>
+            <nuxt-link :to="'/store/' + compGoods.storeId" class="contact" :title="compGoods.storeName" target="_blank"><span v-if="compGoods.storeNames">{{compGoods.storeName | storeNameFilter}}</span></nuxt-link>
+          </div>
         </td>
         <td class="text-left">
           <div class="goods" v-if="compGoods.reserve">
@@ -54,45 +61,42 @@
           </div>
           <div v-if="!compGoods.reserve" style="text-align: center;margin-left: 0;"><span>—</span></div>
           <div class="from" v-if="compGoods.reserve && compGoods.reserve > 0">
-            最小起订量：<span v-if="compGoods.minBuyQty">{{compGoods.minBuyQty}}</span>
+            起拍：<span v-if="compGoods.minBuyQty">{{compGoods.minBuyQty}}</span>
           </div>
           <!--<div class="multiple" v-if="compGoods.reserve > 0">
             倍数：<span>{{compGoods.minPackQty}}</span>
           </div>-->
-          <div class="can-div-sell" v-if="compGoods.reserve && compGoods.breakUp" v-text="compGoods.breakUp?'可拆卖':'不可拆卖'"></div>
+          <div class="can-div-sell" v-if="compGoods.reserve" v-text="compGoods.breakUp?'可拆卖':''"></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 | currency}}</span>
-          </div>
-        </td>
-        <td>
-          <div v-if="(compGoods.currencyName && compGoods.currencyName.indexOf('RMB')==-1) || !compGoods.prices">
-            <span>—</span>
+          <div class="amount">
+            <div v-for="price in compGoods.prices"><span>{{price.start}}</span> +</div>
           </div>
-          <div v-for="price in compGoods.prices">
-            <!--formateNumber : 6-->
-            <span>{{price.rMBPrice | currency}}</span>
+          <!-- <div v-if="(compGoods.currencyName && compGoods.currencyName.indexOf('USD')==-1) || !compGoods.prices">
+             <span>—</span>
+           </div>
+           <div v-for="price in compGoods.prices">
+             &lt;!&ndash;| formateNumber : 6&ndash;&gt;
+             <span>{{price.uSDPrice | currency}}</span>
+           </div>-->
+          <div class="price">
+            <!--<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 | currency}}</span>
+            </div>
           </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>
+          <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>
@@ -101,21 +105,13 @@
             <span>—</span>
           </div>
           <div v-if="compGoods.reserve > 0">
-            <buy :item="compGoods" :disabledFlag="compGoods.status === 602"></buy>
+            <buy :item="compGoods"></buy>
           </div>
         </td>
       </tr>
       <tr v-if="componentGoods.totalElements == 0">
-        <td colspan="12">
-          <div class="empty">
-            <p class="empty-img">
-              <img src="/images/brandList/empty-cart.png">
-            </p>
-            <div class="empty-info">
-              <p class="grey"> 暂无产品信息 </p>
-              <a href="javascript:history.go(-1)"><i class="fa fa-mail-reply fa-xs"></i>返回上一页</a>
-            </div>
-          </div>
+        <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>
@@ -158,6 +154,98 @@
       }
     },
     filters: {
+      nameFilter: function (title) {
+        if (title === '') {
+          return title
+        }
+        let len = 0
+        let index = 0
+        for (let i = 0; i < title.length; i++) {
+          if (index === 0 && title.charAt(i).charCodeAt(0) > 255) {
+            len = len + 2
+          } else {
+            len++
+          }
+          if (len > 20) {
+            index = i
+            break
+          }
+        }
+        if (index > 0) {
+          return title.substring(0, index) + '...'
+        } else {
+          return title
+        }
+      },
+      codeFilter: function (title) {
+        if (title === '') {
+          return title
+        }
+        let len = 0
+        let index = 0
+        for (let i = 0; i < title.length; i++) {
+          if (index === 0 && title.charAt(i).charCodeAt(0) > 255) {
+            len = len + 2
+          } else {
+            len++
+          }
+          if (len > 20) {
+            index = i
+            break
+          }
+        }
+        if (index > 0) {
+          return title.substring(0, index) + '...'
+        } else {
+          return title
+        }
+      },
+      listFilter: function (title) {
+        if (title === '') {
+          return title
+        }
+        let len = 0
+        let index = 0
+        for (let i = 0; i < title.length; i++) {
+          if (index === 0 && title.charAt(i).charCodeAt(0) > 255) {
+            len = len + 2
+          } else {
+            len++
+          }
+          if (len > 20) {
+            index = i
+            break
+          }
+        }
+        if (index > 0) {
+          return title.substring(0, index) + '...'
+        } else {
+          return title
+        }
+      },
+      storeNameFilter: function (title) {
+        if (title === '') {
+          return title
+        }
+        let len = 0
+        let index = 0
+        for (let i = 0; i < title.length; i++) {
+          if (index === 0 && title.charAt(i).charCodeAt(0) > 255) {
+            len = len + 2
+          } else {
+            len++
+          }
+          if (len > 20) {
+            index = i
+            break
+          }
+        }
+        if (index > 0) {
+          return title.substring(0, index) + '...'
+        } else {
+          return title
+        }
+      },
       currency: function (num) {
         if (typeof num === 'number') {
           if (num <= 0.000001) {
@@ -188,6 +276,7 @@
         return null
       },
       handlerCurrentNode (data, node) {
+        console.log(this.pageParams)
         this.pageParams.page = 1
         this.pageCmpGoods(this.pageParams)
       },
@@ -216,49 +305,13 @@
   }
 </script>
 
-<style scoped>
-  /**/
-  .product-list tbody>tr .empty{
-    overflow: hidden;
-    margin: 0!important;
-    height:130px;
-    display:inline-flex;
-    align-items: center;
-  }
-  .product-list tbody>tr .empty .empty-img{
-    margin:0;
-    border:0;
-    min-width:143px;
-    min-height:72px;
-  }
-  .product-list tbody>tr .empty .empty-img img {
-    margin: 0;
-    border: 0;
-    min-width: 143px;
-    min-height: 72px;
-  }
-  .product-list tbody>tr .empty-info{
-    line-height: 14px;
-    width: 143px;
-  }
-  .product-list tbody>tr .grey{
-    color: #999;
-    font-size: 14px;
-  }
-  .product-list tbody>tr .empty .empty-info>a{
-    font-size: 14px;
-    color: #5078cb;
-  }
-  .product-list tbody>tr .empty .empty-info i{
-    margin-right:5px;
-  }
+<style lang="scss" scoped>
   .product-list{
     width: 1190px;
     margin-bottom: 20px;
   }
   .product-list thead tr{
-    border-top: #6493ff 2px solid;
-    color: #323232;
+    color: #333;
     background: none;
   }
   /* 物品列表 */
@@ -266,27 +319,44 @@
     font-size: 14px;
     text-align: center;
   }
-
-  .product-list .brand-code .code {
-    font-weight: 600;
+  .product-list .brand-code .code,.product-list .brand-code .brand,.product-list .brand-code .list {
+    width: 80%;
+    margin: 0 auto;
+    text-align: center;
+    a {
+      color: #333;
+      &:hover{
+        font-weight: 600;
+        color: #3975f4;
+      }
+    }
   }
-
   .product-list th {
     color: rgb(50,50,50);
     font-size: 14px;
     font-weight: 600;
-    background-color: #f7f7f7;
+    background-color: #edf3ff;
     text-align: center;
+    height: 46px;
+  }
+  .product-list .merchantName{
+    span {
+      color: #333;
+      &:hover{
+        font-weight: 600;
+        color: #3975f4;
+      }
+    }
   }
-
   .product-list tbody>tr {
     border: 1px solid #e8e8e8;
   }
+
   .product-list tbody>tr img {
     border: 1px solid #e8e8e8;
     margin: 10px 0 5px 0;
-    max-width: 36px;
-    max-height: 36px;
+    width: 36px;
+    height: 36px;
   }
   .product-list tbody>tr .contact{
     font-size: 14px;
@@ -300,10 +370,11 @@
   }
 
   .product-list td {
-    font-size: 12px;
+    font-size: 14px;
     /*color: #333;*/
     text-align: center;
     line-height: 20px;
+    height: 100px;
   }
   .product-list td a{
     color: #337ab7;
@@ -317,33 +388,38 @@
   }
 
   /* 物品列表按钮 */
-  .product-list .btn-buy-now {
-    background-color: #5078CB;
+  .btn-buy-now {
+    background-color: #3975f4!important;
     color: #fff;
     width: 80px;
     height: 30px;
     font-size: 12px;
-    border: 1px solid #5078cb;
+    border: 1px solid #3975f4!important;;
   }
 
-  .product-list .btn-add-cart {
+  .btn-add-cart {
     margin-top: 10px;
-    color: #214797;
+    color: #3975f4!important;
     width: 80px;
     height: 30px;
     font-size: 12px;
     background-color: #fff;
-    border: 1px solid #e8e8e8;
+    border: 1px solid #3975f4!important;
   }
   .product-list .btn-buy-now:hover{
     background: #214797;
   }
   .product-list .btn-add-cart:hover{
-    background-color: #5078CB;
+    background-color: #3975f4;
     color: #fff;
   }
   .product-list .text-left{
     text-align: left;
+    .goods {
+      span {
+        color: #f01010;
+      }
+    }
   }
   .product-list .text-left div{
     margin-left: 30px;
@@ -354,19 +430,30 @@
   .product-list tbody tr td .can-div-sell {
     color: #333;
   }
-  .product-list tbody tr td .sellout-flag {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    border: none;
+  .product-list tbody tr td .amount {
+    width: 60%;
+    float: left;
+    padding-left: 60px;
+    text-align: left;
+  }
+  .product-list tbody tr td .amount div:last-child, .product-list tbody tr td .price div:last-child{
+    color: #f01010;
+  }
+  .product-list tbody tr td .price {
+    width: 40%;
+    float:right;
+    text-align:left;
   }
   .search-record{
     width: 100%;
-    margin: 0 auto;
     height: 40px;
     font-size: 16px;
     line-height: 40px;
-    margin-top: 20px;
+    margin: 14px 0px;
+    background-color: #f1f1f1;
+    border-bottom: 1px solid #ddd;
+    border-top: 1px solid #ddd;
+    padding-left: 10px;
   }
   .search-record span.red{
     color: #ff0909;

components/product/KindBox.vue

@@ -1,36 +1,37 @@
 <template>
-  <div class="container" style="width:1190px;padding: 0;">
-    <div style="background: #fff; z-index:10;">
-      <div class="box-first">
-        <div class="box-item">物料名称(类目)：</div>
-        <div class="box-kind">
+  <div class="component">
+    <div class="component-content">
+      <div class="box-first" id="box-first" >
+        <!-- <div class="box-item">类目：</div>-->
+        <div class="box-kind" :class="boxFirstFixed == true ? 'isFixed' :''">
           <ul id="letter-nav">
             <!--| orderBy : 'namelength'-->
-            <li class="text-num" v-for="kind in kinds">
-              <a :title="kind.nameCn"  @click="scrollTo(kind.id)">{{kind.nameCn}}</a>
+            <li class="text-num" v-for="(kind, index) in kinds" :style="index <= 6 || boxFirstFixed == true? 'border-bottom: 1px dashed #ccc;': 'border-bottom: 1px dashed #f1f4fb;'">
+              <img class="content-thumbnail-list" :src=imgList[index]><a :title="kind.nameCn"  @click="scrollTo(kind.id)">{{kind.nameCn}}</a>
             </li>
           </ul>
         </div>
       </div>
-      <div class="box-catagory" v-for="kind in kinds" style="clear: both">
+      <div class="showKindId"></div>
+      <div class="box-catagory" :style="mardin" v-for="(kind, index) in kinds" style="clear: both">
         <div class="box">
           <div class="box-title" :id="kind.id">
             <div class="box-smtitle">
               <div>
-                <nuxt-link :to="`/product/kind/${kind.id}`"><span :title="kind.nameCn">{{kind.nameCn}}</span></nuxt-link>
+                <nuxt-link :to="`/product/kind/${kind.id}`"> <img class="content-thumbnail" :src=kindLogo[index]><span :title="kind.nameCn">{{kind.nameCn}}</span></nuxt-link>
               </div>
             </div>
           </div>
           <div class="box-content">
             <div class="box-subcatagory">
               <div class="childkind" v-for="child in kind.children">
-                <dl class="dl-horizontal">
+                <dl class="dl-horizontal" style="background: #f1f4fb;">
                   <dt class="dt-title">
-                    <ul>
-                      <li>
-                        <nuxt-link :to="`/product/kind/${child.id}`" :title="child.nameCn"><span>{{child.nameCn}}</span></nuxt-link>
-                      </li>
-                    </ul>
+                  <ul>
+                    <li>
+                      <nuxt-link :to="`/product/kind/${child.id}`" :title="child.nameCn"><span>{{child.nameCn}}</span><i class="iconfont icon-arrow-right icon-sm pull-right"></i></nuxt-link>
+                    </li>
+                  </ul>
                   </dt>
                   <dd>
                     <ul class="list-unstyled list-inline">
@@ -40,6 +41,9 @@
                       <li  style="width: 35%" v-if="leaf.nameCn.length>15" v-for="leaf in child.children">
                         <nuxt-link :to="`/product/kind/${leaf.id}`" :title="leaf.nameCn">{{leaf.nameCn}}</nuxt-link>
                       </li>
+                      <li v-if="!child.children || !child.children.length">
+                        <span style="margin-left: 25%;">—</span>
+                      </li>
                     </ul>
                   </dd>
                 </dl>
@@ -56,12 +60,63 @@
   import { scrollTo } from '~utils/scroll'
   export default {
     name: 'kind-box',
+    data () {
+      return {
+        boxFirstFixed: false,
+        imgList: [
+          '/images/component/component-logo/component01.png',
+          '/images/component/component-logo/component02.png',
+          '/images/component/component-logo/component03.png',
+          '/images/component/component-logo/component04.png',
+          '/images/component/component-logo/component05.png',
+          '/images/component/component-logo/component06.png',
+          '/images/component/component-logo/component07.png',
+          '/images/component/component-logo/component08.png',
+          '/images/component/component-logo/component09.png',
+          '/images/component/component-logo/component010.png',
+          '/images/component/component-logo/component011.png',
+          '/images/component/component-logo/component012.png',
+          '/images/component/component-logo/component013.png',
+          '/images/component/component-logo/component014.png'
+        ],
+        kindLogo: [
+          '/images/component/component-logo/component001.png',
+          '/images/component/component-logo/component002.png',
+          '/images/component/component-logo/component003.png',
+          '/images/component/component-logo/component004.png',
+          '/images/component/component-logo/component005.png',
+          '/images/component/component-logo/component006.png',
+          '/images/component/component-logo/component007.png',
+          '/images/component/component-logo/component008.png',
+          '/images/component/component-logo/component009.png',
+          '/images/component/component-logo/component0010.png',
+          '/images/component/component-logo/component0011.png',
+          '/images/component/component-logo/component0012.png',
+          '/images/component/component-logo/component0013.png',
+          '/images/component/component-logo/component0014.png'
+        ]
+      }
+    },
     computed: {
       kinds () {
         return this.$store.state.product.kind.kinds.data
       }
     },
+    mounted () {
+      window.addEventListener('scroll', () => {
+        this.handleScroll()
+      })
+    },
     methods: {
+      handleScroll () {
+        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
+        var offsetTop = document.querySelector('#box-first').offsetTop
+        if (scrollTop > offsetTop) {
+          this.boxFirstFixed = true
+        } else {
+          this.boxFirstFixed = false
+        }
+      },
       scrollTo: function (el) {
         scrollTo(document.getElementById(el), 10)
       }
@@ -69,17 +124,32 @@
   }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+  .component{
+    width: 100%;
+    min-width:1190px;
+    padding: 0;
+    background: #efeeec;
+    .component-content{
+      width:1190px;
+      margin: 0 auto;
+    }
+  }
   .box {
     margin-bottom: 20px;
   }
   .box .box-title {
-    border-bottom: 4px solid #6493FF;
+    width: 100%;
+    height: 50px;
+    background-color: #689cff;
   }
   .box .box-smtitle span {
-    background-color: #6493FF;
-    line-height: 28px;
-    padding: 8px 30px;
+    display: inline-block;
+    text-align: left;
+    padding-left: 30px;
+    width: 186px;
+    height: 50px;
+    line-height: 50px;
     font-size: 14px;
     font-weight: 100;
   }
@@ -98,21 +168,60 @@
     margin: 0 auto;
   }
   .box .box-content .box-subcatagory {
-    background-color: #ffffff;
+    background-color: #f1f4fb;
     border-radius: 5px;
   }
   .box .box-content .box-subcatagory .childkind {
-    border-bottom: 1px solid #ccc;
-    border-bottom-style: dashed;
+    border-bottom: 1px dashed #ccc;
   }
   .box .box-content .box-subcatagory dl, .box .box-content .box-subcatagory ul
   {
-    padding-bottom: 5px;
+    padding-bottom: 0px;
     margin-bottom: 0px;
+    background-color: #fff;
+  }
+  .content-thumbnail{
+    position: relative;
+    left: 20px;
+    top: -1px;
+  }
+  .content-thumbnail-list{
+    position: relative;
+    top: -2px;
   }
   .box .box-content .box-subcatagory dl dt {
-    width: 160px;
-    margin-left: 20px;
+    width: 186px;
+    height: 50px;
+    line-height: 50px;
+    text-align: left;
+    li {
+      float: left;
+      list-style: none;
+      width: 186px;
+      color: #fff;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      .pull-right {
+        float: right!important;
+        padding-right: 12px;
+      }
+      .iconfont {
+        font-size: 16px;
+        font-style: normal;
+        color: #5079cb;
+        -webkit-font-smoothing: antialiased;
+      }
+    }
+    &:hover{
+      background-color: #3c7cf5;
+      .iconfont{
+        color: #fff;
+      }
+      span{
+        color: #fff;
+      }
+    }
   }
   .box .box-content .box-subcatagory dl dt span{
     width: 125px;
@@ -120,6 +229,8 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    padding-left: 20px;
+    color: #5079cb;
   }
   .box .box-content .box-subcatagory dl dt a {
     color: #000;
@@ -130,18 +241,17 @@
     color: #6493FF;
   }
   .box .box-content .box-subcatagory dl dd {
-    margin-left: 180px;
-    margin-bottom: 10px;
-    margin-top: 20px;
+    margin-left: 190px;
   }
   .box .box-content .box-subcatagory .list-inline {
     margin-left: 0;
   }
   .box .box-content .box-subcatagory .list-inline>li {
     width: 20%;
-    margin-bottom: 10px;
     vertical-align: top;
     font-size: 14px;
+    height: 50px;
+    line-height: 50px;
   }
   .box .box-content .box-subcatagory .list-inline>li a {
     color: #000;
@@ -149,36 +259,57 @@
     font-weight: 500;
   }
   .box .box-content .box-subcatagory .list-inline>li a:hover {
-    color: #6493FF;
+    color: #f54802;
+    span{
+      text-decoration: underline;
+      color: #f54802;
+    }
   }
-  .box-first {
-    margin-top: 10px;
+
+  .box-first{
+    .isFixed {
+      padding-top: 10px;
+      width: 1190px;
+      height: 106px!important;
+      margin: 0 auto;
+      position: fixed;
+      top: 0px;
+      margin-left: -1px;
+      z-index:999;
+      border: #c8c8c8 1px solid;
+      box-shadow: 0px 6px 10px #c8c8c8;
+    }
   }
-  .box-first .box-item {
+  /*.box-first .box-item {
     float: left;
-    /*width: 55px;*/
-    margin-left: 15px;
+    width: 55px;
+    margin-left: 30px;
     font-size: 14px;
     padding-top: 10px;
-  }
+  }*/
   .box-first .box-kind {
-    float: right;
-    width: 1050px;
-    /*margin-left: 50px;*/
+    height: 100px;
     font-size: 14px;
+    background-color: #f1f4fb;
   }
   #letter-nav ul, #letter-nav li {
     list-style-type: none;
   }
+  #letter-nav{
+    margin-top: -9px;
+  }
   #letter-nav li {
     float: left;
-    width: 130px;
-    margin-right: 12px;
-    margin-bottom: 15px;
-    padding: 5px;
+    width: 169px;
+    padding: 17px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    text-align: center;
+    &:hover{
+      border-bottom: 1px solid #5079cb !important;
+      background-color: #fff;
+    }
   }
   #letter-nav li a {
     color: #000;
@@ -186,26 +317,14 @@
     border-radius: 5px;
   }
   #letter-nav li a:hover {
-    color: #337ab7;
+    color: #333;
     cursor: pointer;
     text-decoration: none;
   }
-  .dl-horizontal .dt-title{
-    text-align:left;
-    margin-left: -20px;
-  }
-  .dt-title li{
-    float: left;
-    list-style: none;
-    max-width: 150px;
-    color: #fff;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
   .box-first{
-    border: #e8e8e8 1px solid;
-    width: 100%;
+    border: #c8c8c8 1px solid;
+    box-shadow: 0px 6px 10px #c8c8c8;
+    width: 1190px;
     display: inline-block;
     margin-top: 16px;
     margin-bottom: 16px;

components/register-saler/register/StepThird.vue

@@ -555,7 +555,10 @@
                 })
               }
               )
-          })
+          }).catch((err) => {
+          console.log(err)
+          this.$message.error('开通卖家中心失败')
+        })
       },
       goProduct: function (baseUrl) {
         if (this.loginData.isSelf) {

pages/product/kind/_id.vue

@@ -25,7 +25,7 @@
     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/loadKindBrands', {id: route.params.id}),
         store.dispatch('product/pageComGoods', {kindid: route.params.id})
       ])
     },

plugins/mixin.js

@@ -96,16 +96,20 @@ Vue.mixin({
     goStoreApply: function () {
       if (this.user.logged) {
         if (this.user.data.enterprise.uu) {
-          this.$http.get('/basic/vendor/transactionInfo').then(response => {
-            if (response.data.isOpenStore) {
-              window.location.href = '/vendor#/store/maintain'
-            } else {
-              window.location.href = '/vendor#/store-apply'
-            }
-          }, err => {
-            this.$message.error('该账户未开通卖家中心')
-            console.log(err)
-          })
+          if (this.user.data.enterprise.isVendor === 313) {
+            this.$http.get('/basic/vendor/transactionInfo').then(response => {
+              if (response.data.isOpenStore) {
+                window.location.href = '/vendor#/store/maintain'
+              } else {
+                window.location.href = '/vendor#/store-apply'
+              }
+            }, err => {
+              this.$message.error('获取开店信息失败')
+              console.log(err)
+            })
+          } else {
+            this.$router.push('/register-saler')
+          }
         } else {
           this.$router.push('/personalMaterial')
         }