feat: 缩短码查询优化

src/views/Search/internal.vue

@@ -14,7 +14,7 @@
             <el-form
                 label-position="left"
                 label-width="180px"
-                style="margin-top:50px"
+                style="margin-top:40px"
                 :model="companySearch"
             >
               <el-form-item label="境内商品条码信息查询：">
@@ -55,7 +55,7 @@
           <el-form
               label-position="left"
               label-width="180px"
-              style="margin-top:50px"
+              style="margin-top:20px"
               :model="productSearch"
           >
             <el-form-item label="境内商品条码信息查询：">

src/views/Search/shortcode.vue

@@ -2,12 +2,68 @@
   <div class="search-content">
     <div class="title">缩短码查询</div>
     <div class="body">
+      <el-tabs v-model="activeName" class="tab-no-bottom">
+        <el-tab-pane label="查询产品信息" name="first">
+            <el-form label-position="left"
+                     label-width="180px"
+                     style="margin-top:20px"
+                     :model="productSearch">
+              <el-form-item label="缩短码查询：">
+                <el-input
+                    v-model="productSearch.code"
+                    placeholder="请输入正确的8位商品条码！"
+                    class="w240"
+                >
+                </el-input>
+              </el-form-item>
+
+              <el-form-item label="验证码：">
+                <div class="y-center">
+                  <el-input
+                      v-model="productSearch.validate"
+                      placeholder="请输入验证码"
+                      class="w160"
+                  ></el-input>
+
+                  <div class="validate-code">
+                    <img src="../../assets/image/validate.jpg" alt="" />
+                  </div>
+
+                  <el-button
+                      style="margin-left:40px"
+                      type="primary"
+                      @click="handleSearchProduct"
+                  >查询</el-button
+                  >
+                </div>
+              </el-form-item>
+            </el-form>
+        </el-tab-pane>
+
+        <el-tab-pane label="查询厂商信息" name="second">
           <div style="padding-top:20px">
-        <el-form label-position="left" label-width="180px" :model="search">
-          <el-form-item label="境外商品条码信息查询：">
+            <el-radio-group v-model="company">
+              <el-radio :label="NAME">根据厂商名称查询</el-radio>
+              <el-radio :label="ADDRESS">根据厂商地址查询</el-radio>
+            </el-radio-group>
+
+            <el-form
+                label-position="left"
+                label-width="180px"
+                style="margin-top:40px"
+                :model="companySearch"
+            >
+              <el-form-item label="缩短码查询：">
                 <el-input
-              v-model="search.code"
-              placeholder="请输入正确的境外商品条码！"
+                    v-show="company === NAME"
+                    v-model="companySearch.name"
+                    placeholder="请输入正确的厂商名称！"
+                    class="w240"
+                ></el-input>
+                <el-input
+                    v-show="company === ADDRESS"
+                    v-model="companySearch.address"
+                    placeholder="请输入正确的厂商地址！"
                     class="w240"
                 ></el-input>
               </el-form-item>
@@ -15,7 +71,7 @@
               <el-form-item label="验证码：">
                 <div class="y-center">
                   <el-input
-                v-model="search.validate"
+                      v-model="companySearch.validate"
                       placeholder="请输入验证码"
                       class="w160"
                   ></el-input>
@@ -27,13 +83,15 @@
                   <el-button
                       style="margin-left:40px"
                       type="primary"
-                @click="handleSearch"
+                      @click="handleSearchCompany"
                   >查询</el-button
                   >
                 </div>
               </el-form-item>
             </el-form>
-
+          </div>
+        </el-tab-pane>
+      </el-tabs>
       <div class="result-box" v-if="showResult">
         <div class="result-box-title">查询 {{ searchCodeShow }} 结果</div>
         <div class="result-box-body">
@@ -43,21 +101,16 @@
             <div class="title">企业信息</div>
             <div class="company-info"></div>
           </template>
-            <span v-else>您输入的商品条码格式不正确，请确认后重试。</span>
-          </div>
+          <span v-else>没有符合条件的记录！</span>
         </div>
       </div>
     </div>
     <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-short-code.png" align="right" alt="" />
         <p>
-          1、目前，国际物品编码组织（GS1）已将690至697之间的前缀码分配给中国物品编码中心使用，通常以这些前缀码开始的厂商识别代码都是由中国物品编码中心负责分配和管理的；以其他前缀码开始的则由境外GS1成员组织负责，一般称为"境外条码"，以下为您提供了境外商品条码信息的查询工具，请根据提示进行相关查询。欲了解GS1分配的前缀码，请点击：了解更多
-          >>
-        </p>
-        <p>
-          2、本查询仅适用于中华人民共和国境外注册的商品条码信息。
+          1、缩短码是由7位商品代码和1位校验码构成的8位数字的条码，只有当标准码尺寸超过总印刷面积的25％时，才允许申报。请根据下列提示进行相关查询。
         </p>
       </div>
     </div>
@@ -65,22 +118,58 @@
 </template>
 
 <script>
+const NAME = 1;
+const ADDRESS = 2;
 export default {
   data() {
     return {
-      search: { code: "", validate: "" },
+      NAME,
+      ADDRESS,
+      activeName: "first",
+      company: NAME,
+      companySearch: {
+        validate: "",
+        code: "",
+        address: "",
+      },
+      productSearch: {
+        code: "",
+        validate: ""
+      },
       searchCodeShow: "",
       showResult: false,
       result: null,
     };
   },
   methods: {
-    handleSearch() {
-      this.searchCodeShow = this.search.code;
-      this.showResult = true;
-      if (this.search.code === "1") {
+    handleSearchProduct() {
+      this.searchCodeShow = this.productSearch.code;
+      if (this.productSearch.code === "1") {
         this.result = {};
+      }else{
+        this.result = null;
       }
+      this.showResult = true;
+    },
+    handleSearchCompany() {
+      if (this.company === NAME) {
+        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 {
+        this.searchCodeShow = this.companySearch.address;
+      }
+      this.showResult = true;
     },
   },
 };

src/views/Search/style/common.scss

@@ -41,6 +41,7 @@
       margin-top: 29px;
       font-size: 14px;
       font-weight: 400;
+      overflow: hidden;
 
       p + p {
         margin-top: 30px;