feat: 境外条码查询完善

src/views/Search/external.vue

@@ -6,29 +6,30 @@
         <el-form label-position="left" label-width="180px" :model="search">
           <el-form-item label="境外商品条码信息查询：">
             <el-input
-              v-model="search.code"
-              placeholder="请输入正确的境外商品条码！"
-              class="w240"
+                v-model="search.code"
+                placeholder="请输入正确的境外商品条码！"
+                class="w240"
             ></el-input>
           </el-form-item>
 
           <el-form-item label="验证码：">
             <div class="y-center">
               <el-input
-                v-model="search.validate"
-                placeholder="请输入验证码"
-                class="w160"
+                  v-model="search.validate"
+                  placeholder="请输入验证码"
+                  class="w160"
               ></el-input>
 
               <div class="validate-code">
-                <img src="../../assets/image/validate.jpg" alt="" />
+                <img src="../../assets/image/validate.jpg" alt=""/>
               </div>
 
               <el-button
-                style="margin-left:40px"
-                type="primary"
-                @click="handleSearch"
-                >查询</el-button
+                  style="margin-left:40px"
+                  type="primary"
+                  @click="handleSearch"
+              >查询
+              </el-button
               >
             </div>
           </el-form-item>
@@ -39,9 +40,53 @@
           <div class="result-box-body">
             <template v-if="result">
               <div class="title">商品信息</div>
-              <div class="product-info"></div>
+              <div v-if="result.product" class="product-info row">
+                <div class="left col-lg-8">
+                  <div class="row_" :key="item.key" v-for="item in productFields">
+                    <div class="cell">
+                      {{ item.label }}
+                    </div>
+                    <div class="value">
+                      {{ result.product[item.key] }}
+                    </div>
+                  </div>
+                </div>
+                <div class="right col-lg-4"></div>
+              </div>
+              <div v-else class="product-info row">
+                <div class="left col-lg-8">
+                  <div class="row_">
+                    <div class="cell">
+                      商品条码
+                    </div>
+                    <div class="value">
+                      {{ searchCodeShow }}
+                    </div>
+                  </div>
+                </div>
+                <p style="font-size: 14px;font-weight: 400;color: #F26335;line-height: 22px;text-align: center;margin-bottom: 29px;margin-top: 14px">
+                  该进口商品的中文信息尚未通报，进口商品经营企业可查看《进口商品数据通报操作指南》
+                  （http://import.gds.org.cn/Content/staticpage/operateGuide.html）进行通报。
+                </p>
+              </div>
               <div class="title">企业信息</div>
-              <div class="company-info"></div>
+              <div class="company-info">
+                <el-table
+                    :data="result.companyInfo"
+                    header-cell-class-name="search-table-hc"
+                    style="width: 100%">
+                  <el-table-column
+                      prop="brand"
+                      label="国际品牌商"
+                  >
+                  </el-table-column>
+                  <el-table-column
+                      prop="address"
+                      label="国际品牌商地址"
+                  >
+                  </el-table-column>
+                </el-table>
+              </div>
             </template>
             <span v-else>您输入的商品条码格式不正确，请确认后重试。</span>
           </div>
@@ -51,7 +96,7 @@
     <div class="notice">
       <div class="title">友情提示</div>
       <div class="content-wrapper">
-        <img src="./img/query-external-barcode.png" align="right" alt="" />
+        <img src="./img/query-external-barcode.png" align="right" alt=""/>
         <p>
           1、目前，国际物品编码组织（GS1）已将690至697之间的前缀码分配给中国物品编码中心使用，通常以这些前缀码开始的厂商识别代码都是由中国物品编码中心负责分配和管理的；以其他前缀码开始的则由境外GS1成员组织负责，一般称为"境外条码"，以下为您提供了境外商品条码信息的查询工具，请根据提示进行相关查询。欲了解GS1分配的前缀码，请点击：了解更多
           >>
@@ -68,10 +113,40 @@
 export default {
   data() {
     return {
-      search: { code: "", validate: "" },
+      search: {code: "", validate: ""},
       searchCodeShow: "",
       showResult: false,
       result: null,
+      productFields: [
+        {
+          key: 'id',
+          label: '商品条码：',
+        },
+        {
+          key: 'name',
+          label: '产品名称：',
+        },
+        {
+          key: 'brand',
+          label: '品牌：',
+        },
+        {
+          key: 'classify',
+          label: '产品分类：',
+        },
+        {
+          key: 'standard',
+          label: '规格：',
+        },
+        {
+          key: 'netContent',
+          label: '净含量：',
+        },
+        {
+          key: 'origin',
+          label: '产地：',
+        },
+      ]
     };
   },
   methods: {
@@ -79,7 +154,28 @@ export default {
       this.searchCodeShow = this.search.code;
       this.showResult = true;
       if (this.search.code === "1") {
-        this.result = {};
+        this.result = {
+          product: {
+            id: '1',
+            name: '法国梦巴黎圣萨蒂黑歌海娜红',
+            brand: '法国梦巴黎',
+            classify: '利口酒',
+            standard: '750ML',
+            netContent: '750毫升',
+            origin: '法国',
+          },
+          companyInfo: [
+            {brand: 'CAVES LANGUEDOC ROUSILLON', address: 'ZAC MILLENAIRE'}
+          ]
+        };
+      } else if (this.search.code === "2") {
+        this.result = {
+          companyInfo: [
+              {brand: 'CAVES LANGUEDOC ROUSILLON', address: 'ZAC MILLENAIRE'}
+          ]
+        }
+      }else{
+        this.result = null;
       }
     },
   },
@@ -93,12 +189,42 @@ export default {
     width: 70px;
     height: 40px;
     margin-left: 11px;
+
     > img {
       width: 100%;
       height: 100%;
     }
   }
 
+  .product-info {
+    margin-top: -15px;
+    .left {
+      .row_ {
+        display: flex;
+        align-items: center;
+        height: 42px;
+
+        .cell {
+          flex: 0 0 100px;
+          text-align: left;
+          font-size: 14px;
+          font-weight: 400;
+          color: #666666;
+        }
+
+        .value {
+          flex: 1;
+          font-size: 14px;
+          font-weight: 400;
+          color: #414345;
+        }
+      }
+    }
+
+    .right {
+    }
+  }
+
   .w160 {
     width: 160px;
   }

src/views/Search/internal.vue

@@ -91,7 +91,6 @@
             <el-table
                 :data="result"
                 header-cell-class-name="search-table-hc"
-                border
                 style="width: 100%">
               <el-table-column
                   prop="id"

src/views/Search/style/common.scss

@@ -85,12 +85,13 @@
       color: #f26335;
       line-height: 28px;
       padding-left: 14px;
+      margin-bottom: 20px;
 
       &::before {
         content: "";
         position: absolute;
         left: 0;
-        top: 7px;
+        top: 6px;
         width: 4px;
         height: 16px;
         background: #04408d;
@@ -109,6 +110,10 @@
     padding: 0;
     height: 40px;
     overflow: hidden;
+
+    &+.search-table-hc{
+      border-left: 1px solid white;
+    }
   }
 
   .hover{