feat: 查询中心：样式提取

src/views/Search/bike.vue

@@ -9,9 +9,9 @@
         </el-radio-group>
         <el-form label-position="left"
                  style="margin-top:40px"
-                 label-width="120px"
+                 label-width="100px"
                  :model="search">
-          <el-form-item :label="type===CODE?'企业代码':'企业名称'">
+          <el-form-item :label="type===CODE?'企业代码：':'企业名称：'">
             <el-input
                 v-model="search.code"
                 :placeholder="type===CODE?'请输入正确的4位企业代码！':'请输入正确的企业名称！'"

src/views/Search/external.vue

@@ -222,18 +222,6 @@ export default {
       cursor: pointer;
     }
   }
-  .validate-code {
-    display: inline-block;
-    width: 70px;
-    height: 40px;
-    margin-left: 11px;
-
-    > img {
-      width: 100%;
-      height: 100%;
-      cursor: pointer;
-    }
-  }
 
   .product-info {
     margin-top: -15px;
@@ -263,13 +251,5 @@ export default {
     .right {
     }
   }
-
-  .w160 {
-    width: 160px;
-  }
-
-  .w240 {
-    width: 240px;
-  }
 }
 </style>

src/views/Search/internal.vue

@@ -39,29 +39,23 @@
               </el-form-item>
 
               <el-form-item label="验证码：">
-                <el-button
-                    type="primary"
-                    class="w240"
-                    icon="gs-guard-icon"
-                    @click="handleVerification"
-                    v-if="!isVerificationPass"
-                >
-                  点击此处进行验证
-                </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>
+                <div class="y-center">
+                  <el-input
+                      v-model="captcha"
+                      placeholder="请输入验证码"
+                      class="w160"
+                  ></el-input>
+
+                  <div class="validate-code">
+                    <img :src="captchaPath" @click="getCaptcha()" alt="" />
+                  </div>
+
+                  <el-button
+                      style="margin-left: 40px"
+                      type="primary"
+                      @click="handleSearchCompany"
+                  >查询</el-button>
+                </div>
               </el-form-item>
             </el-form>
           </div>
@@ -145,7 +139,7 @@
               </el-table-column>
             </el-table>
           </template>
-          <span v-else>没有符合条件的记录！</span>
+          <span style="color: rgb(255, 59, 48)" v-else>{{ errorMsg }}</span>
         </div>
       </div>
     </div>
@@ -185,12 +179,14 @@
 <script>
 import {getUUID} from "@/utils/utils";
 import Vcode from "vue-puzzle-vcode";
+import validation from "@/views/Search/validation";
 
 const CODE = '1';
 const NAME = '2';
 const ADDRESS = '3';
 
 export default {
+  mixins:[validation],
   data() {
     return {
       CODE,
@@ -217,7 +213,21 @@ export default {
   components: {
     Vcode,
   },
+  created() {
+    this.getCaptcha();
+  },
   methods: {
+    // 获取验证码
+    getCaptcha() {
+      this.uuid = getUUID()
+      const query = {
+        uuid: this.uuid
+      };
+      this.$api.getCaptcha(query).then((res) => {
+        console.log(res, "res");
+        this.captchaPath = window.URL.createObjectURL(res.body);
+      });
+    },
     // 点击此处进行验证
     handleVerification() {
       console.log("点击此处进行验证");
@@ -245,24 +255,12 @@ export default {
       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;
       }
-      const params = {type: this.company, uuid: getUUID(), code: this.searchCodeShow, captcha: "7n8df",};
+      const params = {type: this.company, uuid: this.uuid, code: this.searchCodeShow, captcha: this.captcha,};
       const searchGlnRes = await this.$api.search.searchInternal(params);
       const {returnCode, data} = searchGlnRes;
       if (returnCode === "0") {
@@ -270,7 +268,7 @@ export default {
       } else {
         this.errorMsg =
             searchGlnRes.returnMsg ||
-            "您输入的商品条码格式不正确，请确认后重试。";
+            "没有符合条件的记录！";
         this.result = null;
       }
     },
@@ -285,10 +283,6 @@ export default {
 </script>
 
 <style lang="scss">
-.w240 {
-  width: 240px;
-}
-
 .gs-guard-icon {
   display: inline-block;
   margin-bottom: -1px;

src/views/Search/shortcode.vue

@@ -150,28 +150,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss">
-.search-content {
-  .validate-code {
-    display: inline-block;
-    width: 70px;
-    height: 40px;
-    margin-left: 11px;
-    overflow: hidden;
-
-    > img {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  .w160 {
-    width: 160px;
-  }
-
-  .w240 {
-    width: 240px;
-  }
-}
-</style>

src/views/Search/style/common.scss

@@ -24,6 +24,10 @@
 
     .body {
       padding: 20px 30px;
+
+      .error-msg{
+        color: #FF3B30;
+      }
     }
 
     .notice {
@@ -100,6 +104,27 @@
         }
       }
     }
+
+    .validate-code {
+      display: inline-block;
+      width: 70px;
+      height: 40px;
+      margin-left: 11px;
+      overflow: hidden;
+
+      > img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .w160 {
+      width: 160px;
+    }
+
+    .w240 {
+      width: 240px;
+    }
   }
 
   .el-tabs__item.is-active {
@@ -118,10 +143,11 @@
   }
 
   .hover{
+    cursor: pointer;
     color: #008dbd;
 
     &:hover{
-      color: #008dbd;
+      color: #006587;
     }
   }
 }