feat: 自行车企业代码公告查询【100%】

src/views/Search/bike.vue

@@ -3,32 +3,40 @@
     <div class="title">自行车企业代码公告查询</div>
     <div class="body">
       <div style="padding-top:20px">
-        <el-form label-position="left" label-width="180px" :model="search">
-          <el-form-item label="境外商品条码信息查询：">
+        <el-radio-group v-model="type">
+          <el-radio :label="CODE">企业代码</el-radio>
+          <el-radio :label="NAME">企业名称</el-radio>
+        </el-radio-group>
+        <el-form label-position="left"
+                 style="margin-top:40px"
+                 label-width="120px"
+                 :model="search">
+          <el-form-item :label="type===CODE?'企业代码':'企业名称'">
             <el-input
-              v-model="search.code"
-              placeholder="请输入正确的境外商品条码！"
-              class="w240"
+                v-model="search.code"
+                :placeholder="type===CODE?'请输入正确的4位企业代码！':'请输入正确的企业名称！'"
+                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="captcha"
+                  placeholder="请输入验证码"
+                  class="w160"
               ></el-input>
 
               <div class="validate-code">
-                <img src="../../assets/image/validate.jpg" alt="" />
+                <img :src="captchaPath" @click="getCaptcha()" 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>
@@ -38,12 +46,24 @@
           <div class="result-box-title">查询 {{ searchCodeShow }} 结果</div>
           <div class="result-box-body">
             <template v-if="result">
-              <div class="title">商品信息</div>
-              <div class="product-info"></div>
-              <div class="title">企业信息</div>
-              <div class="company-info"></div>
+              <el-table
+                  :data="result"
+                  header-cell-class-name="search-table-hc"
+                  style="width: 100%"
+              >
+                <el-table-column prop="code" label="企业代码" width="100">
+                </el-table-column>
+                <el-table-column label="企业名称">
+                  <template slot-scope="scope">
+                  <span type="text" class="hover" size="small">{{
+                      scope.row.firmName
+                    }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="status" label="公告状态" width="80"></el-table-column>
+              </el-table>
             </template>
-            <span v-else>您输入的商品条码格式不正确，请确认后重试。</span>
+            <span class="error-msg" v-else>{{ errorMsg }}</span>
           </div>
         </div>
       </div>
@@ -51,13 +71,9 @@
     <div class="notice">
       <div class="title">友情提示</div>
       <div class="content-wrapper">
-        <img src="./img/query-external-barcode.png" align="right" alt="" />
-        <p>
-          1、目前，国际物品编码组织（GS1）已将690至697之间的前缀码分配给中国物品编码中心使用，通常以这些前缀码开始的厂商识别代码都是由中国物品编码中心负责分配和管理的；以其他前缀码开始的则由境外GS1成员组织负责，一般称为"境外条码"，以下为您提供了境外商品条码信息的查询工具，请根据提示进行相关查询。欲了解GS1分配的前缀码，请点击：了解更多
-          >>
-        </p>
+        <img src="./img/bikecode.jpeg" style="width: 240px" align="right" alt=""/>
         <p>
-          2、本查询仅适用于中华人民共和国境外注册的商品条码信息。
+          右图为新自行车的编码规则的示意，新自行车编码采用的是15位全数字代码结构，由4部分组成，X1～X4是企业代码，X5是车种代码，X6～X7是生产年份代码，X8～X15是生产流水号代码。请根据自行车企业的代码和名称进行查询。
         </p>
       </div>
     </div>
@@ -65,21 +81,47 @@
 </template>
 
 <script>
+import validation from "@/views/Search/validation";
+
+const CODE = 0
+const NAME = 1
 export default {
+  mixins: [validation],
   data() {
     return {
-      search: { code: "", validate: "" },
+      CODE,
+      NAME,
+      type: CODE,
+      search: {code: ""},
       searchCodeShow: "",
       showResult: false,
       result: null,
     };
   },
   methods: {
-    handleSearch() {
+    async handleSearch() {
+      const params = {
+        code: "",
+        firmName: "",
+        uuid: this.uuid,
+        captcha: this.captcha,
+      };
+      if (this.type === CODE) {
+        params.code = this.search.code
+      } else if (this.type === NAME) {
+        params.firmName = this.search.code
+      }
       this.searchCodeShow = this.search.code;
       this.showResult = true;
-      if (this.search.code === "1") {
-        this.result = {};
+      const searchGlnRes = await this.$api.search.searchBike(params);
+      const {returnCode, data} = searchGlnRes;
+      if (returnCode === "0") {
+        this.result = data;
+      } else {
+        this.errorMsg =
+            searchGlnRes.returnMsg ||
+            "没有符合条件的记录！";
+        this.result = null;
       }
     },
   },
@@ -93,6 +135,7 @@ export default {
     width: 70px;
     height: 40px;
     margin-left: 11px;
+
     > img {
       width: 100%;
       height: 100%;

src/views/Search/validation.js

+import { getUUID } from "@/utils/utils";
+export default {
+    created() {
+        this.getCaptcha();
+    },
+    data(){
+        return {
+            captchaPath:'',
+            uuid: '',
+            captcha: '',
+            errorMsg: '',
+        }
+    },
+    methods: {
+        getCaptcha() {
+            this.uuid = getUUID()
+            const query = {
+                uuid: this.uuid
+            };
+            this.$api.getCaptcha(query).then((res) => {
+                this.captchaPath = window.URL.createObjectURL(res.body);
+            });
+        },
+    },
+}