gitee/snowy
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

【修改】代码格式调整

Browse Source
This commit is contained in:
俞宝山 2021-01-22 00:38:54 +08:00
parent 1cf5299538
commit ae368dc117
11 changed files with 454 additions and 392 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
_web/src/api/modular/system/loginManage.js
View File

@ -76,11 +76,11 @@ export function getSmsCaptcha (parameter) {
}) })
} }
/** /**
* 获取验证码开关 * 获取验证码开关
*
* @author Jax * @author Jax
* @param parameter * @date 2021/1/22 00:00
*/ */
export function getCaptchaOpen (parameter) { export function getCaptchaOpen (parameter) {
return axios({ return axios({

60
_web/src/components/verifition/Verify.vue
View File

@ -3,25 +3,26 @@
<div :class="mode=='pop'?'verifybox':''" :style="{'max-width':parseInt(imgSize.width)+30+'px'}"> <div :class="mode=='pop'?'verifybox':''" :style="{'max-width':parseInt(imgSize.width)+30+'px'}">
<div class="verifybox-top" v-if="mode=='pop'"> <div class="verifybox-top" v-if="mode=='pop'">
请完成安全验证 请完成安全验证
<span class="verifybox-close" @click="closeBox"> <span @click="closeBox" class="verifybox-close">
<i class="iconfont icon-close"></i> <i class="iconfont icon-close"></i>
</span> </span>
</div> </div>
<div class="verifybox-bottom" :style="{padding:mode=='pop'?'15px':'0'}"> <div :style="{padding:mode=='pop'?'15px':'0'}" class="verifybox-bottom">
<!-- 验证码容器 --> <!-- 验证码容器 -->
<components v-if="componentType" <components
:is="componentType"
:captchaType="captchaType"
:type="verifyType"
:figure="figure"
:arith="arith" :arith="arith"
:mode="mode"
:vSpace="vSpace"
:explain="explain"
:imgSize="imgSize"
:blockSize="blockSize"
:barSize="barSize" :barSize="barSize"
ref="instance"></components> :blockSize="blockSize"
:captchaType="captchaType"
:explain="explain"
:figure="figure"
:imgSize="imgSize"
:is="componentType"
:mode="mode"
:type="verifyType"
:vSpace="vSpace"
ref="instance"
v-if="componentType"></components>
</div> </div>
</div> </div>
</div> </div>
@ -44,10 +45,10 @@
default() { default() {
// 默认语言不输入为浏览器语言 // 默认语言不输入为浏览器语言
if (navigator.language) { if (navigator.language) {
var language = navigator.language; var language = navigator.language
} } else {
else { // eslint-disable-next-line no-redeclare
var language = navigator.browserLanguage; var language = navigator.browserLanguage
} }
return language return language
} }
@ -56,9 +57,11 @@
type: String, type: String,
required: true required: true
}, },
// eslint-disable-next-line vue/require-default-prop
figure: { figure: {
type: Number type: Number
}, },
// eslint-disable-next-line vue/require-default-prop
arith: { arith: {
type: Number type: Number
}, },
@ -66,9 +69,11 @@
type: String, type: String,
default: 'pop' default: 'pop'
}, },
// eslint-disable-next-line vue/require-default-prop
vSpace: { vSpace: {
type: Number type: Number
}, },
// eslint-disable-next-line vue/require-default-prop
explain: { explain: {
type: String type: String
}, },
@ -81,12 +86,14 @@
} }
} }
}, },
// eslint-disable-next-line vue/require-default-prop
blockSize: { blockSize: {
type: Object type: Object
}, },
// eslint-disable-next-line vue/require-default-prop
barSize: { barSize: {
type: Object type: Object
}, }
}, },
data() { data() {
return { return {
@ -110,7 +117,7 @@
return this.$t(text) return this.$t(text)
} else { } else {
// 兼容不存在的语言 // 兼容不存在的语言
let i18n = this.$options.i18n.messages[this.locale] || this.$options.i18n.messages['en-US'] const i18n = this.$options.i18n.messages[this.locale] || this.$options.i18n.messages['en-US']
return i18n[text] return i18n[text]
} }
}, },
@ -125,11 +132,12 @@
}, },
closeBox() { closeBox() {
this.clickShow = false this.clickShow = false
this.refresh(); this.refresh()
}, },
show() { show() {
if (this.mode=="pop") { // eslint-disable-next-line eqeqeq
this.clickShow = true; if (this.mode == 'pop') {
this.clickShow = true
} }
} }
}, },
@ -138,10 +146,11 @@
return this.$refs.instance || {} return this.$refs.instance || {}
}, },
showBox() { showBox() {
// eslint-disable-next-line eqeqeq
if (this.mode == 'pop') { if (this.mode == 'pop') {
return this.clickShow return this.clickShow
} else { } else {
return true; return true
} }
} }
}, },
@ -160,12 +169,12 @@
break break
} }
} }
}, }
}, },
components: { components: {
VerifySlide, VerifySlide,
VerifyPoints VerifyPoints
}, }
} }
</script> </script>
<style> <style>
@ -288,7 +297,6 @@
margin-top: 10px; margin-top: 10px;
} }
/*滑动验证码*/ /*滑动验证码*/
.verify-bar-area { .verify-bar-area {
position: relative; position: relative;

90
_web/src/components/verifition/Verify/VerifyPoints.vue
View File

@ -1,21 +1,28 @@
/* eslint-disable no-unused-vars */
<template> <template>
<div style="position: relative" <div
style="position: relative"
> >
<div class="verify-img-out"> <div class="verify-img-out">
<div class="verify-img-panel" :style="{'width': setSize.imgWidth, <div
:style="{'width': setSize.imgWidth,
'height': setSize.imgHeight, 'height': setSize.imgHeight,
'background-size' : setSize.imgWidth + ' '+ setSize.imgHeight, 'background-size' : setSize.imgWidth + ' '+ setSize.imgHeight,
'margin-bottom': vSpace + 'px'}" 'margin-bottom': vSpace + 'px'}"
class="verify-img-panel"
> >
<div class="verify-refresh" style="z-index:3" @click="refresh" v-show="showRefresh"> <div @click="refresh" class="verify-refresh" style="z-index:3" v-show="showRefresh">
<i class="iconfont icon-refresh"></i> <i class="iconfont icon-refresh"></i>
</div> </div>
<img :src="'data:image/png;base64,'+pointBackImgBase" <img
:src="'data:image/png;base64,'+pointBackImgBase"
@click="bindingClick?canvasClick($event):undefined"
alt=""
ref="canvas" ref="canvas"
alt="" style="width:100%;height:100%;display:block" style="width:100%;height:100%;display:block">
@click="bindingClick?canvasClick($event):undefined">
<div v-for="(tempPoint, index) in tempPoints" :key="index" class="point-area" <div
:key="index"
:style="{ :style="{
'background-color':'#1abd6c', 'background-color':'#1abd6c',
color:'#fff', color:'#fff',
@ -28,17 +35,20 @@
position:'absolute', position:'absolute',
top:parseInt(tempPoint.y-10) + 'px', top:parseInt(tempPoint.y-10) + 'px',
left:parseInt(tempPoint.x-10) + 'px' left:parseInt(tempPoint.x-10) + 'px'
}"> }"
class="point-area"
v-for="(tempPoint, index) in tempPoints">
{{ index + 1 }} {{ index + 1 }}
</div> </div>
</div> </div>
</div> </div>
<!-- 'height': this.barSize.height, --> <!-- 'height': this.barSize.height, -->
<div class="verify-bar-area" <div
:style="{'width': setSize.imgWidth, :style="{'width': setSize.imgWidth,
'color': this.barAreaColor, 'color': this.barAreaColor,
'border-color': this.barAreaBorderColor, 'border-color': this.barAreaBorderColor,
'line-height':this.barSize.height}"> 'line-height':this.barSize.height}"
class="verify-bar-area">
<span class="verify-msg">{{ text }}</span> <span class="verify-msg">{{ text }}</span>
</div> </div>
</div> </div>
@ -48,9 +58,10 @@
* VerifyPoints * VerifyPoints
* @description 点选 * @description 点选
* */ * */
import {resetSize, _code_chars, _code_color1, _code_color2} from './../utils/util' // _code_chars, _code_color1, _code_color2
import {aesEncrypt} from "./../utils/ase" import { resetSize } from './../utils/util'
import {reqGet,reqCheck} from "./../api/index" import { aesEncrypt } from './../utils/ase'
import { reqGet, reqCheck } from './../api/index'
export default { export default {
name: 'VerifyPoints', name: 'VerifyPoints',
@ -60,8 +71,9 @@
type: String, type: String,
default: 'fixed' default: 'fixed'
}, },
// eslint-disable-next-line vue/require-default-prop
captchaType: { captchaType: {
type:String, type: String
}, },
// 间隔 // 间隔
vSpace: { vSpace: {
@ -122,38 +134,41 @@
this.fontPos.splice(0, this.fontPos.length) this.fontPos.splice(0, this.fontPos.length)
this.checkPosArr.splice(0, this.checkPosArr.length) this.checkPosArr.splice(0, this.checkPosArr.length)
this.num = 1 this.num = 1
this.getPictrue(); this.getPictrue()
this.$nextTick(() => { this.$nextTick(() => {
this.setSize = this.resetSize(this) // 重新设置宽度高度 this.setSize = this.resetSize(this) // 重新设置宽度高度
this.$parent.$emit('ready', this) this.$parent.$emit('ready', this)
}) })
}, },
canvasClick(e) { canvasClick(e) {
this.checkPosArr.push(this.getMousePos(this.$refs.canvas, e)); this.checkPosArr.push(this.getMousePos(this.$refs.canvas, e))
// eslint-disable-next-line eqeqeq
if (this.num == this.checkNum) { if (this.num == this.checkNum) {
this.num = this.createPoint(this.getMousePos(this.$refs.canvas, e)); this.num = this.createPoint(this.getMousePos(this.$refs.canvas, e))
// 按比例转换坐标值 // 按比例转换坐标值
this.checkPosArr = this.pointTransfrom(this.checkPosArr,this.setSize); this.checkPosArr = this.pointTransfrom(this.checkPosArr, this.setSize)
// 等创建坐标执行完 // 等创建坐标执行完
setTimeout(() => { setTimeout(() => {
// var flag = this.comparePos(this.fontPos, this.checkPosArr); // var flag = this.comparePos(this.fontPos, this.checkPosArr);
// 发送后端请求 // 发送后端请求
var captchaVerification = this.secretKey ? aesEncrypt(this.backToken + '---' + JSON.stringify(this.checkPosArr), this.secretKey) : this.backToken + '---' + JSON.stringify(this.checkPosArr) var captchaVerification = this.secretKey ? aesEncrypt(this.backToken + '---' + JSON.stringify(this.checkPosArr), this.secretKey) : this.backToken + '---' + JSON.stringify(this.checkPosArr)
let data = { const data = {
captchaType: this.captchaType, captchaType: this.captchaType,
"pointJson":this.secretKey? aesEncrypt(JSON.stringify(this.checkPosArr),this.secretKey):JSON.stringify(this.checkPosArr), 'pointJson': this.secretKey ? aesEncrypt(JSON.stringify(this.checkPosArr), this.secretKey) : JSON.stringify(this.checkPosArr),
"token":this.backToken 'token': this.backToken
} }
reqCheck(data).then(res => { reqCheck(data).then(res => {
if (res.repCode == "0000") { // eslint-disable-next-line eqeqeq
if (res.repCode == '0000') {
this.barAreaColor = '#4cae4c' this.barAreaColor = '#4cae4c'
this.barAreaBorderColor = '#5cb85c' this.barAreaBorderColor = '#5cb85c'
this.text = '验证成功' this.text = '验证成功'
this.bindingClick = false this.bindingClick = false
// eslint-disable-next-line eqeqeq
if (this.mode == 'pop') { if (this.mode == 'pop') {
setTimeout(() => { setTimeout(() => {
this.$parent.clickShow = false; this.$parent.clickShow = false
this.refresh(); this.refresh()
}, 1500) }, 1500)
} }
this.$parent.$emit('success', { captchaVerification }) this.$parent.$emit('success', { captchaVerification })
@ -163,14 +178,14 @@
this.barAreaBorderColor = '#d9534f' this.barAreaBorderColor = '#d9534f'
this.text = '验证失败' this.text = '验证失败'
setTimeout(() => { setTimeout(() => {
this.refresh(); this.refresh()
}, 700); }, 700)
} }
}) })
}, 400); }, 400)
} }
if (this.num < this.checkNum) { if (this.num < this.checkNum) {
this.num = this.createPoint(this.getMousePos(this.$refs.canvas, e)); this.num = this.createPoint(this.getMousePos(this.$refs.canvas, e))
} }
}, },
@ -183,7 +198,7 @@
// 创建坐标点 // 创建坐标点
createPoint: function (pos) { createPoint: function (pos) {
this.tempPoints.push(Object.assign({}, pos)) this.tempPoints.push(Object.assign({}, pos))
return ++this.num; return ++this.num
}, },
refresh: function () { refresh: function () {
this.tempPoints.splice(0, this.tempPoints.length) this.tempPoints.splice(0, this.tempPoints.length)
@ -193,33 +208,34 @@
this.fontPos.splice(0, this.fontPos.length) this.fontPos.splice(0, this.fontPos.length)
this.checkPosArr.splice(0, this.checkPosArr.length) this.checkPosArr.splice(0, this.checkPosArr.length)
this.num = 1 this.num = 1
this.getPictrue(); this.getPictrue()
this.text = '验证失败' this.text = '验证失败'
this.showRefresh = true this.showRefresh = true
}, },
// 请求背景图片和验证图片 // 请求背景图片和验证图片
getPictrue() { getPictrue() {
let data = { const data = {
captchaType: this.captchaType captchaType: this.captchaType
} }
reqGet(data).then(res => { reqGet(data).then(res => {
if (res.repCode == "0000") { // eslint-disable-next-line eqeqeq
if (res.repCode == '0000') {
this.pointBackImgBase = res.repData.originalImageBase64 this.pointBackImgBase = res.repData.originalImageBase64
this.backToken = res.repData.token this.backToken = res.repData.token
this.secretKey = res.repData.secretKey this.secretKey = res.repData.secretKey
this.poinTextList = res.repData.wordList this.poinTextList = res.repData.wordList
this.text = '请依次点击【' + this.poinTextList.join(",") + '】' this.text = '请依次点击【' + this.poinTextList.join(',') + '】'
} else { } else {
this.text = res.repMsg; this.text = res.repMsg
} }
}) })
}, },
// 坐标转换函数 // 坐标转换函数
pointTransfrom(pointArr, imgSize) { pointTransfrom(pointArr, imgSize) {
var newPointArr = pointArr.map(p => { var newPointArr = pointArr.map(p => {
let x = Math.round(310 * p.x/parseInt(imgSize.imgWidth)) const x = Math.round(310 * p.x / parseInt(imgSize.imgWidth))
let y =Math.round(155 * p.y/parseInt(imgSize.imgHeight)) const y = Math.round(155 * p.y / parseInt(imgSize.imgHeight))
return { x, y } return { x, y }
}) })
// console.log(newPointArr,"newPointArr"); // console.log(newPointArr,"newPointArr");
@ -240,6 +256,6 @@
this.$el.onselectstart = function () { this.$el.onselectstart = function () {
return false return false
} }
}, }
} }
</script> </script>

193
_web/src/components/verifition/Verify/VerifySlide.vue
View File

@ -1,38 +1,49 @@
<template> <template>
<div style="position: relative;"> <div style="position: relative;">
<div v-if="type === '2'" class="verify-img-out" <div
:style="{height: (parseInt(setSize.imgHeight) + vSpace) + 'px'}" :style="{height: (parseInt(setSize.imgHeight) + vSpace) + 'px'}"
class="verify-img-out"
v-if="type === '2'"
> >
<div class="verify-img-panel" :style="{width: setSize.imgWidth, <div
height: setSize.imgHeight,}"> :style="{width: setSize.imgWidth,
height: setSize.imgHeight,}"
class="verify-img-panel">
<img :src="'data:image/png;base64,'+backImgBase" alt="" style="width:100%;height:100%;display:block"> <img :src="'data:image/png;base64,'+backImgBase" alt="" style="width:100%;height:100%;display:block">
<div class="verify-refresh" @click="refresh" v-show="showRefresh"><i class="iconfont icon-refresh"></i> <div @click="refresh" class="verify-refresh" v-show="showRefresh"><i class="iconfont icon-refresh"></i>
</div> </div>
<transition name="tips"> <transition name="tips">
<span class="verify-tips" v-if="tipWords" :class="passFlag ?'suc-bg':'err-bg'">{{tipWords}}</span> <span :class="passFlag ?'suc-bg':'err-bg'" class="verify-tips" v-if="tipWords">{{ tipWords }}</span>
</transition> </transition>
</div> </div>
</div> </div>
<!-- 公共部分 --> <!-- 公共部分 -->
<div class="verify-bar-area" :style="{width: setSize.imgWidth, <div
:style="{width: setSize.imgWidth,
height: barSize.height, height: barSize.height,
'line-height':barSize.height}"> 'line-height':barSize.height}"
class="verify-bar-area">
<span class="verify-msg" v-text="text"></span> <span class="verify-msg" v-text="text"></span>
<div class="verify-left-bar" <div
:style="{width: (leftBarWidth!==undefined)?leftBarWidth: barSize.height, height: barSize.height, 'border-color': leftBarBorderColor, transaction: transitionWidth}"> :style="{width: (leftBarWidth!==undefined)?leftBarWidth: barSize.height, height: barSize.height, 'border-color': leftBarBorderColor, transaction: transitionWidth}"
class="verify-left-bar">
<span class="verify-msg" v-text="finishText"></span> <span class="verify-msg" v-text="finishText"></span>
<div class="verify-move-block" <div
@touchstart="start" :style="{width: barSize.height, height: barSize.height, 'background-color': moveBlockBackgroundColor, left: moveBlockLeft, transition: transitionLeft}"
@mousedown="start" @mousedown="start"
:style="{width: barSize.height, height: barSize.height, 'background-color': moveBlockBackgroundColor, left: moveBlockLeft, transition: transitionLeft}"> @touchstart="start"
<i :class="['verify-icon iconfont', iconClass]" class="verify-move-block">
<i
:class="['verify-icon iconfont', iconClass]"
:style="{color: iconColor}"></i> :style="{color: iconColor}"></i>
<div v-if="type === '2'" class="verify-sub-block" <div
:style="{'width':Math.floor(parseInt(setSize.imgWidth)*47/310)+ 'px', :style="{'width':Math.floor(parseInt(setSize.imgWidth)*47/310)+ 'px',
'height': setSize.imgHeight, 'height': setSize.imgHeight,
'top':'-' + (parseInt(setSize.imgHeight) + vSpace) + 'px', 'top':'-' + (parseInt(setSize.imgHeight) + vSpace) + 'px',
'background-size': setSize.imgWidth + ' ' + setSize.imgHeight, 'background-size': setSize.imgWidth + ' ' + setSize.imgHeight,
}"> }"
class="verify-sub-block"
v-if="type === '2'">
<img :src="'data:image/png;base64,'+blockBackImgBase" alt="" style="width:100%;height:100%;display:block"> <img :src="'data:image/png;base64,'+blockBackImgBase" alt="" style="width:100%;height:100%;display:block">
</div> </div>
</div> </div>
@ -45,16 +56,17 @@
* VerifySlide * VerifySlide
* @description 滑块 * @description 滑块
* */ * */
import {aesEncrypt} from "./../utils/ase" import { aesEncrypt } from './../utils/ase'
import { resetSize } from './../utils/util' import { resetSize } from './../utils/util'
import {reqGet,reqCheck} from "./../api/index" import { reqGet, reqCheck } from './../api/index'
// "captchaType":"blockPuzzle", // "captchaType":"blockPuzzle",
export default { export default {
name: 'VerifySlide', name: 'VerifySlide',
props: { props: {
// eslint-disable-next-line vue/require-default-prop
captchaType: { captchaType: {
type:String, type: String
}, },
type: { type: {
type: String, type: String,
@ -107,8 +119,8 @@
passFlag: '', // 是否通过的标识 passFlag: '', // 是否通过的标识
backImgBase: '', // 验证码背景图片 backImgBase: '', // 验证码背景图片
blockBackImgBase: '', // 验证滑块的背景图片 blockBackImgBase: '', // 验证滑块的背景图片
backToken:"", //后端返回的唯一token值 backToken: '', // 后端返回的唯一token值
startMoveTime:"", //移动开始的时间 startMoveTime: '', // 移动开始的时间
endMovetime: '', // 移动结束的时间 endMovetime: '', // 移动结束的时间
tipsBackColor: '', // 提示词的背景颜色 tipsBackColor: '', // 提示词的背景颜色
tipWords: '', tipWords: '',
@ -147,10 +159,10 @@
methods: { methods: {
init() { init() {
this.text = this.explain this.text = this.explain
this.getPictrue(); this.getPictrue()
this.$nextTick(() => { this.$nextTick(() => {
let setSize = this.resetSize(this) //重新设置宽度高度 const setSize = this.resetSize(this) // 重新设置宽度高度
for (let key in setSize) { for (const key in setSize) {
this.$set(this.setSize, key, setSize[key]) this.$set(this.setSize, key, setSize[key])
} }
this.$parent.$emit('ready', this) this.$parent.$emit('ready', this)
@ -158,112 +170,127 @@
var _this = this var _this = this
window.removeEventListener("touchmove", function (e) { window.removeEventListener('touchmove', function (e) {
_this.move(e); _this.move(e)
}); })
window.removeEventListener("mousemove", function (e) { window.removeEventListener('mousemove', function (e) {
_this.move(e); _this.move(e)
}); })
// 鼠标松开 // 鼠标松开
window.removeEventListener("touchend", function () { window.removeEventListener('touchend', function () {
_this.end(); _this.end()
}); })
window.removeEventListener("mouseup", function () { window.removeEventListener('mouseup', function () {
_this.end(); _this.end()
}); })
window.addEventListener("touchmove", function (e) { window.addEventListener('touchmove', function (e) {
_this.move(e); _this.move(e)
}); })
window.addEventListener("mousemove", function (e) { window.addEventListener('mousemove', function (e) {
_this.move(e); _this.move(e)
}); })
// 鼠标松开 // 鼠标松开
window.addEventListener("touchend", function () { window.addEventListener('touchend', function () {
_this.end(); _this.end()
}); })
window.addEventListener("mouseup", function () { window.addEventListener('mouseup', function () {
_this.end(); _this.end()
}); })
}, },
// 鼠标按下 // 鼠标按下
start: function (e) { start: function (e) {
e = e || window.event e = e || window.event
if (!e.touches) { // 兼容PC端 if (!e.touches) { // 兼容PC端
var x = e.clientX; var x = e.clientX
} else { // 兼容移动端 } else { // 兼容移动端
var x = e.touches[0].pageX; // eslint-disable-next-line no-redeclare
var x = e.touches[0].pageX
} }
this.startLeft =Math.floor(x - this.barArea.getBoundingClientRect().left); this.startLeft = Math.floor(x - this.barArea.getBoundingClientRect().left)
this.startMoveTime = +new Date(); //开始滑动的时间 this.startMoveTime = +new Date() // 开始滑动的时间
// eslint-disable-next-line eqeqeq
if (this.isEnd == false) { if (this.isEnd == false) {
this.text = '' this.text = ''
this.moveBlockBackgroundColor = '#337ab7' this.moveBlockBackgroundColor = '#337ab7'
this.leftBarBorderColor = '#337AB7' this.leftBarBorderColor = '#337AB7'
this.iconColor = '#fff' this.iconColor = '#fff'
e.stopPropagation(); e.stopPropagation()
this.status = true; this.status = true
} }
}, },
// 鼠标移动 // 鼠标移动
move: function (e) { move: function (e) {
e = e || window.event e = e || window.event
// eslint-disable-next-line eqeqeq
if (this.status && this.isEnd == false) { if (this.status && this.isEnd == false) {
if (!e.touches) { // 兼容PC端 if (!e.touches) { // 兼容PC端
var x = e.clientX; var x = e.clientX
} else { // 兼容移动端 } else { // 兼容移动端
var x = e.touches[0].pageX; // eslint-disable-next-line no-redeclare
var x = e.touches[0].pageX
} }
var bar_area_left = this.barArea.getBoundingClientRect().left; // eslint-disable-next-line camelcase
var bar_area_left = this.barArea.getBoundingClientRect().left
// eslint-disable-next-line camelcase
var move_block_left = x - bar_area_left // 小方块相对于父元素的left值 var move_block_left = x - bar_area_left // 小方块相对于父元素的left值
// eslint-disable-next-line camelcase
if (move_block_left >= this.barArea.offsetWidth - parseInt(parseInt(this.blockSize.width) / 2) - 2) { if (move_block_left >= this.barArea.offsetWidth - parseInt(parseInt(this.blockSize.width) / 2) - 2) {
move_block_left = this.barArea.offsetWidth - parseInt(parseInt(this.blockSize.width) / 2) - 2; // eslint-disable-next-line camelcase
move_block_left = this.barArea.offsetWidth - parseInt(parseInt(this.blockSize.width) / 2) - 2
} }
// eslint-disable-next-line camelcase
if (move_block_left <= 0) { if (move_block_left <= 0) {
move_block_left = parseInt(parseInt(this.blockSize.width) / 2); // eslint-disable-next-line camelcase
move_block_left = parseInt(parseInt(this.blockSize.width) / 2)
} }
// 拖动后小方块的left值 // 拖动后小方块的left值
this.moveBlockLeft = (move_block_left - this.startLeft) + "px" // eslint-disable-next-line camelcase
this.leftBarWidth = (move_block_left - this.startLeft) + "px" this.moveBlockLeft = (move_block_left - this.startLeft) + 'px'
// eslint-disable-next-line camelcase
this.leftBarWidth = (move_block_left - this.startLeft) + 'px'
} }
}, },
// 鼠标松开 // 鼠标松开
end: function () { end: function () {
this.endMovetime = +new Date(); this.endMovetime = +new Date()
var _this = this; var _this = this
// 判断是否重合 // 判断是否重合
// eslint-disable-next-line eqeqeq
if (this.status && this.isEnd == false) { if (this.status && this.isEnd == false) {
var moveLeftDistance = parseInt((this.moveBlockLeft || '').replace('px', '')); var moveLeftDistance = parseInt((this.moveBlockLeft || '').replace('px', ''))
moveLeftDistance = moveLeftDistance * 310 / parseInt(this.setSize.imgWidth) moveLeftDistance = moveLeftDistance * 310 / parseInt(this.setSize.imgWidth)
let data = { const data = {
captchaType: this.captchaType, captchaType: this.captchaType,
"pointJson":this.secretKey ? aesEncrypt(JSON.stringify({x:moveLeftDistance,y:5.0}),this.secretKey):JSON.stringify({x:moveLeftDistance,y:5.0}), 'pointJson': this.secretKey ? aesEncrypt(JSON.stringify({ x: moveLeftDistance, y: 5.0 }), this.secretKey) : JSON.stringify({ x: moveLeftDistance, y: 5.0 }),
"token":this.backToken 'token': this.backToken
} }
reqCheck(data).then(res => { reqCheck(data).then(res => {
if (res.repCode == "0000") { // eslint-disable-next-line eqeqeq
if (res.repCode == '0000') {
this.moveBlockBackgroundColor = '#5cb85c' this.moveBlockBackgroundColor = '#5cb85c'
this.leftBarBorderColor = '#5cb85c' this.leftBarBorderColor = '#5cb85c'
this.iconColor = '#fff' this.iconColor = '#fff'
this.iconClass = 'icon-check' this.iconClass = 'icon-check'
this.showRefresh = false this.showRefresh = false
this.isEnd = true; this.isEnd = true
// eslint-disable-next-line eqeqeq
if (this.mode == 'pop') { if (this.mode == 'pop') {
setTimeout(() => { setTimeout(() => {
this.$parent.clickShow = false; this.$parent.clickShow = false
this.refresh(); this.refresh()
}, 1500) }, 1500)
} }
this.passFlag = true this.passFlag = true
this.tipWords = `${((this.endMovetime - this.startMoveTime) / 1000).toFixed(2)}s验证成功` this.tipWords = `${((this.endMovetime - this.startMoveTime) / 1000).toFixed(2)}s验证成功`
var captchaVerification = this.secretKey ? aesEncrypt(this.backToken + '---' + JSON.stringify({ x: moveLeftDistance, y: 5.0 }), this.secretKey) : this.backToken + '---' + JSON.stringify({ x: moveLeftDistance, y: 5.0 }) var captchaVerification = this.secretKey ? aesEncrypt(this.backToken + '---' + JSON.stringify({ x: moveLeftDistance, y: 5.0 }), this.secretKey) : this.backToken + '---' + JSON.stringify({ x: moveLeftDistance, y: 5.0 })
setTimeout(() => { setTimeout(() => {
this.tipWords = "" this.tipWords = ''
this.$parent.closeBox(); this.$parent.closeBox()
this.$parent.$emit('success', { captchaVerification }) this.$parent.$emit('success', { captchaVerification })
}, 1000) }, 1000)
} else { } else {
@ -273,16 +300,16 @@
this.iconClass = 'icon-close' this.iconClass = 'icon-close'
this.passFlag = false this.passFlag = false
setTimeout(function () { setTimeout(function () {
_this.refresh(); _this.refresh()
}, 1000); }, 1000)
this.$parent.$emit('error', this) this.$parent.$emit('error', this)
this.tipWords = "验证失败" this.tipWords = '验证失败'
setTimeout(() => { setTimeout(() => {
this.tipWords = "" this.tipWords = ''
}, 1000) }, 1000)
} }
}) })
this.status = false; this.status = false
} }
}, },
@ -312,20 +339,21 @@
// 请求背景图片和验证图片 // 请求背景图片和验证图片
getPictrue() { getPictrue() {
let data = { const data = {
captchaType: this.captchaType captchaType: this.captchaType
} }
reqGet(data).then(res => { reqGet(data).then(res => {
if (res.repCode == "0000") { // eslint-disable-next-line eqeqeq
if (res.repCode == '0000') {
this.backImgBase = res.repData.originalImageBase64 this.backImgBase = res.repData.originalImageBase64
this.blockBackImgBase = res.repData.jigsawImageBase64 this.blockBackImgBase = res.repData.jigsawImageBase64
this.backToken = res.repData.token this.backToken = res.repData.token
this.secretKey = res.repData.secretKey this.secretKey = res.repData.secretKey
} else { } else {
this.tipWords = res.repMsg; this.tipWords = res.repMsg
} }
}) })
}, }
}, },
watch: { watch: {
// type变化则全面刷新 // type变化则全面刷新
@ -341,7 +369,6 @@
this.$el.onselectstart = function () { this.$el.onselectstart = function () {
return false return false
} }
}, }
} }
</script> </script>

12
_web/src/components/verifition/utils/ase.js
View File

@ -2,10 +2,10 @@ import CryptoJS from 'crypto-js'
/** /**
* @word 要加密的内容 * @word 要加密的内容
* @keyWord String 服务器随机返回的关键字 * @keyWord String 服务器随机返回的关键字
* */ */
export function aesEncrypt(word,keyWord="XwKsGlMcdPMEhR1B"){ export function aesEncrypt(word, keyWord = 'XwKsGlMcdPMEhR1B') {
var key = CryptoJS.enc.Utf8.parse(keyWord); var key = CryptoJS.enc.Utf8.parse(keyWord)
var srcs = CryptoJS.enc.Utf8.parse(word); var srcs = CryptoJS.enc.Utf8.parse(word)
var encrypted = CryptoJS.AES.encrypt(srcs, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7}); var encrypted = CryptoJS.AES.encrypt(srcs, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 })
return encrypted.toString(); return encrypted.toString()
} }

10
_web/src/components/verifition/utils/axios.js
View File

@ -1,13 +1,13 @@
import axios from 'axios'; import axios from 'axios'
axios.defaults.baseURL = process.env.BASE_API; axios.defaults.baseURL = process.env.BASE_API
const service = axios.create({ const service = axios.create({
timeout: 40000, timeout: 40000,
headers: { headers: {
'X-Requested-With': 'XMLHttpRequest', 'X-Requested-With': 'XMLHttpRequest',
'Content-Type': 'application/json; charset=UTF-8' 'Content-Type': 'application/json; charset=UTF-8'
}, }
}) })
service.interceptors.request.use( service.interceptors.request.use(
config => { config => {
@ -21,10 +21,10 @@ service.interceptors.request.use(
// response interceptor // response interceptor
service.interceptors.response.use( service.interceptors.response.use(
response => { response => {
const res = response.data; const res = response.data
return res return res
}, },
error => { () => {
} }
) )
export default service export default service

20
_web/src/components/verifition/utils/util.js
View File

@ -1,36 +1,52 @@
export function resetSize(vm) { export function resetSize(vm) {
var img_width, img_height, bar_width, bar_height; //图片的宽度、高度，移动条的宽度、高度 // eslint-disable-next-line camelcase
var img_width, img_height, bar_width, bar_height // 图片的宽度、高度，移动条的宽度、高度
var parentWidth = vm.$el.parentNode.offsetWidth || window.offsetWidth var parentWidth = vm.$el.parentNode.offsetWidth || window.offsetWidth
var parentHeight = vm.$el.parentNode.offsetHeight || window.offsetHeight var parentHeight = vm.$el.parentNode.offsetHeight || window.offsetHeight
// eslint-disable-next-line eqeqeq
if (vm.imgSize.width.indexOf('%') != -1) { if (vm.imgSize.width.indexOf('%') != -1) {
// eslint-disable-next-line camelcase
img_width = parseInt(this.imgSize.width) / 100 * parentWidth + 'px' img_width = parseInt(this.imgSize.width) / 100 * parentWidth + 'px'
} else { } else {
img_width = this.imgSize.width; // eslint-disable-next-line camelcase
img_width = this.imgSize.width
} }
// eslint-disable-next-line eqeqeq
if (vm.imgSize.height.indexOf('%') != -1) { if (vm.imgSize.height.indexOf('%') != -1) {
// eslint-disable-next-line camelcase
img_height = parseInt(this.imgSize.height) / 100 * parentHeight + 'px' img_height = parseInt(this.imgSize.height) / 100 * parentHeight + 'px'
} else { } else {
// eslint-disable-next-line camelcase
img_height = this.imgSize.height img_height = this.imgSize.height
} }
// eslint-disable-next-line eqeqeq
if (vm.barSize.width.indexOf('%') != -1) { if (vm.barSize.width.indexOf('%') != -1) {
// eslint-disable-next-line camelcase
bar_width = parseInt(this.barSize.width) / 100 * parentWidth + 'px' bar_width = parseInt(this.barSize.width) / 100 * parentWidth + 'px'
} else { } else {
// eslint-disable-next-line camelcase
bar_width = this.barSize.width bar_width = this.barSize.width
} }
// eslint-disable-next-line eqeqeq
if (vm.barSize.height.indexOf('%') != -1) { if (vm.barSize.height.indexOf('%') != -1) {
// eslint-disable-next-line camelcase
bar_height = parseInt(this.barSize.height) / 100 * parentHeight + 'px' bar_height = parseInt(this.barSize.height) / 100 * parentHeight + 'px'
} else { } else {
// eslint-disable-next-line camelcase
bar_height = this.barSize.height bar_height = this.barSize.height
} }
return { imgWidth: img_width, imgHeight: img_height, barWidth: bar_width, barHeight: bar_height } return { imgWidth: img_width, imgHeight: img_height, barWidth: bar_width, barHeight: bar_height }
} }
// eslint-disable-next-line camelcase
export const _code_chars = [1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'] export const _code_chars = [1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
// eslint-disable-next-line camelcase
export const _code_color1 = ['#fffff0', '#f0ffff', '#f0fff0', '#fff0f0'] export const _code_color1 = ['#fffff0', '#f0ffff', '#f0fff0', '#fff0f0']
// eslint-disable-next-line camelcase
export const _code_color2 = ['#FF0033', '#006699', '#993366', '#FF9900', '#66CC66', '#FF33CC'] export const _code_color2 = ['#FF0033', '#006699', '#993366', '#FF9900', '#66CC66', '#FF33CC']

8
xiaonuo-base/xiaonuo-core/src/main/java/com/cn/xiaonuo/core/context/constant/ConstantContextHolder.java
View File

@ -391,11 +391,11 @@ public class ConstantContextHolder {
} }
/** /**
* @Description 获取验证码 开关标识 * 获取验证码 开关标识
* @Date 2021/1/21 15:22 *
* @author Jax * @author Jax
* @return Boolean * @Date 2021/1/21 15:22
**/ */
public static Boolean getCaptchaOpenFlag() { public static Boolean getCaptchaOpenFlag() {
return getSysConfigWithDefault("XIAONUO_CAPTCHA_OPEN", Boolean.class, true); return getSysConfigWithDefault("XIAONUO_CAPTCHA_OPEN", Boolean.class, true);
} }

4
xiaonuo-base/xiaonuo-core/src/main/java/com/cn/xiaonuo/core/exception/enums/AuthExceptionEnum.java
View File

@ -91,9 +91,7 @@ public enum AuthExceptionEnum implements AbstractBaseExceptionEnum {
/** /**
* 验证码错误 * 验证码错误
*/ */
CONSTANT_EMPTY_ERROR(10, "验证码错误"), CONSTANT_EMPTY_ERROR(10, "验证码错误");
;
private final Integer code; private final Integer code;

32
xiaonuo-base/xiaonuo-system/src/main/java/com/cn/xiaonuo/sys/modular/auth/controller/SysLoginController.java
View File

@ -120,22 +120,22 @@ public class SysLoginController {
} }
/** /**
* @Description 获取验证码开关 * 获取验证码开关
*
* @author Jax * @author Jax
* @Date 2021/1/21 15:19 * @Date 2021/1/21 15:19
* @return ResponseData */
**/
@GetMapping("/getCaptchaOpen") @GetMapping("/getCaptchaOpen")
public ResponseData getCaptchaOpen() { public ResponseData getCaptchaOpen() {
return new SuccessResponseData(ConstantContextHolder.getCaptchaOpenFlag()); return new SuccessResponseData(ConstantContextHolder.getCaptchaOpenFlag());
} }
/** /**
* @Description 获取验证码 * 获取验证码
* @Date 2021/1/21 15:25 *
* @author Jax * @author Jax
* @return ResponseModel * @Date 2021/1/21 15:19
**/ */
@GetMapping("/captcha/code") @GetMapping("/captcha/code")
public ResponseModel getCode() { public ResponseModel getCode() {
CaptchaVO vo = new CaptchaVO(); CaptchaVO vo = new CaptchaVO();
@ -144,24 +144,22 @@ public class SysLoginController {
} }
/** /**
* @Description 校验前端验证码 * 校验前端验证码
* @Date 2021/1/21 15:26 *
* @author Jax * @author Jax
* @param captcha * @Date 2021/1/21 15:19
* @return ResponseModel */
**/
@PostMapping("/captcha/code/check") @PostMapping("/captcha/code/check")
public ResponseModel check(@RequestBody CaptchaVO captcha) { public ResponseModel check(@RequestBody CaptchaVO captcha) {
return captchaService.check(captcha); return captchaService.check(captcha);
} }
/** /**
* @Description 校验验证码 * 校验验证码
* @Date 2021/1/21 15:27 *
* @author Jax * @author Jax
* @param code * @Date 2021/1/21 15:19
* @return boolean */
**/
private boolean verificationCode(String code) { private boolean verificationCode(String code) {
CaptchaVO vo = new CaptchaVO(); CaptchaVO vo = new CaptchaVO();
vo.setCaptchaVerification(code); vo.setCaptchaVerification(code);

73
xiaonuo-base/xiaonuo-system/src/main/java/com/cn/xiaonuo/sys/provider/CaptchaCacheServiceProvider.java
View File

@ -3,46 +3,45 @@ package com.cn.xiaonuo.sys.provider;
import com.anji.captcha.service.CaptchaCacheService; import com.anji.captcha.service.CaptchaCacheService;
import org.springframework.beans.factory.annotation.Autowired; import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.StringRedisTemplate; import org.springframework.data.redis.core.StringRedisTemplate;
import java.util.concurrent.TimeUnit; import java.util.concurrent.TimeUnit;
/** /**
* @ClassName CaptchaCacheServiceProvider * 对于分布式部署的应用，我们建议应用自己实现CaptchaCacheService，比如用Redis
* @Description 对于分布式部署的应用，我们建议应用自己实现CaptchaCacheService，比如用Redis
* 如果应用是单点的，也没有使用redis，那默认使用内存。内存缓存只适合单节点部署的应用，否则验证码生产与验证在节点之间信息不同步，导致失败 * 如果应用是单点的，也没有使用redis，那默认使用内存。内存缓存只适合单节点部署的应用，否则验证码生产与验证在节点之间信息不同步，导致失败
*
* @Author Jax * @Author Jax
* @Date 2021/1/21 16:27 * @Date 2021/1/21 16:27
**/ */
//public class CaptchaCacheServiceProvider implements CaptchaCacheService { /*public class CaptchaCacheServiceProvider implements CaptchaCacheService {
//
// private static final String REDIS = "redis"; private static final String REDIS = "redis";
//
// @Autowired @Autowired
// private StringRedisTemplate stringRedisTemplate; private StringRedisTemplate stringRedisTemplate;
//
// @Override @Override
// public void set(String key, String value, long expiresInSeconds) { public void set(String key, String value, long expiresInSeconds) {
// stringRedisTemplate.opsForValue().set(key, value, expiresInSeconds, TimeUnit.SECONDS); stringRedisTemplate.opsForValue().set(key, value, expiresInSeconds, TimeUnit.SECONDS);
// } }
//
// @Override @Override
// public boolean exists(String key) { public boolean exists(String key) {
// return stringRedisTemplate.hasKey(key); return stringRedisTemplate.hasKey(key);
// } }
//
// @Override @Override
// public void delete(String key) { public void delete(String key) {
// stringRedisTemplate.delete(key); stringRedisTemplate.delete(key);
// } }
//
// @Override @Override
// public String get(String key) { public String get(String key) {
// return stringRedisTemplate.opsForValue().get(key); return stringRedisTemplate.opsForValue().get(key);
// } }
//
// @Override @Override
// public String type() { public String type() {
// return REDIS; return REDIS;
// } }
//
//} }*/