lihaiCenter/components/verify/verifySlider/verifySlider.vue

<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>
	/**
	 * 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>