BiKing/components/slider-verify/slider-verify.vue

<template>
	<uni-popup ref="popupRef" @change="change">

		<view class="popup-box">
			<view class="verifyBox">
				<view class="verify-title">
					<text>安全验证</text>
					<text @click.stop="$refs.popupRef.close()" class="verify-close iconfont">&#xeca0;</text>
				</view>
				<view class="verify-hint">
					滑动下方滑块完成拼图
				</view>
				<view class="slide-content">

					<view class="slider-pintu">
						<image id="pintuImg" :src="pintuImgs[pintuIndex]" class="pintu">
						</image>
						<!-- 	<image id="pintuImg" :src="'@/static/images/slider-verify/' + img + '.png'" class="pintu">
						</image> -->
						<view class="pintukuai" :style="{ top: top + 'px', left: oldx + 'px' }">
							<image :src="pintuImgs[pintuIndex]"
								:style="{ top: '-' + top + 'px', left: '-' + left + 'px'}">
							</image>
						</view>

						<view class="yinying" :style="{ top: top + 'px', left: left + 'px' }"></view>

						<view class="slider-success" v-show="moveSuccess">
							<text class="slider-success-icon iconfont">&#xe627;</text>
							<text class="slider-success-text">只用了{{ moveTime }}S，简直比闪电还快</text>
						</view>

					</view>

					<view class="slider-movearea" @touchend="endTouchMove">
						<movable-area :animation="true">
							<movable-view :x="x" direction="horizontal" @change="startMove">
								<text class="movable-item"></text>
								<text class="movable-item"></text>
								<text class="movable-item"></text>
							</movable-view>
						</movable-area>

						<view class="huadao"></view>
					</view>
				</view>

				<view class="slider-btn-group">
					<text class="slider-err"> {{ sliderErrText }} </text>
					<view class="slide-btn-refresh iconfont" @tap="refreshVerify">&#xec08;</view>
				</view>
			</view>

		</view>
	</uni-popup>
</template>

<script>
	export default {
		data() {
			return {
				pintuImgs: [
					require('@/static/images/login/img_01.jpg'),
					require('@/static/images/login/img_02.jpg'),
					require('@/static/images/login/img_03.jpg'),
				],
				pintuIndex: 0,
				x: 0, //初始距离
				oldx: 0, //移动的距离
				img: 'logo', //显示哪张图片
				left: 0, //随机拼图的最终X轴距离
				top: 0, //拼图的top距离
				moveTime: 0,
				moveInterval: null,
				moveSuccess: false,
				sliderErrText: '',
			};
		},
		mounted() {
			// this.open();
		},
		methods: {

			open() {
				this.refreshVerify();
				this.$nextTick(() => {
					this.$refs.popupRef.open();
				})
			},
			setPintuIndex() {
				const n = Math.random() * 10;
				if (n < 3) {
					this.pintuIndex = 0
				} else if (n >= 3 && n <= 6) {
					this.pintuIndex = 1
				} else {
					this.pintuIndex = 2
				};
			},
			//刷新验证
			refreshVerify() {
				this.setPintuIndex()
				this.moveSuccess = false;
				this.sliderErrText = '';
				this.clearMoveTime()
				var gl = Math.random().toFixed(2);
				const leftNum = uni.upx2px(560) * gl > uni.upx2px(280) ? uni.upx2px(280) : uni.upx2px(560) * gl + uni
					.upx2px(
						150); //生成随机X轴最终距离
				this.top = uni.upx2px(190) * gl; //生成随机Y轴初始距离 
				const maxLeft = uni.upx2px(560) - uni.upx2px(90) - uni.upx2px(70)
				this.left = leftNum > maxLeft ? maxLeft : leftNum


				if (gl <= 0.2) {
					this.img = 1;
				}
				if (gl > 0.2 && gl <= 0.4) {
					this.img = 2;
				}
				if (gl > 0.4 && gl <= 0.6) {
					this.img = 3;
				}
				if (gl > 0.6 && gl <= 0.8) {
					this.img = 4;
				}
				if (gl > 0.8 && gl <= 1) {
					this.img = 5;
				}
				this.resetMove(); //重置阴影位置
			},

			/* 滑动中 */
			startMove(e) {
				if (e.detail.source) {
					this.setMoveTime();
					const maxNum = uni.upx2px(560) - uni.upx2px(70)
					if (e.detail.x <= maxNum) {
						this.oldx = e.detail.x;
					}
				};

			},

			setMoveTime(clear = false) {
				if (!this.moveInterval) {
					this.moveTime = 0;
					this.moveInterval = setInterval(() => {
						this.moveTime = Math.floor((this.moveTime + 0.1) * 100) / 100;
						// console.log('this.moveTime = ', this.moveTime)
					}, 100)
				}
				if (clear) {
					try {
						setTimeout(() => {
							clearInterval(this.moveInterval)
							this.moveInterval = null;
						}, 100)
						// console.log('this.moveInterval 1= ', this.moveInterval)

						// console.log('this.moveInterval 2= ', this.moveInterval)
					} catch {}
				}


			},
			clearMoveTime() {
				this.setMoveTime(true);
			},
			change(e) {
				this.$emit('change', e.show)
				console.log('change  = ', e.show)
			},
			/* 滑动结束 */
			endTouchMove() {
				var that = this;
				this.clearMoveTime()
				if (Math.abs(that.oldx - that.left) <= 5) {
					// uni.showToast({
					// 	title: '验证成功',
					// 	duration: 2500,
					// 	success() {
					// 		that.$emit('touchSliderResult', true);
					// 	}
					// });
					this.moveSuccess = true;
					setTimeout(() => {
						this.$refs.popupRef.close();
						this.$emit('slideImgSuccess')
					}, 1000)
				} else {
					this.sliderErrText = '请控制拼图对齐切口'
					setTimeout(() => {
						this.sliderErrText = ''
						that.refreshVerify();
					}, 1000)
				}
			},

			/* 重置阴影位置 */
			resetMove() {
				this.x = 1;
				this.oldx = 1;
				setTimeout(() => {
					this.x = 0;
					this.oldx = 0;
				}, 300);
			},

			// 关闭
			closeSlider() {
				this.$emit('touchSliderResult', false);
			},
		}
	}
</script>

<style lang="scss" scoped>
	$imgSize: 80rpx;
	$pintuH: 360rpx;

	.verifyBox {
		// position: absolute;
		// top: 50%;
		// left: 50%;
		// transform: translate(-50%, -50%);
		// width: 560rpx;
		background-color: #fff;
		border-radius: 4rpx;
		padding: 8px;

		// box-shadow: 0 0 5upx rgba(0, 0, 0);
		.verify-title {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 20rpx;
			color: #ccc;

			.verify-close {
				font-size: 40rpx;
				color: #666;
			}
		}

		.verify-hint {
			font-size: 28rpx;
		}

		.slide-content {
			width: 100%;

			padding: 5px 0;
			margin: 0 auto;

			.slide-tips {
				font-size: 28rpx;
				color: rgba(2, 20, 33, 0.45);
				padding: 0.5em 0;
			}

			.slider-pintu {
				position: relative;
				width: 100%;
				border-radius: 10rpx;
				overflow: hidden;

				.pintu {
					width: 560rpx;
					height: $pintuH;
					display: block;
					margin: 0 auto;
				}

				.pintukuai {
					position: absolute;
					top: 0;
					left: 0;
					width: $imgSize;
					height: $imgSize;
					z-index: 100;
					box-shadow: 0 0 5upx rgba(0, 0, 0, 0.3);
					overflow: hidden;

					image {
						display: block;
						position: absolute;
						top: 0;
						left: 0;
						width: 560rpx;
						height: $pintuH;
					}
				}
			}

			.yinying {
				position: absolute;
				width: $imgSize;
				height: $imgSize;
				background-color: rgba(0, 0, 0, 0.5);
			}

			// <view class="slider-success">
			// 	<text class="slider-success-icon">&#xe627;</text>
			// 	<text class="slider-success-text">只用了2S，</text>
			// </view>
			.slider-success {
				width: 100%;
				height: 100%;
				position: absolute;
				z-index: 101;
				left: 0;
				top: 0;
				background-color: rgba(255, 255, 255, 0.8);
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;

				.slider-success-icon {
					font-size: 80rpx;
					color: $Theme-Color;
				}

				.slider-success-text {
					padding-top: 20rpx;
					font-size: 26rpx;
					color: $Theme-Color;
				}
			}

		}
	}

	.slider-movearea {
		position: relative;
		height: 50rpx;
		width: 100%;
		margin: 18rpx auto;

		movable-area {
			height: 50rpx;
			width: calc(100% - 90rpx);

			movable-view {
				width: 90rpx;
				height: 50rpx;
				border-radius: 25rpx;
				background-color: #007cff;
				position: relative;
				z-index: 100;
				box-shadow: 0px 0px 10px -1px #007cff;
				display: flex;
				justify-content: center;
				align-items: center;

				.movable-item {
					width: 3rpx;
					height: 20rpx;
					background-color: #fff;
					margin-right: 4px;

					&:last-child {
						margin-right: 0;
					}
				}
			}
		}
	}

	.huadao {
		width: 100%;
		height: 22rpx;
		background: #c2c2c2;
		box-shadow: inset 0 0 5upx #ccc;
		border-radius: 40rpx;

		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		font-size: 28rpx;
		z-index: 99;
	}

	.slider-btn-group {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.slider-err {
			font-size: 24rpx;
			color: red;
		}

		.slide-btn-refresh {
			font-size: 40rpx;
			color: #c1c1c1;
		}
	}
</style>