vue2 新增行为验证码

yudao-ui-admin/src/views/login.vue

@@ -36,19 +36,10 @@
                 </el-form-item>
                 <el-form-item prop="password">
                   <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码"
-                            @keyup.enter.native="handleLogin">
+                            @keyup.enter.native="getCode">
                     <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon"/>
                   </el-input>
                 </el-form-item>
-                <el-form-item prop="code" v-if="captchaEnable">
-                  <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%"
-                            @keyup.enter.native="handleLogin">
-                    <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon"/>
-                  </el-input>
-                  <div class="login-code">
-                    <img :src="codeUrl" @click="getCode" class="login-code-img"/>
-                  </div>
-                </el-form-item>
                 <el-checkbox v-model="loginForm.rememberMe" style="margin:0 0 25px 0;">记住密码</el-checkbox>
               </div>
 
@@ -76,7 +67,7 @@
               <!-- 下方的登录按钮 -->
               <el-form-item style="width:100%;">
                 <el-button :loading="loading" size="medium" type="primary" style="width:100%;"
-                    @click.native.prevent="handleLogin">
+                    @click.native.prevent="getCode">
                   <span v-if="!loading">登 录</span>
                   <span v-else>登 录 中...</span>
                 </el-button>
@@ -96,6 +87,12 @@
         </div>
       </div>
     </div>
+    <Verify
+      ref="verify"
+      :captcha-type="'blockPuzzle'"
+      :img-size="{width:'400px',height:'200px'}"
+      @success="handleLogin"
+    />
     <!-- footer -->
     <div class="footer">
       Copyright © 2020-2022 iocoder.cn All Rights Reserved.
@@ -104,7 +101,7 @@
 </template>
 
 <script>
-import {getCodeImg, sendSmsCode, socialAuthRedirect} from "@/api/login";
+import {sendSmsCode, socialAuthRedirect} from "@/api/login";
 import {getTenantIdByName} from "@/api/system/tenant";
 import {SystemUserSocialTypeEnum} from "@/utils/constants";
 import {getTenantEnable} from "@/utils/ruoyi";
@@ -118,8 +115,13 @@ import {
   setUsername
 } from "@/utils/auth";
 
+import Verify from '@/components/Verifition/Verify';
+
 export default {
   name: "Login",
+  components: {
+    Verify
+  },
   data() {
     return {
       codeUrl: "",
@@ -133,8 +135,6 @@ export default {
         mobile: "",
         mobileCode: "",
         rememberMe: false,
-        code: "",
-        uuid: "",
         tenantName: "芋道源码",
       },
       scene: 21,
@@ -146,7 +146,6 @@ export default {
         password: [
           {required: true, trigger: "blur", message: "密码不能为空"}
         ],
-        code: [{required: true, trigger: "change", message: "验证码不能为空"}],
         mobile: [
           {required: true, trigger: "blur", message: "手机号不能为空"},
           {
@@ -185,20 +184,11 @@ export default {
       SysUserSocialTypeEnum: SystemUserSocialTypeEnum,
     };
   },
-  // watch: {
-  //   $route: {
-  //     handler: function(route) {
-  //       this.redirect = route.query && route.query.redirect;
-  //     },
-  //     immediate: true
-  //   }
-  // },
   created() {
     // 租户开关
     this.tenantEnable = getTenantEnable();
     // 重定向地址
     this.redirect = this.$route.query.redirect;
-    this.getCode();
     this.getCookie();
   },
   methods: {
@@ -207,15 +197,8 @@ export default {
       if (!this.captchaEnable) {
         return;
       }
-      // 请求远程，获得验证码
-      getCodeImg().then(res => {
-        res = res.data;
-        this.captchaEnable = res.enable;
-        if (this.captchaEnable) {
-          this.codeUrl = "data:image/gif;base64," + res.img;
-          this.loginForm.uuid = res.uuid;
-        }
-      });
+      // 弹出验证码
+      this.$refs.verify.show()
     },
     getCookie() {
       const username = getUsername();
@@ -253,7 +236,6 @@ export default {
             });
           }).catch(() => {
             this.loading = false;
-            this.getCode();
           });
         }
       });