<template>
|
<div>
|
|
<div class="td-outer-wrapper pop " style="display: block; opacity: 1;">
|
<div class="td-mask-common background grey" />
|
<div
|
class="td-pop-cnt center slide"
|
:style="'left:'+left+';top:'+top+';width: 350px; height: 315px; transform: translate(-50%, -50%) scale(1);'"
|
>
|
<div class="td-pop-slide-area">
|
<div class="td-pop-slide-title">
|
<div class="td-pop-title">请拖动下方滑块完成拼图
|
</div>
|
</div>
|
<div class="td-pop-center">
|
<transition name="el-zoom-in-top">
|
<el-alert
|
v-show="msg.show"
|
:title="msg.text"
|
:type="msg.type"
|
center
|
:closable="false"
|
style="position: absolute;z-index: 10;border-radius: unset;"
|
show-icon
|
/>
|
</transition>
|
<!--背景图-->
|
<canvas class="td-bg-img" width="320" height="180" />
|
<div v-show="loading" class="refresh-bg">
|
<img src="./img/loading.gif" class="loading-icon">
|
</div>
|
<!-- <div class="td-bg-slogan" style="display: block;">
|
<!–<div class="td-logo-transparent-icon td-sprite-icon" />–>
|
<span class="td-logo-transparent-iconfont">智能验证</span>
|
</div>-->
|
<img
|
class="td-pop-slide-identity"
|
src=""
|
draggable="false"
|
style="top: 116px; transform: translate(0px, 0px); opacity: 1;"
|
>
|
</div>
|
<!--滑块-->
|
<div class="td-slide-wrap">
|
<div class="td-pop-slidebar">
|
<div class="td-pop-slidebar-tip">请向右拖动滑块
|
</div>
|
</div>
|
<div
|
:class="'td-pop-slidetrigger td-sprite-icon '+mousedown"
|
style="transform: translate(0px, 0px);"
|
@mousedown="handleMouseDown"
|
/>
|
</div>
|
<div class="td-pop-footer">
|
<div class="td-icon-set">
|
<div class="td-icon-close td-sprite-icon icon" @click="hide">
|
<div class="td-icon-tooltip" style="right:-8px;left:auto;">关闭
|
</div>
|
</div>
|
<div class="td-icon-refresh td-sprite-icon icon" @click="getVerify">
|
<div class="td-icon-tooltip">刷新
|
</div>
|
</div>
|
<!--<a id="jump2feedback" style="display: block" href="http://static.tongdun.net/captcha/test/index.html?seqId=1561081035175937S365328C48488966,1561081042275149S365328C03293221,1561081058162146S365328C42730006,1561081659566994S35525D734520462,1561082259315562S35525D737834014,1561082859159316S35525D737251353,1561083458396777S365328C43056286,1561086261446326S35525D733771073&partner=tongdun&appName=x_tongdun2_web" target="_blank">-->
|
<!--<div class="td-icon-info td-sprite-icon icon">-->
|
<!--<div class="td-icon-tooltip">反馈-->
|
<!--</div>-->
|
<!--</div>-->
|
<!--</a>-->
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getVerify, checkVerify } from '@/api/system/verify'
|
|
export default {
|
props: {
|
left: {
|
type: String,
|
default: '70%'
|
},
|
top: {
|
type: String,
|
default: '50%'
|
}
|
},
|
data() {
|
return {
|
loading: false,
|
state: 0, // 0松开，1按下
|
vSlideLeftpx: 0, // 滑块距离左侧的距离
|
mousedown: '',
|
msg: {
|
show: false,
|
type: '',
|
text: ''
|
},
|
token: '',
|
startTime: 0,
|
endTime: 0
|
}
|
},
|
mounted() {
|
this.getVerify()
|
const that = this
|
document.onmousemove = this.handelMouseMove
|
document.onmouseup = this.handleMouseUp
|
|
document.querySelector('.td-pop-slidetrigger').addEventListener('touchstart', function(e) {
|
that.handleMouseDown(e)
|
})
|
document.querySelector('.td-pop-slidetrigger').addEventListener('touchmove', function(e) {
|
that.handelMouseMove(e)
|
e.preventDefault() // 若阻止默认事件，则在长按元素上滑动时，页面是不滚动的，
|
})
|
|
document.querySelector('.td-pop-slidetrigger').addEventListener('touchend', function(e) {
|
// 若手指离开屏幕时，时间小于我们设置的长按时间，则为点击事件，清除定时器，结束长按逻辑
|
that.handleMouseUp(e)
|
})
|
},
|
created() {
|
|
},
|
methods: {
|
getVerify() {
|
this.loading = true
|
this.setLeft(0)
|
|
getVerify({}).then(response => {
|
// 填充画布
|
const c = document.querySelector('.td-bg-img')
|
const ctx = c.getContext('2d')
|
const img = new Image() // 创建img元素
|
img.onload = function() {
|
ctx.drawImage(img, 0, 0)
|
}
|
img.src = response.data.bg
|
|
document.querySelector('.td-pop-slide-identity').src = response.data.slider
|
document.querySelector('.td-pop-slide-identity').style.top = response.data.y + 'px'
|
this.token = response.data.uuid
|
this.loading = false
|
})
|
},
|
/*
|
* @Author : liu.q [916000612@qq.com]
|
* @Date : 2019-06-21 14:09
|
* @Description :鼠标点击
|
*/
|
handleMouseDown() {
|
this.state = 1
|
this.mousedown = 'mousedown'
|
// 记录滑块位置
|
this.vSlideLeftpx = document.querySelector('.td-pop-slidetrigger').getBoundingClientRect().left
|
},
|
/*
|
* @Author : liu.q [916000612@qq.com]
|
* @Date : 2019-06-21 14:09
|
* @Description : 鼠标松开
|
*/
|
handleMouseUp() {
|
this.state = 0
|
this.endTime = new Date().getTime()
|
if (this.startTime == 0) {
|
return
|
}
|
const time = this.endTime - this.startTime
|
|
const x = document.querySelector('.td-pop-slidetrigger').getBoundingClientRect().left - this.vSlideLeftpx
|
checkVerify({ x: x, token: this.token }).then(response => {
|
if (response.data.verify != '-1') {
|
this.msg.show = true
|
const rate = (time / 1000).toFixed(2)
|
this.msg.text = '验证通过，' + rate + '秒的速度超过' + this.getRate(rate) + '的用户'
|
this.msg.type = 'success'
|
setTimeout(() => {
|
this.msg.show = false
|
this.$emit('success', { verify: response.data.verify, x: response.data.x, uuid: response.data.uuid })
|
this.$emit('hide')
|
}, 1200)
|
} else {
|
this.msg.show = true
|
this.msg.text = '验证失败，请重试。'
|
this.msg.type = 'error'
|
setTimeout(() => {
|
this.msg.show = false
|
}, 1200)
|
const timer = setInterval(() => {
|
const left = document.querySelector('.td-pop-slidetrigger').getBoundingClientRect().left - this.vSlideLeftpx - 2
|
this.setLeft(left)
|
if (document.querySelector('.td-pop-slidetrigger').getBoundingClientRect().left - this.vSlideLeftpx <= 0) {
|
clearInterval(timer)
|
this.setLeft(0)
|
}
|
}, 1)
|
this.getVerify()
|
}
|
})
|
},
|
/*
|
* @Author : liu.q [916000612@qq.com]
|
* @Date : 2019-06-21 14:06
|
* @Description : 设置滑块图片左侧偏移
|
*/
|
setLeft(left) {
|
if (left == 0) {
|
this.mousedown = ''
|
}
|
document.querySelector('.td-pop-slidetrigger').style.left = left + 'px'
|
document.querySelector('.td-pop-slide-identity').style.left = left + 'px'
|
},
|
/*
|
* @Author : liu.q [916000612@qq.com]
|
* @Date : 2019-06-21 14:09
|
* @Description :鼠标移动
|
*/
|
handelMouseMove(e) {
|
if (this.state !== 1) {
|
this.startTime = 0
|
return
|
}
|
if (this.startTime == 0) {
|
this.startTime = new Date().getTime()
|
}
|
|
let x
|
if (!e.touches) { // 兼容移动端
|
x = e.clientX
|
} else { // 兼容PC端
|
x = e.touches[0].pageX
|
}
|
if ((x - this.vSlideLeftpx) < 0) {
|
this.setLeft(0)
|
} else if ((x - this.vSlideLeftpx) > 300) {
|
this.setLeft(275)
|
} else {
|
this.setLeft(x - this.vSlideLeftpx - 20)
|
}
|
},
|
/*
|
* @Author : liu.q [916000612@qq.com]
|
* @Date : 2019-06-25 14:50
|
* @Description :关闭
|
*/
|
hide() {
|
this.$emit('hide')
|
},
|
/*
|
* @Author : liu.q [916000612@qq.com]
|
* @Date : 2019-06-25 19:41
|
* @Description : 超过百分之几的用户
|
*/
|
getRate(rate) {
|
if (rate < 0.8) {
|
return '99.99%'
|
} else if (rate < 1) {
|
return '99.96%'
|
} else if (rate < 1.1) {
|
return '99.38%'
|
} else if (rate < 1.2) {
|
return '99.24%'
|
} else if (rate < 1.3) {
|
return '99%'
|
} else if (rate < 1.4) {
|
return '98.88%'
|
} else if (rate < 1.5) {
|
return '98%'
|
} else if (rate < 1.6) {
|
return '96.33%'
|
} else if (rate < 1.7) {
|
return '96%'
|
} else if (rate < 2) {
|
return '95.55%'
|
} else if (rate < 2.3) {
|
return '94%'
|
} else if (rate < 2.6) {
|
return '91%'
|
} else if (rate < 3) {
|
return '80%'
|
} else if (rate < 4) {
|
return '40%'
|
} else if (rate < 5) {
|
return '1%'
|
} else {
|
return '0.01%'
|
}
|
}
|
}
|
}
|
</script>
|
|
<style src="./css/index.css"></style>
|
<style lang="scss">
|
.td-outer-wrapper.pop{min-height: 768px;
|
.td-pop-cnt.center{left:70%;}
|
}
|
</style>
|
