feat: 境内条码查询完善

src/views/Search/index.vue

 <template>
-  <div class="container marginTop20 mb-4" style="position: relative">
+  <div class="nav-search container marginTop20 mb-4" style="position: relative">
     <breadcrumb/>
     <div class="row">
       <div class="col-lg-3">

src/views/Search/internal.vue

@@ -39,11 +39,8 @@
               </el-form-item>
 
               <el-form-item label="验证码：">
-                <el-button type="primary" class="w240">
-                  <div style="diplay:flex;align-item:center">
-                    <img style="height:14px" src="./img/guard.png" alt=""/>
+                <el-button type="primary" class="w240" icon="gs-guard-icon">
                   点击此处进行验证
-                  </div>
                 </el-button>
                 <el-button style="margin-left:40px" type="primary" @click="handleSearchCompany"
                 >查询
@@ -76,7 +73,7 @@
                   点击此处进行验证
                 </div>
               </el-button>
-              <el-button style="margin-left:40px" type="primary"
+              <el-button style="margin-left:40px" type="primary" @click="handleSearchProduct"
               >查询
               </el-button
               >
@@ -85,11 +82,47 @@
         </el-tab-pane>
       </el-tabs>
 
+      <!--查询结果-->
       <div class="result-box" v-if="showResult&&activeName==='first'">
         <div class="result-box-title">查询 {{ searchCodeShow }} 结果</div>
         <div class="result-box-body">
           <template v-if="result">
             <!--结果表格-->
+            <el-table
+                :data="result"
+                header-cell-class-name="search-table-hc"
+                border
+                style="width: 100%">
+              <el-table-column
+                  prop="id"
+                  label="厂商识别代码"
+                  width="180">
+                <template slot-scope="scope">
+                  <span type="text" class="hover" size="small">{{ scope.row.id }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                  prop="name"
+                  label="厂商名称"
+                  width="180">
+              </el-table-column>
+              <el-table-column
+                  prop="status"
+                  label="状态">
+              </el-table-column>
+              <el-table-column
+                  label="详细">
+                <template>
+                  <span type="text" class="hover pointer" @click="handleCheck()" size="small">详情</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                  label="查看">
+                <template>
+                  <span type="text" class="hover pointer" @click="handleCheck()" size="small">查看</span>
+                </template>
+              </el-table-column>
+            </el-table>
           </template>
           <span v-else>没有符合条件的记录！</span>
         </div>
@@ -142,16 +175,40 @@ export default {
     };
   },
   methods: {
+    // 查看按钮
+    handleCheck(row) {
+      console.log(row)
+    },
+    // 详情按钮
+    handleDetail(row) {
+      console.log(row)
+    },
     handleSearchCompany() {
       this.showResult = true;
       if (this.company === CODE) {
         this.searchCodeShow = this.companySearch.code;
+        if (this.companySearch.code === '1') {
+          this.result = [
+            {id: '6912614', name: '北京阿里巴巴食品有限公司', 状态: "已注销"},
+            {id: '6912614', name: '北京阿里巴巴食品有限公司', 状态: "已注销"},
+            {id: '6912614', name: '北京阿里巴巴食品有限公司', 状态: "已注销"},
+            {id: '6912614', name: '北京阿里巴巴食品有限公司', 状态: "已注销"},
+            {id: '6912614', name: '北京阿里巴巴食品有限公司', 状态: "已注销"},
+            {id: '6912614', name: '北京阿里巴巴食品有限公司', 状态: "已注销"},
+            {id: '6912614', name: '北京阿里巴巴食品有限公司', 状态: "已注销"},
+            {id: '6912614', name: '北京阿里巴巴食品有限公司', 状态: "已注销"},
+          ]
+        }
       } else if (this.company === NAME) {
         this.searchCodeShow = this.companySearch.name;
       } else {
         this.searchCodeShow = this.companySearch.address;
       }
-    }
+    },
+
+    handleSearchProduct() {
+      window.open(`http://search.anccnet.com/searchResult2.aspx?keyword=${this.productSearch.code}`)
+    },
   },
 };
 </script>
@@ -160,4 +217,13 @@ export default {
 .w240 {
   width: 240px;
 }
+
+.gs-guard-icon {
+  display: inline-block;
+  margin-bottom: -1px;
+  width: 14px;
+  height: 12px;
+  background: url("./img/guard.png") center no-repeat;
+  background-size: 14px 14px;
+}
 </style>

src/views/Search/style/common.scss

@@ -3,6 +3,7 @@
   background: #ffffff;
   border-radius: 4px;
   border: 1px solid #c5d8ee;
+
   > .title {
     padding: 20px 30px;
     font-size: 18px;
@@ -15,29 +16,36 @@
   .el-tabs__item {
     color: #454545;
   }
+
   .el-form-item__label {
     color: #414345;
   }
+
   .body {
     padding: 20px 30px;
   }
+
   .notice {
     padding: 20px 30px;
     background: rgba(242, 99, 53, 0.03);
     border-radius: 0px 0px 2px 2px;
+
     > .title {
       font-size: 16px;
       font-weight: 500;
       color: #f26335;
       line-height: 22px;
     }
+
     .content-wrapper {
       margin-top: 29px;
       font-size: 14px;
       font-weight: 400;
+
       p + p {
         margin-top: 30px;
       }
+
       img {
         width: 113px;
         margin-left: 30px;
@@ -52,6 +60,7 @@
     color: #414345;
     line-height: 28px;
   }
+
   .result-box-title {
     height: 40px;
     padding: 0 20px;
@@ -61,6 +70,7 @@
     color: #f26335;
     background: #fef1ec;
   }
+
   .result-box-body {
     border: 1px solid #ebebeb;
     border-top: none;
@@ -88,3 +98,24 @@
     }
   }
 }
+
+.nav-search {
+  .el-tabs__item.is-active {
+    color: #04408D;
+  }
+
+  .el-table .search-table-hc{
+    background: #F5F5F5;
+    padding: 0;
+    height: 40px;
+    overflow: hidden;
+  }
+
+  .hover{
+    color: #008dbd;
+
+    &:hover{
+      color: #008dbd;
+    }
+  }
+}

src/views/comps/SubNav.vue

@@ -161,6 +161,7 @@ export default {
 .el-menu.gs-subnav {
   border-right: none;
   background: $side-bg-color;
+  margin-bottom: 20px;
 
   .el-submenu__title {
     background: $side-bg-color;