修改登录验证码开关

ZR.Vue/src/views/login.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="login">
     <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
-      <h3 class="title">{{title}}</h3>
+      <h3 class="title">{{ title }}</h3>
       <el-form-item prop="username">
         <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
           <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
@@ -13,27 +13,34 @@
         </el-input>
       </el-form-item>
       <el-form-item prop="code" v-if="showCaptcha != 'off'">
-        <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter.native="handleLogin" ref="codeTxt">
+        <el-input
+          v-model="loginForm.code"
+          auto-complete="off"
+          placeholder="验证码"
+          style="width: 63%"
+          @keyup.enter.native="handleLogin"
+          ref="codeTxt"
+        >
           <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:0px 0px 25px 0px;">记住密码</el-checkbox>
+      <el-checkbox v-model="loginForm.rememberMe" style="margin: 0px 0px 25px 0px">记住密码</el-checkbox>
-      <el-form-item style="width:100%;">
+      <el-form-item style="width: 100%">
-        <el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
+        <el-button :loading="loading" size="medium" type="primary" style="width: 100%" @click.native.prevent="handleLogin">
           <span v-if="!loading">登 录</span>
           <span v-else>登 录 中...</span>
         </el-button>
-        <div style="float: right;">
+        <div style="float: right">
           <router-link class="link-type" :to="'/register'">还没有账号？立即注册</router-link>
         </div>
       </el-form-item>
     </el-form>
     <!--  底部  -->
     <div class="el-login-footer">
-      <span>{{copyRight}}</span>
+      <span>{{ copyRight }}</span>
     </div>
   </div>
 </template>
@@ -54,42 +61,38 @@ export default {
         password: '',
         rememberMe: false,
         code: '',
-        uuid: ''
+        uuid: '',
       },
       title: defaultSettings.title,
       loginRules: {
-        username: [
+        username: [{ required: true, trigger: 'blur', message: '用户名不能为空' }],
-          { required: true, trigger: 'blur', message: '用户名不能为空' }
+        password: [{ required: true, trigger: 'blur', message: '密码不能为空' }],
-        ],
+        code: [{ required: true, trigger: 'change', message: '验证码不能为空' }],
-        password: [
-          { required: true, trigger: 'blur', message: '密码不能为空' }
-        ],
-        code: [{ required: true, trigger: 'change', message: '验证码不能为空' }]
       },
       showCaptcha: '',
       loading: false,
-      redirect: undefined
+      redirect: undefined,
     }
   },
   computed: {
-    copyRight: function() {
+    copyRight: function () {
       return defaultSettings.copyRight
-    }
+    },
   },
   watch: {
     $route: {
-      handler: function(route) {
+      handler: function (route) {
         this.redirect = route.query && route.query.redirect
       },
-      immediate: true
+      immediate: true,
-    }
+    },
   },
   created() {
     this.getCode()
     this.getCookie()
-    this.getConfigKey('sys.account.captchaOnOff').then((response) => {
+    // this.getConfigKey('sys.account.captchaOnOff').then((response) => {
-      this.showCaptcha = response.data
+    //   this.showCaptcha = response.data
-    })
+    // })
   },
   methods: {
     getCode() {
@@ -97,6 +100,7 @@ export default {
       getCodeImg().then((res) => {
         this.codeUrl = 'data:image/gif;base64,' + res.data.img
         this.loginForm.uuid = res.data.uuid
+        this.showCaptcha = res.data.captchaOff
         this.$forceUpdate()
       })
     },
@@ -108,7 +112,7 @@ export default {
       this.loginForm = {
         username: username === undefined ? this.loginForm.username : username,
         password: password === undefined ? this.loginForm.password : password,
-        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
+        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
       }
     },
     handleLogin() {
@@ -118,10 +122,10 @@ export default {
           if (this.loginForm.rememberMe) {
             Cookies.set('username', this.loginForm.username, { expires: 30 })
             Cookies.set('password', this.loginForm.password, {
-              expires: 30
+              expires: 30,
             })
             Cookies.set('rememberMe', this.loginForm.rememberMe, {
-              expires: 30
+              expires: 30,
             })
           } else {
             Cookies.remove('username')
@@ -135,7 +139,7 @@ export default {
               this.$router.push({ path: this.redirect || '/' })
             })
             .catch((error) => {
-							this.msgError(error.msg);
+              this.msgError(error.msg)
               this.loading = false
               this.getCode()
               this.$refs.codeTxt.focus()
@@ -144,8 +148,8 @@ export default {
           console.log('未完成')
         }
       })
-    }
+    },
-  }
+  },
 }
 </script>
 
@@ -155,7 +159,7 @@ export default {
   justify-content: center;
   align-items: center;
   height: 100%;
-  background-image: url("../assets/image/login-background.jpg");
+  background-image: url('../assets/image/login-background.jpg');
   background-size: cover;
   // background-color: rgba(56, 157, 170, 0.82);
 }