t/components/thorui/tui-countdown-verify/tui-countdown-verify.vue

<template>
	<view
		class="tui-countdown__verify"
		:class="{ 'tui-verify__opacity': status > 1 && isOpacity }"
		:style="{ width: width, height: height, padding: padding, margin: margin, borderRadius: radius, fontSize: size + 'rpx', color: color, background: background }"
		:hover-class="hover && status == 1 ? 'tui-verify__opacity' : ''"
		:hover-stay-time="150"
		@tap.stop="sendCode"
	>
		{{ showText }}
		<view class="tui-verify__line" :style="{ borderWidth: borderWidth, borderColor: borderColor, borderRadius: radius }"></view>
	</view>
</template>

<script>
export default {
	name: 'tuiCountdownVerify',
	props: {
		//发送前显示文本
		text: {
			type: String,
			default: '发送验证码'
		},
		//发送中显示文本
		sendText: {
			type: String,
			default: '请稍候...'
		},
		//发送后显示文本(前面会自动加上seconds)
		countdownText: {
			type: String,
			default: 's后获取'
		},
		//倒计时秒数
		seconds: {
			type: Number,
			default: 60
		},
		//宽度
		width: {
			type: String,
			default: '182rpx'
		},
		//高度
		height: {
			type: String,
			default: '56rpx'
		},
		padding: {
			type: String,
			default: '0'
		},
		margin: {
			type: String,
			default: '0'
		},
		//圆角
		radius: {
			type: String,
			default: '6rpx'
		},
		//字体大小 rpx
		size: {
			type: Number,
			default: 24
		},
		//字体颜色
		color: {
			type: String,
			default: '#5677fc'
		},
		//背景色
		background: {
			type: String,
			default: 'transparent'
		},
		//边框宽度
		borderWidth: {
			type: String,
			default: '1px'
		},
		//边框颜色
		borderColor: {
			type: String,
			default: '#5677fc'
		},
		//倒计时的时候是否改变opacity值
		isOpacity: {
			type: Boolean,
			default: true
		},
		//是否需要点击效果
		hover: {
			type: Boolean,
			default: true
		},
		//短信发送成功（改变数值且数值大于0表示发送成功，多次发送数值递增即可）
		successVal: {
			type: Number,
			default: 0
		},
		//重置组件状态（改变数值且数值大于0，多次重置数值递增即可）
		resetVal: {
			type: Number,
			default: 0
		},
		//是否默认为倒计时状态
		start:{
			type:Boolean,
			default:false
		},
		//自定义参数
		params: {
			type: [Number, String],
			default: 0
		}
	},
	data() {
		return {
			showText: '',
			//1-发送前，2-发送中 3-发送成功，倒计时
			status: 1,
			countdownTimer: null
		};
	},
	created() {
		if(this.start){
			this.doLoop();
		}else{
			this.showText = this.text;
			this.clearTimer();
		}
	},
	beforeDestroy() {
		this.clearTimer();
	},
	watch: {
		successVal(val) {
			if (val && val > 0) {
				this.doLoop();
			}
		},
		resetVal(val) {
			if (val && val > 0) {
				this.reset();
			}
		}
	},
	methods: {
		sendCode() {
			if (this.status > 1) return;
			this.clearTimer();
			this.status = 2;
			this.showText = this.sendText;
			this.$emit('send', {
				params: this.params
			});
		},
		doLoop: function() {
			this.clearTimer();
			this.status = 3;
			let seconds = this.seconds || 60;
			this.showText = seconds + this.countdownText;
			this.countdownTimer = setInterval(() => {
				if (seconds > 1) {
					--seconds;
					this.showText = seconds + this.countdownText;
					//倒计时
					this.$emit('countdown', {
						seconds: seconds,
						params: this.params
					});
				} else {
					this.reset();
					//倒计时结束
					this.$emit('end', {
						params: this.params
					});
				}
			}, 1000);
		},
		//验证码发送成功
		success() {
			this.doLoop();
		},
		//重置发送组件
		reset() {
			this.clearTimer();
			this.showText = this.text;
			this.status = 1;
		},
		clearTimer() {
			clearInterval(this.countdownTimer);
			this.countdownTimer = null;
		}
	}
};
</script>

<style scoped>
.tui-countdown__verify {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	box-sizing: border-box;
}

.tui-verify__opacity {
	opacity: 0.5;
}

.tui-verify__line {
	position: absolute;
	width: 200%;
	height: 200%;
	transform-origin: 0 0;
	transform: scale(0.5, 0.5) translateZ(0);
	box-sizing: border-box;
	border-style: solid;
	left: 0;
	top: 0;
	pointer-events: none;
}
</style>