|
|
@@ -1,56 +1,62 @@
|
|
|
<template>
|
|
|
- <div style="position: relative;">
|
|
|
- <div
|
|
|
- v-if="type === '2'"
|
|
|
- class="verify-img-out"
|
|
|
- :style="{height: (parseInt(setSize.imgHeight) + vSpace) + 'px'}"
|
|
|
- >
|
|
|
- <div
|
|
|
- class="verify-img-panel"
|
|
|
- :style="{width: setSize.imgWidth,
|
|
|
- height: setSize.imgHeight,}"
|
|
|
- >
|
|
|
- <img :src="backImgBase?('data:image/png;base64,'+backImgBase):defaultImg" alt="" style="width:100%;height:100%;display:block">
|
|
|
- <div v-show="showRefresh" class="verify-refresh" @click="refresh"><i class="iconfont icon-refresh" />
|
|
|
- </div>
|
|
|
+ <div style="position: relative">
|
|
|
+ <div v-if="type === '2'" class="verify-img-out" :style="{ height: parseInt(setSize.imgHeight) + vSpace + 'px' }">
|
|
|
+ <div class="verify-img-panel" :style="{ width: setSize.imgWidth, height: setSize.imgHeight }">
|
|
|
+ <img
|
|
|
+ :src="backImgBase ? 'data:image/png;base64,' + backImgBase : defaultImg"
|
|
|
+ alt=""
|
|
|
+ style="width: 100%; height: 100%; display: block"
|
|
|
+ />
|
|
|
+ <div v-show="showRefresh" class="verify-refresh" @click="refresh"><i class="iconfont icon-refresh" /></div>
|
|
|
<transition name="tips">
|
|
|
- <span v-if="tipWords" class="verify-tips" :class="passFlag ?'suc-bg':'err-bg'">{{ tipWords }}</span>
|
|
|
+ <span v-if="tipWords" class="verify-tips" :class="passFlag ? 'suc-bg' : 'err-bg'">{{ tipWords }}</span>
|
|
|
</transition>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 公共部分 -->
|
|
|
<div
|
|
|
class="verify-bar-area"
|
|
|
- :style="{width: setSize.imgWidth,
|
|
|
- height: barSize.height,
|
|
|
- 'line-height':barSize.height}"
|
|
|
+ :style="{ width: setSize.imgWidth, height: barSize.height, 'line-height': barSize.height }"
|
|
|
>
|
|
|
<span class="verify-msg" v-text="text" />
|
|
|
<div
|
|
|
class="verify-left-bar"
|
|
|
- :style="{width: (leftBarWidth!==undefined)?leftBarWidth: barSize.height, height: barSize.height, 'border-color': leftBarBorderColor, transaction: transitionWidth}"
|
|
|
+ :style="{
|
|
|
+ width: leftBarWidth !== undefined ? leftBarWidth : barSize.height,
|
|
|
+ height: barSize.height,
|
|
|
+ 'border-color': leftBarBorderColor,
|
|
|
+ transaction: transitionWidth,
|
|
|
+ }"
|
|
|
>
|
|
|
<span class="verify-msg" v-text="finishText" />
|
|
|
<div
|
|
|
class="verify-move-block"
|
|
|
- :style="{width: barSize.height, height: barSize.height, 'background-color': moveBlockBackgroundColor, left: moveBlockLeft, transition: transitionLeft}"
|
|
|
+ :style="{
|
|
|
+ width: barSize.height,
|
|
|
+ height: barSize.height,
|
|
|
+ 'background-color': moveBlockBackgroundColor,
|
|
|
+ left: moveBlockLeft,
|
|
|
+ transition: transitionLeft,
|
|
|
+ }"
|
|
|
@touchstart="start"
|
|
|
@mousedown="start"
|
|
|
>
|
|
|
- <i
|
|
|
- :class="['verify-icon iconfont', iconClass]"
|
|
|
- :style="{color: iconColor}"
|
|
|
- />
|
|
|
+ <i :class="['verify-icon iconfont', iconClass]" :style="{ color: iconColor }" />
|
|
|
<div
|
|
|
v-if="type === '2'"
|
|
|
class="verify-sub-block"
|
|
|
- :style="{'width':Math.floor(parseInt(setSize.imgWidth)*47/310)+ 'px',
|
|
|
- 'height': setSize.imgHeight,
|
|
|
- 'top':'-' + (parseInt(setSize.imgHeight) + vSpace) + 'px',
|
|
|
- 'background-size': setSize.imgWidth + ' ' + setSize.imgHeight,
|
|
|
+ :style="{
|
|
|
+ width: Math.floor((parseInt(setSize.imgWidth) * 47) / 310) + 'px',
|
|
|
+ height: setSize.imgHeight,
|
|
|
+ top: '-' + (parseInt(setSize.imgHeight) + vSpace) + 'px',
|
|
|
+ 'background-size': setSize.imgWidth + ' ' + setSize.imgHeight,
|
|
|
}"
|
|
|
>
|
|
|
- <img :src="'data:image/png;base64,'+blockBackImgBase" alt="" style="width:100%;height:100%;display:block">
|
|
|
+ <img
|
|
|
+ :src="'data:image/png;base64,' + blockBackImgBase"
|
|
|
+ alt=""
|
|
|
+ style="width: 100%; height: 100%; display: block"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -59,12 +65,12 @@
|
|
|
</template>
|
|
|
<script type="text/babel">
|
|
|
/**
|
|
|
- * VerifySlide
|
|
|
- * @description 滑块
|
|
|
- * */
|
|
|
-import { aesEncrypt } from './../utils/ase'
|
|
|
-import { resetSize } from './../utils/util'
|
|
|
-import {ajCaptcha, ajCaptchaCheck} from "../../../api/common";
|
|
|
+ * VerifySlide
|
|
|
+ * @description 滑块
|
|
|
+ * */
|
|
|
+import { aesEncrypt } from './../utils/ase';
|
|
|
+import { resetSize } from './../utils/util';
|
|
|
+import { ajCaptcha, ajCaptchaCheck } from '../../../api/common';
|
|
|
|
|
|
// "captchaType":"blockPuzzle",
|
|
|
export default {
|
|
|
@@ -75,52 +81,52 @@ export default {
|
|
|
},
|
|
|
type: {
|
|
|
type: String,
|
|
|
- default: '1'
|
|
|
+ default: '1',
|
|
|
},
|
|
|
// 弹出式pop,固定fixed
|
|
|
mode: {
|
|
|
type: String,
|
|
|
- default: 'fixed'
|
|
|
+ default: 'fixed',
|
|
|
},
|
|
|
vSpace: {
|
|
|
type: Number,
|
|
|
- default: 5
|
|
|
+ default: 5,
|
|
|
},
|
|
|
explain: {
|
|
|
type: String,
|
|
|
- default: '向右滑动完成验证'
|
|
|
+ default: '向右滑动完成验证',
|
|
|
},
|
|
|
imgSize: {
|
|
|
type: Object,
|
|
|
default() {
|
|
|
return {
|
|
|
width: '310px',
|
|
|
- height: '155px'
|
|
|
- }
|
|
|
- }
|
|
|
+ height: '155px',
|
|
|
+ };
|
|
|
+ },
|
|
|
},
|
|
|
blockSize: {
|
|
|
type: Object,
|
|
|
default() {
|
|
|
return {
|
|
|
width: '50px',
|
|
|
- height: '50px'
|
|
|
- }
|
|
|
- }
|
|
|
+ height: '50px',
|
|
|
+ };
|
|
|
+ },
|
|
|
},
|
|
|
barSize: {
|
|
|
type: Object,
|
|
|
default() {
|
|
|
return {
|
|
|
width: '310px',
|
|
|
- height: '40px'
|
|
|
- }
|
|
|
- }
|
|
|
+ height: '40px',
|
|
|
+ };
|
|
|
+ },
|
|
|
},
|
|
|
defaultImg: {
|
|
|
type: String,
|
|
|
- default: ''
|
|
|
- }
|
|
|
+ default: '',
|
|
|
+ },
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -139,7 +145,7 @@ export default {
|
|
|
imgHeight: 0,
|
|
|
imgWidth: 0,
|
|
|
barHeight: 0,
|
|
|
- barWidth: 0
|
|
|
+ barWidth: 0,
|
|
|
},
|
|
|
top: 0,
|
|
|
left: 0,
|
|
|
@@ -151,198 +157,208 @@ export default {
|
|
|
iconColor: undefined,
|
|
|
iconClass: 'icon-right',
|
|
|
status: false, // 鼠标状态
|
|
|
- isEnd: false, // 是够验证完成
|
|
|
+ isEnd: false, // 是够验证完成
|
|
|
showRefresh: true,
|
|
|
transitionLeft: '',
|
|
|
- transitionWidth: ''
|
|
|
- }
|
|
|
+ transitionWidth: '',
|
|
|
+ };
|
|
|
},
|
|
|
computed: {
|
|
|
barArea() {
|
|
|
- return this.$el.querySelector('.verify-bar-area')
|
|
|
+ return this.$el.querySelector('.verify-bar-area');
|
|
|
},
|
|
|
resetSize() {
|
|
|
- return resetSize
|
|
|
- }
|
|
|
+ return resetSize;
|
|
|
+ },
|
|
|
},
|
|
|
watch: {
|
|
|
// type变化则全面刷新
|
|
|
type: {
|
|
|
immediate: true,
|
|
|
handler() {
|
|
|
- this.init()
|
|
|
- }
|
|
|
- }
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ },
|
|
|
},
|
|
|
mounted() {
|
|
|
// 禁止拖拽
|
|
|
- this.$el.onselectstart = function() {
|
|
|
- return false
|
|
|
- }
|
|
|
- console.log(this.defaultImg)
|
|
|
+ this.$el.onselectstart = function () {
|
|
|
+ return false;
|
|
|
+ };
|
|
|
+ console.log(this.defaultImg);
|
|
|
},
|
|
|
methods: {
|
|
|
init() {
|
|
|
- this.text = this.explain
|
|
|
- this.getPictrue()
|
|
|
+ this.text = this.explain;
|
|
|
+ this.getPictrue();
|
|
|
this.$nextTick(() => {
|
|
|
- const setSize = this.resetSize(this) // 重新设置宽度高度
|
|
|
+ const setSize = this.resetSize(this); // 重新设置宽度高度
|
|
|
for (const key in setSize) {
|
|
|
- this.$set(this.setSize, key, setSize[key])
|
|
|
+ this.$set(this.setSize, key, setSize[key]);
|
|
|
}
|
|
|
- this.$parent.$emit('ready', this)
|
|
|
- })
|
|
|
+ this.$parent.$emit('ready', this);
|
|
|
+ });
|
|
|
|
|
|
- var _this = this
|
|
|
+ var _this = this;
|
|
|
|
|
|
- window.removeEventListener('touchmove', function(e) {
|
|
|
- _this.move(e)
|
|
|
- })
|
|
|
- window.removeEventListener('mousemove', function(e) {
|
|
|
- _this.move(e)
|
|
|
- })
|
|
|
+ window.removeEventListener('touchmove', function (e) {
|
|
|
+ _this.move(e);
|
|
|
+ });
|
|
|
+ window.removeEventListener('mousemove', function (e) {
|
|
|
+ _this.move(e);
|
|
|
+ });
|
|
|
|
|
|
// 鼠标松开
|
|
|
- window.removeEventListener('touchend', function() {
|
|
|
- _this.end()
|
|
|
- })
|
|
|
- window.removeEventListener('mouseup', function() {
|
|
|
- _this.end()
|
|
|
- })
|
|
|
+ window.removeEventListener('touchend', function () {
|
|
|
+ _this.end();
|
|
|
+ });
|
|
|
+ window.removeEventListener('mouseup', function () {
|
|
|
+ _this.end();
|
|
|
+ });
|
|
|
|
|
|
- window.addEventListener('touchmove', function(e) {
|
|
|
- _this.move(e)
|
|
|
- })
|
|
|
- window.addEventListener('mousemove', function(e) {
|
|
|
- _this.move(e)
|
|
|
- })
|
|
|
+ window.addEventListener('touchmove', function (e) {
|
|
|
+ _this.move(e);
|
|
|
+ });
|
|
|
+ window.addEventListener('mousemove', function (e) {
|
|
|
+ _this.move(e);
|
|
|
+ });
|
|
|
|
|
|
// 鼠标松开
|
|
|
- window.addEventListener('touchend', function() {
|
|
|
- _this.end()
|
|
|
- })
|
|
|
- window.addEventListener('mouseup', function() {
|
|
|
- _this.end()
|
|
|
- })
|
|
|
+ window.addEventListener('touchend', function () {
|
|
|
+ _this.end();
|
|
|
+ });
|
|
|
+ window.addEventListener('mouseup', function () {
|
|
|
+ _this.end();
|
|
|
+ });
|
|
|
},
|
|
|
|
|
|
// 鼠标按下
|
|
|
- start: function(e) {
|
|
|
- e = e || window.event
|
|
|
- if (!e.touches) { // 兼容PC端
|
|
|
- var x = e.clientX
|
|
|
- } else { // 兼容移动端
|
|
|
- var x = e.touches[0].pageX
|
|
|
+ start: function (e) {
|
|
|
+ e = e || window.event;
|
|
|
+ if (!e.touches) {
|
|
|
+ // 兼容PC端
|
|
|
+ var x = e.clientX;
|
|
|
+ } else {
|
|
|
+ // 兼容移动端
|
|
|
+ var x = e.touches[0].pageX;
|
|
|
}
|
|
|
- this.startLeft = Math.floor(x - this.barArea.getBoundingClientRect().left)
|
|
|
- this.startMoveTime = +new Date() // 开始滑动的时间
|
|
|
+ this.startLeft = Math.floor(x - this.barArea.getBoundingClientRect().left);
|
|
|
+ this.startMoveTime = +new Date(); // 开始滑动的时间
|
|
|
if (this.isEnd == false) {
|
|
|
- this.text = ''
|
|
|
- this.moveBlockBackgroundColor = '#337ab7'
|
|
|
- this.leftBarBorderColor = '#337AB7'
|
|
|
- this.iconColor = '#fff'
|
|
|
- e.stopPropagation()
|
|
|
- this.status = true
|
|
|
+ this.text = '';
|
|
|
+ this.moveBlockBackgroundColor = '#337ab7';
|
|
|
+ this.leftBarBorderColor = '#337AB7';
|
|
|
+ this.iconColor = '#fff';
|
|
|
+ e.stopPropagation();
|
|
|
+ this.status = true;
|
|
|
}
|
|
|
},
|
|
|
// 鼠标移动
|
|
|
- move: function(e) {
|
|
|
- e = e || window.event
|
|
|
+ move: function (e) {
|
|
|
+ e = e || window.event;
|
|
|
if (this.status && this.isEnd == false) {
|
|
|
- if (!e.touches) { // 兼容PC端
|
|
|
- var x = e.clientX
|
|
|
- } else { // 兼容移动端
|
|
|
- var x = e.touches[0].pageX
|
|
|
+ if (!e.touches) {
|
|
|
+ // 兼容PC端
|
|
|
+ var x = e.clientX;
|
|
|
+ } else {
|
|
|
+ // 兼容移动端
|
|
|
+ var x = e.touches[0].pageX;
|
|
|
}
|
|
|
- var bar_area_left = this.barArea.getBoundingClientRect().left
|
|
|
- var move_block_left = x - bar_area_left // 小方块相对于父元素的left值
|
|
|
+ var bar_area_left = this.barArea.getBoundingClientRect().left;
|
|
|
+ var move_block_left = x - bar_area_left; // 小方块相对于父元素的left值
|
|
|
if (move_block_left >= this.barArea.offsetWidth - parseInt(parseInt(this.blockSize.width) / 2) - 2) {
|
|
|
- move_block_left = this.barArea.offsetWidth - parseInt(parseInt(this.blockSize.width) / 2) - 2
|
|
|
+ move_block_left = this.barArea.offsetWidth - parseInt(parseInt(this.blockSize.width) / 2) - 2;
|
|
|
}
|
|
|
if (move_block_left <= 0) {
|
|
|
- move_block_left = parseInt(parseInt(this.blockSize.width) / 2)
|
|
|
+ move_block_left = parseInt(parseInt(this.blockSize.width) / 2);
|
|
|
}
|
|
|
// 拖动后小方块的left值
|
|
|
- this.moveBlockLeft = (move_block_left - this.startLeft) + 'px'
|
|
|
- this.leftBarWidth = (move_block_left - this.startLeft) + 'px'
|
|
|
+ this.moveBlockLeft = move_block_left - this.startLeft + 'px';
|
|
|
+ this.leftBarWidth = move_block_left - this.startLeft + 'px';
|
|
|
}
|
|
|
},
|
|
|
|
|
|
// 鼠标松开
|
|
|
- end: function() {
|
|
|
- this.endMovetime = +new Date()
|
|
|
- var _this = this
|
|
|
+ end: function () {
|
|
|
+ this.endMovetime = +new Date();
|
|
|
+ var _this = this;
|
|
|
// 判断是否重合
|
|
|
if (this.status && this.isEnd == false) {
|
|
|
- var moveLeftDistance = parseInt((this.moveBlockLeft || '').replace('px', ''))
|
|
|
- moveLeftDistance = moveLeftDistance * 310 / parseInt(this.setSize.imgWidth)
|
|
|
+ var moveLeftDistance = parseInt((this.moveBlockLeft || '').replace('px', ''));
|
|
|
+ moveLeftDistance = (moveLeftDistance * 310) / parseInt(this.setSize.imgWidth);
|
|
|
const data = {
|
|
|
captchaType: this.captchaType,
|
|
|
- 'pointJson': this.secretKey ? aesEncrypt(JSON.stringify({ x: moveLeftDistance, y: 5.0 }), this.secretKey) : JSON.stringify({ x: moveLeftDistance, y: 5.0 }),
|
|
|
- 'token': this.backToken
|
|
|
- }
|
|
|
- ajCaptchaCheck(data).then(res => {
|
|
|
- this.moveBlockBackgroundColor = '#5cb85c'
|
|
|
- this.leftBarBorderColor = '#5cb85c'
|
|
|
- this.iconColor = '#fff'
|
|
|
- this.iconClass = 'icon-check'
|
|
|
- this.showRefresh = false
|
|
|
- this.isEnd = true
|
|
|
+ pointJson: this.secretKey
|
|
|
+ ? aesEncrypt(JSON.stringify({ x: moveLeftDistance, y: 5.0 }), this.secretKey)
|
|
|
+ : JSON.stringify({ x: moveLeftDistance, y: 5.0 }),
|
|
|
+ token: this.backToken,
|
|
|
+ };
|
|
|
+ ajCaptchaCheck(data)
|
|
|
+ .then((res) => {
|
|
|
+ this.moveBlockBackgroundColor = '#5cb85c';
|
|
|
+ this.leftBarBorderColor = '#5cb85c';
|
|
|
+ this.iconColor = '#fff';
|
|
|
+ this.iconClass = 'icon-check';
|
|
|
+ this.showRefresh = false;
|
|
|
+ this.isEnd = true;
|
|
|
if (this.mode == 'pop') {
|
|
|
setTimeout(() => {
|
|
|
- this.$parent.clickShow = false
|
|
|
- this.refresh()
|
|
|
- }, 1500)
|
|
|
+ this.$parent.clickShow = false;
|
|
|
+ this.refresh();
|
|
|
+ }, 1500);
|
|
|
}
|
|
|
- this.passFlag = true
|
|
|
- this.tipWords = `${((this.endMovetime - this.startMoveTime) / 1000).toFixed(2)}s验证成功`
|
|
|
- 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 })
|
|
|
+ this.passFlag = true;
|
|
|
+ this.tipWords = `${((this.endMovetime - this.startMoveTime) / 1000).toFixed(2)}s验证成功`;
|
|
|
+ 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 });
|
|
|
setTimeout(() => {
|
|
|
- this.tipWords = ''
|
|
|
- this.$parent.closeBox()
|
|
|
- this.$parent.$emit('success', { captchaVerification })
|
|
|
- }, 1000)
|
|
|
- }).catch(res=>{
|
|
|
- this.moveBlockBackgroundColor = '#d9534f'
|
|
|
- this.leftBarBorderColor = '#d9534f'
|
|
|
- this.iconColor = '#fff'
|
|
|
- this.iconClass = 'icon-close'
|
|
|
- this.passFlag = false
|
|
|
- setTimeout(function() {
|
|
|
- _this.refresh()
|
|
|
- }, 1000)
|
|
|
- this.$parent.$emit('error', this)
|
|
|
- this.tipWords = '验证失败'
|
|
|
- setTimeout(() => {
|
|
|
- this.tipWords = ''
|
|
|
- }, 1000)
|
|
|
- })
|
|
|
- this.status = false
|
|
|
+ this.tipWords = '';
|
|
|
+ this.$parent.closeBox();
|
|
|
+ this.$parent.$emit('success', { captchaVerification });
|
|
|
+ }, 1000);
|
|
|
+ })
|
|
|
+ .catch((res) => {
|
|
|
+ this.moveBlockBackgroundColor = '#d9534f';
|
|
|
+ this.leftBarBorderColor = '#d9534f';
|
|
|
+ this.iconColor = '#fff';
|
|
|
+ this.iconClass = 'icon-close';
|
|
|
+ this.passFlag = false;
|
|
|
+ setTimeout(function () {
|
|
|
+ _this.refresh();
|
|
|
+ }, 1000);
|
|
|
+ this.$parent.$emit('error', this);
|
|
|
+ this.tipWords = '验证失败';
|
|
|
+ setTimeout(() => {
|
|
|
+ this.tipWords = '';
|
|
|
+ }, 1000);
|
|
|
+ });
|
|
|
+ this.status = false;
|
|
|
}
|
|
|
},
|
|
|
|
|
|
- refresh: function() {
|
|
|
- this.showRefresh = true
|
|
|
- this.finishText = ''
|
|
|
+ refresh: function () {
|
|
|
+ this.showRefresh = true;
|
|
|
+ this.finishText = '';
|
|
|
|
|
|
- this.transitionLeft = 'left .3s'
|
|
|
- this.moveBlockLeft = 0
|
|
|
+ this.transitionLeft = 'left .3s';
|
|
|
+ this.moveBlockLeft = 0;
|
|
|
|
|
|
- this.leftBarWidth = undefined
|
|
|
- this.transitionWidth = 'width .3s'
|
|
|
+ this.leftBarWidth = undefined;
|
|
|
+ this.transitionWidth = 'width .3s';
|
|
|
|
|
|
- this.leftBarBorderColor = '#ddd'
|
|
|
- this.moveBlockBackgroundColor = '#fff'
|
|
|
- this.iconColor = '#000'
|
|
|
- this.iconClass = 'icon-right'
|
|
|
- this.isEnd = false
|
|
|
+ this.leftBarBorderColor = '#ddd';
|
|
|
+ this.moveBlockBackgroundColor = '#fff';
|
|
|
+ this.iconColor = '#000';
|
|
|
+ this.iconClass = 'icon-right';
|
|
|
+ this.isEnd = false;
|
|
|
|
|
|
- this.getPictrue()
|
|
|
+ this.getPictrue();
|
|
|
setTimeout(() => {
|
|
|
- this.transitionWidth = ''
|
|
|
- this.transitionLeft = ''
|
|
|
- this.text = this.explain
|
|
|
- }, 300)
|
|
|
+ this.transitionWidth = '';
|
|
|
+ this.transitionLeft = '';
|
|
|
+ this.text = this.explain;
|
|
|
+ }, 300);
|
|
|
},
|
|
|
|
|
|
// 请求背景图片和验证图片
|
|
|
@@ -351,19 +367,20 @@ export default {
|
|
|
captchaType: this.captchaType,
|
|
|
clientUid: localStorage.getItem('slider'),
|
|
|
ts: Date.now(), // 现在的时间戳
|
|
|
- }
|
|
|
- ajCaptcha(data).then(res => {
|
|
|
- this.backImgBase = res.data.originalImageBase64
|
|
|
- this.blockBackImgBase = res.data.jigsawImageBase64
|
|
|
- this.backToken = res.data.token
|
|
|
- this.secretKey = res.data.secretKey
|
|
|
- }).catch(res =>{
|
|
|
- this.tipWords = res.msg
|
|
|
- this.backImgBase = null
|
|
|
- this.blockBackImgBase = null
|
|
|
- })
|
|
|
+ };
|
|
|
+ ajCaptcha(data)
|
|
|
+ .then((res) => {
|
|
|
+ this.backImgBase = res.data.originalImageBase64;
|
|
|
+ this.blockBackImgBase = res.data.jigsawImageBase64;
|
|
|
+ this.backToken = res.data.token;
|
|
|
+ this.secretKey = res.data.secretKey;
|
|
|
+ })
|
|
|
+ .catch((res) => {
|
|
|
+ this.tipWords = res.msg;
|
|
|
+ this.backImgBase = null;
|
|
|
+ this.blockBackImgBase = null;
|
|
|
+ });
|
|
|
},
|
|
|
},
|
|
|
-}
|
|
|
+};
|
|
|
</script>
|
|
|
-
|