fix: verify
xingyu
parent
bfea385cc1
commit
7640fe829e
|
|
@ -57,7 +57,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script type="text/babel">
|
||||
<script type="text/babel" setup>
|
||||
/**
|
||||
* VerifyPoints
|
||||
* @description 点选
|
||||
|
|
@ -67,9 +67,8 @@ import { aesEncrypt } from './../utils/ase'
|
|||
import { getCodeApi, reqCheckApi } from '@/api/login'
|
||||
import { onMounted, reactive, ref, nextTick, toRefs, getCurrentInstance } from 'vue'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
export default {
|
||||
name: 'VerifyPoints',
|
||||
props: {
|
||||
|
||||
const props = defineProps({
|
||||
//弹出式pop，固定fixed
|
||||
mode: {
|
||||
type: String,
|
||||
|
|
@ -101,12 +100,12 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const { t } = useI18n()
|
||||
const { mode, captchaType } = toRefs(props)
|
||||
const { proxy } = getCurrentInstance()
|
||||
let secretKey = ref(''), //后端返回的ase加密秘钥
|
||||
})
|
||||
|
||||
const { t } = useI18n()
|
||||
const { mode, captchaType } = toRefs(props)
|
||||
const { proxy } = getCurrentInstance()
|
||||
let secretKey = ref(''), //后端返回的ase加密秘钥
|
||||
checkNum = ref(3), //默认需要点击的字数
|
||||
fontPos = reactive([]), //选中的坐标信息
|
||||
checkPosArr = reactive([]), //用户点击的坐标
|
||||
|
|
@ -127,7 +126,7 @@ export default {
|
|||
showRefresh = ref(true),
|
||||
bindingClick = ref(true)
|
||||
|
||||
const init = () => {
|
||||
const init = () => {
|
||||
//加载页面
|
||||
fontPos.splice(0, fontPos.length)
|
||||
checkPosArr.splice(0, checkPosArr.length)
|
||||
|
|
@ -141,16 +140,16 @@ export default {
|
|||
setSize.barWidth = barWidth
|
||||
proxy.$parent.$emit('ready', proxy)
|
||||
})
|
||||
}
|
||||
onMounted(() => {
|
||||
}
|
||||
onMounted(() => {
|
||||
// 禁止拖拽
|
||||
init()
|
||||
proxy.$el.onselectstart = function () {
|
||||
return false
|
||||
}
|
||||
})
|
||||
const canvas = ref(null)
|
||||
const canvasClick = (e) => {
|
||||
})
|
||||
const canvas = ref(null)
|
||||
const canvasClick = (e) => {
|
||||
checkPosArr.push(getMousePos(canvas, e))
|
||||
if (num.value == checkNum.value) {
|
||||
num.value = createPoint(getMousePos(canvas, e))
|
||||
|
|
@ -200,19 +199,19 @@ export default {
|
|||
if (num.value < checkNum.value) {
|
||||
num.value = createPoint(getMousePos(canvas, e))
|
||||
}
|
||||
}
|
||||
//获取坐标
|
||||
const getMousePos = function (obj, e) {
|
||||
}
|
||||
//获取坐标
|
||||
const getMousePos = function (obj, e) {
|
||||
var x = e.offsetX
|
||||
var y = e.offsetY
|
||||
return { x, y }
|
||||
}
|
||||
//创建坐标点
|
||||
const createPoint = function (pos) {
|
||||
}
|
||||
//创建坐标点
|
||||
const createPoint = function (pos) {
|
||||
tempPoints.push(Object.assign({}, pos))
|
||||
return num.value + 1
|
||||
}
|
||||
const refresh = function () {
|
||||
}
|
||||
const refresh = async function () {
|
||||
tempPoints.splice(0, tempPoints.length)
|
||||
barAreaColor.value = '#000'
|
||||
barAreaBorderColor.value = '#ddd'
|
||||
|
|
@ -220,17 +219,16 @@ export default {
|
|||
fontPos.splice(0, fontPos.length)
|
||||
checkPosArr.splice(0, checkPosArr.length)
|
||||
num.value = 1
|
||||
getPictrue()
|
||||
text.value = t('captcha.fail')
|
||||
await getPictrue()
|
||||
showRefresh.value = true
|
||||
}
|
||||
}
|
||||
|
||||
// 请求背景图片和验证图片
|
||||
function getPictrue() {
|
||||
// 请求背景图片和验证图片
|
||||
const getPictrue = async () => {
|
||||
let data = {
|
||||
captchaType: captchaType.value
|
||||
}
|
||||
getCodeApi(data).then((res) => {
|
||||
const res = await getCodeApi(data)
|
||||
if (res.repCode == '0000') {
|
||||
pointBackImgBase.value = res.repData.originalImageBase64
|
||||
backToken.value = res.repData.token
|
||||
|
|
@ -240,42 +238,14 @@ export default {
|
|||
} else {
|
||||
text.value = res.repMsg
|
||||
}
|
||||
})
|
||||
}
|
||||
//坐标转换函数
|
||||
const pointTransfrom = function (pointArr, imgSize) {
|
||||
}
|
||||
//坐标转换函数
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script type="text/babel">
|
||||
<script type="text/babel" setup>
|
||||
/**
|
||||
* VerifySlide
|
||||
* @description 滑块
|
||||
|
|
@ -90,10 +90,8 @@ import {
|
|||
toRefs,
|
||||
getCurrentInstance
|
||||
} from 'vue'
|
||||
// "captchaType":"blockPuzzle",
|
||||
export default {
|
||||
name: 'VerifySlide',
|
||||
props: {
|
||||
|
||||
const props = defineProps({
|
||||
captchaType: {
|
||||
type: String
|
||||
},
|
||||
|
|
@ -141,19 +139,18 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const { t } = useI18n()
|
||||
const { mode, captchaType, type, blockSize, explain } = toRefs(props)
|
||||
const { proxy } = getCurrentInstance()
|
||||
let secretKey = ref(''), //后端返回的ase加密秘钥
|
||||
})
|
||||
|
||||
const { t } = useI18n()
|
||||
const { mode, captchaType, type, blockSize, explain } = toRefs(props)
|
||||
const { proxy } = getCurrentInstance()
|
||||
let secretKey = ref(''), //后端返回的ase加密秘钥
|
||||
passFlag = ref(''), //是否通过的标识
|
||||
backImgBase = ref(''), //验证码背景图片
|
||||
blockBackImgBase = ref(''), //验证滑块的背景图片
|
||||
backToken = ref(''), //后端返回的唯一token值
|
||||
startMoveTime = ref(''), //移动开始的时间
|
||||
endMovetime = ref(''), //移动结束的时间
|
||||
tipsBackColor = ref(''), //提示词的背景颜色
|
||||
tipWords = ref(''),
|
||||
text = ref(''),
|
||||
finishText = ref(''),
|
||||
|
|
@ -163,8 +160,6 @@ export default {
|
|||
barHeight: 0,
|
||||
barWidth: 0
|
||||
}),
|
||||
top = ref(0),
|
||||
left = ref(0),
|
||||
moveBlockLeft = ref(undefined),
|
||||
leftBarWidth = ref(undefined),
|
||||
// 移动中样式
|
||||
|
|
@ -179,10 +174,10 @@ export default {
|
|||
transitionWidth = ref(''),
|
||||
startLeft = ref(0)
|
||||
|
||||
const barArea = computed(() => {
|
||||
const barArea = computed(() => {
|
||||
return proxy.$el.querySelector('.verify-bar-area')
|
||||
})
|
||||
function init() {
|
||||
})
|
||||
const init = () => {
|
||||
if (explain.value === '') {
|
||||
text.value = t('captcha.slide')
|
||||
} else {
|
||||
|
|
@ -227,19 +222,19 @@ export default {
|
|||
window.addEventListener('mouseup', function () {
|
||||
end()
|
||||
})
|
||||
}
|
||||
watch(type, () => {
|
||||
}
|
||||
watch(type, () => {
|
||||
init()
|
||||
})
|
||||
onMounted(() => {
|
||||
})
|
||||
onMounted(() => {
|
||||
// 禁止拖拽
|
||||
init()
|
||||
proxy.$el.onselectstart = function () {
|
||||
return false
|
||||
}
|
||||
})
|
||||
//鼠标按下
|
||||
function start(e) {
|
||||
})
|
||||
//鼠标按下
|
||||
const start = (e) => {
|
||||
e = e || window.event
|
||||
if (!e.touches) {
|
||||
//兼容PC端
|
||||
|
|
@ -258,9 +253,9 @@ export default {
|
|||
e.stopPropagation()
|
||||
status.value = true
|
||||
}
|
||||
}
|
||||
//鼠标移动
|
||||
function move(e) {
|
||||
}
|
||||
//鼠标移动
|
||||
const move = (e) => {
|
||||
e = e || window.event
|
||||
if (status.value && isEnd.value == false) {
|
||||
if (!e.touches) {
|
||||
|
|
@ -286,10 +281,10 @@ export default {
|
|||
moveBlockLeft.value = move_block_left - startLeft.value + 'px'
|
||||
leftBarWidth.value = move_block_left - startLeft.value + 'px'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//鼠标松开
|
||||
function end() {
|
||||
//鼠标松开
|
||||
const end = () => {
|
||||
endMovetime.value = +new Date()
|
||||
//判断是否重合
|
||||
if (status.value && isEnd.value == false) {
|
||||
|
|
@ -348,9 +343,9 @@ export default {
|
|||
})
|
||||
status.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const refresh = () => {
|
||||
const refresh = async () => {
|
||||
showRefresh.value = true
|
||||
finishText.value = ''
|
||||
|
||||
|
|
@ -366,20 +361,20 @@ export default {
|
|||
iconClass.value = 'icon-right'
|
||||
isEnd.value = false
|
||||
|
||||
getPictrue()
|
||||
await getPictrue()
|
||||
setTimeout(() => {
|
||||
transitionWidth.value = ''
|
||||
transitionLeft.value = ''
|
||||
text.value = explain.value
|
||||
}, 300)
|
||||
}
|
||||
}
|
||||
|
||||
// 请求背景图片和验证图片
|
||||
function getPictrue() {
|
||||
// 请求背景图片和验证图片
|
||||
const getPictrue = async () => {
|
||||
let data = {
|
||||
captchaType: captchaType.value
|
||||
}
|
||||
getCodeApi(data).then((res) => {
|
||||
const res = await getCodeApi(data)
|
||||
if (res.repCode == '0000') {
|
||||
backImgBase.value = res.repData.originalImageBase64
|
||||
blockBackImgBase.value = res.repData.jigsawImageBase64
|
||||
|
|
@ -388,39 +383,5 @@ export default {
|
|||
} else {
|
||||
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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue