fix: verify
xingyu
parent
bfea385cc1
commit
7640fe829e
|
|
@ -57,7 +57,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script type="text/babel">
|
<script type="text/babel" setup>
|
||||||
/**
|
/**
|
||||||
* VerifyPoints
|
* VerifyPoints
|
||||||
* @description 点选
|
* @description 点选
|
||||||
|
|
@ -67,215 +67,185 @@ import { aesEncrypt } from './../utils/ase'
|
||||||
import { getCodeApi, reqCheckApi } from '@/api/login'
|
import { getCodeApi, reqCheckApi } from '@/api/login'
|
||||||
import { onMounted, reactive, ref, nextTick, toRefs, getCurrentInstance } from 'vue'
|
import { onMounted, reactive, ref, nextTick, toRefs, getCurrentInstance } from 'vue'
|
||||||
import { useI18n } from '@/hooks/web/useI18n'
|
import { useI18n } from '@/hooks/web/useI18n'
|
||||||
export default {
|
|
||||||
name: 'VerifyPoints',
|
const props = defineProps({
|
||||||
props: {
|
//弹出式pop，固定fixed
|
||||||
//弹出式pop，固定fixed
|
mode: {
|
||||||
mode: {
|
type: String,
|
||||||
type: String,
|
default: 'fixed'
|
||||||
default: 'fixed'
|
},
|
||||||
},
|
captchaType: {
|
||||||
captchaType: {
|
type: String
|
||||||
type: String
|
},
|
||||||
},
|
//间隔
|
||||||
//间隔
|
vSpace: {
|
||||||
vSpace: {
|
type: Number,
|
||||||
type: Number,
|
default: 5
|
||||||
default: 5
|
},
|
||||||
},
|
imgSize: {
|
||||||
imgSize: {
|
type: Object,
|
||||||
type: Object,
|
default() {
|
||||||
default() {
|
return {
|
||||||
return {
|
width: '310px',
|
||||||
width: '310px',
|
height: '155px'
|
||||||
height: '155px'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
barSize: {
|
|
||||||
type: Object,
|
|
||||||
default() {
|
|
||||||
return {
|
|
||||||
width: '310px',
|
|
||||||
height: '40px'
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
setup(props) {
|
barSize: {
|
||||||
const { t } = useI18n()
|
type: Object,
|
||||||
const { mode, captchaType } = toRefs(props)
|
default() {
|
||||||
const { proxy } = getCurrentInstance()
|
return {
|
||||||
let secretKey = ref(''), //后端返回的ase加密秘钥
|
width: '310px',
|
||||||
checkNum = ref(3), //默认需要点击的字数
|
height: '40px'
|
||||||
fontPos = reactive([]), //选中的坐标信息
|
|
||||||
checkPosArr = reactive([]), //用户点击的坐标
|
|
||||||
num = ref(1), //点击的记数
|
|
||||||
pointBackImgBase = ref(''), //后端获取到的背景图片
|
|
||||||
poinTextList = reactive([]), //后端返回的点击字体顺序
|
|
||||||
backToken = ref(''), //后端返回的token值
|
|
||||||
setSize = reactive({
|
|
||||||
imgHeight: 0,
|
|
||||||
imgWidth: 0,
|
|
||||||
barHeight: 0,
|
|
||||||
barWidth: 0
|
|
||||||
}),
|
|
||||||
tempPoints = reactive([]),
|
|
||||||
text = ref(''),
|
|
||||||
barAreaColor = ref(undefined),
|
|
||||||
barAreaBorderColor = ref(undefined),
|
|
||||||
showRefresh = ref(true),
|
|
||||||
bindingClick = ref(true)
|
|
||||||
|
|
||||||
const init = () => {
|
|
||||||
//加载页面
|
|
||||||
fontPos.splice(0, fontPos.length)
|
|
||||||
checkPosArr.splice(0, checkPosArr.length)
|
|
||||||
num.value = 1
|
|
||||||
getPictrue()
|
|
||||||
nextTick(() => {
|
|
||||||
let { imgHeight, imgWidth, barHeight, barWidth } = resetSize(proxy)
|
|
||||||
setSize.imgHeight = imgHeight
|
|
||||||
setSize.imgWidth = imgWidth
|
|
||||||
setSize.barHeight = barHeight
|
|
||||||
setSize.barWidth = barWidth
|
|
||||||
proxy.$parent.$emit('ready', proxy)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
onMounted(() => {
|
|
||||||
// 禁止拖拽
|
|
||||||
init()
|
|
||||||
proxy.$el.onselectstart = function () {
|
|
||||||
return false
|
|
||||||
}
|
}
|
||||||
})
|
|
||||||
const canvas = ref(null)
|
|
||||||
const canvasClick = (e) => {
|
|
||||||
checkPosArr.push(getMousePos(canvas, e))
|
|
||||||
if (num.value == checkNum.value) {
|
|
||||||
num.value = createPoint(getMousePos(canvas, e))
|
|
||||||
//按比例转换坐标值
|
|
||||||
let arr = pointTransfrom(checkPosArr, setSize)
|
|
||||||
checkPosArr.length = 0
|
|
||||||
checkPosArr.push(...arr)
|
|
||||||
//等创建坐标执行完
|
|
||||||
setTimeout(() => {
|
|
||||||
// var flag = this.comparePos(this.fontPos, this.checkPosArr);
|
|
||||||
//发送后端请求
|
|
||||||
var captchaVerification = secretKey.value
|
|
||||||
? aesEncrypt(backToken.value + '---' + JSON.stringify(checkPosArr), secretKey.value)
|
|
||||||
: backToken.value + '---' + JSON.stringify(checkPosArr)
|
|
||||||
let data = {
|
|
||||||
captchaType: captchaType.value,
|
|
||||||
pointJson: secretKey.value
|
|
||||||
? aesEncrypt(JSON.stringify(checkPosArr), secretKey.value)
|
|
||||||
: JSON.stringify(checkPosArr),
|
|
||||||
token: backToken.value
|
|
||||||
}
|
|
||||||
reqCheckApi(data).then((res) => {
|
|
||||||
if (res.repCode == '0000') {
|
|
||||||
barAreaColor.value = '#4cae4c'
|
|
||||||
barAreaBorderColor.value = '#5cb85c'
|
|
||||||
text.value = t('captcha.success')
|
|
||||||
bindingClick.value = false
|
|
||||||
if (mode.value == 'pop') {
|
|
||||||
setTimeout(() => {
|
|
||||||
proxy.$parent.clickShow = false
|
|
||||||
refresh()
|
|
||||||
}, 1500)
|
|
||||||
}
|
|
||||||
proxy.$parent.$emit('success', { captchaVerification })
|
|
||||||
} else {
|
|
||||||
proxy.$parent.$emit('error', proxy)
|
|
||||||
barAreaColor.value = '#d9534f'
|
|
||||||
barAreaBorderColor.value = '#d9534f'
|
|
||||||
text.value = t('captcha.fail')
|
|
||||||
setTimeout(() => {
|
|
||||||
refresh()
|
|
||||||
}, 700)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}, 400)
|
|
||||||
}
|
|
||||||
if (num.value < checkNum.value) {
|
|
||||||
num.value = createPoint(getMousePos(canvas, e))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
//获取坐标
|
|
||||||
const getMousePos = function (obj, e) {
|
|
||||||
var x = e.offsetX
|
|
||||||
var y = e.offsetY
|
|
||||||
return { x, y }
|
|
||||||
}
|
|
||||||
//创建坐标点
|
|
||||||
const createPoint = function (pos) {
|
|
||||||
tempPoints.push(Object.assign({}, pos))
|
|
||||||
return num.value + 1
|
|
||||||
}
|
|
||||||
const refresh = function () {
|
|
||||||
tempPoints.splice(0, tempPoints.length)
|
|
||||||
barAreaColor.value = '#000'
|
|
||||||
barAreaBorderColor.value = '#ddd'
|
|
||||||
bindingClick.value = true
|
|
||||||
fontPos.splice(0, fontPos.length)
|
|
||||||
checkPosArr.splice(0, checkPosArr.length)
|
|
||||||
num.value = 1
|
|
||||||
getPictrue()
|
|
||||||
text.value = t('captcha.fail')
|
|
||||||
showRefresh.value = true
|
|
||||||
}
|
|
||||||
|
|
||||||
// 请求背景图片和验证图片
|
|
||||||
function getPictrue() {
|
|
||||||
let data = {
|
|
||||||
captchaType: captchaType.value
|
|
||||||
}
|
|
||||||
getCodeApi(data).then((res) => {
|
|
||||||
if (res.repCode == '0000') {
|
|
||||||
pointBackImgBase.value = res.repData.originalImageBase64
|
|
||||||
backToken.value = res.repData.token
|
|
||||||
secretKey.value = res.repData.secretKey
|
|
||||||
poinTextList.value = res.repData.wordList
|
|
||||||
text.value = t('captcha.point') + '【' + poinTextList.value.join(',') + '】'
|
|
||||||
} else {
|
|
||||||
text.value = res.repMsg
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
//坐标转换函数
|
|
||||||
const pointTransfrom = function (pointArr, imgSize) {
|
|
||||||
var newPointArr = pointArr.map((p) => {
|
|
||||||
let x = Math.round((310 * p.x) / parseInt(imgSize.imgWidth))
|
|
||||||
let y = Math.round((155 * p.y) / parseInt(imgSize.imgHeight))
|
|
||||||
return { x, y }
|
|
||||||
})
|
|
||||||
return newPointArr
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
secretKey,
|
|
||||||
checkNum,
|
|
||||||
fontPos,
|
|
||||||
checkPosArr,
|
|
||||||
num,
|
|
||||||
pointBackImgBase,
|
|
||||||
poinTextList,
|
|
||||||
backToken,
|
|
||||||
setSize,
|
|
||||||
tempPoints,
|
|
||||||
text,
|
|
||||||
barAreaColor,
|
|
||||||
barAreaBorderColor,
|
|
||||||
showRefresh,
|
|
||||||
bindingClick,
|
|
||||||
init,
|
|
||||||
canvas,
|
|
||||||
canvasClick,
|
|
||||||
getMousePos,
|
|
||||||
createPoint,
|
|
||||||
refresh,
|
|
||||||
getPictrue,
|
|
||||||
pointTransfrom
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const { t } = useI18n()
|
||||||
|
const { mode, captchaType } = toRefs(props)
|
||||||
|
const { proxy } = getCurrentInstance()
|
||||||
|
let secretKey = ref(''), //后端返回的ase加密秘钥
|
||||||
|
checkNum = ref(3), //默认需要点击的字数
|
||||||
|
fontPos = reactive([]), //选中的坐标信息
|
||||||
|
checkPosArr = reactive([]), //用户点击的坐标
|
||||||
|
num = ref(1), //点击的记数
|
||||||
|
pointBackImgBase = ref(''), //后端获取到的背景图片
|
||||||
|
poinTextList = reactive([]), //后端返回的点击字体顺序
|
||||||
|
backToken = ref(''), //后端返回的token值
|
||||||
|
setSize = reactive({
|
||||||
|
imgHeight: 0,
|
||||||
|
imgWidth: 0,
|
||||||
|
barHeight: 0,
|
||||||
|
barWidth: 0
|
||||||
|
}),
|
||||||
|
tempPoints = reactive([]),
|
||||||
|
text = ref(''),
|
||||||
|
barAreaColor = ref(undefined),
|
||||||
|
barAreaBorderColor = ref(undefined),
|
||||||
|
showRefresh = ref(true),
|
||||||
|
bindingClick = ref(true)
|
||||||
|
|
||||||
|
const init = () => {
|
||||||
|
//加载页面
|
||||||
|
fontPos.splice(0, fontPos.length)
|
||||||
|
checkPosArr.splice(0, checkPosArr.length)
|
||||||
|
num.value = 1
|
||||||
|
getPictrue()
|
||||||
|
nextTick(() => {
|
||||||
|
let { imgHeight, imgWidth, barHeight, barWidth } = resetSize(proxy)
|
||||||
|
setSize.imgHeight = imgHeight
|
||||||
|
setSize.imgWidth = imgWidth
|
||||||
|
setSize.barHeight = barHeight
|
||||||
|
setSize.barWidth = barWidth
|
||||||
|
proxy.$parent.$emit('ready', proxy)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
// 禁止拖拽
|
||||||
|
init()
|
||||||
|
proxy.$el.onselectstart = function () {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const canvas = ref(null)
|
||||||
|
const canvasClick = (e) => {
|
||||||
|
checkPosArr.push(getMousePos(canvas, e))
|
||||||
|
if (num.value == checkNum.value) {
|
||||||
|
num.value = createPoint(getMousePos(canvas, e))
|
||||||
|
//按比例转换坐标值
|
||||||
|
let arr = pointTransfrom(checkPosArr, setSize)
|
||||||
|
checkPosArr.length = 0
|
||||||
|
checkPosArr.push(...arr)
|
||||||
|
//等创建坐标执行完
|
||||||
|
setTimeout(() => {
|
||||||
|
// var flag = this.comparePos(this.fontPos, this.checkPosArr);
|
||||||
|
//发送后端请求
|
||||||
|
var captchaVerification = secretKey.value
|
||||||
|
? aesEncrypt(backToken.value + '---' + JSON.stringify(checkPosArr), secretKey.value)
|
||||||
|
: backToken.value + '---' + JSON.stringify(checkPosArr)
|
||||||
|
let data = {
|
||||||
|
captchaType: captchaType.value,
|
||||||
|
pointJson: secretKey.value
|
||||||
|
? aesEncrypt(JSON.stringify(checkPosArr), secretKey.value)
|
||||||
|
: JSON.stringify(checkPosArr),
|
||||||
|
token: backToken.value
|
||||||
|
}
|
||||||
|
reqCheckApi(data).then((res) => {
|
||||||
|
if (res.repCode == '0000') {
|
||||||
|
barAreaColor.value = '#4cae4c'
|
||||||
|
barAreaBorderColor.value = '#5cb85c'
|
||||||
|
text.value = t('captcha.success')
|
||||||
|
bindingClick.value = false
|
||||||
|
if (mode.value == 'pop') {
|
||||||
|
setTimeout(() => {
|
||||||
|
proxy.$parent.clickShow = false
|
||||||
|
refresh()
|
||||||
|
}, 1500)
|
||||||
|
}
|
||||||
|
proxy.$parent.$emit('success', { captchaVerification })
|
||||||
|
} else {
|
||||||
|
proxy.$parent.$emit('error', proxy)
|
||||||
|
barAreaColor.value = '#d9534f'
|
||||||
|
barAreaBorderColor.value = '#d9534f'
|
||||||
|
text.value = t('captcha.fail')
|
||||||
|
setTimeout(() => {
|
||||||
|
refresh()
|
||||||
|
}, 700)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}, 400)
|
||||||
|
}
|
||||||
|
if (num.value < checkNum.value) {
|
||||||
|
num.value = createPoint(getMousePos(canvas, e))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//获取坐标
|
||||||
|
const getMousePos = function (obj, e) {
|
||||||
|
var x = e.offsetX
|
||||||
|
var y = e.offsetY
|
||||||
|
return { x, y }
|
||||||
|
}
|
||||||
|
//创建坐标点
|
||||||
|
const createPoint = function (pos) {
|
||||||
|
tempPoints.push(Object.assign({}, pos))
|
||||||
|
return num.value + 1
|
||||||
|
}
|
||||||
|
const refresh = async function () {
|
||||||
|
tempPoints.splice(0, tempPoints.length)
|
||||||
|
barAreaColor.value = '#000'
|
||||||
|
barAreaBorderColor.value = '#ddd'
|
||||||
|
bindingClick.value = true
|
||||||
|
fontPos.splice(0, fontPos.length)
|
||||||
|
checkPosArr.splice(0, checkPosArr.length)
|
||||||
|
num.value = 1
|
||||||
|
await getPictrue()
|
||||||
|
showRefresh.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
// 请求背景图片和验证图片
|
||||||
|
const getPictrue = async () => {
|
||||||
|
let data = {
|
||||||
|
captchaType: captchaType.value
|
||||||
|
}
|
||||||
|
const res = await getCodeApi(data)
|
||||||
|
if (res.repCode == '0000') {
|
||||||
|
pointBackImgBase.value = res.repData.originalImageBase64
|
||||||
|
backToken.value = res.repData.token
|
||||||
|
secretKey.value = res.repData.secretKey
|
||||||
|
poinTextList.value = res.repData.wordList
|
||||||
|
text.value = t('captcha.point') + '【' + poinTextList.value.join(',') + '】'
|
||||||
|
} else {
|
||||||
|
text.value = res.repMsg
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//坐标转换函数
|
||||||
|
const pointTransfrom = function (pointArr, imgSize) {
|
||||||
|
var newPointArr = pointArr.map((p) => {
|
||||||
|
let x = Math.round((310 * p.x) / parseInt(imgSize.imgWidth))
|
||||||
|
let y = Math.round((155 * p.y) / parseInt(imgSize.imgHeight))
|
||||||
|
return { x, y }
|
||||||
|
})
|
||||||
|
return newPointArr
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -71,7 +71,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script type="text/babel">
|
<script type="text/babel" setup>
|
||||||
/**
|
/**
|
||||||
* VerifySlide
|
* VerifySlide
|
||||||
* @description 滑块
|
* @description 滑块
|
||||||
|
|
@ -90,337 +90,298 @@ import {
|
||||||
toRefs,
|
toRefs,
|
||||||
getCurrentInstance
|
getCurrentInstance
|
||||||
} from 'vue'
|
} from 'vue'
|
||||||
// "captchaType":"blockPuzzle",
|
|
||||||
export default {
|
const props = defineProps({
|
||||||
name: 'VerifySlide',
|
captchaType: {
|
||||||
props: {
|
type: String
|
||||||
captchaType: {
|
},
|
||||||
type: String
|
type: {
|
||||||
},
|
type: String,
|
||||||
type: {
|
default: '1'
|
||||||
type: String,
|
},
|
||||||
default: '1'
|
//弹出式pop，固定fixed
|
||||||
},
|
mode: {
|
||||||
//弹出式pop，固定fixed
|
type: String,
|
||||||
mode: {
|
default: 'fixed'
|
||||||
type: String,
|
},
|
||||||
default: 'fixed'
|
vSpace: {
|
||||||
},
|
type: Number,
|
||||||
vSpace: {
|
default: 5
|
||||||
type: Number,
|
},
|
||||||
default: 5
|
explain: {
|
||||||
},
|
type: String,
|
||||||
explain: {
|
default: ''
|
||||||
type: String,
|
},
|
||||||
default: ''
|
imgSize: {
|
||||||
},
|
type: Object,
|
||||||
imgSize: {
|
default() {
|
||||||
type: Object,
|
return {
|
||||||
default() {
|
width: '310px',
|
||||||
return {
|
height: '155px'
|
||||||
width: '310px',
|
|
||||||
height: '155px'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
blockSize: {
|
|
||||||
type: Object,
|
|
||||||
default() {
|
|
||||||
return {
|
|
||||||
width: '50px',
|
|
||||||
height: '50px'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
barSize: {
|
|
||||||
type: Object,
|
|
||||||
default() {
|
|
||||||
return {
|
|
||||||
width: '310px',
|
|
||||||
height: '30px'
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
setup(props) {
|
blockSize: {
|
||||||
const { t } = useI18n()
|
type: Object,
|
||||||
const { mode, captchaType, type, blockSize, explain } = toRefs(props)
|
default() {
|
||||||
const { proxy } = getCurrentInstance()
|
return {
|
||||||
let secretKey = ref(''), //后端返回的ase加密秘钥
|
width: '50px',
|
||||||
passFlag = ref(''), //是否通过的标识
|
height: '50px'
|
||||||
backImgBase = ref(''), //验证码背景图片
|
|
||||||
blockBackImgBase = ref(''), //验证滑块的背景图片
|
|
||||||
backToken = ref(''), //后端返回的唯一token值
|
|
||||||
startMoveTime = ref(''), //移动开始的时间
|
|
||||||
endMovetime = ref(''), //移动结束的时间
|
|
||||||
tipsBackColor = ref(''), //提示词的背景颜色
|
|
||||||
tipWords = ref(''),
|
|
||||||
text = ref(''),
|
|
||||||
finishText = ref(''),
|
|
||||||
setSize = reactive({
|
|
||||||
imgHeight: 0,
|
|
||||||
imgWidth: 0,
|
|
||||||
barHeight: 0,
|
|
||||||
barWidth: 0
|
|
||||||
}),
|
|
||||||
top = ref(0),
|
|
||||||
left = ref(0),
|
|
||||||
moveBlockLeft = ref(undefined),
|
|
||||||
leftBarWidth = ref(undefined),
|
|
||||||
// 移动中样式
|
|
||||||
moveBlockBackgroundColor = ref(undefined),
|
|
||||||
leftBarBorderColor = ref('#ddd'),
|
|
||||||
iconColor = ref(undefined),
|
|
||||||
iconClass = ref('icon-right'),
|
|
||||||
status = ref(false), //鼠标状态
|
|
||||||
isEnd = ref(false), //是够验证完成
|
|
||||||
showRefresh = ref(true),
|
|
||||||
transitionLeft = ref(''),
|
|
||||||
transitionWidth = ref(''),
|
|
||||||
startLeft = ref(0)
|
|
||||||
|
|
||||||
const barArea = computed(() => {
|
|
||||||
return proxy.$el.querySelector('.verify-bar-area')
|
|
||||||
})
|
|
||||||
function init() {
|
|
||||||
if (explain.value === '') {
|
|
||||||
text.value = t('captcha.slide')
|
|
||||||
} else {
|
|
||||||
text.value = explain.value
|
|
||||||
}
|
}
|
||||||
getPictrue()
|
|
||||||
nextTick(() => {
|
|
||||||
let { imgHeight, imgWidth, barHeight, barWidth } = resetSize(proxy)
|
|
||||||
setSize.imgHeight = imgHeight
|
|
||||||
setSize.imgWidth = imgWidth
|
|
||||||
setSize.barHeight = barHeight
|
|
||||||
setSize.barWidth = barWidth
|
|
||||||
proxy.$parent.$emit('ready', proxy)
|
|
||||||
})
|
|
||||||
|
|
||||||
window.removeEventListener('touchmove', function (e) {
|
|
||||||
move(e)
|
|
||||||
})
|
|
||||||
window.removeEventListener('mousemove', function (e) {
|
|
||||||
move(e)
|
|
||||||
})
|
|
||||||
|
|
||||||
//鼠标松开
|
|
||||||
window.removeEventListener('touchend', function () {
|
|
||||||
end()
|
|
||||||
})
|
|
||||||
window.removeEventListener('mouseup', function () {
|
|
||||||
end()
|
|
||||||
})
|
|
||||||
|
|
||||||
window.addEventListener('touchmove', function (e) {
|
|
||||||
move(e)
|
|
||||||
})
|
|
||||||
window.addEventListener('mousemove', function (e) {
|
|
||||||
move(e)
|
|
||||||
})
|
|
||||||
|
|
||||||
//鼠标松开
|
|
||||||
window.addEventListener('touchend', function () {
|
|
||||||
end()
|
|
||||||
})
|
|
||||||
window.addEventListener('mouseup', function () {
|
|
||||||
end()
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
watch(type, () => {
|
},
|
||||||
init()
|
barSize: {
|
||||||
})
|
type: Object,
|
||||||
onMounted(() => {
|
default() {
|
||||||
// 禁止拖拽
|
return {
|
||||||
init()
|
width: '310px',
|
||||||
proxy.$el.onselectstart = function () {
|
height: '30px'
|
||||||
return false
|
|
||||||
}
|
}
|
||||||
})
|
}
|
||||||
//鼠标按下
|
}
|
||||||
function start(e) {
|
})
|
||||||
e = e || window.event
|
|
||||||
if (!e.touches) {
|
const { t } = useI18n()
|
||||||
//兼容PC端
|
const { mode, captchaType, type, blockSize, explain } = toRefs(props)
|
||||||
var x = e.clientX
|
const { proxy } = getCurrentInstance()
|
||||||
} else {
|
let secretKey = ref(''), //后端返回的ase加密秘钥
|
||||||
//兼容移动端
|
passFlag = ref(''), //是否通过的标识
|
||||||
var x = e.touches[0].pageX
|
backImgBase = ref(''), //验证码背景图片
|
||||||
}
|
blockBackImgBase = ref(''), //验证滑块的背景图片
|
||||||
startLeft.value = Math.floor(x - barArea.value.getBoundingClientRect().left)
|
backToken = ref(''), //后端返回的唯一token值
|
||||||
startMoveTime.value = +new Date() //开始滑动的时间
|
startMoveTime = ref(''), //移动开始的时间
|
||||||
if (isEnd.value == false) {
|
endMovetime = ref(''), //移动结束的时间
|
||||||
text.value = ''
|
tipWords = ref(''),
|
||||||
moveBlockBackgroundColor.value = '#337ab7'
|
text = ref(''),
|
||||||
leftBarBorderColor.value = '#337AB7'
|
finishText = ref(''),
|
||||||
|
setSize = reactive({
|
||||||
|
imgHeight: 0,
|
||||||
|
imgWidth: 0,
|
||||||
|
barHeight: 0,
|
||||||
|
barWidth: 0
|
||||||
|
}),
|
||||||
|
moveBlockLeft = ref(undefined),
|
||||||
|
leftBarWidth = ref(undefined),
|
||||||
|
// 移动中样式
|
||||||
|
moveBlockBackgroundColor = ref(undefined),
|
||||||
|
leftBarBorderColor = ref('#ddd'),
|
||||||
|
iconColor = ref(undefined),
|
||||||
|
iconClass = ref('icon-right'),
|
||||||
|
status = ref(false), //鼠标状态
|
||||||
|
isEnd = ref(false), //是够验证完成
|
||||||
|
showRefresh = ref(true),
|
||||||
|
transitionLeft = ref(''),
|
||||||
|
transitionWidth = ref(''),
|
||||||
|
startLeft = ref(0)
|
||||||
|
|
||||||
|
const barArea = computed(() => {
|
||||||
|
return proxy.$el.querySelector('.verify-bar-area')
|
||||||
|
})
|
||||||
|
const init = () => {
|
||||||
|
if (explain.value === '') {
|
||||||
|
text.value = t('captcha.slide')
|
||||||
|
} else {
|
||||||
|
text.value = explain.value
|
||||||
|
}
|
||||||
|
getPictrue()
|
||||||
|
nextTick(() => {
|
||||||
|
let { imgHeight, imgWidth, barHeight, barWidth } = resetSize(proxy)
|
||||||
|
setSize.imgHeight = imgHeight
|
||||||
|
setSize.imgWidth = imgWidth
|
||||||
|
setSize.barHeight = barHeight
|
||||||
|
setSize.barWidth = barWidth
|
||||||
|
proxy.$parent.$emit('ready', proxy)
|
||||||
|
})
|
||||||
|
|
||||||
|
window.removeEventListener('touchmove', function (e) {
|
||||||
|
move(e)
|
||||||
|
})
|
||||||
|
window.removeEventListener('mousemove', function (e) {
|
||||||
|
move(e)
|
||||||
|
})
|
||||||
|
|
||||||
|
//鼠标松开
|
||||||
|
window.removeEventListener('touchend', function () {
|
||||||
|
end()
|
||||||
|
})
|
||||||
|
window.removeEventListener('mouseup', function () {
|
||||||
|
end()
|
||||||
|
})
|
||||||
|
|
||||||
|
window.addEventListener('touchmove', function (e) {
|
||||||
|
move(e)
|
||||||
|
})
|
||||||
|
window.addEventListener('mousemove', function (e) {
|
||||||
|
move(e)
|
||||||
|
})
|
||||||
|
|
||||||
|
//鼠标松开
|
||||||
|
window.addEventListener('touchend', function () {
|
||||||
|
end()
|
||||||
|
})
|
||||||
|
window.addEventListener('mouseup', function () {
|
||||||
|
end()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
watch(type, () => {
|
||||||
|
init()
|
||||||
|
})
|
||||||
|
onMounted(() => {
|
||||||
|
// 禁止拖拽
|
||||||
|
init()
|
||||||
|
proxy.$el.onselectstart = function () {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
//鼠标按下
|
||||||
|
const start = (e) => {
|
||||||
|
e = e || window.event
|
||||||
|
if (!e.touches) {
|
||||||
|
//兼容PC端
|
||||||
|
var x = e.clientX
|
||||||
|
} else {
|
||||||
|
//兼容移动端
|
||||||
|
var x = e.touches[0].pageX
|
||||||
|
}
|
||||||
|
startLeft.value = Math.floor(x - barArea.value.getBoundingClientRect().left)
|
||||||
|
startMoveTime.value = +new Date() //开始滑动的时间
|
||||||
|
if (isEnd.value == false) {
|
||||||
|
text.value = ''
|
||||||
|
moveBlockBackgroundColor.value = '#337ab7'
|
||||||
|
leftBarBorderColor.value = '#337AB7'
|
||||||
|
iconColor.value = '#fff'
|
||||||
|
e.stopPropagation()
|
||||||
|
status.value = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//鼠标移动
|
||||||
|
const move = (e) => {
|
||||||
|
e = e || window.event
|
||||||
|
if (status.value && isEnd.value == false) {
|
||||||
|
if (!e.touches) {
|
||||||
|
//兼容PC端
|
||||||
|
var x = e.clientX
|
||||||
|
} else {
|
||||||
|
//兼容移动端
|
||||||
|
var x = e.touches[0].pageX
|
||||||
|
}
|
||||||
|
var bar_area_left = barArea.value.getBoundingClientRect().left
|
||||||
|
var move_block_left = x - bar_area_left //小方块相对于父元素的left值
|
||||||
|
if (
|
||||||
|
move_block_left >=
|
||||||
|
barArea.value.offsetWidth - parseInt(parseInt(blockSize.value.width) / 2) - 2
|
||||||
|
) {
|
||||||
|
move_block_left =
|
||||||
|
barArea.value.offsetWidth - parseInt(parseInt(blockSize.value.width) / 2) - 2
|
||||||
|
}
|
||||||
|
if (move_block_left <= 0) {
|
||||||
|
move_block_left = parseInt(parseInt(blockSize.value.width) / 2)
|
||||||
|
}
|
||||||
|
//拖动后小方块的left值
|
||||||
|
moveBlockLeft.value = move_block_left - startLeft.value + 'px'
|
||||||
|
leftBarWidth.value = move_block_left - startLeft.value + 'px'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//鼠标松开
|
||||||
|
const end = () => {
|
||||||
|
endMovetime.value = +new Date()
|
||||||
|
//判断是否重合
|
||||||
|
if (status.value && isEnd.value == false) {
|
||||||
|
var moveLeftDistance = parseInt((moveBlockLeft.value || '').replace('px', ''))
|
||||||
|
moveLeftDistance = (moveLeftDistance * 310) / parseInt(setSize.imgWidth)
|
||||||
|
let data = {
|
||||||
|
captchaType: captchaType.value,
|
||||||
|
pointJson: secretKey.value
|
||||||
|
? aesEncrypt(JSON.stringify({ x: moveLeftDistance, y: 5.0 }), secretKey.value)
|
||||||
|
: JSON.stringify({ x: moveLeftDistance, y: 5.0 }),
|
||||||
|
token: backToken.value
|
||||||
|
}
|
||||||
|
reqCheckApi(data).then((res) => {
|
||||||
|
if (res.repCode == '0000') {
|
||||||
|
moveBlockBackgroundColor.value = '#5cb85c'
|
||||||
|
leftBarBorderColor.value = '#5cb85c'
|
||||||
iconColor.value = '#fff'
|
iconColor.value = '#fff'
|
||||||
e.stopPropagation()
|
iconClass.value = 'icon-check'
|
||||||
status.value = true
|
showRefresh.value = false
|
||||||
}
|
isEnd.value = true
|
||||||
}
|
if (mode.value == 'pop') {
|
||||||
//鼠标移动
|
setTimeout(() => {
|
||||||
function move(e) {
|
proxy.$parent.clickShow = false
|
||||||
e = e || window.event
|
refresh()
|
||||||
if (status.value && isEnd.value == false) {
|
}, 1500)
|
||||||
if (!e.touches) {
|
|
||||||
//兼容PC端
|
|
||||||
var x = e.clientX
|
|
||||||
} else {
|
|
||||||
//兼容移动端
|
|
||||||
var x = e.touches[0].pageX
|
|
||||||
}
|
}
|
||||||
var bar_area_left = barArea.value.getBoundingClientRect().left
|
passFlag.value = true
|
||||||
var move_block_left = x - bar_area_left //小方块相对于父元素的left值
|
tipWords.value = `${((endMovetime.value - startMoveTime.value) / 1000).toFixed(2)}s
|
||||||
if (
|
|
||||||
move_block_left >=
|
|
||||||
barArea.value.offsetWidth - parseInt(parseInt(blockSize.value.width) / 2) - 2
|
|
||||||
) {
|
|
||||||
move_block_left =
|
|
||||||
barArea.value.offsetWidth - parseInt(parseInt(blockSize.value.width) / 2) - 2
|
|
||||||
}
|
|
||||||
if (move_block_left <= 0) {
|
|
||||||
move_block_left = parseInt(parseInt(blockSize.value.width) / 2)
|
|
||||||
}
|
|
||||||
//拖动后小方块的left值
|
|
||||||
moveBlockLeft.value = move_block_left - startLeft.value + 'px'
|
|
||||||
leftBarWidth.value = move_block_left - startLeft.value + 'px'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//鼠标松开
|
|
||||||
function end() {
|
|
||||||
endMovetime.value = +new Date()
|
|
||||||
//判断是否重合
|
|
||||||
if (status.value && isEnd.value == false) {
|
|
||||||
var moveLeftDistance = parseInt((moveBlockLeft.value || '').replace('px', ''))
|
|
||||||
moveLeftDistance = (moveLeftDistance * 310) / parseInt(setSize.imgWidth)
|
|
||||||
let data = {
|
|
||||||
captchaType: captchaType.value,
|
|
||||||
pointJson: secretKey.value
|
|
||||||
? aesEncrypt(JSON.stringify({ x: moveLeftDistance, y: 5.0 }), secretKey.value)
|
|
||||||
: JSON.stringify({ x: moveLeftDistance, y: 5.0 }),
|
|
||||||
token: backToken.value
|
|
||||||
}
|
|
||||||
reqCheckApi(data).then((res) => {
|
|
||||||
if (res.repCode == '0000') {
|
|
||||||
moveBlockBackgroundColor.value = '#5cb85c'
|
|
||||||
leftBarBorderColor.value = '#5cb85c'
|
|
||||||
iconColor.value = '#fff'
|
|
||||||
iconClass.value = 'icon-check'
|
|
||||||
showRefresh.value = false
|
|
||||||
isEnd.value = true
|
|
||||||
if (mode.value == 'pop') {
|
|
||||||
setTimeout(() => {
|
|
||||||
proxy.$parent.clickShow = false
|
|
||||||
refresh()
|
|
||||||
}, 1500)
|
|
||||||
}
|
|
||||||
passFlag.value = true
|
|
||||||
tipWords.value = `${((endMovetime.value - startMoveTime.value) / 1000).toFixed(2)}s
|
|
||||||
${t('captcha.success')}`
|
${t('captcha.success')}`
|
||||||
var captchaVerification = secretKey.value
|
var captchaVerification = secretKey.value
|
||||||
? aesEncrypt(
|
? aesEncrypt(
|
||||||
backToken.value + '---' + JSON.stringify({ x: moveLeftDistance, y: 5.0 }),
|
backToken.value + '---' + JSON.stringify({ x: moveLeftDistance, y: 5.0 }),
|
||||||
secretKey.value
|
secretKey.value
|
||||||
)
|
)
|
||||||
: backToken.value + '---' + JSON.stringify({ x: moveLeftDistance, y: 5.0 })
|
: backToken.value + '---' + JSON.stringify({ x: moveLeftDistance, y: 5.0 })
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
tipWords.value = ''
|
tipWords.value = ''
|
||||||
proxy.$parent.closeBox()
|
proxy.$parent.closeBox()
|
||||||
proxy.$parent.$emit('success', { captchaVerification })
|
proxy.$parent.$emit('success', { captchaVerification })
|
||||||
}, 1000)
|
}, 1000)
|
||||||
} else {
|
} else {
|
||||||
moveBlockBackgroundColor.value = '#d9534f'
|
moveBlockBackgroundColor.value = '#d9534f'
|
||||||
leftBarBorderColor.value = '#d9534f'
|
leftBarBorderColor.value = '#d9534f'
|
||||||
iconColor.value = '#fff'
|
iconColor.value = '#fff'
|
||||||
iconClass.value = 'icon-close'
|
iconClass.value = 'icon-close'
|
||||||
passFlag.value = false
|
passFlag.value = false
|
||||||
setTimeout(function () {
|
setTimeout(function () {
|
||||||
refresh()
|
refresh()
|
||||||
}, 1000)
|
}, 1000)
|
||||||
proxy.$parent.$emit('error', proxy)
|
proxy.$parent.$emit('error', proxy)
|
||||||
tipWords.value = t('captcha.fail')
|
tipWords.value = t('captcha.fail')
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
tipWords.value = ''
|
tipWords.value = ''
|
||||||
}, 1000)
|
}, 1000)
|
||||||
}
|
|
||||||
})
|
|
||||||
status.value = false
|
|
||||||
}
|
}
|
||||||
}
|
})
|
||||||
|
status.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const refresh = () => {
|
const refresh = async () => {
|
||||||
showRefresh.value = true
|
showRefresh.value = true
|
||||||
finishText.value = ''
|
finishText.value = ''
|
||||||
|
|
||||||
transitionLeft.value = 'left .3s'
|
transitionLeft.value = 'left .3s'
|
||||||
moveBlockLeft.value = 0
|
moveBlockLeft.value = 0
|
||||||
|
|
||||||
leftBarWidth.value = undefined
|
leftBarWidth.value = undefined
|
||||||
transitionWidth.value = 'width .3s'
|
transitionWidth.value = 'width .3s'
|
||||||
|
|
||||||
leftBarBorderColor.value = '#ddd'
|
leftBarBorderColor.value = '#ddd'
|
||||||
moveBlockBackgroundColor.value = '#fff'
|
moveBlockBackgroundColor.value = '#fff'
|
||||||
iconColor.value = '#000'
|
iconColor.value = '#000'
|
||||||
iconClass.value = 'icon-right'
|
iconClass.value = 'icon-right'
|
||||||
isEnd.value = false
|
isEnd.value = false
|
||||||
|
|
||||||
getPictrue()
|
await getPictrue()
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
transitionWidth.value = ''
|
transitionWidth.value = ''
|
||||||
transitionLeft.value = ''
|
transitionLeft.value = ''
|
||||||
text.value = explain.value
|
text.value = explain.value
|
||||||
}, 300)
|
}, 300)
|
||||||
}
|
}
|
||||||
|
|
||||||
// 请求背景图片和验证图片
|
// 请求背景图片和验证图片
|
||||||
function getPictrue() {
|
const getPictrue = async () => {
|
||||||
let data = {
|
let data = {
|
||||||
captchaType: captchaType.value
|
captchaType: captchaType.value
|
||||||
}
|
}
|
||||||
getCodeApi(data).then((res) => {
|
const res = await getCodeApi(data)
|
||||||
if (res.repCode == '0000') {
|
if (res.repCode == '0000') {
|
||||||
backImgBase.value = res.repData.originalImageBase64
|
backImgBase.value = res.repData.originalImageBase64
|
||||||
blockBackImgBase.value = res.repData.jigsawImageBase64
|
blockBackImgBase.value = res.repData.jigsawImageBase64
|
||||||
backToken.value = res.repData.token
|
backToken.value = res.repData.token
|
||||||
secretKey.value = res.repData.secretKey
|
secretKey.value = res.repData.secretKey
|
||||||
} else {
|
} else {
|
||||||
tipWords.value = res.repMsg
|
tipWords.value = res.repMsg
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
secretKey, //后端返回的ase加密秘钥
|
|
||||||
passFlag, //是否通过的标识
|
|
||||||
backImgBase, //验证码背景图片
|
|
||||||
blockBackImgBase, //验证滑块的背景图片
|
|
||||||
backToken, //后端返回的唯一token值
|
|
||||||
startMoveTime, //移动开始的时间
|
|
||||||
endMovetime, //移动结束的时间
|
|
||||||
tipsBackColor, //提示词的背景颜色
|
|
||||||
tipWords,
|
|
||||||
text,
|
|
||||||
finishText,
|
|
||||||
setSize,
|
|
||||||
top,
|
|
||||||
left,
|
|
||||||
moveBlockLeft,
|
|
||||||
leftBarWidth,
|
|
||||||
// 移动中样式
|
|
||||||
moveBlockBackgroundColor,
|
|
||||||
leftBarBorderColor,
|
|
||||||
iconColor,
|
|
||||||
iconClass,
|
|
||||||
status, //鼠标状态
|
|
||||||
isEnd, //是够验证完成
|
|
||||||
showRefresh,
|
|
||||||
transitionLeft,
|
|
||||||
transitionWidth,
|
|
||||||
barArea,
|
|
||||||
refresh,
|
|
||||||
start
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue