上传文件至 'components/pt-images-verification'

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

@@ -0,0 +1,210 @@
+<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>