登录页面 滑块验证生效

src/views/myLogin.vue

@@ -13,7 +13,7 @@
     >
       <el-card class="box-card">
         <div style="text-align: center; margin-top: 10px">
-          <img alt="element-logo" src="@/assets/logo/logo.png"/>
+          <img alt="element-logo" src="@/assets/logo/logo.png" />
         </div>
         <h3 class="title">用户登录</h3>
         <el-form-item prop="username" class="item" style="margin-top: -20px">
@@ -24,7 +24,7 @@
             v-model="loginForm.username"
           >
             <i slot="prefix" class="el-input__icon">
-              <icon-svg icon-class="user"/>
+              <icon-svg icon-class="user" />
             </i>
           </el-input>
         </el-form-item>
@@ -38,20 +38,31 @@
             autocomplete="on"
           >
             <i slot="prefix" class="el-input__icon">
-              <icon-svg icon-class="pwd"/>
+              <icon-svg icon-class="pwd" />
             </i>
             <i
               slot="suffix"
               class="el-input__icon"
               @click="isShowPwd = !isShowPwd"
             >
-              <icon-svg icon-class="eye"/>
+              <icon-svg icon-class="eye" />
             </i>
           </el-input>
         </el-form-item>
-        <el-form-item prop="verificationCode" class="item" style="background-color: white">
-          <Verify ref="checkV" :showButton="false" :barSize="{width:'305px',height:'37px'}" :vOffset="5"
-                  @success="verifyAlert('success')" @error="verifyAlert('error')" :type="3"></Verify>
+        <el-form-item
+          prop="verificationCode"
+          class="item"
+          style="background-color: white"
+        >
+          <Verify
+            ref="checkV"
+            :showButton="false"
+            :barSize="{ width: '305px', height: '37px' }"
+            :vOffset="5"
+            @success="verifyAlert('success')"
+            @error="verifyAlert('error')"
+            :type="3"
+          ></Verify>
         </el-form-item>
         <div style="text-align: center; margin-top: 15px">
           <el-button
@@ -62,29 +73,29 @@
             >登录
           </el-button>
         </div>
-
       </el-card>
     </el-form>
 
-    <div style="
+    <div
+      style="
         position: absolute;
         bottom: 0;
         left: 50%;
         transform: translate(-50%, -50%);
         font-size: 12px;
         color: white;
-        ">
+      "
+    >
       开发单位：厦门高立新鹏软件科技有限公司 技术支持：13459286066
     </div>
-
   </div>
 </template>
 
 <script>
-import Verify from 'vue2-verify'
+import Verify from "vue2-verify";
 import axios from "axios";
 import Cookies from "js-cookie";
-import {decrypt, encrypt} from "@/utils/jsencrypt";
+import { decrypt, encrypt } from "@/utils/jsencrypt";
 
 export default {
   data() {
@@ -100,21 +111,21 @@ export default {
         userName: "",
         pwd: "",
         checked: true,
-        verificationCode: false
+        verificationCode: false,
       },
       loginForm: {
         username: "",
         password: "",
         rememberMe: false,
-        verificationCode:false,
+        verificationCode: false,
         code: "",
-        uuid: ""
+        uuid: "",
       },
       rules: {
         userName: [
-          {required: true, message: "请输入登录名", trigger: "blur"},
+          { required: true, message: "请输入登录名", trigger: "blur" },
         ],
-        pwd: [{validator: validatePwd, trigger: "blur"}],
+        pwd: [{ validator: validatePwd, trigger: "blur" }],
       },
       isShowPwd: false, // 是否显示密码
       loading: false, // 登录loading
@@ -125,7 +136,7 @@ export default {
   },
   methods: {
     verifyAlert(text) {
-      if (text === 'success') {
+      if (text === "success") {
         this.loginForm.verificationCode = true;
       }
     },
@@ -174,46 +185,59 @@ export default {
     //   });
     // },
 
-
     getCookie() {
       const username = Cookies.get("username");
       const password = Cookies.get("password");
       // const rememberMe = Cookies.get('rememberMe')
       this.loginForm = {
         username: username === undefined ? this.loginForm.username : username,
-        password: password === undefined ? this.loginForm.password : decrypt(password),
+        password:
+          password === undefined ? this.loginForm.password : decrypt(password),
         // rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
       };
     },
     handleLogin() {
-      this.$refs.ruleForm.validate(valid => {
+      this.$refs.ruleForm.validate((valid) => {
         if (valid) {
+          if (this.loginForm.verificationCode) {
             this.loading = true;
             if (this.loginForm.rememberMe) {
-            Cookies.set("username", this.loginForm.username, {expires: 30});
-            Cookies.set("password", encrypt(this.loginForm.password), {expires: 30});
+              Cookies.set("username", this.loginForm.username, { expires: 30 });
+              Cookies.set("password", encrypt(this.loginForm.password), {
+                expires: 30,
+              });
               // Cookies.set('rememberMe', this.loginForm.rememberMe, {expires: 30});
             } else {
               Cookies.remove("username");
               Cookies.remove("password");
               // Cookies.remove('rememberMe');
             }
-          this.$store.dispatch("Login", this.loginForm).then((res) => {
-            this.$router.push({path: this.redirect || "/"}).catch((res) => {
-            });
-          }).catch((res) => {
+            this.$store
+              .dispatch("Login", this.loginForm)
+              .then((res) => {
+                this.$router
+                  .push({ path: this.redirect || "/" })
+                  .catch((res) => {});
+              })
+              .catch((res) => {
                 this.loading = false;
                 this.$message.error(res);
                 if (this.captchaEnabled) {
                   this.getCode();
                 }
               });
-        }
+          } else {
+            this.$message({
+              message: "请向右滑动完成验证",
+              type: "warning",
             });
           }
+        }
+      });
+    },
   },
   components: {
-    Verify
+    Verify,
   },
   created() {
     // 将参数拷贝进查询对象
@@ -223,14 +247,12 @@ export default {
       this.redirect = decodeURIComponent(query.redirect);
     }
 
-    axios.get("./config.json").then(res => {
+    axios.get("./config.json").then((res) => {
       this.hospName = res.data.hosp_name;
     });
 
     this.getCookie();
-
-
-  }
+  },
 };
 </script>
 
@@ -241,16 +263,19 @@ $bg: #2d3a4b;
 $dark_gray: #889aa4;
 $light_gray: #eee;
 .login-container {
-
   @include relative;
   background-color: white;
   background-image: url("../assets/login.jpg");
   background-size: 100vw 100vh;
   height: 100%;
+  overflow: hidden;
 
-  input:-webkit-autofill {
-    -webkit-box-shadow: 0 0 0 1000px #293444 inset !important;
-    -webkit-text-fill-color: #fff !important;
+  input:-webkit-autofill,
+  input:-webkit-autofill:hover,
+  input:-webkit-autofill:focus,
+  input:-webkit-autofill:active {
+    -webkit-transition-delay: 99999s;
+    -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
   }
 
   .item {
@@ -303,11 +328,10 @@ $light_gray: #eee;
     margin-bottom: 50px;
   }
 
-
   .toptitle {
     position: absolute;
     font-size: 55px;
-    color: #FFFFFF;
+    color: #ffffff;
     margin: 50px auto 0.5333rem 50px;
     text-align: center;
     font-weight: bold;