|
|
|
@ -1,12 +1,11 @@
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
|
<view style="position: relative;">
|
|
|
|
<view style="position: relative;">
|
|
|
|
<view v-if="type === '2'" class="verify-img-out"
|
|
|
|
<view v-if="type === '2'" class="verify-img-out" :style="{height: (parseInt(imgSize.height) + vSpace) + 'px'}">
|
|
|
|
:style="{height: (parseInt(imgSize.height) + vSpace) + 'px'}"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<view class="verify-img-panel" :style="{width: imgSize.width,
|
|
|
|
<view class="verify-img-panel" :style="{width: imgSize.width,
|
|
|
|
height: imgSize.height,}">
|
|
|
|
height: imgSize.height,}">
|
|
|
|
|
|
|
|
|
|
|
|
<image :src="backImgBase?('data:image/png;base64,'+backImgBase):defaultImg" alt="" style="width:100%;height:100%;display:block"></image>
|
|
|
|
<image :src="backImgBase?('data:image/png;base64,'+backImgBase):defaultImg" alt=""
|
|
|
|
|
|
|
|
style="width:100%;height:100%;display:block"></image>
|
|
|
|
<view class="verify-refresh" @click="refresh" v-show="showRefresh">
|
|
|
|
<view class="verify-refresh" @click="refresh" v-show="showRefresh">
|
|
|
|
<text class="iconfont icon-refresh"></text>
|
|
|
|
<text class="iconfont icon-refresh"></text>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
@ -24,21 +23,15 @@
|
|
|
|
<view class="verify-left-bar"
|
|
|
|
<view class="verify-left-bar"
|
|
|
|
:style="{width: leftBarWidth?leftBarWidth:'40px', height: '40px', 'border-color': leftBarBorderColor, transaction: transitionWidth}">
|
|
|
|
:style="{width: leftBarWidth?leftBarWidth:'40px', height: '40px', 'border-color': leftBarBorderColor, transaction: transitionWidth}">
|
|
|
|
<text class="verify-msg" v-text="finishText"></text>
|
|
|
|
<text class="verify-msg" v-text="finishText"></text>
|
|
|
|
<view class="verify-move-block"
|
|
|
|
<view class="verify-move-block" @touchstart="start" @touchend="end" @touchmove="move"
|
|
|
|
@touchstart="start"
|
|
|
|
|
|
|
|
@touchend ="end"
|
|
|
|
|
|
|
|
@touchmove ="move"
|
|
|
|
|
|
|
|
:style="{width:'40px', height: '40px', 'background-color': moveBlockBackgroundColor, left: moveBlockLeft, transition: transitionLeft}">
|
|
|
|
:style="{width:'40px', height: '40px', 'background-color': moveBlockBackgroundColor, left: moveBlockLeft, transition: transitionLeft}">
|
|
|
|
<text :class="['verify-icon iconfont', iconClass]"
|
|
|
|
<text :class="['verify-icon iconfont', iconClass]" :style="{color: iconColor}"></text>
|
|
|
|
:style="{color: iconColor}"></text>
|
|
|
|
<view v-if="type === '2'" class="verify-sub-block" :style="{'width':Math.floor(parseInt(imgSize.width)*47/310)+ 'px' ,
|
|
|
|
<view v-if="type === '2'"
|
|
|
|
|
|
|
|
class="verify-sub-block"
|
|
|
|
|
|
|
|
:style="{'width':Math.floor(parseInt(imgSize.width)*47/310)+ 'px' ,
|
|
|
|
|
|
|
|
'height': imgSize.height,
|
|
|
|
'height': imgSize.height,
|
|
|
|
'top':'-' + (parseInt(imgSize.height) + vSpace) + 'px',
|
|
|
|
'top':'-' + (parseInt(imgSize.height) + vSpace) + 'px',
|
|
|
|
}"
|
|
|
|
}">
|
|
|
|
>
|
|
|
|
<image :src="'data:image/png;base64,'+blockBackImgBase" alt=""
|
|
|
|
<image :src="'data:image/png;base64,'+blockBackImgBase" alt="" style="width:100%;height:100%;display:block"></image>
|
|
|
|
style="width:100%;height:100%;display:block"></image>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
@ -50,8 +43,12 @@
|
|
|
|
* VerifySlide
|
|
|
|
* VerifySlide
|
|
|
|
* @description 滑块
|
|
|
|
* @description 滑块
|
|
|
|
* */
|
|
|
|
* */
|
|
|
|
import {aesEncrypt} from "./../utils/ase.js"
|
|
|
|
import {
|
|
|
|
import {myRequest} from "../utils/request.js"
|
|
|
|
aesEncrypt
|
|
|
|
|
|
|
|
} from "./../utils/ase.js"
|
|
|
|
|
|
|
|
import {
|
|
|
|
|
|
|
|
myRequest
|
|
|
|
|
|
|
|
} from "../utils/request.js"
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
name: 'VerifySlide',
|
|
|
|
name: 'VerifySlide',
|
|
|
|
props: {
|
|
|
|
props: {
|
|
|
|
@ -182,8 +179,10 @@
|
|
|
|
|
|
|
|
|
|
|
|
var move_block_left = x - bar_area_left //小方块相对于父元素的left值
|
|
|
|
var move_block_left = x - bar_area_left //小方块相对于父元素的left值
|
|
|
|
if (this.type !== '1') { //图片滑动
|
|
|
|
if (this.type !== '1') { //图片滑动
|
|
|
|
if (move_block_left >= barArea_offsetWidth - parseInt(parseInt(this.blockSize.width) / 2) - 2) {
|
|
|
|
if (move_block_left >= barArea_offsetWidth - parseInt(parseInt(this.blockSize
|
|
|
|
move_block_left = barArea_offsetWidth - parseInt(parseInt(this.blockSize.width) / 2) - 2;
|
|
|
|
.width) / 2) - 2) {
|
|
|
|
|
|
|
|
move_block_left = barArea_offsetWidth - parseInt(parseInt(this.blockSize
|
|
|
|
|
|
|
|
.width) / 2) - 2;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@ -192,8 +191,10 @@
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
//拖动后小方块的left值
|
|
|
|
//拖动后小方块的left值
|
|
|
|
this.moveBlockLeft = (move_block_left - parseInt(parseInt(this.blockSize.width) / 2) ) + "px"
|
|
|
|
this.moveBlockLeft = (move_block_left - parseInt(parseInt(this.blockSize.width) / 2)) +
|
|
|
|
this.leftBarWidth = (move_block_left - parseInt(parseInt(this.blockSize.width) / 2)) + "px"
|
|
|
|
"px"
|
|
|
|
|
|
|
|
this.leftBarWidth = (move_block_left - parseInt(parseInt(this.blockSize.width) / 2)) +
|
|
|
|
|
|
|
|
"px"
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}).exec();
|
|
|
|
}).exec();
|
|
|
|
@ -210,10 +211,22 @@
|
|
|
|
|
|
|
|
|
|
|
|
moveLeftDistance = moveLeftDistance * 310 / parseInt(this.imgSize.width)
|
|
|
|
moveLeftDistance = moveLeftDistance * 310 / parseInt(this.imgSize.width)
|
|
|
|
|
|
|
|
|
|
|
|
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
|
|
|
|
|
|
|
|
})
|
|
|
|
let data = {
|
|
|
|
let 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
|
|
|
|
}
|
|
|
|
}
|
|
|
|
myRequest({
|
|
|
|
myRequest({
|
|
|
|
@ -236,10 +249,13 @@
|
|
|
|
this.refresh();
|
|
|
|
this.refresh();
|
|
|
|
}, 1500)
|
|
|
|
}, 1500)
|
|
|
|
this.passFalg = true
|
|
|
|
this.passFalg = true
|
|
|
|
this.tipWords = `${((this.endMovetime-this.startMoveTime)/1000).toFixed(2)}s验证成功`
|
|
|
|
this.tipWords =
|
|
|
|
|
|
|
|
`${((this.endMovetime-this.startMoveTime)/1000).toFixed(2)}s验证成功`
|
|
|
|
setTimeout(() => {
|
|
|
|
setTimeout(() => {
|
|
|
|
this.tipWords = ""
|
|
|
|
this.tipWords = ""
|
|
|
|
this.$emit('success', {captchaVerification})
|
|
|
|
this.$emit('success', {
|
|
|
|
|
|
|
|
captchaVerification
|
|
|
|
|
|
|
|
})
|
|
|
|
// this.$parent.$emit('success', {captchaVerification})
|
|
|
|
// this.$parent.$emit('success', {captchaVerification})
|
|
|
|
}, 1000)
|
|
|
|
}, 1000)
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
@ -329,8 +345,7 @@
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
mounted() {},
|
|
|
|
},
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
<style scoped>
|
|
|
|
@ -345,6 +360,7 @@
|
|
|
|
top: 50%;
|
|
|
|
top: 50%;
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.verifybox-top {
|
|
|
|
.verifybox-top {
|
|
|
|
padding: 0 15px;
|
|
|
|
padding: 0 15px;
|
|
|
|
height: 50px;
|
|
|
|
height: 50px;
|
|
|
|
@ -355,10 +371,12 @@
|
|
|
|
border-bottom: 1px solid #e4e7eb;
|
|
|
|
border-bottom: 1px solid #e4e7eb;
|
|
|
|
box-sizing: border-box;
|
|
|
|
box-sizing: border-box;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.verifybox-bottom {
|
|
|
|
.verifybox-bottom {
|
|
|
|
/* padding: 15px; */
|
|
|
|
/* padding: 15px; */
|
|
|
|
box-sizing: border-box;
|
|
|
|
box-sizing: border-box;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.verifybox-close {
|
|
|
|
.verifybox-close {
|
|
|
|
position: absolute;
|
|
|
|
position: absolute;
|
|
|
|
top: 13px;
|
|
|
|
top: 13px;
|
|
|
|
@ -368,6 +386,7 @@
|
|
|
|
text-align: center;
|
|
|
|
text-align: center;
|
|
|
|
cursor: pointer;
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.mask {
|
|
|
|
.mask {
|
|
|
|
position: fixed;
|
|
|
|
position: fixed;
|
|
|
|
top: 0;
|
|
|
|
top: 0;
|
|
|
|
@ -379,6 +398,7 @@
|
|
|
|
/* display: none; */
|
|
|
|
/* display: none; */
|
|
|
|
transition: all .5s;
|
|
|
|
transition: all .5s;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.verify-tips {
|
|
|
|
.verify-tips {
|
|
|
|
position: absolute;
|
|
|
|
position: absolute;
|
|
|
|
left: 0px;
|
|
|
|
left: 0px;
|
|
|
|
@ -389,6 +409,7 @@
|
|
|
|
line-height: 30px;
|
|
|
|
line-height: 30px;
|
|
|
|
color: #fff;
|
|
|
|
color: #fff;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.suc-bg {
|
|
|
|
.suc-bg {
|
|
|
|
background-color: rgba(92, 184, 92, .5);
|
|
|
|
background-color: rgba(92, 184, 92, .5);
|
|
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7f5CB85C, endcolorstr=#7f5CB85C);
|
|
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7f5CB85C, endcolorstr=#7f5CB85C);
|
|
|
|
@ -400,12 +421,16 @@
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.tips-enter,.tips-leave-to{
|
|
|
|
.tips-enter,
|
|
|
|
|
|
|
|
.tips-leave-to {
|
|
|
|
bottom: -30px;
|
|
|
|
bottom: -30px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.tips-enter-active,.tips-leave-active{
|
|
|
|
|
|
|
|
|
|
|
|
.tips-enter-active,
|
|
|
|
|
|
|
|
.tips-leave-active {
|
|
|
|
transition: bottom .5s;
|
|
|
|
transition: bottom .5s;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* ---------------------------- */
|
|
|
|
/* ---------------------------- */
|
|
|
|
/*常规验证码*/
|
|
|
|
/*常规验证码*/
|
|
|
|
.verify-code {
|
|
|
|
.verify-code {
|
|
|
|
|