JCSS / yl_miniapp

<template>
	<view class="tui-slide-vcode"
		:style="{width:slideBarWidth+'px',height:slideBlockWidth+'px',backgroundColor:backgroundColor}">
		<text class="tui-text-flashover" :style="{fontSize:size+'rpx',background:getBgColor}">拖动滑块验证</text>
		<!-- #ifdef APP-PLUS || MP-WEIXIN || H5 -->
		<view class="tui-slide-glided" :style="{backgroundColor:getActiveBgColor}">
			<text :style="{fontSize:size+'rpx',color:activeColor}" v-if="isPass">{{passText}}</text>
			<view v-else :style="{width: slideBarWidth + 'px',height: slideBlockWidth + 'px', fontSize:size + 'rpx'}"
				class="tui-active__text">拖动滑块验证</view>
		</view>
		<view class="tui-slider-block"
			:style="{width:slideBlockWidth+'px',height:slideBlockWidth+'px',borderColor:isPass?getActiveBorderColor: borderColor}"
			:change:prop="parse.slidereset" :prop="reset" :data-slideBarWidth="slideBarWidth"
			:data-slideBlockWidth="slideBlockWidth" :data-errorRange="errorRange" :data-disabled="disabled"
			@touchstart="parse.touchstart" @touchmove="parse.touchmove" @touchend="parse.touchend" @mousedown="parse.mousedown">
			<text class="tui-slide-icon tui-icon-double_arrow" :style="{fontSize:iconSize+'rpx',color:arrowColor}"
				v-if="!isPass"></text>
			<text class="tui-slide-icon tui-icon-check_mark" :style="{fontSize:iconSize+'rpx',color:getCheckColor}"
				v-if="isPass"></text>
		</view>
		<!-- #endif -->

		<!-- #ifndef APP-PLUS || MP-WEIXIN || H5 -->
		<view class="tui-slide-glided" :style="{backgroundColor:getActiveBgColor,width:slipOverWidth+'px'}">
			<text :style="{fontSize:size+'rpx',color:activeColor}" v-if="isPass">{{passText}}</text>
			<view v-else :style="{width: slideBarWidth + 'px',height: slideBlockWidth + 'px', fontSize:size + 'rpx'}"
				class="tui-active__text">拖动滑块验证</view>
		</view>
		<view class="tui-slider-block" :class="{'tui-slider__reset':resetAni}"
			:style="{width:slideBlockWidth+'px',height:slideBlockWidth+'px',borderColor:isPass?getActiveBorderColor: borderColor,transform:transform}"
			@touchstart="touchstart" @touchmove.stop.prevent="touchmove" @touchend="touchend">
			<text class="tui-slide-icon tui-icon-double_arrow" :style="{fontSize:iconSize+'rpx',color:arrowColor}"
				v-if="!isPass"></text>
			<text class="tui-slide-icon tui-icon-check_mark" :style="{fontSize:iconSize+'rpx',color:getCheckColor}"
				v-if="isPass"></text>
		</view>
		<!-- #endif -->
	</view>
</template>
<!-- #ifdef APP-PLUS || MP-WEIXIN || H5 -->
<script src="./tui-slide-verify.wxs" module="parse" lang="wxs"></script>
<!-- #endif -->
<script>
	import mp from './index.js'
	export default {
		name: "tuiSlideVerify",
		mixins: [mp],
		emits: ['success'],
		props: {
			//滑动条宽度 px
			slideBarWidth: {
				type: [Number, String],
				default: 300
			},
			//滑块宽度 px = 滑动条高度
			slideBlockWidth: {
				type: [Number, String],
				default: 40
			},
			//滑块border颜色
			borderColor: {
				type: String,
				default: '#E9E9E9'
			},
			//通过验证后滑块border颜色
			activeBorderColor: {
				type: String,
				default: ''
			},
			//误差范围 px 距离右侧多少距离验证通过
			errorRange: {
				type: [Number, String],
				default: 2
			},
			//重置滑动
			resetSlide: {
				type: Number,
				default: 0
			},
			//提示文字大小
			size: {
				type: Number,
				default: 30
			},
			//提示文字颜色
			color: {
				type: String,
				default: "#444"
			},
			//验证通过后提示文字颜色
			activeColor: {
				type: String,
				default: "#fff"
			},
			//图标字体大小 rpx
			iconSize: {
				type: Number,
				default: 32
			},
			//箭头图标颜色
			arrowColor: {
				type: String,
				default: "#cbcbcb"
			},
			checkColor: {
				type: String,
				default: ""
			},
			//滑动条背景色
			backgroundColor: {
				type: String,
				default: "#E9E9E9"
			},
			//滑过区域背景颜色
			activeBgColor: {
				type: String,
				default: ""
			},
			//通过提示文字
			passText: {
				type: String,
				default: '验证通过'
			}

		},
		computed: {
			getBgColor() {
				return `-webkit-gradient(linear, left top, right top, color-stop(0, ${this.color}), color-stop(.4, ${this.color}), color-stop(.5, white), color-stop(.6, ${this.color}), color-stop(1, ${this.color}))`
			},
			getActiveBorderColor() {
				return this.activeBorderColor || (uni && uni.$tui && uni.$tui.color.success) || '#07c160';
			},
			getCheckColor() {
				return this.checkColor || (uni && uni.$tui && uni.$tui.color.success) || '#07c160';
			},
			getActiveBgColor() {
				return this.activeBgColor || (uni && uni.$tui && uni.$tui.color.success) || '#07c160';
			}
		},
		watch: {
			resetSlide(val) {
				if (val > 0) {
					this.slideReset()
				}
			}
		},
		data() {
			return {
				isPass: false,
				disabled: false,
				reset: 0
			}
		},
		methods: {
			success() {
				//验证成功
				this.isPass = true;
				this.disabled = true;
				this.$emit('success', {})
			},
			slideReset() {
				this.isPass = false;
				this.disabled = false;
				this.reset++;
			}
		}
	}
</script>

<style scoped>
	@font-face {
		font-family: 'tuiSlideVcode';
		src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAUYAA0AAAAAB1wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAE/AAAABoAAAAci6lfG0dERUYAAATcAAAAHgAAAB4AKQALT1MvMgAAAaAAAABCAAAAVjxuSCZjbWFwAAAB+AAAAEUAAAFK5n3pi2dhc3AAAATUAAAACAAAAAj//wADZ2x5ZgAAAkwAAAD8AAABJDQ/n7JoZWFkAAABMAAAADAAAAA2GSR8FGhoZWEAAAFgAAAAHQAAACQHygOFaG10eAAAAeQAAAARAAAAEgwUAD5sb2NhAAACQAAAAAwAAAAMAFQAkm1heHAAAAGAAAAAHgAAACABEQA6bmFtZQAAA0gAAAFJAAACiCnmEVVwb3N0AAAElAAAAD0AAABPYJEgVXjaY2BkYGAA4oqPSw3j+W2+MnCzMIDAbaY5nHBa5P905jfMeUAuBwMTSBQAHycKCHjaY2BkYGBu+N/AEMPCAALMbxgYGVABCwBYegNYAAAAeNpjYGRgYGBl0GNgYgABEMkFhAwM/8F8BgANfQFMAAB42mNgZGFgnMDAysDA1Ml0hoGBoR9CM75mMGLkAIoysDIzYAUBaa4pDA7PGJ6ZMDf8b2CIYW5gaAAKM4LkAN6ZDA8AAHjaY2GAABYItmMQAQABaABfAAAAeNpjYGBgZoBgGQZGBhBwAfIYwXwWBg0gzQakGRmYnjE8M/n/n4EBQksxS16AqgcCRjYGOIeRCUgwMaACRoZhDwDR6wnSAAAAAAAAAAAAAAAAVACSeNpFzjFOwzAYxfHv2Yodu4ozxHEq2qoSEilLQYoqh6lIIBaugMTC3hswMcPQhYmBjV4AMSFxAppjQDmDSzJle9L7DX9itNx/8i9+QY7mRPDn8ItTlDOcQLhCwcBVtWLCOl/D10v0L5vHnAGMx+EuLSctvQ8PBpMyxWU30/GxwUvMwXqDW6lkNIikllgnGM1MeAqPyWxkeNktczRGgrXUXOkeETGy+2f+x1c0oGnbKUg6KjzVJWUQh23TwlfTrhW+cpZRE3ZCIG8a5EKE3U34yM/sRttCb5hiuNLDjK+i8PO9Db8igmu2cOE1vNsWDTP9xhiuVXZARP+yvTqbeNp9kD1OAzEQhZ/zByQSQiCoXVEA2vyUKRMp9Ailo0g23pBo1155nUg5AS0VB6DlGByAGyDRcgpelkmTImvt6PObmeexAZzjGwr/3yXuhBWO8ShcwREy4Sr1F+Ea+V24jhY+hRvUf4SbuFUD4RYu1BsdVO2Eu5vSbcsKZxgIV3CKJ+Eq9ZVwjfwqXMcVPoQb1L+EmxjjV7iFa2WpDOFhMEFgnEFjig3jAjEcLJIyBtahOfRmEsxMTzd6ETubOBso71dilwMeaDnngCntPbdmvkon/mDLgdSYbh4FS7YpjS4idCgbXyyc1d2oc7D9nu22tNi/a4E1x+xRDWzU/D3bM9JIbAyvkJI18jK3pBJTj2hrrPG7ZynW814IiU68y/SIx5o0dTr3bmniwOLn8owcfbS5kj33qBw+Y1kIeb/dTsQgil2GP5PYcRkAAAB42mNgYoAALjDJyIAOWMGiTIxMjMyCOalpJbop+aVJOam6iUVF+eUCKaWZ6fmlJZmJeckZ+XnpugDvDw1eAAAAAAAAAf//AAIAAQAAAAwAAAAWAAAAAgABAAMABAABAAQAAAACAAAAAHjaY2BgYGQAgqtL1DlA9G2mOZwwGgA1wQSuAAA=) format('woff');
		font-weight: normal;
		font-style: normal;
		font-display: swap;
	}

	.tui-slide-icon {
		font-family: "tuiSlideVcode" !important;
		font-size: 34rpx;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
	}

	.tui-icon-check_mark:before {
		content: "\e634";
	}

	.tui-icon-double_arrow:before {
		content: "\e600";
	}

	.tui-slide-vcode {
		background-color: #EAEEF1;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-slide-glided {
		width: 0;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}

	.tui-slider-block {
		position: absolute;
		z-index: 2;
		background-color: #FFFFFF;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1rpx solid;
		box-sizing: border-box;
		left: 0;
		top: 0;
		transition: border-color 0.08s;
		/* #ifdef H5 */
		cursor: pointer;
		/* #endif */
	}

	.tui-text-flashover {
		-webkit-background-clip: text !important;
		-webkit-text-fill-color: transparent !important;
		-webkit-animation: animate 1.8s infinite;
	}

	@-webkit-keyframes animate {
		from {
			background-position: -90rpx;
		}

		to {
			background-position: 90rpx;
		}
	}

	@keyframes animate {
		from {
			background-position: -90rpx;
		}

		to {
			background-position: 90rpx;
		}
	}

	.tui-active__text {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		left: 0;
		top: 0;
		color: #fff;
	}

	.tui-slider__reset {
		transition: transform 0.25s;
	}
</style>