uniapp滑动图片验证

<slider-verify :show="isShowSliderVerify" @sliderVerifySuccessHandle="sliderVerifySuccessHandle"></slider-verify>

组件

<template>
	<view class="sliderVerify-shade" v-if="show">
		<view class="sliderVerify-wrap">
			<view class="refresh" @click="refresh">
				<image class="refreshImg" src="@/pagesB/static/slider/refresh.png"></image>
				<text>刷新</text>
			</view>
			<view class="imgWrap">
				<image class="img" :src="src"></image>
				<view class="over" :style="{left:left+'px',top:top+'px'}"></view>
				<view class="smartImg" :style="{left:sleft+'px',top:stop+'px'}">
					<image class="simg" :style="{left:-left+'px',top:-top+'px'}" :src="src"></image>
				</view>
			</view>
			<view class="sliderBox" @touchend="sliderEnd">
				<movable-area class="sliderF">
					<movable-view :animation="true" class="sliderS" :x="sliderx" direction="horizontal" @change="startMove">
						<image class="icon" src="@/pagesB/static/slider/rigth.png"></image>
					</movable-view>
				</movable-area>
				<view class="bgC">
					<text>拖动滑块完成整块拼图</text>
					<view class="bgC_left" :style="{width:backLeft+'px'}"></view>
				</view>
			</view>
		</view>	
	</view>
</template>
 
<script>
	export default {
		name: 'slider-verify',
		props:{
			show:{
				type:Boolean,
				default:false
			}
		},
		watch:{
			show(){
				this.random()
			}
		},
		data() {
			return {
				left: 0,
				top: 0,
				sleft: 0,
				sleftDefault: 0,
				stop: 0,
				sliderx: 0,
				backLeft: 0,
				message: '',
				src:'',
				bgImg:require("@/pagesB/static/slider/slider.jpg"),//背景图片
			}
		},
		mounted() {
			this.random()
		},
		methods: {
			random() {
                let imgLegth=8;
				let ram = Math.random();
				this.left = Math.floor(80 * ram) + 140; //140-220
				this.top = this.stop = Math.floor(80 * ram) + 10;
				this.sleft = this.sleftDefault = Math.floor(70 * ram) + 10;
                if(Math.floor(imgLegth*ram)==8){
					this.src=this.bgImg;
				}else{
					this.src=this.bgImg;
				}
                this.sliderx = 1;
                setTimeout(() => {
					this.sliderx = 0;
					this.refreshStatus=false;
                }, 300)
			},
			refresh(){
				this.message='';
				this.random();
			},
			startMove(e) {
				this.backLeft = e.detail.x + 18;
				this.sleft = this.sleftDefault + e.detail.x;
			},
			sliderEnd() {
				if (Math.abs(this.sleft - this.left) <= 4) {
					this.message = '验证成功!';
	                console.log("[验证成功]")
					this.$emit("sliderVerifySuccessHandle");
				} else {
					this.message = '验证失败，请重试';
                    console.log("[验证失败，请重试]")
					setTimeout(() => {
						this.message = '';
						this.sliderx = 1
						setTimeout(() => {
							this.sliderx = 0
						}, 300)
					}, 1000)
				}
			}
		}
 
	}
</script>
 
<style lang="scss" scoped>
  .sliderVerify-shade{
	  position: fixed;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  z-index: 100;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  background-color: rgba(0,0,0,0.7);
  }
  .sliderVerify-wrap {
  	position: relative;
  	background: #fff;
  	width: 300px;
  	border-radius: 8px;
  	overflow: hidden;
      .refresh{
  		position: absolute;
  		right: 30rpx;
  		top: 124px;
		font-size: 14px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		z-index: 1;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		.refreshImg{
			transition: all 0.3s;
			width: 16px;
			height: 16px;
			margin-right: 5px;
		}
  	}
  	.imgWrap {
  		position: relative;
  		width: 280px;
  		height: 150px;
  		border-radius: 8px;
  		margin: 0 auto;
  		overflow: hidden;
        background: #ddd;
		margin-top: 9px;
  		.img {
  			display: block;
  			width: 100%;
  			height: 100%;
  		}
   
  		.over {
  			position: absolute;
  			left: 0;
  			top: 0;
  			width: 40px;
  			height: 40px;
  			background: #ddd;
  			box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
  		}
   
  		.smartImg {
  			position: absolute;
  			z-index: 2;
  			left: 0;
  			top: 0;
  			width: 40px;
  			height: 40px;
  			overflow: hidden;
  			box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
   
  			.simg {
  				position: absolute;
  				display: block;
  				width: 280px;
  				height: 150px;
  			}
  		}
  	}
  }
   
  .sliderBox {
  	width: 280px;
  	margin: 20px auto;
  	height: 22px;
  	position: relative;
  	.sliderF {
  		width: 100%;
  		height: 100%;
  		z-index: 3;
  		.sliderS {
  			height: 36px;
  			width: 36px;
  			background: #EB4D4D;
  			border-radius: 36px;
  			display: flex;
  			justify-content: center;
  			align-items: center;
			margin-top: -8px;
  			.icon {
  				width: 20px;
  				height: 20px;
  			}
  		}
  	}
   
  	.bgC {
  		position: absolute;
  		z-index: 1;
  		left: 0;
  		top: 50%;
  		transform: translateY(-50%);
  		width: 100%;
  		height: 22px;
  		border-radius: 22px;
  		line-height: 22px;
  		font-size: 14px;
  		color: #666666;
		background-color: #E6E6E6;
  		box-shadow: inset 0 0 4px #E6E6E6;
  		text-align: center;
  		overflow: hidden;
  	}
   
  	.bgC_left {
  		position: absolute;
  		left: 0;
  		top: 50%;
  		transform: translateY(-50%);
  		width: 0;
  		height: 22px;
  		border-top-left-radius: 22px;
  		border-bottom-left-radius: 22px;
  		line-height: 22px;
  		font-size: 14px;
  		background-color: #EB4D4D;
  		box-shadow: inset 0 0 4px #EB4D4D;
  		text-align: center;
  	}
  }
</style>