Vue——拼图认证2

第一种拼图认证

安装vue-monoplasty-slide-verify

npm i vue-monoplasty-slide-verify

在main.js引入

import SlideVerify from 'vue-monoplasty-slide-verify';

Vue.use(SlideVerify);

第一种拼图组件

dragImg2.vue

<template>
  <div v-show="flag" class="testCode">
    <span>拼图认证2</span>
    <p class="closeBtn">
      <v-icon color="red" @click="flag = !flag"
        >mdi-close-circle-outline</v-icon
      >
    </p>
    <slide-verify
      :l="42"
      :r="20"
      :w="362"
      :h="140"
      slider-text="向右滑动"
      @success="onSuccess"
      @fail="onFail"
      @refresh="onRefresh"
      :style="{ width: '362px' }"
      class="slide-box"
      ref="slideBlock"
      v-show="flag"
    ></slide-verify>
  </div>
</template>

<script>
export default {
  name: "dragImg2",
  data() {
    return {
      flag: true
    };
  },
  methods: {
    // 拼图成功
    onSuccess() {
      this.getLogin(); //登录
      alert("拼图成功");
    },
    // 拼图失败
    onFail() {
      alert("拼图失败");
    },
    // 拼图刷新
    onRefresh() {
      alert("拼图刷新");
    },
    // 登录请求接口
    getLogin() {
      const loginData = {
        account: "",
        phone: this.ruleForm.userName,
        // Password: sha3.sha3_256(md5(this.ruleForm.password)), // 加密
        password: this.ruleForm.password,
        email: "",
        accountType: 2, // 登录类型手机号
        checkCode: ""
      };
      console.log("90909:", loginData);
      // 接口
      // userLogin(loginData)
      //   .then(res => {
      //     console.log(res);
      //   })
      //   .catch(res => {
      //     console.log(res);
      //   });
    },
    // 点击登录校验-拼图出现
    submitForm(formName) {
      // 表单校验
      this.$refs[formName].validate(valid => {
        // 验证通过
        if (valid) {
          // 拼图出现
          this.flag = true;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>

父组件

<template>
  <div>
    <dragImg2></dragImg2>
  </div>
</template>

<script>
import dragImg2 from "./comp/dragImg2";
export default {
  name: "DragVerifyImg",
  components: {
    dragImg2
  }
};
</script>