品牌详情增加代理商列表

components/product/brand/BrandComponent.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="component-list container">
-    <div class="type-list">型号列表</div>
-    <div class="type-list">代理商</div>
+    <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">
       <input  type="search" class="input-sm form-control" placeholder="请输入型号" title="code"
       v-model="searchCode" @search="goodsSearch(searchCode)"/>
@@ -9,7 +9,7 @@
 					<button class="search btn btn-default" type="button" @click="goodsSearch(searchCode)">搜索器件</button>
 			</span>
     </div>
-    <table class="table">
+    <table class="table" v-if="activeTab == 0">
       <thead>
         <tr class="bgf7">
           <th width="500">型号</th>
@@ -40,6 +40,50 @@
         </tr>
       </tbody>
     </table>
+    <table class="table" v-if="activeTab == 1">
+      <thead>
+      <tr class="bgf7">
+        <th width="100"></th>
+        <th width="200" class="text-left">代理商</th>
+        <th width="200">地址</th>
+        <th width="110">电话</th>
+        <th width="110">传真</th>
+        <th width="120">邮箱/网址</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr class="text-center">
+        <td><img src="/images/brandList/empty-cart.png" alt=""></td>
+        <td>深圳市华商龙商务互联科技有限公司</td>
+        <td>深圳市南山区
+          科技园科技南五路英唐大厦一楼...
+        </td>
+        <td>
+          0755-26038000
+        </td>
+        <td>
+          0755-26038000
+        </td>
+        <td>
+          123456789@qq.com...
+          http://www.worldshine.net...
+        </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;">
       <page :total="list.totalElements" :page-size="pageParams.count"
             :current="pageParams.page" @childEvent="handleCurrentChange"></page>
@@ -57,7 +101,8 @@
           count: 10,
           filter: {}
         },
-        searchCode: ''
+        searchCode: '',
+        activeTab: 0
       }
     },
     components: {
@@ -121,6 +166,11 @@
     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;