feat：优化验证码的代码，迁移到 components 目录下
feat：在 register.vue、code-login.vue 里，增加验证码
This commit is contained in:
YunaiV
1
src/components/verifition/index.ts
Normal file
1
src/components/verifition/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { default as Verify } from './verify.vue'
|
||||
15
src/components/verifition/utils/ase.ts
Normal file
15
src/components/verifition/utils/ase.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import CryptoJS from 'crypto-js'
|
||||
|
||||
/**
|
||||
* @word 要加密的内容
|
||||
* @keyWord String 服务器随机返回的关键字
|
||||
*/
|
||||
export function aesEncrypt(word, keyWord = 'XwKsGlMcdPMEhR1B') {
|
||||
const key = CryptoJS.enc.Utf8.parse(keyWord)
|
||||
const srcs = CryptoJS.enc.Utf8.parse(word)
|
||||
const encrypted = CryptoJS.AES.encrypt(srcs, key, {
|
||||
mode: CryptoJS.mode.ECB,
|
||||
padding: CryptoJS.pad.Pkcs7,
|
||||
})
|
||||
return encrypted.toString()
|
||||
}
|
||||
432
src/components/verifition/verify.vue
Normal file
432
src/components/verifition/verify.vue
Normal file
File diff suppressed because one or more lines are too long
251
src/components/verifition/verify/verify-points.vue
Normal file
251
src/components/verifition/verify/verify-points.vue
Normal file
@@ -0,0 +1,251 @@
|
||||
<template>
|
||||
<view style="position: relative">
|
||||
<view class="verify-img-out">
|
||||
<view
|
||||
:style="{
|
||||
'width': setSize.imgWidth,
|
||||
'height': setSize.imgHeight,
|
||||
'background-size': `${setSize.imgWidth} ${setSize.imgHeight}`,
|
||||
'margin-bottom': `${pSpace}px`,
|
||||
}" class="verify-img-panel"
|
||||
>
|
||||
<view v-show="showRefresh" class="verify-refresh" style="z-index: 3" @click="refresh">
|
||||
<i class="iconfont icon-refresh" />
|
||||
</view>
|
||||
<img
|
||||
id="image" ref="canvas" :src="`data:image/png;base64,${pointBackImgBase}`"
|
||||
alt="" style="display: block; width: 100%; height: 100%"
|
||||
@click="bindingClick ? canvasClick($event) : undefined"
|
||||
>
|
||||
|
||||
<view
|
||||
v-for="(tempPoint, index) in tempPoints" :key="index" :style="{
|
||||
'background-color': '#1abd6c',
|
||||
'color': '#fff',
|
||||
'z-index': 9999,
|
||||
'width': '20px',
|
||||
'height': '20px',
|
||||
'text-align': 'center',
|
||||
'line-height': '20px',
|
||||
'border-radius': '50%',
|
||||
'position': 'absolute',
|
||||
'top': `${parseInt(tempPoint.y - 10)}px`,
|
||||
'left': `${parseInt(tempPoint.x - 10)}px`,
|
||||
}" class="point-area"
|
||||
>
|
||||
{{ index + 1 }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 'height': this.barSize.height, -->
|
||||
<view
|
||||
:style="{
|
||||
'width': setSize.imgWidth,
|
||||
'color': barAreaColor,
|
||||
'border-color': barAreaBorderColor,
|
||||
'line-height': barSize.height,
|
||||
}" class="verify-bar-area"
|
||||
>
|
||||
<span class="verify-msg">{{ text }}</span>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup type="text/babel" name="VerifyPoints">
|
||||
import { getCurrentInstance, nextTick, onMounted, reactive, ref, toRefs } from 'vue'
|
||||
import { checkCaptcha, getCode } from '@/api/login'
|
||||
/**
|
||||
* VerifyPoints
|
||||
* @description 点选
|
||||
*/
|
||||
import { aesEncrypt } from './../utils/ase'
|
||||
|
||||
const props = defineProps({
|
||||
// 弹出式pop，固定fixed
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'fixed',
|
||||
},
|
||||
captchaType: {
|
||||
type: String,
|
||||
},
|
||||
// 间隔
|
||||
pSpace: {
|
||||
type: Number,
|
||||
default: 5,
|
||||
},
|
||||
imgSize: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
width: '310px',
|
||||
height: '155px',
|
||||
}
|
||||
},
|
||||
},
|
||||
barSize: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
width: '310px',
|
||||
height: '40px',
|
||||
}
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['error', 'ready', 'success'])
|
||||
const { mode, captchaType } = toRefs(props)
|
||||
const { proxy } = getCurrentInstance()
|
||||
const secretKey = ref('') // 后端返回的ase加密秘钥
|
||||
const checkNum = ref(3) // 默认需要点击的字数
|
||||
const fontPos = reactive([]) // 选中的坐标信息
|
||||
const checkPosArr = reactive([]) // 用户点击的坐标
|
||||
const num = ref(1) // 点击的记数
|
||||
const pointBackImgBase = ref('') // 后端获取到的背景图片
|
||||
const poinTextList = reactive([]) // 后端返回的点击字体顺序
|
||||
const backToken = ref('') // 后端返回的token值
|
||||
const setSize = reactive({
|
||||
imgHeight: 0,
|
||||
imgWidth: 0,
|
||||
barHeight: 0,
|
||||
barWidth: 0,
|
||||
})
|
||||
const tempPoints = reactive([])
|
||||
const text = ref('')
|
||||
const barAreaColor = ref(undefined)
|
||||
const barAreaBorderColor = ref(undefined)
|
||||
const showRefresh = ref(true)
|
||||
const bindingClick = ref(true)
|
||||
const imgLeft = ref('')
|
||||
const imgTop = ref('')
|
||||
|
||||
function init() {
|
||||
// 加载页面
|
||||
fontPos.splice(0, fontPos.length)
|
||||
checkPosArr.splice(0, checkPosArr.length)
|
||||
num.value = 1
|
||||
getPictrue()
|
||||
nextTick(() => {
|
||||
setSize.imgHeight = props.imgSize.height
|
||||
setSize.imgWidth = props.imgSize.width
|
||||
setSize.barHeight = props.barSize.height
|
||||
setSize.barWidth = props.barSize.width
|
||||
emit('ready', proxy)
|
||||
})
|
||||
}
|
||||
onMounted(() => {
|
||||
// 禁止拖拽
|
||||
init()
|
||||
proxy.$el.onselectstart = function () {
|
||||
return false
|
||||
}
|
||||
})
|
||||
const canvas = ref(null)
|
||||
const instance = getCurrentInstance()
|
||||
function canvasClick(e) {
|
||||
const query = uni.createSelectorQuery().in(instance.proxy)
|
||||
query.select('#image').boundingClientRect((rect) => {
|
||||
imgLeft.value = Math.ceil(rect.left)
|
||||
imgTop.value = Math.ceil(rect.top)
|
||||
|
||||
checkPosArr.push(getMousePos(canvas, e))
|
||||
if (num.value === checkNum.value) {
|
||||
num.value = createPoint(getMousePos(canvas, e))
|
||||
// 按比例转换坐标值
|
||||
const arr = pointTransfrom(checkPosArr, setSize)
|
||||
checkPosArr.length = 0
|
||||
checkPosArr.push(...arr)
|
||||
// 等创建坐标执行完
|
||||
setTimeout(() => {
|
||||
// var flag = this.comparePos(this.fontPos, this.checkPosArr);
|
||||
// 发送后端请求
|
||||
const captchaVerification = secretKey.value
|
||||
? aesEncrypt(`${backToken.value}---${JSON.stringify(checkPosArr)}`, secretKey.value)
|
||||
: `${backToken.value}---${JSON.stringify(checkPosArr)}`
|
||||
const data = {
|
||||
captchaType: captchaType.value,
|
||||
pointJson: secretKey.value
|
||||
? aesEncrypt(JSON.stringify(checkPosArr), secretKey.value)
|
||||
: JSON.stringify(checkPosArr),
|
||||
token: backToken.value,
|
||||
}
|
||||
checkCaptcha(data).then((res) => {
|
||||
if (res.repCode === '0000') {
|
||||
barAreaColor.value = '#4cae4c'
|
||||
barAreaBorderColor.value = '#5cb85c'
|
||||
text.value = '验证成功'
|
||||
bindingClick.value = false
|
||||
if (mode.value === 'pop') {
|
||||
setTimeout(() => {
|
||||
proxy.$parent.clickShow = false
|
||||
refresh()
|
||||
}, 1500)
|
||||
}
|
||||
emit('success', { captchaVerification })
|
||||
} else {
|
||||
emit('error', proxy)
|
||||
barAreaColor.value = '#d9534f'
|
||||
barAreaBorderColor.value = '#d9534f'
|
||||
text.value = '验证失败'
|
||||
setTimeout(() => {
|
||||
refresh()
|
||||
}, 700)
|
||||
}
|
||||
})
|
||||
}, 400)
|
||||
}
|
||||
if (num.value < checkNum.value) {
|
||||
num.value = createPoint(getMousePos(canvas, e))
|
||||
}
|
||||
}).exec()
|
||||
}
|
||||
// 获取坐标,H5用offsetX,Y,小程序用clientX,Y,pageX,Y,x,y
|
||||
function getMousePos(obj, e) {
|
||||
const x = e?.offsetX ? e.offsetX : Math.ceil(e?.detail.clientX || e?.detail.pageX || e?.detail.x || 0) - imgLeft.value
|
||||
const y = e?.offsetY ? e.offsetY : Math.ceil(e?.detail.clientY || e?.detail.pageY || e?.detail.y || 0) - imgTop.value
|
||||
return { x, y }
|
||||
}
|
||||
// 创建坐标点
|
||||
function createPoint(pos) {
|
||||
tempPoints.push(Object.assign({}, pos))
|
||||
return num.value + 1
|
||||
}
|
||||
async function refresh() {
|
||||
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
|
||||
}
|
||||
|
||||
// 请求背景图片和验证图片
|
||||
async function getPictrue() {
|
||||
const data = {
|
||||
captchaType: captchaType.value,
|
||||
}
|
||||
const res = await getCode(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 = `请依次点击` + `【${poinTextList.value.join(',')}】`
|
||||
} else {
|
||||
text.value = res.repMsg
|
||||
}
|
||||
}
|
||||
// 坐标转换函数
|
||||
function pointTransfrom(pointArr, imgSize) {
|
||||
const newPointArr = pointArr.map((p) => {
|
||||
const x = Math.round((310 * p.x) / Number.parseInt(imgSize.imgWidth))
|
||||
const y = Math.round((155 * p.y) / Number.parseInt(imgSize.imgHeight))
|
||||
return { x, y }
|
||||
})
|
||||
return newPointArr
|
||||
}
|
||||
</script>
|
||||
345
src/components/verifition/verify/verify-slide.vue
Normal file
345
src/components/verifition/verify/verify-slide.vue
Normal file
@@ -0,0 +1,345 @@
|
||||
<template>
|
||||
<view style="position: relative">
|
||||
<view v-if="type === '2'" :style="{ height: `${parseInt(setSize.imgHeight) + pSpace}px` }" class="verify-img-out">
|
||||
<view :style="{ width: setSize.imgWidth, height: setSize.imgHeight }" class="verify-img-panel">
|
||||
<img :src="`data:image/png;base64,${backImgBase}`" alt="" style="display: block; width: 100%; height: 100%">
|
||||
<view v-show="showRefresh" class="verify-refresh" @click="refresh">
|
||||
<view class="iconfont icon-refresh" />
|
||||
</view>
|
||||
<transition name="tips">
|
||||
<text v-if="tipWords" :class="passFlag ? 'suc-bg' : 'err-bg'" class="verify-tips">
|
||||
{{ tipWords }}
|
||||
</text>
|
||||
</transition>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 公共部分 -->
|
||||
<view
|
||||
:style="{ 'width': setSize.imgWidth, 'height': barSize.height, 'line-height': barSize.height }"
|
||||
class="verify-bar-area"
|
||||
>
|
||||
<text class="verify-msg">{{ text }}</text>
|
||||
<view
|
||||
:style="{
|
||||
'width': leftBarWidth !== undefined ? leftBarWidth : barSize.height,
|
||||
'height': barSize.height,
|
||||
'border-color': leftBarBorderColor,
|
||||
'transaction': transitionWidth,
|
||||
}" class="verify-left-bar"
|
||||
>
|
||||
<text class="verify-msg">{{ finishText }}</text>
|
||||
<view
|
||||
v-if="type === '2'" :style="{
|
||||
'width': barSize.height,
|
||||
'height': barSize.height,
|
||||
'background-color': moveBlockBackgroundColor,
|
||||
'left': moveBlockLeft,
|
||||
'transition': transitionLeft,
|
||||
}" class="verify-move-block" @touchstart="start" @touchend="end" @touchmove="move" @mouseup="end"
|
||||
>
|
||||
<view class="verify-icon iconfont" :class="[iconClass]" :style="{ color: iconColor }" />
|
||||
<view
|
||||
v-if="type === '2'" :style="{
|
||||
'width': `${Math.floor((parseInt(setSize.imgWidth) * 47) / 310)}px`,
|
||||
'height': setSize.imgHeight,
|
||||
'top': `-${parseInt(setSize.imgHeight) + pSpace}px`,
|
||||
'background-size': `${setSize.imgWidth} ${setSize.imgHeight}`,
|
||||
}" class="verify-sub-block"
|
||||
>
|
||||
<img
|
||||
:src="`data:image/png;base64,${blockBackImgBase}`" alt=""
|
||||
style="display: block; width: 100%; height: 100%; -webkit-user-drag: none"
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup name="VerifySlide">
|
||||
import { computed, getCurrentInstance, nextTick, onMounted, reactive, ref, toRefs, watch } from 'vue'
|
||||
import { checkCaptcha, getCode } from '@/api/login'
|
||||
/**
|
||||
* VerifySlide
|
||||
* @description 滑块
|
||||
*/
|
||||
import { aesEncrypt } from './../utils/ase'
|
||||
|
||||
const props = defineProps({
|
||||
captchaType: {
|
||||
type: String,
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: '1',
|
||||
},
|
||||
// 弹出式pop，固定fixed
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'fixed',
|
||||
},
|
||||
pSpace: {
|
||||
type: Number,
|
||||
default: 5,
|
||||
},
|
||||
explain: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
imgSize: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
width: '310px',
|
||||
height: '155px',
|
||||
}
|
||||
},
|
||||
},
|
||||
blockSize: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
width: '50px',
|
||||
height: '50px',
|
||||
}
|
||||
},
|
||||
},
|
||||
barSize: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
width: '310px',
|
||||
height: '30px',
|
||||
}
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
// 父级传递来的函数，用于回调
|
||||
const emit = defineEmits(['success', 'error', 'ready'])
|
||||
|
||||
// const { t } = useI18n()
|
||||
const { mode, captchaType, type, blockSize, explain } = toRefs(props)
|
||||
const { proxy } = getCurrentInstance()
|
||||
const secretKey = ref('') // 后端返回的ase加密秘钥
|
||||
const passFlag = ref('') // 是否通过的标识
|
||||
const backImgBase = ref('') // 验证码背景图片
|
||||
const blockBackImgBase = ref('') // 验证滑块的背景图片
|
||||
const backToken = ref('') // 后端返回的唯一token值
|
||||
const startMoveTime = ref('') // 移动开始的时间
|
||||
const endMovetime = ref('') // 移动结束的时间
|
||||
const tipWords = ref('')
|
||||
const text = ref('')
|
||||
const finishText = ref('')
|
||||
const setSize = reactive({
|
||||
imgHeight: 0,
|
||||
imgWidth: 0,
|
||||
barHeight: 0,
|
||||
barWidth: 0,
|
||||
})
|
||||
const moveBlockLeft = ref(0)
|
||||
const leftBarWidth = ref(0)
|
||||
// 移动中样式
|
||||
const moveBlockBackgroundColor = ref(undefined)
|
||||
const leftBarBorderColor = ref('#ddd')
|
||||
const iconColor = ref(undefined)
|
||||
const iconClass = ref('icon-right')
|
||||
const status = ref(false) // 鼠标状态
|
||||
const isEnd = ref(false) // 是够验证完成
|
||||
const showRefresh = ref(true)
|
||||
const transitionLeft = ref('')
|
||||
const transitionWidth = ref('')
|
||||
const startLeft = ref(0)
|
||||
const instance = getCurrentInstance()
|
||||
const barArea = computed(() => {
|
||||
const query = uni.createSelectorQuery().in(instance.proxy)
|
||||
return query.select('.verify-bar-area')
|
||||
})
|
||||
const rectData = ref() // 布局数据
|
||||
function init() {
|
||||
if (explain.value === '') {
|
||||
text.value = '向右滑动完成验证'
|
||||
} else {
|
||||
text.value = explain.value
|
||||
}
|
||||
getPictrue()
|
||||
nextTick(() => {
|
||||
// let { imgHeight, imgWidth, barHeight, barWidth } = props.value.imgSize
|
||||
setSize.imgHeight = props.imgSize.height
|
||||
setSize.imgWidth = props.imgSize.width
|
||||
setSize.barHeight = props.barSize.height
|
||||
setSize.barWidth = props.barSize.width
|
||||
emit('ready', proxy)
|
||||
})
|
||||
}
|
||||
watch(type, () => {
|
||||
init()
|
||||
})
|
||||
onMounted(() => {
|
||||
// 禁止拖拽
|
||||
init()
|
||||
proxy.$el.onselectstart = function () {
|
||||
return false
|
||||
}
|
||||
})
|
||||
// 鼠标按下
|
||||
function start(e) {
|
||||
e = e || window.event
|
||||
let x = 0
|
||||
if (!e.touches) {
|
||||
// 兼容PC端
|
||||
x = e.clientX
|
||||
} else {
|
||||
// 兼容移动端
|
||||
x = e.touches[0].pageX
|
||||
}
|
||||
barArea.value.boundingClientRect((rect) => {
|
||||
rectData.value = rect
|
||||
startLeft.value = Math.floor(x - rect.left)
|
||||
}).exec()
|
||||
startMoveTime.value = +new Date() // 开始滑动的时间
|
||||
if (isEnd.value === false) {
|
||||
text.value = ''
|
||||
moveBlockBackgroundColor.value = '#337ab7'
|
||||
leftBarBorderColor.value = '#337AB7'
|
||||
iconColor.value = '#fff'
|
||||
e.stopPropagation()
|
||||
status.value = true
|
||||
}
|
||||
}
|
||||
// 鼠标移动
|
||||
function move(e) {
|
||||
e = e || window.event
|
||||
if (status.value && isEnd.value === false) {
|
||||
let x = 0
|
||||
if (!e.touches) {
|
||||
// 兼容PC端
|
||||
x = e.clientX
|
||||
} else {
|
||||
// 兼容移动端
|
||||
x = e.touches[0].pageX
|
||||
}
|
||||
if (rectData.value) {
|
||||
const bar_area_left = Math.ceil(rectData.value.left)
|
||||
const barArea_offsetWidth = Math.ceil(rectData.value.width)
|
||||
let move_block_left = x - bar_area_left // 小方块相对于父元素的left值
|
||||
if (move_block_left
|
||||
>= barArea_offsetWidth - Number.parseInt(Number.parseInt(blockSize.value.width) / 2) - 2
|
||||
) {
|
||||
move_block_left
|
||||
= barArea_offsetWidth - Number.parseInt(Number.parseInt(blockSize.value.width) / 2) - 2
|
||||
}
|
||||
if (move_block_left <= 0) {
|
||||
move_block_left = Number.parseInt(Number.parseInt(blockSize.value.width) / 2)
|
||||
}
|
||||
// 拖动后小方块的left值
|
||||
moveBlockLeft.value = `${move_block_left - Number.parseInt(Number.parseInt(blockSize.value.width) / 2)
|
||||
}px`
|
||||
leftBarWidth.value = `${move_block_left - Number.parseInt(Number.parseInt(blockSize.value.width) / 2)
|
||||
}px`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 鼠标松开
|
||||
function end() {
|
||||
endMovetime.value = +new Date()
|
||||
// 判断是否重合
|
||||
if (status.value && isEnd.value === false) {
|
||||
let moveLeftDistance = Number.parseInt((moveBlockLeft.value || '0').replace('px', ''))
|
||||
moveLeftDistance = (moveLeftDistance * 310) / Number.parseInt(setSize.imgWidth)
|
||||
const 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,
|
||||
}
|
||||
checkCaptcha(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 验证成功`
|
||||
const captchaVerification = secretKey.value
|
||||
? aesEncrypt(
|
||||
`${backToken.value}---${JSON.stringify({ x: moveLeftDistance, y: 5.0 })}`,
|
||||
secretKey.value,
|
||||
)
|
||||
: `${backToken.value}---${JSON.stringify({ x: moveLeftDistance, y: 5.0 })}`
|
||||
setTimeout(() => {
|
||||
tipWords.value = ''
|
||||
emit('success', { captchaVerification })
|
||||
}, 1000)
|
||||
} else {
|
||||
moveBlockBackgroundColor.value = '#d9534f'
|
||||
leftBarBorderColor.value = '#d9534f'
|
||||
iconColor.value = '#fff'
|
||||
iconClass.value = 'icon-close'
|
||||
passFlag.value = false
|
||||
setTimeout(() => {
|
||||
refresh()
|
||||
}, 1000)
|
||||
emit('error', proxy)
|
||||
tipWords.value = '验证失败'
|
||||
setTimeout(() => {
|
||||
tipWords.value = ''
|
||||
}, 1000)
|
||||
}
|
||||
})
|
||||
status.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function refresh() {
|
||||
showRefresh.value = true
|
||||
finishText.value = ''
|
||||
|
||||
transitionLeft.value = 'left .3s'
|
||||
moveBlockLeft.value = 0
|
||||
|
||||
leftBarWidth.value = 0
|
||||
transitionWidth.value = 'width .3s'
|
||||
|
||||
leftBarBorderColor.value = '#ddd'
|
||||
moveBlockBackgroundColor.value = '#fff'
|
||||
iconColor.value = '#000'
|
||||
iconClass.value = 'icon-right'
|
||||
isEnd.value = false
|
||||
|
||||
await getPictrue()
|
||||
setTimeout(() => {
|
||||
transitionWidth.value = ''
|
||||
transitionLeft.value = ''
|
||||
text.value = explain.value
|
||||
}, 300)
|
||||
}
|
||||
|
||||
// 请求背景图片和验证图片
|
||||
async function getPictrue() {
|
||||
const data = {
|
||||
captchaType: captchaType.value,
|
||||
}
|
||||
const res = await getCode(data)
|
||||
|
||||
if (res.repCode === '0000') {
|
||||
backImgBase.value = res.repData.originalImageBase64
|
||||
blockBackImgBase.value = res.repData.jigsawImageBase64
|
||||
backToken.value = res.repData.token
|
||||
secretKey.value = res.repData.secretKey
|
||||
} else {
|
||||
tipWords.value = res.repMsg
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user