新版品牌中心

components/product/brand/BrandDetail.vue

@@ -2,20 +2,23 @@
   <div class="brandDetail container">
     <div class="menu-com row">
       <div class="menu-title col-md-12">
-        <a href="/product/brand/brandList/ABC">品牌中心</a> > <span>{{list.nameEn}}</span></div>
+        <a href="/product/brand/brandList/A">品牌中心</a> > <span>{{list.nameEn}}</span></div>
     </div>
     <div id="brand">
-      <div class="brand-logo">
-        <img :src="list.logoUrl || '/images/component/default.png'" :alt="list.nameEn"/>
-      </div>
+      <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-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>
+        <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>
-        <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>
+        <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>
@@ -28,9 +31,34 @@
         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.$store.state.brandDetail.detail.data
+        let list = this.baseUtils.deepCopy(this.$store.state.brandDetail.detail.data)
         if (list.application && list.application !== '') {
           this.applications = list.application.split(',')
         }
@@ -39,89 +67,110 @@
     }
   }
 </script>
-<style scoped>
+<style lang="scss" scoped>
   .brandDetail {
     margin-bottom: 60px;
     width: 1190px;
     padding: 0;
     overflow: hidden;
-  }
-  .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;
+    .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/CategoriesList.vue

@@ -1,17 +1,27 @@
 <template>
   <div class="categories-list container">
-    <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 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',
@@ -79,6 +89,7 @@
         return this.$store.state.brandDetail.detail.data
       }
     },
+    props: ['isShow'],
     data () {
       return {
         defaultProps: {
@@ -184,7 +195,7 @@
     height: 34px;
     text-align: center;
     color: #fff;
-    background-color: #5078cb;
+    background: url("/images/brandCenter/type.png") no-repeat center #5078cb;
     font-size: 14px;
     padding: 7px;
   }
@@ -208,4 +219,25 @@
     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

@@ -1,342 +0,0 @@
-<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

@@ -1,176 +0,0 @@
-<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

@@ -1,243 +0,0 @@
-<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>

nuxt.config.js

@@ -1,7 +1,7 @@
 const path = require('path')
 const isProdMode = Object.is(process.env.NODE_ENV, 'production')
 // b2c后台
-const baseUrl = process.env.BASE_URL || (isProdMode ? 'http://api.usoftmall.com/' : 'http://192.168.253.3:36006')
+const baseUrl = process.env.BASE_URL || (isProdMode ? 'http://api.usoftmall.com/' : 'http://192.168.253.121:9090/platform-b2c/')
 // 公共询价
 const commonUrl = process.env.COMMON_URL || (isProdMode ? 'https://api-inquiry.usoftmall.com/' : 'http://218.17.158.219:24000/')
 // 公共物料

pages/product/brand/_code.vue

@@ -1,48 +1,43 @@
 <template>
   <div class="details">
-    <div class="information" v-if="list.id">
+    <div class="information">
       <brand-detail/>
-      <div class="comm-list">
-        <categories-list/>
-        <brand-component/>
+      <div class="comm-list" v-if="true">
+        <categories-list :isShow="isShow"></categories-list>
+        <brand-component @showEvent="showList"></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: ''
+        code: '',
+        isShow: 0
       }
     },
     components: {
       BrandDetail,
       CategoriesList,
-      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
-      }
+      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) {
+        console.log(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

@@ -1,66 +0,0 @@
-<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,19 +1,66 @@
 <template>
-  <brand-list></brand-list>
+  <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 } from '~components/product'
-
+//  import { BrandList, Recommends } from '~components/product'
+  import { NewSearch } from '~components/home'
+  import { RecommendBrand, BrandIndex } from '~components/brandCenter'
   export default {
-    name: 'brandListDetail',
+    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('product/loadBrands', {'keyword': route.params.initial})
+        store.dispatch('loadFloors'),
+        store.dispatch('loadBanners', {type: 'Brand-v3'}),
+        store.dispatch('loadBrandCarousel'),
+        store.dispatch('loadBrandBanner'),
+        store.dispatch('product/loadRecommends'),
+        store.dispatch('product/loadBrandsPager', {'key': route.params.initial, 'page': 1, 'count': 60, 'keyword': ''})
       ])
     },
     components: {
-      BrandList
+//      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>

plugins/axios.js

@@ -26,6 +26,7 @@ service.interceptors.request.use(config => {
     } else {
       config.url = process.env.baseUrl + config.url
     }
+    console.log(config.url)
   //   let paramStr = ''
   //   if (config.params) {
   //     paramStr += '?'

store/product.js

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