feat: 新增图形拼图、数字验证码

package.json

@@ -30,6 +30,7 @@
     "v-clipboard": "^2.2.2",
     "vue": "^2.6.11",
     "vue-baidu-map": "^0.21.22",
+    "vue-puzzle-vcode": "^1.1.9",
     "vue-router": "^3.1.6",
     "vue-slick-carousel": "^1.0.6",
     "vuex": "^3.1.3",

src/axios/api.js

-// import {
-//     GET, POSTFORM
-// } from "./fetch.js"
+import {
+    GET
+} from "./fetch.js"
 
+const Prefix = process.env.NODE_ENV === 'development' ? '/gs1' : '';
 /* 公共接口 */
 
+// 首页大轮播图 
+const getCaptcha = (query = {}) => {
+	return GET(`${Prefix}/office/captcha.jpg`, query)
+}
+
 import home from "./module/home.js"
 import business from "./module/business.js"
 
 const api = {
     home,
     business,
+    getCaptcha,
 }
 
 export default api
\ No newline at end of file

src/utils/utils.js

@@ -49,3 +49,12 @@ export const groupList = (list, length) => {
     return pages;
   };
   
+
+  /**
+ * 获取uuid
+ */
+export const getUUID = ()  => {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
+      return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)
+    })
+  }
\ No newline at end of file

src/views/Search/external.vue

@@ -2,7 +2,7 @@
   <div class="search-content">
     <div class="title">境外条码信息查询</div>
     <div class="body">
-      <div style="padding-top:20px">
+      <div style="padding-top: 20px">
         <el-form label-position="left" label-width="180px" :model="search">
           <el-form-item label="境外商品条码信息查询：">
             <el-input
@@ -21,16 +21,16 @@
               ></el-input>
 
               <div class="validate-code">
-                <img src="../../assets/image/validate.jpg" alt=""/>
+                <img :src="captchaPath" @click="getCaptcha()" alt="" />
+                <!-- <img src="../../assets/image/validate.jpg" alt=""/> -->
               </div>
 
               <el-button
-                  style="margin-left:40px"
+                style="margin-left: 40px"
                 type="primary"
                 @click="handleSearch"
                 >查询
-              </el-button
-              >
+              </el-button>
             </div>
           </el-form-item>
         </el-form>
@@ -42,7 +42,11 @@
               <div class="title">商品信息</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="row_"
+                    :key="item.key"
+                    v-for="item in productFields"
+                  >
                     <div class="cell">
                       {{ item.label }}
                     </div>
@@ -56,15 +60,23 @@
               <div v-else class="product-info row">
                 <div class="left col-lg-8">
                   <div class="row_">
-                    <div class="cell">
-                      商品条码
-                    </div>
+                    <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">
+                <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>
@@ -74,16 +86,11 @@
                 <el-table
                   :data="result.companyInfo"
                   header-cell-class-name="search-table-hc"
-                    style="width: 100%">
-                  <el-table-column
-                      prop="brand"
-                      label="国际品牌商"
+                  style="width: 100%"
                 >
+                  <el-table-column prop="brand" label="国际品牌商">
                   </el-table-column>
-                  <el-table-column
-                      prop="address"
-                      label="国际品牌商地址"
-                  >
+                  <el-table-column prop="address" label="国际品牌商地址">
                   </el-table-column>
                 </el-table>
               </div>
@@ -96,85 +103,101 @@
     <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分配的前缀码，请点击：了解更多
           >>
         </p>
-        <p>
-          2、本查询仅适用于中华人民共和国境外注册的商品条码信息。
-        </p>
+        <p>2、本查询仅适用于中华人民共和国境外注册的商品条码信息。</p>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import { getUUID } from "@/utils/utils";
+
 export default {
   data() {
     return {
-      search: {code: "", validate: ""},
+      captchaPath: "",
+      uuid: "",
+      search: { code: "", validate: "" },
       searchCodeShow: "",
       showResult: false,
       result: null,
       productFields: [
         {
-          key: 'id',
-          label: '商品条码：',
+          key: "id",
+          label: "商品条码：",
         },
         {
-          key: 'name',
-          label: '产品名称：',
+          key: "name",
+          label: "产品名称：",
         },
         {
-          key: 'brand',
-          label: '品牌：',
+          key: "brand",
+          label: "品牌：",
         },
         {
-          key: 'classify',
-          label: '产品分类：',
+          key: "classify",
+          label: "产品分类：",
         },
         {
-          key: 'standard',
-          label: '规格：',
+          key: "standard",
+          label: "规格：",
         },
         {
-          key: 'netContent',
-          label: '净含量：',
+          key: "netContent",
+          label: "净含量：",
         },
         {
-          key: 'origin',
-          label: '产地：',
+          key: "origin",
+          label: "产地：",
         },
-      ]
+      ],
     };
   },
+  created() {
+    this.getCaptcha();
+  },
   methods: {
+    // 获取验证码
+    getCaptcha() {
+      this.uuid = getUUID();
+      this.$http
+        .get(`/gs1/office/captcha.jpg?uuid=${this.uuid}`, {
+          responseType: "blob",
+        })
+        .then((res) => {
+          this.captchaPath = window.URL.createObjectURL(res.body);
+        });
+    },
     handleSearch() {
       this.searchCodeShow = this.search.code;
       this.showResult = true;
       if (this.search.code === "1") {
         this.result = {
           product: {
-            id: '1',
-            name: '法国梦巴黎圣萨蒂黑歌海娜红',
-            brand: '法国梦巴黎',
-            classify: '利口酒',
-            standard: '750ML',
-            netContent: '750毫升',
-            origin: '法国',
+            id: "1",
+            name: "法国梦巴黎圣萨蒂黑歌海娜红",
+            brand: "法国梦巴黎",
+            classify: "利口酒",
+            standard: "750ML",
+            netContent: "750毫升",
+            origin: "法国",
           },
           companyInfo: [
-            {brand: 'CAVES LANGUEDOC ROUSILLON', address: 'ZAC MILLENAIRE'}
-          ]
+            { brand: "CAVES LANGUEDOC ROUSILLON", address: "ZAC MILLENAIRE" },
+          ],
         };
       } else if (this.search.code === "2") {
         this.result = {
           companyInfo: [
-              {brand: 'CAVES LANGUEDOC ROUSILLON', address: 'ZAC MILLENAIRE'}
-          ]
-        }
-      }else{
+            { brand: "CAVES LANGUEDOC ROUSILLON", address: "ZAC MILLENAIRE" },
+          ],
+        };
+      } else {
         this.result = null;
       }
     },
@@ -193,6 +216,7 @@ export default {
     > img {
       width: 100%;
       height: 100%;
+      cursor: pointer;
     }
   }
 

src/views/Search/internal.vue

@@ -39,7 +39,7 @@
               </el-form-item>
 
               <el-form-item label="验证码：">
-                <el-button type="primary" class="w240" icon="gs-guard-icon">
+                <el-button type="primary" class="w240" icon="gs-guard-icon"  @click="handelVerification">
                   点击此处进行验证
                 </el-button>
                 <el-button style="margin-left:40px" type="primary" @click="handleSearchCompany"
@@ -145,19 +145,25 @@
         </p>
       </div>
     </div>
+
+    <Vcode :show="isShowVcode" @success="onSuccess" @close="onClose" />
   </div>
 </template>
 
 <script>
+import Vcode from "vue-puzzle-vcode";
+
 const CODE = 0;
 const NAME = 1;
 const ADDRESS = 2;
+
 export default {
   data() {
     return {
       CODE,
       NAME,
       ADDRESS,
+      isShowVcode: false,
       activeName: "first",
       company: CODE,
       companySearch: {
@@ -173,7 +179,23 @@ export default {
       showResult: false,
     };
   },
+  components: {
+    Vcode,
+  },
   methods: {
+    // 点击此处进行验证
+    handelVerification() {
+      console.log('点击此处进行验证');
+      this.isShowVcode = true;
+    },
+    // 验证结束
+    onClose() {
+      this.isShowVcode = false;
+    },
+    // 通过验证后
+    onSuccess() {
+      this.isShowVcode = false; // 通过验证后，需要手动关闭模态框
+    },
     // 查看按钮
     handleCheck(row) {
       console.log(row)