recycle-mobile/src/components/zj-dialog-verification.vue

<template>
	<u-popup
		mode="center" 
		:round="10" 
		:closeable="true" 
		:show="isShow" 
		@close="closeDialog">
		<view class="code-dialog">
			<view class="title">请完成安全验证</view>
			<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>
		</view>
	</u-popup>
</template>

<script>
	export default {
		props: {
			isShow: {
				type: Boolean,
				default: false
			},
			// 背景大图
			bgImg: {
				type:  [String,Number],
				default: ''
			},
			// 块状小图
			maskImg: {
				type:  [String,Number],
				default: ''
			},
			// 坑位的top值
			top: {
				type: [String,Number],
				default: 0
			},
			// 滑块滑动的方向
			direction: {
				type:  [String,Number],
				default: 'horizontal'
			},
			// 判断是否成功
			isSuccess: {
				type: Boolean,
				default: false,
			},
			// 判断是否失败
			isFail: {
				type: Boolean,
				default: false,
			}
		},
		data() {
			return {
				tips: '向右拖动滑块填充拼图',
				disabled: false,
				dragWidth: 0,
				x: 0
			};
		},
		methods: {
			closeDialog() {
				this.$emit('close');
			},
			
			// 开始滑动
			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;
	}
	.code-dialog {
		padding: 20px;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		.title {
			font-size: 28rpx;
			color: #333333;
			width: 100%;
			text-align: left;
			margin-bottom: 10px;
		}
	}
	.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;
				height: 91rpx;
				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>