添加部分组件，添加拼图验证（未完成）

shikeying

2023-04-07 c192f834c4e092bc7c0f2722c343c25c1be619ab

 src/views/user/login.vue

@@ -23,20 +23,28 @@
          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
        </el-input>
      </el-form-item>
      <el-form-item>
<!--        <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 v-if="loginForm.verifyType==='code' && captchaEnabled">
          <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-form-item v-if="loginForm.verifyType==='slide'">
        <drag-verify @success="verifyTrue" ref="verify"/>
      </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>
      </el-form-item>
      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
      <el-form-item style="width:100%;">
@@ -63,23 +71,31 @@
</template>

<script>
import dragVerify from './dragVerify/index.vue'// 滑动验证组件
import Cookies from "js-cookie";
import { encrypt, decrypt } from '@/utils/jsencrypt'
  import {getCodeImg, getCodeNone} from "@/api/login";
  import dragVerify from './dragVerify/index.vue' // 滑动验证组件
  import jigsawVerify from '@/views/components/verify'  // 拼图验证组件，2023-04-06
  import Cookies from "js-cookie";
  // import {encrypt} from '@/utils/jsencrypt'

export default {
  export default {
  components: {
    'drag-verify': dragVerify
    'drag-verify': dragVerify,
    'jigsaw-verify': jigsawVerify
  },
  data() {
    return {
      verify:false,
      verify:false,  // 滑动校验
      codeUrl: "",
      left: null,    // 拼图验证码位置
      top: null,     // 拼图验证码位置
      loginForm: {
        username: "supervisor",
        password: "123456",
        rememberMe: false,
        uuid: ""
        username: 'supervisor',
        password: '123456',
        code:'',
        uuid: '',
        loginType: 'user_pass',  // 用户名、密码方式登录
        verifyType: 'jigsaw'//  'code': 验证码  'slide':滑块  'jigsaw':拼图
        // rememberMe: false,
      },
      loginRules: {
        username: [
@@ -107,43 +123,68 @@
    }
  },
  created() {
    // this.getCode();
    // if(this.loginForm.verifyType==='code'){
    // }
    this.getCode();
    this.getCookie();
  },
  methods: {
    verifyTrue () {
      this.verify = true
    },
    verifyFalse() {
      this.verify = false
    },
    getCode() {
      getCodeImg().then(res => {
        // console.log(res);
        // this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
        this.captchaEnabled = res.data.captchaEnabled === undefined ? true : res.data.captchaEnabled;
        console.log("captchaEnabled = " + this.captchaEnabled);
        if (this.captchaEnabled) {
          // this.codeUrl = "data:image/gif;base64," + res.img;
          this.codeUrl = "data:image/jpeg;base64," + res.data.img;
          // this.loginForm.uuid = res.uuid;
        }
        // 有没有验证码，都需要uuid作为唯一标识，2022-12-01
        this.loginForm.uuid = res.data.uuid;
      if(this.loginForm.verifyType==='code'){
        getCodeImg().then(res => {
          // console.log(res);
          // this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
          this.captchaEnabled = res.data.captchaEnabled === undefined ? true : res.data.captchaEnabled;
          console.log("captchaEnabled = " + this.captchaEnabled);
          if (this.captchaEnabled) {
            // this.codeUrl = "data:image/gif;base64," + res.img;
            this.codeUrl = "data:image/jpeg;base64," + res.data.img;
            // this.loginForm.uuid = res.uuid;
          }
          // 有没有验证码，都需要uuid作为唯一标识，2022-12-01
          this.loginForm.uuid = res.data.uuid;

      }).catch(err=>{console.log(err);});
        }).catch(err=>{console.log(err);});

      } else if(this.loginForm.verifyType==='jigsaw'){
        // 拼图方式，看需要啥参数，暂未实现
        console.log('jigsaw...');
        this.loginForm.code = 'jigsaw'; // 填充code默认值，否则验证不通过。2023-04-06

      } else if(this.loginForm.verifyType==='slide' || this.loginForm.verifyType==='sms'){
        // 不需要验证码，但仍需要请求接口获取uuid
        getCodeNone().then(res => {
          this.loginForm.uuid = res.data.uuid;
        }).catch(err=>{console.error(err);});

      } else {
        this.$message.error('不支持的验证码类型:' + this.loginForm.verifyType);
      }
    },
    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),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
      };
      this.loginForm.username = username === undefined ? this.loginForm.username : username
      this.loginForm.password = password === undefined ? this.loginForm.password : password
      this.loginForm.rememberMe = rememberMe === undefined ? this.loginForm.rememberMe : rememberMe
    },
    handleLogin() {
    handleLogin(param) {
      // console.log(param);
      if(param != null){
        // 拼图验证码时，调用方会传入code（用户验证码位置），uuid
        this.loginForm.code = param.x;
        this.loginForm.uuid = param.uuid;
      }
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          if (!this.verify) {
          if (this.loginForm.verifyType==='slide' && !this.verify) {
            this.$message.error('请先完成验证')
            this.loading = false
            return
@@ -158,13 +199,15 @@
            Cookies.remove("password");
            Cookies.remove('rememberMe');
          }
          // console.log(this.loginForm);
          // console.log("-----------------------------");
          this.$store.dispatch("Login", this.loginForm).then(() => {
            this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
          }).catch(() => {
            this.loading = false;
            // if (this.captchaEnabled) {
            //   this.getCode();
            // }
            if (this.captchaEnabled && this.loginForm.verifyType==='code') {
              this.getCode();
            }
          });
        }
      });