feat: 条码查询

src/views/Search/gln.vue

@@ -43,7 +43,7 @@
               <div class="title">企业信息</div>
               <div class="company-info"></div>
             </template>
-            <span v-else>您输入的商品条码格式不正确，请确认后重试。</span>
+            <span v-else>{{ errorMsg }}</span>
           </div>
         </div>
       </div>
@@ -76,10 +76,17 @@ import { getUUID } from "@/utils/utils";
 export default {
   data() {
     return {
-      captchaPath: '',
-      search: { code: "", captcha: "", type: "GLN", requestedLanguage: "en", uuid: ''},
+      captchaPath: "",
+      search: {
+        code: "",
+        captcha: "",
+        type: "GLN",
+        requestedLanguage: "en",
+        uuid: "",
+      },
       searchCodeShow: "",
       showResult: false,
+      errorMsg: "",
       result: null,
     };
   },
@@ -94,21 +101,22 @@ export default {
         uuid: this.search.uuid,
       };
       this.$api.getCaptcha(query).then((res) => {
-        console.log(res, 'res');
+        console.log(res, "res");
         this.captchaPath = window.URL.createObjectURL(res.body);
       });
     },
     async handleSearch() {
       this.searchCodeShow = this.search.code;
       this.showResult = true;
-      const params = {...this.search};
-      const searchGlnRes =
-        await this.$api.search.searchGln(params);
+      const params = { ...this.search };
+      const searchGlnRes = await this.$api.search.searchGln(params);
       const { returnCode, data } = searchGlnRes;
-      console.log(searchGlnRes, 'searchGlnRes');
       if (returnCode === "0") {
         this.result = data;
       } else {
+        this.errorMsg =
+          searchGlnRes.returnMsg ||
+          "您输入的商品条码格式不正确，请确认后重试。";
         this.result = null;
       }
     },

src/views/Search/internal.vue

@@ -4,17 +4,17 @@
     <div class="body">
       <el-tabs v-model="activeName" class="tab-no-bottom">
         <el-tab-pane label="查询厂商信息" name="first">
-          <div style="padding-top:20px">
+          <div style="padding-top: 20px">
             <el-radio-group v-model="company">
               <el-radio :label="CODE">根据厂商识别代码查询</el-radio>
               <el-radio :label="NAME">根据厂商名称查询</el-radio>
-              <el-radio :label="ADDRESS">根据厂商名称查询</el-radio>
+              <el-radio :label="ADDRESS">根据厂商地址查询</el-radio>
             </el-radio-group>
 
             <el-form
               label-position="left"
               label-width="180px"
-                style="margin-top:40px"
+              style="margin-top: 40px"
               :model="companySearch"
             >
               <el-form-item label="境内商品条码信息查询：">
@@ -33,19 +33,35 @@
                 <el-input
                   v-show="company === ADDRESS"
                   v-model="companySearch.address"
-                    placeholder="请输入正确的商品条码！"
+                  placeholder="请输入正确的厂商名称！"
                   class="w240"
                 ></el-input>
               </el-form-item>
 
               <el-form-item label="验证码：">
-                <el-button type="primary" class="w240" icon="gs-guard-icon"  @click="handelVerification">
+                <el-button
+                  type="primary"
+                  class="w240"
+                  icon="gs-guard-icon"
+                  @click="handelVerification"
+                  v-if="!isVerificationPass"
+                >
                   点击此处进行验证
                 </el-button>
-                <el-button style="margin-left:40px" type="primary" @click="handleSearchCompany"
-                >查询
-                </el-button
+                <el-button
+                  type="success"
+                  class="w240"
+                  icon="el-icon-circle-check"
+                  v-else
                 >
+                  验证通过
+                </el-button>
+                <el-button
+                  style="margin-left: 40px"
+                  type="primary"
+                  @click="handleSearchCompany"
+                  >查询
+                </el-button>
               </el-form-item>
             </el-form>
           </div>
@@ -55,7 +71,7 @@
           <el-form
             label-position="left"
             label-width="180px"
-              style="margin-top:20px"
+            style="margin-top: 20px"
             :model="productSearch"
           >
             <el-form-item label="境内商品条码信息查询：">
@@ -68,22 +84,24 @@
 
             <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=""/>
+                <div style="diplay: flex; align-item: center">
+                  <img style="height: 14px" src="./img/guard.png" alt="" />
                   点击此处进行验证
                 </div>
               </el-button>
-              <el-button style="margin-left:40px" type="primary" @click="handleSearchProduct"
+              <el-button
+                style="margin-left: 40px"
+                type="primary"
+                @click="handleSearchProduct"
                 >查询
-              </el-button
-              >
+              </el-button>
             </el-form-item>
           </el-form>
         </el-tab-pane>
       </el-tabs>
 
       <!--查询结果-->
-      <div class="result-box" v-if="showResult&&activeName==='first'">
+      <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">
@@ -91,34 +109,38 @@
             <el-table
               :data="result"
               header-cell-class-name="search-table-hc"
-                style="width: 100%">
-              <el-table-column
-                  prop="id"
-                  label="厂商识别代码"
-                  width="180">
+              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>
+                  <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 prop="name" label="厂商名称" width="180">
               </el-table-column>
-              <el-table-column
-                  label="详细">
+              <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>
+                  <span
+                    type="text"
+                    class="hover pointer"
+                    @click="handleCheck()"
+                    size="small"
+                    >详情</span
+                  >
                 </template>
               </el-table-column>
-              <el-table-column
-                  label="查看">
+              <el-table-column label="查看">
                 <template>
-                  <span type="text" class="hover pointer" @click="handleCheck()" size="small">查看</span>
+                  <span
+                    type="text"
+                    class="hover pointer"
+                    @click="handleCheck()"
+                    size="small"
+                    >查看</span
+                  >
                 </template>
               </el-table-column>
             </el-table>
@@ -131,7 +153,7 @@
     <div class="notice">
       <div class="title">友情提示</div>
       <div class="content-wrapper">
-        <img src="./img/pic_ex_jl.png" align="right" alt=""/>
+        <img src="./img/pic_ex_jl.png" align="right" alt="" />
         <p>
           1、商品条码
           （又称全球贸易项目代码GTIN）是指包含厂商识别代码在内的对零售商品、非零售商品、物流单元、位置、资产及服务进行全球惟一标识的一种代码（或称数据结构）。对贸易项目进行编码和符号表示（前缀码为690-699是境内条码），能够实现商品零售（POS）、进货、存货管理、自动补货、销售分析及其它业务运作的自动化。
@@ -140,9 +162,7 @@
         <p>
           2、厂商信息查询结果说明：自中国物品编码中心为企业颁发《系统成员证书》当日起计，7天后，在线公布该企业的名称、厂商识别代码及证书颁发日期等信息；15天后，将公布该企业的具体注册信息。
         </p>
-        <p>
-          3、本查询仅适用于中华人民共和国境内注册的商品条码信息。
-        </p>
+        <p>3、本查询仅适用于中华人民共和国境内注册的商品条码信息。</p>
       </div>
     </div>
 
@@ -164,6 +184,7 @@ export default {
       NAME,
       ADDRESS,
       isShowVcode: false,
+      isVerificationPass: false,
       activeName: "first",
       company: CODE,
       companySearch: {
@@ -175,7 +196,7 @@ export default {
         code: "",
       },
       result: null,
-      searchCodeShow: '',
+      searchCodeShow: "",
       showResult: false,
     };
   },
@@ -185,7 +206,7 @@ export default {
   methods: {
     // 点击此处进行验证
     handelVerification() {
-      console.log('点击此处进行验证');
+      console.log("点击此处进行验证");
       this.isShowVcode = true;
     },
     // 验证结束
@@ -195,30 +216,32 @@ export default {
     // 通过验证后
     onSuccess() {
       this.isShowVcode = false; // 通过验证后，需要手动关闭模态框
+      console.log("SUCCESS");
+      this.isVerificationPass = true;
     },
     // 查看按钮
     handleCheck(row) {
-      console.log(row)
+      console.log(row);
     },
     // 详情按钮
     handleDetail(row) {
-      console.log(row)
+      console.log(row);
     },
     handleSearchCompany() {
       this.showResult = true;
       if (this.company === CODE) {
         this.searchCodeShow = this.companySearch.code;
-        if (this.companySearch.code === '1') {
+        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: '北京阿里巴巴食品有限公司', 状态: "已注销"},
-          ]
+            { 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;
@@ -228,7 +251,9 @@ export default {
     },
 
     handleSearchProduct() {
-      window.open(`http://search.anccnet.com/searchResult2.aspx?keyword=${this.productSearch.code}`)
+      window.open(
+        `http://search.anccnet.com/searchResult2.aspx?keyword=${this.productSearch.code}`
+      );
     },
   },
 };