linweidong
/
besure_server
2
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: verify

Browse Source
plp
xingyu 3 years ago
parent bfea385cc1
commit 7640fe829e
2 changed files with 439 additions and 508 deletions
Show Stats Download Patch File Download Diff File

92
yudao-ui-admin-vue3/src/components/Verifition/src/Verify/VerifyPoints.vue
Unescape Escape View File

@ -57,7 +57,7 @@
</div> </div>
</div> </div>
</template> </template>
<script type="text/babel"> <script type="text/babel" setup>
/** /**
* VerifyPoints * VerifyPoints
* @description 点选 * @description 点选
@ -67,9 +67,8 @@ 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,
@ -101,12 +100,12 @@ export default {
} }
} }
} }
}, })
setup(props) {
const { t } = useI18n() const { t } = useI18n()
const { mode, captchaType } = toRefs(props) const { mode, captchaType } = toRefs(props)
const { proxy } = getCurrentInstance() const { proxy } = getCurrentInstance()
let secretKey = ref(''), //后端返回的ase加密秘钥 let secretKey = ref(''), //后端返回的ase加密秘钥
checkNum = ref(3), //默认需要点击的字数 checkNum = ref(3), //默认需要点击的字数
fontPos = reactive([]), //选中的坐标信息 fontPos = reactive([]), //选中的坐标信息
checkPosArr = reactive([]), //用户点击的坐标 checkPosArr = reactive([]), //用户点击的坐标
@ -127,7 +126,7 @@ export default {
showRefresh = ref(true), showRefresh = ref(true),
bindingClick = ref(true) bindingClick = ref(true)
const init = () => { const init = () => {
//加载页面 //加载页面
fontPos.splice(0, fontPos.length) fontPos.splice(0, fontPos.length)
checkPosArr.splice(0, checkPosArr.length) checkPosArr.splice(0, checkPosArr.length)
@ -141,16 +140,16 @@ export default {
setSize.barWidth = barWidth setSize.barWidth = barWidth
proxy.$parent.$emit('ready', proxy) proxy.$parent.$emit('ready', proxy)
}) })
} }
onMounted(() => { onMounted(() => {
// 禁止拖拽 // 禁止拖拽
init() init()
proxy.$el.onselectstart = function () { proxy.$el.onselectstart = function () {
return false return false
} }
}) })
const canvas = ref(null) const canvas = ref(null)
const canvasClick = (e) => { const canvasClick = (e) => {
checkPosArr.push(getMousePos(canvas, e)) checkPosArr.push(getMousePos(canvas, e))
if (num.value == checkNum.value) { if (num.value == checkNum.value) {
num.value = createPoint(getMousePos(canvas, e)) num.value = createPoint(getMousePos(canvas, e))
@ -200,19 +199,19 @@ export default {
if (num.value < checkNum.value) { if (num.value < checkNum.value) {
num.value = createPoint(getMousePos(canvas, e)) num.value = createPoint(getMousePos(canvas, e))
} }
} }
//获取坐标 //获取坐标
const getMousePos = function (obj, e) { const getMousePos = function (obj, e) {
var x = e.offsetX var x = e.offsetX
var y = e.offsetY var y = e.offsetY
return { x, y } return { x, y }
} }
//创建坐标点 //创建坐标点
const createPoint = function (pos) { const createPoint = function (pos) {
tempPoints.push(Object.assign({}, pos)) tempPoints.push(Object.assign({}, pos))
return num.value + 1 return num.value + 1
} }
const refresh = function () { const refresh = async function () {
tempPoints.splice(0, tempPoints.length) tempPoints.splice(0, tempPoints.length)
barAreaColor.value = '#000' barAreaColor.value = '#000'
barAreaBorderColor.value = '#ddd' barAreaBorderColor.value = '#ddd'
@ -220,17 +219,16 @@ export default {
fontPos.splice(0, fontPos.length) fontPos.splice(0, fontPos.length)
checkPosArr.splice(0, checkPosArr.length) checkPosArr.splice(0, checkPosArr.length)
num.value = 1 num.value = 1
getPictrue() await getPictrue()
text.value = t('captcha.fail')
showRefresh.value = true showRefresh.value = true
} }
// 请求背景图片和验证图片 // 请求背景图片和验证图片
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') {
pointBackImgBase.value = res.repData.originalImageBase64 pointBackImgBase.value = res.repData.originalImageBase64
backToken.value = res.repData.token backToken.value = res.repData.token
@ -240,42 +238,14 @@ export default {
} else { } else {
text.value = res.repMsg text.value = res.repMsg
} }
}) }
} //坐标转换函数
//坐标转换函数 const pointTransfrom = function (pointArr, imgSize) {
const pointTransfrom = function (pointArr, imgSize) {
var newPointArr = pointArr.map((p) => { var newPointArr = pointArr.map((p) => {
let x = Math.round((310 * p.x) / parseInt(imgSize.imgWidth)) let x = Math.round((310 * p.x) / parseInt(imgSize.imgWidth))
let y = Math.round((155 * p.y) / parseInt(imgSize.imgHeight)) let y = Math.round((155 * p.y) / parseInt(imgSize.imgHeight))
return { x, y } return { x, y }
}) })
return newPointArr 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> </script>

103
yudao-ui-admin-vue3/src/components/Verifition/src/Verify/VerifySlide.vue
Unescape Escape View File

@ -71,7 +71,7 @@
</div> </div>
</div> </div>
</template> </template>
<script type="text/babel"> <script type="text/babel" setup>
/** /**
* VerifySlide * VerifySlide
* @description 滑块 * @description 滑块
@ -90,10 +90,8 @@ import {
toRefs, toRefs,
getCurrentInstance getCurrentInstance
} from 'vue' } from 'vue'
// "captchaType":"blockPuzzle",
export default { const props = defineProps({
name: 'VerifySlide',
props: {
captchaType: { captchaType: {
type: String type: String
}, },
@ -141,19 +139,18 @@ export default {
} }
} }
} }
}, })
setup(props) {
const { t } = useI18n() const { t } = useI18n()
const { mode, captchaType, type, blockSize, explain } = toRefs(props) const { mode, captchaType, type, blockSize, explain } = toRefs(props)
const { proxy } = getCurrentInstance() const { proxy } = getCurrentInstance()
let secretKey = ref(''), //后端返回的ase加密秘钥 let secretKey = ref(''), //后端返回的ase加密秘钥
passFlag = ref(''), //是否通过的标识 passFlag = ref(''), //是否通过的标识
backImgBase = ref(''), //验证码背景图片 backImgBase = ref(''), //验证码背景图片
blockBackImgBase = ref(''), //验证滑块的背景图片 blockBackImgBase = ref(''), //验证滑块的背景图片
backToken = ref(''), //后端返回的唯一token值 backToken = ref(''), //后端返回的唯一token值
startMoveTime = ref(''), //移动开始的时间 startMoveTime = ref(''), //移动开始的时间
endMovetime = ref(''), //移动结束的时间 endMovetime = ref(''), //移动结束的时间
tipsBackColor = ref(''), //提示词的背景颜色
tipWords = ref(''), tipWords = ref(''),
text = ref(''), text = ref(''),
finishText = ref(''), finishText = ref(''),
@ -163,8 +160,6 @@ export default {
barHeight: 0, barHeight: 0,
barWidth: 0 barWidth: 0
}), }),
top = ref(0),
left = ref(0),
moveBlockLeft = ref(undefined), moveBlockLeft = ref(undefined),
leftBarWidth = ref(undefined), leftBarWidth = ref(undefined),
// 移动中样式 // 移动中样式
@ -179,10 +174,10 @@ export default {
transitionWidth = ref(''), transitionWidth = ref(''),
startLeft = ref(0) startLeft = ref(0)
const barArea = computed(() => { const barArea = computed(() => {
return proxy.$el.querySelector('.verify-bar-area') return proxy.$el.querySelector('.verify-bar-area')
}) })
function init() { const init = () => {
if (explain.value === '') { if (explain.value === '') {
text.value = t('captcha.slide') text.value = t('captcha.slide')
} else { } else {
@ -227,19 +222,19 @@ export default {
window.addEventListener('mouseup', function () { window.addEventListener('mouseup', function () {
end() end()
}) })
} }
watch(type, () => { watch(type, () => {
init() init()
}) })
onMounted(() => { onMounted(() => {
// 禁止拖拽 // 禁止拖拽
init() init()
proxy.$el.onselectstart = function () { proxy.$el.onselectstart = function () {
return false return false
} }
}) })
//鼠标按下 //鼠标按下
function start(e) { const start = (e) => {
e = e || window.event e = e || window.event
if (!e.touches) { if (!e.touches) {
//兼容PC端 //兼容PC端
@ -258,9 +253,9 @@ export default {
e.stopPropagation() e.stopPropagation()
status.value = true status.value = true
} }
} }
//鼠标移动 //鼠标移动
function move(e) { const move = (e) => {
e = e || window.event e = e || window.event
if (status.value && isEnd.value == false) { if (status.value && isEnd.value == false) {
if (!e.touches) { if (!e.touches) {
@ -286,10 +281,10 @@ export default {
moveBlockLeft.value = move_block_left - startLeft.value + 'px' moveBlockLeft.value = move_block_left - startLeft.value + 'px'
leftBarWidth.value = move_block_left - startLeft.value + 'px' leftBarWidth.value = move_block_left - startLeft.value + 'px'
} }
} }
//鼠标松开 //鼠标松开
function end() { const end = () => {
endMovetime.value = +new Date() endMovetime.value = +new Date()
//判断是否重合 //判断是否重合
if (status.value && isEnd.value == false) { if (status.value && isEnd.value == false) {
@ -348,9 +343,9 @@ export default {
}) })
status.value = false status.value = false
} }
} }
const refresh = () => { const refresh = async () => {
showRefresh.value = true showRefresh.value = true
finishText.value = '' finishText.value = ''
@ -366,20 +361,20 @@ export default {
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
@ -388,39 +383,5 @@ export default {
} 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>

Write Preview
Loading…
Cancel
Save