From c192f834c4e092bc7c0f2722c343c25c1be619ab Mon Sep 17 00:00:00 2001
From: shikeying <pxzsky@163.com>
Date: 星期五, 07 四月 2023 17:32:33 +0800
Subject: [PATCH] 添加部分组件，添加拼图验证（未完成）
---
src/views/user/login.vue | 137 ++++++++++++++++++++++++++++++---------------
1 files changed, 90 insertions(+), 47 deletions(-)
diff --git a/src/views/user/login.vue b/src/views/user/login.vue
index a093b95..aa875b7 100644
--- a/src/views/user/login.vue
+++ b/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;
- }
- // 鏈夋病鏈夐獙璇佺爜锛岄兘闇�瑕乽uid浣滀负鍞竴鏍囪瘑锛�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;
+ }
+ // 鏈夋病鏈夐獙璇佺爜锛岄兘闇�瑕乽uid浣滀负鍞竴鏍囪瘑锛�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'){
+ // 涓嶉渶瑕侀獙璇佺爜锛屼絾浠嶉渶瑕佽姹傛帴鍙ｈ幏鍙杣uid
+ 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){
+ // 鎷煎浘楠岃瘉鐮佹椂锛岃皟鐢ㄦ柟浼氫紶鍏ode锛堢敤鎴烽獙璇佺爜浣嶇疆锛夛紝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();
+ }
});
}
});
--
Gitblit v1.9.1