guanmao-wxapp/components/pt-images-verification/pt-images-verification.vue

<template>
	<view class="pt">
		<view class="pt-verification-box">
			<view class="pt-verification-images">
				<view class="iconfont refresh" @click="refresh">&#xe64c;</view>
				<image mode="widthFix" :src="'data:image/jpeg;base64,'+bgImg" class="bg-img"></image>
				<image :src="'data:image/jpeg;base64,'+maskImg" class="drag-img" mode="widthFix" :style="{ left: dragWidth + 'px', top: top + 'px'}"></image>
				<view class="mask"></view>
			</view>
			<view class="pt-dragbar">
				<view :class="['pt-drag-area',{fail: isFail,success: isSuccess}]" :style="{ width: dragWidth + 'px'}" v-if="dragWidth"></view>
				<movable-area class="pt-dragbar-area">
					<movable-view
						:class="['pt-dragbar-view',{active: dragWidth > 2,fail: isFail,success: isSuccess}]"
						:direction="direction"
						@change="dragStart"
						@touchend="dragEnd"
						:damping="200"
						:x="x"
						:animation="false"
						:disabled="disabled"
						:data-dragWidth="dragWidth">
						<text class="iconfont">
							<block v-if="isSuccess">&#xe687;</block>
							<block v-else-if="isFail">&#xe65c;</block>
							<block v-else>&#xe62a;</block>
						</text>
					</movable-view>
					<text v-if="dragWidth==0" class="tips">{{tips}}</text>
				</movable-area>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 背景大图
			bgImg: {
				type: String,
				default: ''
			},
			// 块状小图
			maskImg: {
				type: String,
				default: ''
			},
			// 坑位的top值
			top: {
				type: Number,
				default: 0
			},
			// 滑块滑动的方向
			direction: {
				type: String,
				default: 'horizontal'
			},
			// 判断是否成功
			isSuccess: {
				type: Boolean,
				default: false,
			},
			// 判断是否失败
			isFail: {
				type: Boolean,
				default: false,
			}
		},
		data() {
			return {
				tips: '向右拖动滑块填充拼图',
				disabled: false,
				dragWidth: 0,
				x: 0
			};
		},
		methods: {
			// 开始滑动
			dragStart(e){
				this.dragWidth = e.detail.x
			},
			
			// 停止滑动
			dragEnd(e){
				this.x = this.dragWidth;
				this.$emit('finish', this.dragWidth);
			},
			
			refresh(){
				console.log(1);
				this.dragWidth = 0;
				this.isFail = false;
				this.isSuccess = false;
				this.x = 0;
				this.disabled = false;
				this.$emit('refresh');
			}
		}
	}
</script>

<style lang="scss">
	@font-face {
	  font-family: 'iconfont';  /* project id 2047533 */
	  src: url('https://at.alicdn.com/t/font_2047533_o8axbabfs3.ttf') format('truetype')
	}
	.iconfont {
	  font-family: iconfont !important;
	  font-size: 16px;
	  font-style: normal;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	}
	.pt{
		width: 300px;
		margin: 0 auto;
		&-verification-images{
			position: relative;
			.refresh{
				position: absolute;
				right: 20rpx;
				top: 20rpx;
				z-index: 10;
				color: #FFF;
				font-weight: bold;
			}
			.bg-img{
				width: 100%;
				vertical-align: top;
			}
			.drag-img{
				position: absolute;
				width: 112rpx;
				top: 0;
				left: 0;
				z-index: 1;
			}
			.mask {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: rgba($color: #000000, $alpha: .2);
			}
		}
		&-dragbar{
			position: relative;
			height: 80rpx;
			background-color: #F7F7F7;
			border: solid 2rpx #EEE;
			margin-top: 20rpx;
			.pt-drag-area{
				position: absolute;
				height: 80rpx;
				border: solid 2rpx $uni-color-primary;
				background-color: #D1E9F1;
				top: -2rpx;
				&.fail{
					border-color: $uni-color-error;
					background-color: #ffdbdb;
				}
				&.success{
					border-color: $uni-color-success;
					background-color: #d7ffe1;
				}
			}
			&-area{
				position: absolute;
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
				.tips{
					font-size: 24rpx;
					color: #999;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%,-50%);
				}
			}
			&-view{
				width: 80rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border: solid 2rpx #EEE;
				background-color: #FFF;
				top: -2rpx;
				left: 0;
				&.active{
					background-color: $uni-color-primary;
					border-color: $uni-color-primary;
					color: #FFF;
				}
				&.fail{
					background-color: $uni-color-error;
					border-color: $uni-color-error;
				}
				&.success{
					border-color: $uni-color-success;
					background-color: #00a029;
				}
			}
		}
	}
</style>