faiz
/
Huanyuyuehui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Huanyuyuehui/components/verify/verifySlider/verifySlider.vue

650 lines
17 KiB
Vue
Raw Normal View History

init
2024-03-21 17:52:58 +08:00
<template>
<view style="position: relative;">
<view v-if="type === '2'" class="verify-img-out" :style="{height: (parseInt(imgSize.height) + vSpace) + 'px'}">
<view class="verify-img-panel" :style="{width: imgSize.width,
height: imgSize.height,}">
<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">
<text class="iconfont icon-refresh"></text>
</view>
<transition name="tips">
<text class="verify-tips" v-if="tipWords" :class="passFalg ? 'suc-bg':'err-bg'">{{tipWords}}</text>
</transition>
</view>
</view>
<!-- 公共部分 -->
<view class="verify-bar-area" :style="{width: imgSize.width,
height: '40px',
'line-height':'40px'}">
<text class="verify-msg" v-text="text"></text>
<view class="verify-left-bar"
:style="{width: leftBarWidth?leftBarWidth:'40px', height: '40px', 'border-color': leftBarBorderColor, transaction: transitionWidth}">
<text class="verify-msg" v-text="finishText"></text>
<view class="verify-move-block" @touchstart="start" @touchend="end" @touchmove="move"
:style="{width:'40px', height: '40px', 'background-color': moveBlockBackgroundColor, left: moveBlockLeft, transition: transitionLeft}">
<text :class="['verify-icon iconfont', iconClass]" :style="{color: iconColor}"></text>
<view v-if="type === '2'" class="verify-sub-block" :style="{'width':Math.floor(parseInt(imgSize.width)*47/310)+ 'px' ,
'height': imgSize.height,
'top':'-' + (parseInt(imgSize.height) + vSpace) + 'px',
}">
<image :src="'data:image/png;base64,'+blockBackImgBase" alt=""
style="width:100%;height:100%;display:block"></image>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
去除版权注释
2024-03-21 18:05:36 +08:00
init
2024-03-21 17:52:58 +08:00
/**
* VerifySlide
* @description 滑块
* */
import {
aesEncrypt
} from "./../utils/ase.js"
import {
getAjcaptcha,
ajcaptchaCheck
} from '@/api/api.js';
export default {
name: 'VerifySlide',
props: {
captchaType: {
type: String,
},
type: {
type: String,
default: '1'
},
//弹出式pop，固定fixed
mode: {
type: String,
default: 'fixed'
},
vSpace: {
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: '100%',
height: '40px'
}
}
},
defaultImg: {
type: String,
default: ''
}
},
data() {
return {
secretKey: '', //后端返回的加密秘钥 字段
passFalg: false, //请求通过与否
backImgBase: '', //验证码背景图片
blockBackImgBase: '', //验证滑块的背景图片
backToken: "", //后端返回的唯一token值
startMoveTime: "", //移动开始的时间
endMovetime: '', //移动结束的时间
tipsBackColor: '', //提示词的北京颜色
tipWords: '',
text: '',
finishText: '',
setSize: {
imgHeight: 0,
imgWidth: 0,
barHeight: 0,
barWidth: 0
},
top: 0,
left: 0,
moveBlockLeft: undefined,
leftBarWidth: undefined,
// 移动中样式
moveBlockBackgroundColor: undefined,
leftBarBorderColor: '#ddd',
iconColor: undefined,
iconClass: 'icon-right',
status: false, //鼠标状态
isEnd: false, //是够验证完成
showRefresh: true,
transitionLeft: '',
transitionWidth: ''
}
},
methods: {
init() {
this.text = this.explain
this.getPictrue();
this.$nextTick(() => {
this.$parent.$emit('ready', this)
})
},
//鼠标按下
start: function(e) {
this.startMoveTime = new Date().getTime(); //开始滑动的时间
if (this.isEnd == false) {
this.text = ''
this.moveBlockBackgroundColor = '#337ab7'
this.leftBarBorderColor = '#337AB7'
this.iconColor = '#fff'
e.stopPropagation();
this.status = true;
}
},
//鼠标移动
move: function(e) {
var query = uni.createSelectorQuery().in(this);
this.barArea = query.select('.verify-bar-area')
var bar_area_left, barArea_offsetWidth;
this.barArea.boundingClientRect(data => {
bar_area_left = Math.ceil(data.left)
barArea_offsetWidth = Math.ceil(data.width)
if (this.status && this.isEnd == false) {
if (!e.touches) { //兼容移动端
var x = Math.ceil(e.clientX);
} else { //兼容PC端
var x = Math.ceil(e.touches[0].pageX);
}
// var bar_area_left = this.getLeft(this.barArea);
var move_block_left = x - bar_area_left //小方块相对于父元素的left值
if (this.type !== '1') { //图片滑动
if (move_block_left >= barArea_offsetWidth - parseInt(parseInt(this.blockSize
.width) / 2) - 2) {
move_block_left = barArea_offsetWidth - parseInt(parseInt(this.blockSize
.width) / 2) - 2;
}
}
if (move_block_left <= 0) {
move_block_left = parseInt(parseInt(this.blockSize.width) / 2);
}
//拖动后小方块的left值
this.moveBlockLeft = (move_block_left - parseInt(parseInt(this.blockSize.width) / 2)) +
"px"
this.leftBarWidth = (move_block_left - parseInt(parseInt(this.blockSize.width) / 2)) +
"px"
}
}).exec();
},
//鼠标松开
end: function() {
this.endMovetime = new Date().getTime();
var _this = this;
// 判断是否重合
if (this.status && this.isEnd == false) {
if (this.type !== '1') { //图片滑动
var moveLeftDistance = parseInt((this.moveBlockLeft || '').replace('px', ''));
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
})
let 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((result) => {
let res = result.data
this.moveBlockBackgroundColor = '#5cb85c'
this.leftBarBorderColor = '#5cb85c'
this.iconColor = '#fff'
this.iconClass = 'icon-check'
this.showRefresh = true
this.isEnd = true;
setTimeout(() => {
if (this.mode == 'pop') {
this.$parent.clickShow = false;
}
this.refresh();
}, 1500)
this.passFalg = true
this.tipWords =
`${((this.endMovetime-this.startMoveTime)/1000).toFixed(2)}s验证成功`
setTimeout(() => {
this.tipWords = ""
this.$emit('success', {
captchaVerification
})
}, 1000)
}).catch(res => {
this.moveBlockBackgroundColor = '#d9534f'
this.leftBarBorderColor = '#d9534f'
this.iconColor = '#fff'
this.iconClass = 'icon-close'
this.passFalg = false
setTimeout(() => {
this.refresh();
}, 1000);
this.$parent.$emit('error', this)
this.tipWords = "验证失败"
setTimeout(() => {
this.tipWords = ""
}, 1000)
})
}
this.status = false;
}
},
refresh: function() {
this.showRefresh = true
this.finishText = ''
this.transitionLeft = 'left .3s'
this.moveBlockLeft = 0
this.leftBarWidth = false
this.transitionWidth = 'width .3s'
this.leftBarBorderColor = '#ddd'
this.moveBlockBackgroundColor = '#fff'
this.iconColor = '#000'
this.iconClass = 'icon-right'
this.getPictrue()
this.isEnd = false
setTimeout(() => {
this.transitionWidth = ''
this.transitionLeft = ''
this.text = this.explain
}, 300)
},
//获取left值
getLeft: function(node) {
let leftValue = 0;
while (node) {
leftValue += node.offsetLeft;
node = node.offsetParent;
}
let finalvalue = leftValue;
return finalvalue;
},
// 请求背景图片和验证图片
getPictrue() {
let data = {
captchaType: this.captchaType,
clientUid: uni.getStorageSync('slider'),
ts: Date.now(), // 现在的时间戳
}
getAjcaptcha(data).then((result) => {
let res = result.data
this.backImgBase = res.originalImageBase64
this.blockBackImgBase = res.jigsawImageBase64
this.backToken = res.token
this.secretKey = res.secretKey
}).catch(() => {
this.backImgBase = null
this.blockBackImgBase = null
})
},
},
watch: {
// type变化则全面刷新
type: {
immediate: true,
handler() {
this.init()
}
}
},
mounted() {},
}
</script>
<style scoped>
.verifybox {
position: relative;
box-sizing: border-box;
border-radius: 2px;
border: 1px solid #e4e7eb;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.verifybox-top {
padding: 0 15px;
height: 50px;
line-height: 50px;
text-align: left;
font-size: 16px;
color: #45494c;
border-bottom: 1px solid #e4e7eb;
box-sizing: border-box;
}
.verifybox-bottom {
/* padding: 15px; */
box-sizing: border-box;
}
.verifybox-close {
position: absolute;
top: 13px;
right: 9px;
width: 24px;
height: 24px;
text-align: center;
cursor: pointer;
}
.mask {
position: fixed;
top: 0;
left: 0;
z-index: 1001;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, .3);
/* display: none; */
transition: all .5s;
}
.verify-tips {
position: absolute;
left: 0px;
bottom: 0px;
width: 100%;
height: 30px;
background-color: rgb(231, 27, 27, .5);
line-height: 30px;
color: #fff;
}
.suc-bg {
background-color: rgba(92, 184, 92, .5);
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7f5CB85C, endcolorstr=#7f5CB85C);
}
.err-bg {
background-color: rgba(217, 83, 79, .5);
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7fD9534F, endcolorstr=#7fD9534F);
}
.tips-enter,
.tips-leave-to {
bottom: -30px;
}
.tips-enter-active,
.tips-leave-active {
transition: bottom .5s;
}
/* ---------------------------- */
/*常规验证码*/
.verify-code {
font-size: 20px;
text-align: center;
cursor: pointer;
margin-bottom: 5px;
border: 1px solid #ddd;
}
.cerify-code-panel {
height: 100%;
overflow: hidden;
}
.verify-code-area {
float: left;
}
.verify-input-area {
float: left;
width: 60%;
padding-right: 10px;
}
.verify-change-area {
line-height: 30px;
float: left;
}
.varify-input-code {
display: inline-block;
width: 100%;
height: 25px;
}
.verify-change-code {
color: #337AB7;
cursor: pointer;
}
.verify-btn {
width: 200px;
height: 30px;
background-color: #337AB7;
color: #FFFFFF;
border: none;
margin-top: 10px;
}
/*滑动验证码*/
.verify-bar-area {
position: relative;
background: #FFFFFF;
text-align: center;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
border: 1px solid #ddd;
-webkit-border-radius: 4px;
}
.verify-bar-area .verify-move-block {
position: absolute;
top: 0px;
left: 0;
background: #fff;
cursor: pointer;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
box-shadow: 0 0 2px #888888;
-webkit-border-radius: 1px;
}
.verify-bar-area .verify-move-block:hover {
background-color: #337ab7;
color: #FFFFFF;
}
.verify-bar-area .verify-left-bar {
position: absolute;
top: -1px;
left: -1px;
background: #f0fff0;
cursor: pointer;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
border: 1px solid #ddd;
}
.verify-img-panel {
margin: 0;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
border-radius: 3px;
position: relative;
}
.verify-img-panel .verify-refresh {
width: 25px;
height: 25px;
text-align: center;
padding: 5px;
cursor: pointer;
position: absolute;
top: 0;
right: 0;
z-index: 2;
}
.verify-img-panel .icon-refresh {
font-size: 20px;
color: #fff;
}
.verify-img-panel .verify-gap {
background-color: #fff;
position: relative;
z-index: 2;
border: 1px solid #fff;
}
.verify-bar-area .verify-move-block .verify-sub-block {
position: absolute;
text-align: center;
z-index: 3;
/* border: 1px solid #fff; */
}
.verify-bar-area .verify-move-block .verify-icon {
width: 80rpx;
height: 80rpx;
font-size: 18px;
}
.verify-bar-area .verify-msg {
z-index: 3;
}
/*字体图标的css*/
/*@font-face {font-family: "iconfont";*/
/*src: url('../fonts/iconfont.eot?t=1508229193188'); !* IE9*!*/
/*src: url('../fonts/iconfont.eot?t=1508229193188#iefix') format('embedded-opentype'), !* IE6-IE8 *!*/
/*url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),*/
/*url('../fonts/iconfont.ttf?t=1508229193188') format('truetype'), !* chrome, firefox, opera, Safari, Android, iOS 4.2+*!*/
/*url('../fonts/iconfont.svg?t=1508229193188#iconfont') format('svg'); !* iOS 4.1- *!*/
/*}*/
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-check:before {
content: " ";
display: block;
width: 16px;
height: 16px;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 9999;
background-image: url("@/static/images/arrow-good.png");
background-size: contain;
}
.icon-close:before {
content: " ";
display: block;
width: 16px;
height: 16px;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 9999;
background-image: url("@/static/images/arrow-close.png");
background-size: contain;
}
.icon-right:before {
content: " ";
display: block;
width: 16px;
height: 16px;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-size: cover;
z-index: 9999;
background-image: url("@/static/images/arrow-right.png");
background-size: contain;
}
.icon-refresh:before {
content: " ";
display: block;
width: 16px;
height: 16px;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 9999;
background-image: url("@/static/images/refresh.png");
background-size: contain;
}
</style>