拼图滑块验证

china

2023-04-17 a951e53a3d35c67e9a97aca03558ab7721edcad3

拼图滑块验证

 src/views/user/login.vue

@@ -42,8 +42,8 @@
      </el-form-item>
      <el-form-item v-if="loginForm.verifyType==='jigsaw'">
<!--        <drag-verify @success="verifyTrue" ref="verify"/>-->
        <transition duration="1000" name="el-fade-in">
          <jigsaw-verify v-if="loginForm.verifyType==='jigsaw'" :left="left" :top="top" @hide="verifyFalse" @success="handleLogin" />
        <transition duration="1000" name="el-fade-in" v-if="verify">
          <jigsaw-verify v-if="loginForm.verifyType==='jigsaw'" :left="left" :top="top" @hide="verifyFalse" @success="jigsawLogin" />
        </transition>
      </el-form-item>
      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
@@ -86,8 +86,8 @@
    return {
      verify:false,  // 滑动校验
      codeUrl: "",
      left: null,    // 拼图验证码位置
      top: null,     // 拼图验证码位置
      left: '50%',    // 拼图验证码位置
      top: '220px',     // 拼图验证码位置
      loginForm: {
        username: 'supervisor',
        password: '123456',
@@ -177,12 +177,11 @@
    },
    handleLogin(param) {
      if(this.loginForm.verifyType==='jigsaw' && param != null){
        // console.log(param);
        // console.log("拼图提交参数");
        // 拼图验证码时，调用方会传入code（用户验证码位置），uuid
        this.loginForm.code = param.x;
        this.loginForm.uuid = param.uuid;
      }
        this.verify = true
      }else{
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          if (this.loginForm.verifyType==='slide' && !this.verify) {
@@ -213,6 +212,28 @@
        }
      });
    }
    },
    jigsawLogin(){
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          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('rememberMe', this.loginForm.rememberMe, { expires: 30 });
          } else {
            Cookies.remove("username");
            Cookies.remove("password");
            Cookies.remove('rememberMe');
          }
          this.$store.dispatch("Login", this.loginForm).then(() => {
            this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
          }).catch(() => {
            this.loading = false;
          });
        }
      });
    }
  }
};
</script>