品牌中心还原

components/product/brand/BrandDetail.vue

@@ -2,23 +2,20 @@
   <div class="brandDetail container">
     <div class="menu-com row">
       <div class="menu-title col-md-12">
-        <a href="/product/brand/brandList/A">品牌中心</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-name"><h5>{{list.nameEn}}</h5><h5 v-if="list.nameCn && list.nameEn!=list.nameCn"><span>{{list.nameCn}}</span></h5></div>
+      <div class="brand-logo">
+        <img :src="list.logoUrl || '/images/component/default.png'" :alt="list.nameEn"/>
+      </div>
       <div class="brand-message">
-        <div class="brand-logo">
-          <img src='/images/brandCenter/detail.jpg' :alt="list.nameEn"/>
-          <img :src="list.logoUrl || '/images/component/default.png'" :alt="list.nameEn"/>
-        </div>
-        <ul>
-        <li class="brand-main" v-show="list.series">主打产品：<span>{{list.series}}</span></li>
-        <li class="apply-area" v-show="applications.length>0">
+        <div class="brand-name"><span>{{list.nameEn}}</span><span v-if="list.nameCn && list.nameEn!=list.nameCn">(<span>{{list.nameCn}}</span>)</span></div>
+        <div class="brand-main" v-show="list.series">主营产品：<span>{{list.series}}</span></div>
+        <div class="apply-area" v-show="applications.length>0">
           应用领域：<span v-for="(item, index) in applications"><span>{{item}}</span><span v-show="index+1 < applications.length">|</span></span>
-        </li>
-        <li class="brand-description" v-if="list.brief"><span>品牌介绍：</span><div class="txt-description">{{list.brief | briefFilter}}</div></li>
-        <li style="margin-top: 10px;color:#eb062b;" v-show="list.url"><span style="color:#666;">官网地址：</span><a class="office-address" :href="list.url">{{list.url}}</a></li>
-        </ul>
+        </div>
+        <div class="brand-description" v-show="list.brief">品牌介绍：<div class="txt-description">{{list.brief}}</div></div>
+        <div style="margin-top: 5px;color:#666;" v-show="list.url">官网地址：<a class="office-address" :href="list.url">{{list.url}}</a></div>
       </div>
     </div>
   </div>
@@ -31,34 +28,9 @@
         applications: []
       }
     },
-    filters: {
-      briefFilter: 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 > 536) {
-            index = i
-            break
-          }
-        }
-        if (index > 0) {
-          return title.substring(0, index) + '...'
-        } else {
-          return title
-        }
-      }
-    },
     computed: {
       list () {
-        let list = this.baseUtils.deepCopy(this.$store.state.brandDetail.detail.data)
+        let list = this.$store.state.brandDetail.detail.data
         if (list.application && list.application !== '') {
           this.applications = list.application.split(',')
         }
@@ -67,110 +39,89 @@
     }
   }
 </script>
-<style lang="scss" scoped>
+<style scoped>
   .brandDetail {
     margin-bottom: 60px;
     width: 1190px;
     padding: 0;
     overflow: hidden;
-    .menu-com {
-      margin: 0;
-      width: 100%;
-      border-bottom: 2px solid #3975f4;
-      padding-top: 22px;
-      .menu-title {
-        line-height: 40px;
-        font-size: 14px;
-        padding-left: 0;
-        a {
-          color: #5078cb;
-          font-size: 14px;
-        }
-      }
-    }
-    #brand {
-      width: 1190px;
-      .brand-name {
-        width: 100%;
-        padding-left: 30px;
-        h5 {
-          color: #eb062b;
-          font-size: 18px;
-          font-weight: bold;
-          margin-top: -25px;
-          &:first-child {
-            font-size: 24px;
-            margin-top: 26px;
-          }
-        }
-      }
-      .brand-message {
-        min-height: 310px;
-        .brand-logo {
-          float: right;
-          height: 310px;
-          text-align: center;
-          position: relative;
-         /* line-height: 340px;*/
-          img:first-child {
-            height: 310px;
-            vertical-align: middle;
-          }
-          img:last-child{
-            width: 120px;
-            height: 40px;
-            position: absolute;
-            top: 140px;
-            left: 260px;
-          }
-        }
-        ul {
-          width: 100%;
-          min-height: 310px;
-          list-style-type: disc;
-          font-size: 20px;
-          color: #eb062b;
-          padding: 30px 0px 0px 30px;
-          border-left: 2px solid #efefef;
-          border-right: 2px solid #efefef;
-          border-bottom: 3px solid #efefef;
-          li {
-            color: #666;
-            font-size: 14px;
-          }
-         .brand-main,.apply-area{
-           color: #eb062b;
-           font-size: 14px;
-           padding-bottom: 20px;
-          }
-          .apply-area{
-            font-size: 14px;
-            span{
-              margin-right: 5px;
-            }
-          }
-          .brand-description{
-            line-height: 20px;
-            color: #eb062b;
-            font-size: 14px;
-            span{
-              color: #333;
-            }
-            .txt-description{
-              margin-top: 8px;
-              line-height: 20px;
-              color: #666;
-            }
-          }
-          .office-address{
-            color: #333;
-            &:hover{
-              color: #5078cb;
-              cursor: pointer;
-            }
-          }
-        }
-      }
-    }
+  }
+  .menu-com{
+    margin: 0;
+  }
+  .menu-title{
+    line-height: 40px;
+    font-size: 14px;
+  }
+  .menu-title a{
+    color: #5078cb;
+    font-size: 14px;
+  }
+  i{
+    margin-right: 5px;
+  }
+  .menu-title{
+    padding-left: 0;
+  }
+  .brand-main{
+    font-size: 14px;
+    color: #5078cb;
+    line-height: 20px;
+  }
+  .apply-area{
+    font-size: 14px;
+    color: #5078cb;
+    margin-top: 8px;
+  }
+  .apply-area span{
+    margin-right: 5px;
+  }
+  .office-address{
+    margin-top: 10px;
+  }
+  .office-address{
+    color: #666;
+  }
+  .office-address:hover{
+    color: #5078cb;
+    cursor: pointer;
+  }
+  .brand-description{
+    margin-top: 6px;
+    font-size: 14px;
+    color: #666;
+  }
+  .brand-description .txt-description{
+    font-size: 14px;
+    color: #666;
+  }
+  .brandDetail .brand-logo{
+    float: left;
+    width: 200px;
+    height: 108px;
+    text-align: center;
+    line-height: 100px;
+    border: 1px solid #ccc;
+    background-color: #c1c1c1;
+  }
+  .brandDetail .brand-logo img {
+    max-width: 198px;
+    max-height: 106px;
+    vertical-align: middle;
+  }
+  .brandDetail .brand-message {
+    float: left;
+    margin-left: 20px;
+    margin-bottom: 60px;
+    width: 970px;
+  }
+  .brandDetail .brand-message .brand-name {
+    font-size: 18px;
+    font-weight: 700;
+    margin-bottom: 14px;
+  }
+  .brandDetail .brand-message .brand-description {
+    font-size: 14px;
+    line-height: 20px;
   }
 </style>

components/product/brand/CategoriesList.vue

@@ -1,33 +1,36 @@
 <template>
   <div class="categories-list container">
-    <div v-if="isShow == 0">
-      <div class="categories-list-header">产品分类</div>
-      <div class="categories-list-body">
-        <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>
-    </div>
-    <div v-if="isShow == 1">
-      <div class="categories-list-header">代理商分类</div>
-      <div class="categories-list-agency-body">
-        <ul>
-          <li><a>已入驻代理商</a></li>
-          <li><a>未入驻代理商</a></li>
-        </ul>
-      </div>
+    <div class="categories-list-header">产品分类</div>
+    <div class="categories-list-body" id="kinds">
+      <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>
   </div>
 </template>
+
 <script>
+  // 实现深拷贝
+  function deepCopy(target) {
+    if (typeof target !== 'object') return
+    // 判断目标类型，来创建返回值
+    var newObj = target instanceof Array ? [] : {}
+    for (var item in target) {
+      // 只复制元素自身的属性，不复制原型链上的
+      if (target.hasOwnProperty(item)) {
+        newObj[item] = typeof target[item] === 'object' ? deepCopy(target[item]) : target[item]
+        }
+      }
+      return newObj
+  }
   export default {
     name: 'CategoriesList',
     computed: {
       list () {
-        let brands = this.baseUtils.deepCopy(this.$store.state.brandCategories.categories.data)
+        let brands = deepCopy(this.$store.state.brandCategories.categories.data)
         if (!brands || brands.length === 0) {
           return []
         }
@@ -89,7 +92,6 @@
         return this.$store.state.brandDetail.detail.data
       }
     },
-    props: ['isShow'],
     data () {
       return {
         defaultProps: {
@@ -195,7 +197,7 @@
     height: 34px;
     text-align: center;
     color: #fff;
-    background: url("/images/brandCenter/type.png") no-repeat center #5078cb;
+    background-color: #5078cb;
     font-size: 14px;
     padding: 7px;
   }
@@ -219,25 +221,4 @@
     list-style: none;
     padding: 10px;
   }
-  /*.categories-list-header {*/
-    /*height: 34px;*/
-    /*text-align: center;*/
-    /*color: #fff;*/
-    /*background: url("/images/brandCenter/type.png") no-repeat center #5078cb;*/
-    /*font-size: 14px;*/
-    /*padding: 7px;*/
-  /*}*/
-  .categories-list-agency-body ul>li {
-    list-style: none;
-    padding: 12px 0px 10px 20px;
-    color: #5078CB;
-    font-size: 14px;
-  }
-  .categories-list-agency-body ul>li>a {
-    cursor: pointer;
-    color: #323232;
-  }
-  .categories-list-agency-body ul>li>a:hover {
-    color: #5078CB;
-  }
 </style>

components/product/brand_new/BrandComponent.vue

@@ -0,0 +1,342 @@
+<template>
+  <div class="component-list container">
+    <div :class="activeTab == 0 ? 'type-list active' : 'type-list'" @click="activeTab = 0">型号列表</div>
+    <div :class="activeTab == 1 ? 'type-list active' : 'type-list'" @click="activeTab = 1">代理商</div>
+    <div class="input-group" v-if="activeTab == 0">
+      <input  type="search" class="input-sm form-control" placeholder="请输入型号" title="code"
+      v-model="searchCode" @search="goodsSearch(searchCode)"/>
+      <span class="input-group-btn">
+					<button class="search btn btn-default" type="button" @click="goodsSearch(searchCode)">搜索器件</button>
+			</span>
+    </div>
+    <table class="table" v-if="activeTab == 0">
+      <thead>
+        <tr class="bgf7">
+          <th width="300">类目(产品名称)</th>
+          <th width="300">型号</th>
+          <th width="300">规格</th>
+          <th width="200">数据手册</th>
+          <th width="200">操作</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr class="text-center" v-for="item in list.content">
+          <td><nuxt-link :to="'/product/kind/' + item.kindid"><span>{{item.kind.nameCn || '-'}}</span></nuxt-link></td>
+          <td><nuxt-link :to="'/product/component/' + item.uuid"><span>{{item.code}}</span></nuxt-link></td>
+          <td><span>{{item.spec || '-'}}</span></td>
+          <td><a @click="toAttach(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">
+                <img src="/images/brandList/empty-cart.png">
+              </div>
+              <div class="empty-info">
+                <p class="grey f16"> 暂无器件信息 </p>
+                <i class="fa fa-mail-reply fa-xs"></i>&nbsp;<a href="javascript:history.go(-1)">返回上一页</a>
+              </div>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <div style="float: right;" v-if="activeTab == 0">
+      <page :total="list.totalElements" :page-size="pageParams.count"
+            :current="pageParams.page" @childEvent="handleCurrentChange"></page>
+    </div>
+    <table class="table supper-table" v-if="activeTab == 1">
+      <thead>
+      <tr class="bgf7">
+        <th width="100"></th>
+        <th width="200">代理商</th>
+        <th width="200">地址</th>
+        <th width="110">电话</th>
+        <th width="110">传真</th>
+        <th width="110">邮箱</th>
+        <th width="120">网址</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr class="text-center" v-for="item in supplier.content">
+        <td v-if="item.storeuuid">
+          <a class='add-link' :href="'/store/' + item.storeuuid">
+            <img :src="item.img || '/images/store/common/default.png'" alt="" class="showImg">
+            <img src="/images/store/common/goIn.png" alt="" class="goIn">
+          </a>
+        </td>
+        <td v-if="!item.storeuuid"><img :src="item.img || '/images/store/common/default.png'" alt="" class="showImg"></td>
+        <td :title='item.vendorName'  v-if="item.storeuuid"><a class='add-link' :href="'/store/' + item.storeuuid">{{item.vendorName || '-'}}</a></td>
+        <td :title='item.vendorName' v-if="!item.storeuuid">{{item.vendorName || '-'}}</td>
+        <td :title='item.detailAddress' v-if="item.storeuuid"><a class='add-link' :href="'/store/' + item.storeuuid">{{item.detailAddress || '-'}}</a></td>
+        <td :title='item.detailAddress' v-if="!item.storeuuid">{{item.detailAddress || '-'}}</td>
+        <td :title='item.tel' v-if="item.storeuuid"><a class='add-link' :href="'/store/' + item.storeuuid">{{item.tel || '-'}}</a></td>
+        <td :title='item.tel' v-if="!item.storeuuid">{{item.tel || '-'}}</td>
+        <td :title='item.fax' v-if="item.storeuuid"><a class='add-link' :href="'/store/' + item.storeuuid">{{item.fax || '-'}}</a></td>
+        <td :title='item.fax' v-if="!item.storeuuid">{{item.fax || '-'}}</td>
+        <td :title='item.email' v-if="item.storeuuid"><a class='add-link' :href="'/store/' + item.storeuuid">{{item.email || '-'}}</a></td>
+        <td :title='item.email' v-if="!item.storeuuid">{{item.email || '-'}}</td>
+        <td :title='item.website' v-if="item.storeuuid"><a class='add-link' :href="'/store/' + item.storeuuid">{{item.website || '-'}}</a></td>
+        <td :title='item.website' v-if="!item.storeuuid">{{item.website || '-'}}</td>
+      </tr>
+      <tr v-if="!supplier.content || supplier.content.length === 0">
+        <td colspan="10" class="text-center">
+          <div class="empty">
+            <div class="empty-img">
+              <img src="/images/brandList/empty-cart.png">
+            </div>
+            <div class="empty-info">
+              <p class="grey f16"> 暂无供应商信息 </p>
+              <i class="fa fa-mail-reply fa-xs"></i>&nbsp;<a href="javascript:history.go(-1)">返回上一页</a>
+            </div>
+          </div>
+        </td>
+      </tr>
+      </tbody>
+    </table>
+    <div style="float: right;" v-if="activeTab == 1">
+      <page :total="supplier.totalElements" :page-size="supplierPageParams.size"
+            :current="supplierPageParams.page" @childEvent="handleChange"></page>
+    </div>
+  </div>
+</template>
+<script>
+  import Page from '~components/common/page/pageComponent.vue'
+  export default {
+    name: 'BrandComponent',
+    data () {
+      return {
+        pageParams: {
+          page: 1,
+          count: 10,
+          filter: {}
+        },
+        supplierPageParams: {
+          page: 1,
+          size: 5,
+          sort: {'updatetime': 'DESC'}
+        },
+        searchCode: '',
+        activeTab: 0
+      }
+    },
+    components: {
+      Page
+    },
+    computed: {
+      lists () {
+        return this.$store.state.brandComponent.component
+      },
+      list () {
+        return this.lists.data
+      },
+      brand () {
+        return this.$store.state.brandDetail.detail.data
+      },
+      supplier () {
+        return this.$store.state.product.supplierInformation.information.data
+      }
+    },
+    methods: {
+      goodsSearch (keyword) {
+        this.pageParams.page = 1
+        this.pageParams.filter.code = keyword
+        this.pageCmpGoods(this.pageParams)
+      },
+      handlerCurrentNode () {
+        this.searchCode = ''
+        this.pageParams.page = 1
+        this.pageCmpGoods(this.pageParams)
+      },
+      async pageCmpGoods (params) {
+//      pageCmpGoods (params) {
+        params.filter.brandid = this.brand.id
+        let { data } = await this.$http.get('/api/product/component/list', { params })
+        this.$store.commit('brandComponent/GET_COMPONENT_SUCCESS', data)
+//        this.$http.get('/api/product/component/list', { params }).then(response => {
+//          this.$store.commit('brandComponent/GET_COMPONENT_SUCCESS', response)
+//        })
+      },
+      handleCurrentChange (page) {
+        this.pageParams.page = page
+        this.pageParams.filter.brandid = this.brand.id
+        this.pageCmpGoods(this.pageParams)
+      },
+//      获取供应商分页
+      async pageSupplier (params) {
+        let uuid = this.$route.params.code
+        let { data } = await this.$http.get(`/api/produce/vendorlist/${uuid}`, { params })
+        this.$store.commit('product/supplierInformation/GET_INFORMATION_SUCCESS', data)
+      },
+      handleChange (page) {
+        this.supplierPageParams.page = page
+        this.pageSupplier(this.supplierPageParams)
+      },
+      listenChild: function (brand) {
+        this.$store.dispatch('loadBrandPages', {count: 10, filter: { brandid: brand.id }, page: brand.page})
+      },
+      toAttach: function (url) {
+        if (url === '1') {
+          this.$http.get('/login/page', {params: {returnUrl: window.location.href}}).then(response => {
+            if (response.data) {
+              window.location.href = response.data.content + '&baseUrl=' + encodeURIComponent(window.location.protocol + '//' + window.location.host + response.data.baseUrl)
+            }
+          })
+        } else {
+          window.open(url)
+        }
+      }
+    }
+  }
+</script>
+<style scoped>
+  .component-list {
+    float: left;
+    margin-left: 20px;
+    width: 970px;
+  }
+  .bgf7 th{
+    color: #333;
+    vertical-align: middle;
+  }
+  .component-list .type-list{
+    height: 34px;
+    width: 150px;
+    border: 1px solid #5078cb;
+    /*background-color: #5078CB;*/
+    float: left;
+    color: #5078cb;
+    line-height: 34px;
+    text-align: center;
+    font-size: 14px;
+    cursor: pointer ;
+  }
+  .component-list .type-list.active{
+    background-color: #5078CB;
+    color: #fff;
+  }
+  .component-list .input-group {
+    width: 300px;
+    float: right;
+    border-radius: 3px;
+  }
+  .input-group .form-control{
+    border-radius: 3px;
+  }
+  .component-list .input-group-btn .search{
+    background: #5078cb;
+    color: #fff;
+    height: 34px;
+    border-radius: 3px;
+  }
+  .component-list table {
+    margin-top: 10px;
+    width: 970px;
+    border: 1px solid #e8e8e8;
+  }
+  .component-list table>thead {
+    height: 40px;
+  }
+  .component-list table>thead>th {
+    text-align: center;
+  }
+  .component-list table tbody tr{
+    text-align: center;
+  }
+  .component-list .table>tbody>tr>td{
+    vertical-align: middle;
+    border-top: #e8e8e8 1px solid;
+  }
+  .component-list table tbody tr td a{
+    color: #337ab7;
+    font-size: 12px;
+  }
+  .component-list table tbody tr td a.add-link {
+    width: 100%;
+    color: #474443;
+    font-size: 14px;
+    cursor: pointer;
+  }
+  .component-list .btn-default {
+    color: #214797;
+    font-size: 12px;
+    line-height: 12px;
+    height: 30px;
+  }
+  .component-list .disabledbtn {
+    color: #A0A0A0;
+  }
+  .component-list td.text-center{
+    padding: 30px 0;
+    font-size: 20px;
+    line-height: 40px;
+  }
+  .bgf7{
+    height: 40px;
+  }
+  .bgf7 th{
+    background: #f7f7f7;
+    border-bottom: none !important;
+    font-size: 14px;
+    text-align: center;
+  }
+  .component-list .empty{
+    overflow: hidden;
+    text-align: center;
+    margin: 0 auto;
+  }
+  .component-list .empty-img{
+    float: left;
+    margin-left: 335px;
+  }
+  .component-list .empty-info{
+    float: left;
+    line-height: 10px;
+    width: 143px;
+    margin-top: 30px;
+  }
+  .empty-info .grey{
+    color: #999;
+    font-size: 14px;
+  }
+  .component-list .empty-info a{
+    font-size: 14px;
+    color: #5078cb;
+  }
+  .component-list .empty-info i{
+    font-size: 14px;
+    color: #5078cb;
+  }
+  .component-list .supper-table thead th.text-left{
+    text-align: left;
+  }
+  .component-list .supper-table tbody tr{
+    height: 74px;
+    vertical-align:middle ;
+  }
+  .component-list .supper-table tbody tr:hover{
+    background: #eee;
+  }
+  .component-list .supper-table tbody tr td{
+    position: relative;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100px;
+  }
+  .component-list .supper-table tbody tr img.showImg{
+    width: 90px;
+    height: 49px;
+    border: 1px solid #dcdcdc;
+  }
+  .component-list .supper-table tbody tr img.goIn {
+    position: absolute;
+    top: 13px;
+    right: 3px;
+    width: 35px;
+    height: 35px;
+  }
+</style>

components/product/brand_new/BrandDetail.vue

@@ -0,0 +1,176 @@
+<template>
+  <div class="brandDetail container">
+    <div class="menu-com row">
+      <div class="menu-title col-md-12">
+        <a href="/product/brand/brandList/A">品牌中心</a> > <span>{{list.nameEn}}</span></div>
+    </div>
+    <div id="brand">
+      <div class="brand-name"><h5>{{list.nameEn}}</h5><h5 v-if="list.nameCn && list.nameEn!=list.nameCn"><span>{{list.nameCn}}</span></h5></div>
+      <div class="brand-message">
+        <div class="brand-logo">
+          <img src='/images/brandCenter/detail.jpg' :alt="list.nameEn"/>
+          <img :src="list.logoUrl || '/images/component/default.png'" :alt="list.nameEn"/>
+        </div>
+        <ul>
+        <li class="brand-main" v-show="list.series">主打产品：<span>{{list.series}}</span></li>
+        <li class="apply-area" v-show="applications.length>0">
+          应用领域：<span v-for="(item, index) in applications"><span>{{item}}</span><span v-show="index+1 < applications.length">|</span></span>
+        </li>
+        <li class="brand-description" v-if="list.brief"><span>品牌介绍：</span><div class="txt-description">{{list.brief | briefFilter}}</div></li>
+        <li style="margin-top: 10px;color:#eb062b;" v-show="list.url"><span style="color:#666;">官网地址：</span><a class="office-address" :href="list.url">{{list.url}}</a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'BrandsDetail',
+    data () {
+      return {
+        applications: []
+      }
+    },
+    filters: {
+      briefFilter: 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 > 536) {
+            index = i
+            break
+          }
+        }
+        if (index > 0) {
+          return title.substring(0, index) + '...'
+        } else {
+          return title
+        }
+      }
+    },
+    computed: {
+      list () {
+        let list = this.baseUtils.deepCopy(this.$store.state.brandDetail.detail.data)
+        if (list.application && list.application !== '') {
+          this.applications = list.application.split(',')
+        }
+        return list
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .brandDetail {
+    margin-bottom: 60px;
+    width: 1190px;
+    padding: 0;
+    overflow: hidden;
+    .menu-com {
+      margin: 0;
+      width: 100%;
+      border-bottom: 2px solid #3975f4;
+      padding-top: 22px;
+      .menu-title {
+        line-height: 40px;
+        font-size: 14px;
+        padding-left: 0;
+        a {
+          color: #5078cb;
+          font-size: 14px;
+        }
+      }
+    }
+    #brand {
+      width: 1190px;
+      .brand-name {
+        width: 100%;
+        padding-left: 30px;
+        h5 {
+          color: #eb062b;
+          font-size: 18px;
+          font-weight: bold;
+          margin-top: -25px;
+          &:first-child {
+            font-size: 24px;
+            margin-top: 26px;
+          }
+        }
+      }
+      .brand-message {
+        min-height: 310px;
+        .brand-logo {
+          float: right;
+          height: 310px;
+          text-align: center;
+          position: relative;
+         /* line-height: 340px;*/
+          img:first-child {
+            height: 310px;
+            vertical-align: middle;
+          }
+          img:last-child{
+            width: 120px;
+            height: 40px;
+            position: absolute;
+            top: 140px;
+            left: 260px;
+          }
+        }
+        ul {
+          width: 100%;
+          min-height: 310px;
+          list-style-type: disc;
+          font-size: 20px;
+          color: #eb062b;
+          padding: 30px 0px 0px 30px;
+          border-left: 2px solid #efefef;
+          border-right: 2px solid #efefef;
+          border-bottom: 3px solid #efefef;
+          li {
+            color: #666;
+            font-size: 14px;
+          }
+         .brand-main,.apply-area{
+           color: #eb062b;
+           font-size: 14px;
+           padding-bottom: 20px;
+          }
+          .apply-area{
+            font-size: 14px;
+            span{
+              margin-right: 5px;
+            }
+          }
+          .brand-description{
+            line-height: 20px;
+            color: #eb062b;
+            font-size: 14px;
+            span{
+              color: #333;
+            }
+            .txt-description{
+              margin-top: 8px;
+              line-height: 20px;
+              color: #666;
+            }
+          }
+          .office-address{
+            color: #333;
+            &:hover{
+              color: #5078cb;
+              cursor: pointer;
+            }
+          }
+        }
+      }
+    }
+  }
+</style>

components/product/brand_new/CategoriesList.vue

@@ -0,0 +1,243 @@
+<template>
+  <div class="categories-list container">
+    <div v-if="isShow == 0">
+      <div class="categories-list-header">产品分类</div>
+      <div class="categories-list-body">
+        <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>
+    </div>
+    <div v-if="isShow == 1">
+      <div class="categories-list-header">代理商分类</div>
+      <div class="categories-list-agency-body">
+        <ul>
+          <li><a>已入驻代理商</a></li>
+          <li><a>未入驻代理商</a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'CategoriesList',
+    computed: {
+      list () {
+        let brands = this.baseUtils.deepCopy(this.$store.state.brandCategories.categories.data)
+        if (!brands || brands.length === 0) {
+          return []
+        }
+        // 初始化去除重复数据
+        for (let i = 0; i < brands.length; i++) {
+          for (let j = 0; j < brands[i].length; j++) {
+            brands[i][j].children = []
+          }
+        }
+
+        // 处理第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
+              }
+            }
+          }
+        }
+ //       console.log(brands)
+        return brands[0] || []
+      },
+      brand () {
+        return this.$store.state.brandDetail.detail.data
+      }
+    },
+    props: ['isShow'],
+    data () {
+      return {
+        defaultProps: {
+          children: 'children',
+          label: 'nameCn'
+        },
+        parentid: 0,
+        ids: null,
+        pageParams: {
+          page: 1,
+          count: 10,
+          filter: {}
+        }
+      }
+    },
+    methods: {
+      handlerCurrentNode (data, node) {
+        if (this.parentid === data.id) {
+          this.parentid = 0
+          this.ids = null
+        } else {
+          if (data.level === 1) {
+            this.parentid = data.id
+          }
+        }
+        this.pageParams.page = 1
+        this.pageParams.filter.brandid = this.brand.id
+        this.pageParams.filter.kindid = data.id
+        this.pageCommodity(this.pageParams, this.ids)
+      },
+      async pageCommodity (params) {
+//      pageCommodity (params) {
+        try {
+          let { data } = await this.$http.get('/api/product/component/list', { params })
+          this.$store.commit('brandComponent/GET_COMPONENT_SUCCESS', data)
+        } catch (err) {
+          this.$store.commit('brandComponent/GET_COMPONENT_FAILURE', err)
+        }
+//        this.$http.get('/api/product/component/list', { params }).then(response => {
+//          this.$store.commit('brandComponent/GET_COMPONENT_SUCCESS', response)
+//        }, err => {
+//          this.$store.commit('brandComponent/GET_COMPONENT_FAILURE', err)
+//        })
+      }
+    }
+  }
+</script>
+<style scoped>
+  /*  产品分类调整*/
+  .el-tree {
+    border: none;
+    /*min-height: 300px;*/
+  }
+  .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content,.el-tree-node:hover{
+    background: none !important;
+  }
+  .el-tree-node__content:hover{
+    background: none !important;
+  }
+  .el-tree-node__content:hover span{
+    color: #5078cb;
+  }
+  .el-pagination .el-pager li.active{
+    background-color: #5078cb;
+    border-color: #337ab7;
+  }
+  .el-tree-node__expand-icon{
+    font-family: "iconfont" !important;
+    font-size: 14px;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    width: inherit;
+    height: inherit;
+    border: inherit;
+    font-weight: bold;
+    text-shadow: -1px 0px 0 #333;
+    margin-right: 3px !important;
+  }
+  .el-tree-node__content{
+    line-height: 30px;
+    height: 30px;
+  }
+  .el-tree-node__expand-icon.is-leaf{
+    visibility: hidden;
+  }
+  .el-tree-node__expand-icon:before{
+    content: "\E621";
+  }
+
+  .no-record{
+    font-size: 14px;
+    color: #999;
+    text-align: center;
+    line-height: 172px;
+  }
+  .categories-list {
+    clear: both;
+    float: left;
+    width: 200px;
+    border: 1px solid #e8e8e8;
+  }
+  .categories-list .categories-list-header {
+    height: 34px;
+    text-align: center;
+    color: #fff;
+    background: url("/images/brandCenter/type.png") no-repeat center #5078cb;
+    font-size: 14px;
+    padding: 7px;
+  }
+  .categories-list ul>li {
+    list-style: none;
+    padding: 10px 0;
+  }
+  .categories-list ul>li>a {
+    cursor: pointer;
+    color: #323232;
+  }
+  .categories-list .categories-list-body ul>li .kind-active {
+    color: #5078CB;
+    font-size: 14px;
+  }
+  .categories-list .categories-list-body>ul {
+    padding: 0;
+    font-size: 14px;
+  }
+  .categories-list .categories-list-body>ul>li {
+    list-style: none;
+    padding: 10px;
+  }
+  /*.categories-list-header {*/
+    /*height: 34px;*/
+    /*text-align: center;*/
+    /*color: #fff;*/
+    /*background: url("/images/brandCenter/type.png") no-repeat center #5078cb;*/
+    /*font-size: 14px;*/
+    /*padding: 7px;*/
+  /*}*/
+  .categories-list-agency-body ul>li {
+    list-style: none;
+    padding: 12px 0px 10px 20px;
+    color: #5078CB;
+    font-size: 14px;
+  }
+  .categories-list-agency-body ul>li>a {
+    cursor: pointer;
+    color: #323232;
+  }
+  .categories-list-agency-body ul>li>a:hover {
+    color: #5078CB;
+  }
+</style>

pages/product/brand/_code.vue

@@ -1,42 +1,48 @@
 <template>
   <div class="details">
-    <div class="information">
+    <div class="information" v-if="list.id">
       <brand-detail/>
-      <div class="comm-list" v-if="true">
-        <categories-list :isShow="isShow"></categories-list>
-        <brand-component @showEvent="showList"></brand-component>
+      <div class="comm-list">
+        <categories-list/>
+        <brand-component/>
       </div>
     </div>
+    <div v-else>
+      <error-page :title="'品牌'"></error-page>
+    </div>
   </div>
 </template>
 <script>
   import { BrandDetail, CategoriesList, BrandComponent } from '~components/product'
+  import { ErrorPage } from '~components/error'
   export default {
     layout: 'main',
     data () {
       return {
-        code: '',
-        isShow: 0
+        code: ''
       }
     },
     components: {
       BrandDetail,
       CategoriesList,
-      BrandComponent
+      BrandComponent,
+      ErrorPage
+    },
+    computed: {
+      list () {
+        let list = this.$store.state.brandDetail.detail.data
+        if (list.application && list.application !== '') {
+          this.applications = list.application.split(',')
+        }
+//        console.log(list)
+        return list
+      }
     },
     fetch ({ store, params }) {
       return Promise.all([
         store.dispatch('loadBrandDetail', { id: params.code }),
         store.dispatch('product/loadSupplierInformation', { uuid: params.code, count: 5, page: 1 })
       ])
-    },
-    methods: {
-      showList: function (status) {
-        this.isShow = status
-      },
-      listenChild: function (brand) {
-        this.$store.dispatch('loadBrandPages', {count: 10, filter: { brandid: brand.id }, page: brand.page})
-      }
     }
   }
 </script>

pages/product/brand/brandList.vue

@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <img class="banner-img" src="/images/all/banner-brandcenter.jpg" alt="">
+    <recommends></recommends>
+    <img class="banner-img" src="/images/all/banner-brandcenter2.jpg" alt="">
+    <div id="brandsList" class="container">
+      <div class="title-icon">品牌索引</div>
+      <div class="hr-blue"></div>
+      <ul class="row initials">
+        <li class="col-xs-1 initial">
+          <nuxt-link :to="'/product/brand/brandList/ABC'">ABC</nuxt-link>
+        </li>
+        <li class="col-xs-1 initial">
+          <nuxt-link :to="'/product/brand/brandList/DEF'">DEF</nuxt-link>
+        </li>
+        <li class="col-xs-1 initial">
+          <nuxt-link :to="'/product/brand/brandList/GHI'">GHI</nuxt-link>
+        </li>
+        <li class="col-xs-1 initial">
+          <nuxt-link :to="'/product/brand/brandList/JKL'">JKL</nuxt-link>
+        </li>
+        <li class="col-xs-1 initial">
+          <nuxt-link :to="'/product/brand/brandList/MNO'">MNO</nuxt-link>
+        </li>
+        <li class="col-xs-1 initial">
+          <nuxt-link :to="'/product/brand/brandList/PQR'">PQR</nuxt-link>
+        </li>
+        <li class="col-xs-1 initial">
+          <nuxt-link :to="'/product/brand/brandList/STU'">STU</nuxt-link>
+        </li>
+        <li class="col-xs-1 initial">
+          <nuxt-link :to="'/product/brand/brandList/VWX'">VWX</nuxt-link>
+        </li>
+        <li class="col-xs-1 initial">
+          <nuxt-link :to="'/product/brand/brandList/YZ'">YZ</nuxt-link>
+        </li>
+        <li class="col-xs-1 initial">
+          <nuxt-link :to="'/product/brand/brandList/0~9'">0~9</nuxt-link>
+        </li>
+      </ul>
+    </div>
+    <nuxt-child/>
+  </div>
+</template>
+
+<script>
+  import { Recommends } from '~components/product'
+
+  export default {
+    layout: 'main',
+    fetch ({store}) {
+      return Promise.all([
+        store.dispatch('product/loadRecommends')
+      ])
+    },
+    components: {
+      Recommends
+    }
+  }
+</script>
+<style scoped>
+  .router-link-exact-active{
+    color: #5078CB;
+    font-weight: bold;
+  }
+</style>

pages/product/brand/brandList/_initial.vue

@@ -1,66 +1,19 @@
 <template>
-  <div id="brand-center">
-    <!--<new-search :background="bgLink"></new-search>-->
-    <recommend-brand></recommend-brand>
-    <brand-index></brand-index>
-    <!--<type-index :title="title"></type-index>-->
-  </div>
+  <brand-list></brand-list>
 </template>
 
 <script>
-//  import { BrandList, Recommends } from '~components/product'
-  import { NewSearch } from '~components/home'
-  import { RecommendBrand, BrandIndex } from '~components/brandCenter'
+  import { BrandList } from '~components/product'
+
   export default {
-    name: 'brandCenterIndex',
-    layout: 'default',
-    data () {
-      return {
-        background: '/images/brandCenter/search-bg.png',
-        title: '型号索引：'
-      }
-    },
-    computed: {
-      bgLink () {
-        return this.$store.state.product.banner.brandBanner.data.data[0].pictureLink
-      }
-    },
+    name: 'brandListDetail',
     fetch ({store, route}) {
       return Promise.all([
-        store.dispatch('loadFloors'),
-        store.dispatch('loadBanners', {type: 'Brand-v3'}),
-        store.dispatch('loadBrandCarousel'),
-        store.dispatch('loadBrandBanner'),
-        store.dispatch('product/loadRecommends'),
-        store.dispatch('product/loadBrandsPager', {'initial': route.params.initial, 'page': 1, 'count': 60, 'keyword': ''})
+        store.dispatch('product/loadBrands', {'keyword': route.params.initial})
       ])
     },
     components: {
-//      BrandList,
-//      Recommends
-      NewSearch,
-      RecommendBrand,
-      BrandIndex
+      BrandList
     }
   }
 </script>
-<style lang="scss">
-  /*.router-link-exact-active{*/
-    /*color: #5078CB;*/
-    /*font-weight: bold;*/
-  /*}*/
-  #brand-center {
-    .search-box {
-      background-size: auto!important;
-      background-position: 54% 0!important;
-     /* height: 187px;*/
-      height: 444px;
-      .input-group {
-        padding-top: 300px;
-      }
-      .association {
-        top: 125px;
-      }
-    }
-  }
-</style>

pages/product/brand_new/_code.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="details">
+    <div class="information">
+      <brand-detail/>
+      <div class="comm-list" v-if="true">
+        <categories-list :isShow="isShow"></categories-list>
+        <brand-component @showEvent="showList"></brand-component>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  import { BrandDetail, CategoriesList, BrandComponent } from '~components/product'
+  export default {
+    layout: 'main',
+    data () {
+      return {
+        code: '',
+        isShow: 0
+      }
+    },
+    components: {
+      BrandDetail,
+      CategoriesList,
+      BrandComponent
+    },
+    fetch ({ store, params }) {
+      return Promise.all([
+        store.dispatch('loadBrandDetail', { id: params.code }),
+        store.dispatch('product/loadSupplierInformation', { uuid: params.code, count: 5, page: 1 })
+      ])
+    },
+    methods: {
+      showList: function (status) {
+        this.isShow = status
+      },
+      listenChild: function (brand) {
+        this.$store.dispatch('loadBrandPages', {count: 10, filter: { brandid: brand.id }, page: brand.page})
+      }
+    }
+  }
+</script>
+<style scoped>
+  .comm-list{
+    width: 1190px;
+    margin: 0 auto;
+    overflow: hidden;
+  }
+</style>

pages/product/brand_new/brandList/_initial.vue

@@ -0,0 +1,66 @@
+<template>
+  <div id="brand-center">
+    <!--<new-search :background="bgLink"></new-search>-->
+    <recommend-brand></recommend-brand>
+    <brand-index></brand-index>
+    <!--<type-index :title="title"></type-index>-->
+  </div>
+</template>
+
+<script>
+//  import { BrandList, Recommends } from '~components/product'
+  import { NewSearch } from '~components/home'
+  import { RecommendBrand, BrandIndex } from '~components/brandCenter'
+  export default {
+    name: 'brandCenterIndex',
+    layout: 'default',
+    data () {
+      return {
+        background: '/images/brandCenter/search-bg.png',
+        title: '型号索引：'
+      }
+    },
+    computed: {
+      bgLink () {
+        return this.$store.state.product.banner.brandBanner.data.data[0].pictureLink
+      }
+    },
+    fetch ({store, route}) {
+      return Promise.all([
+        store.dispatch('loadFloors'),
+        store.dispatch('loadBanners', {type: 'Brand-v3'}),
+        store.dispatch('loadBrandCarousel'),
+        store.dispatch('loadBrandBanner'),
+        store.dispatch('product/loadRecommends'),
+        store.dispatch('product/loadBrandsPager', {'initial': route.params.initial, 'page': 1, 'count': 60, 'keyword': ''})
+      ])
+    },
+    components: {
+//      BrandList,
+//      Recommends
+      NewSearch,
+      RecommendBrand,
+      BrandIndex
+    }
+  }
+</script>
+<style lang="scss">
+  /*.router-link-exact-active{*/
+    /*color: #5078CB;*/
+    /*font-weight: bold;*/
+  /*}*/
+  #brand-center {
+    .search-box {
+      background-size: auto!important;
+      background-position: 54% 0!important;
+     /* height: 187px;*/
+      height: 444px;
+      .input-group {
+        padding-top: 300px;
+      }
+      .association {
+        top: 125px;
+      }
+    }
+  }
+</style>

store/product.js

@@ -26,6 +26,16 @@ export const actions = {
   },
   // 品牌列表推荐品牌配置
   loadRecommends ({ commit }) {
+    commit('brand/REQUEST_RECOMMENDS')
+    return axios.get(`/api/product/brand/hot/5`)
+      .then(response => {
+        commit('brand/GET_RECOMMENDS_SUCCESS', response.data)
+      }, err => {
+        commit('brand/GET_RECOMMENDS_FAILURE', err)
+      })
+  },
+  // 品牌列表推荐品牌配置
+  loadPCBRecommends ({ commit }) {
     commit('brand/REQUEST_RECOMMENDS')
     return axios.get('/cmsApi?method=queryContentPage&module=brandCenter_brandReco&orderBy=contExp_sort')
       .then(response => {