uniapp获取手机验证码组件

<template>
	<view>
		<page-head :title="title"></page-head>
		<!-- 示例1 -->
		<view class="uni-text-small uni-center title">示例1</view>
		<view>
			<uni-countdown :timer="timer1"></uni-countdown>
		</view>
		<!-- 示例2：绿底白字 -->
		<view class="uni-text-small uni-center title" >示例2</view>
		<view style="background:#00B26A; padding:50upx 0;">
			<uni-countdown :timer="timer2" borderColor="#FFFFFF" splitorColor="#FFF" fontColor="#FFFFFF" bgrColor="none"></uni-countdown>
		</view>
		<!-- 示例3：黑底白字 -->
		<view class="uni-text-small uni-center title">示例3</view>
		<view>
			<uni-countdown fontColor="#FFFFFF" bgrColor="#000000" :timer="timer3"></uni-countdown>
		</view>
	</view>
</template>
<script>
	import uniCountdown from "../../../components/uni-countdown.vue";
	export default {
		data() {
			var dateObj = new Date();
			var currentTime = dateObj.getTime();
			var timer1 = this.formatDateTime((currentTime + 1000 * 2000));
			var timer2 = this.formatDateTime((currentTime + 1000 * 3000));
			var timer3 = this.formatDateTime((currentTime + 1000 * 5000));
			return {
				title: '倒计时',
				timer1: timer1,
				timer2: timer2,
				timer3: timer3
			}
		},
		components: {
			uniCountdown
		},
		methods: {
			formatDateTime(inputTime) { //时间戳 转 YY-mm-dd HH:ii:ss 
				var date = new Date(inputTime);
				var y = date.getFullYear();
				var m = date.getMonth() + 1;
				m = m < 10 ? ('0' + m) : m;
				var d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				var h = date.getHours();
				h = h < 10 ? ('0' + h) : h;
				var minute = date.getMinutes();
				var second = date.getSeconds();
				minute = minute < 10 ? ('0' + minute) : minute;
				second = second < 10 ? ('0' + second) : second;
				return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
			}
		},
	}
</script>

<style>
	view {
		display: flex;
		width: 100%;
		flex-wrap: wrap;
		justify-content: center;
	}
	
	.title{
		margin:80upx 0 20upx 0;
	}
	
</style>

<template name="uni-countdown">
	<view class="uni-countdown">

		<view class="uni-countdown-numbers" @click="click" :id="id" :style="{borderColor:borderColor, color:fontColor, background:bgrColor}">{{text}} {{s}}</view>
	</view>
</template>
<script>
	export default {
		name: "uni-countdown",
		props: {
			bgrColor: {
				type: String,
				default: "#FFFFFF"
			},
			borderColor: {
				type: String,
				default: "#000000"
			},
			fontColor: {
				type: String,
				value: "#ec4e47" 
			},
			splitorColor: {
				type: String,
				default: "#000000"
			},
			timer: {
				type: String,
				default: ""
			}
			
		},
		data() {
			return {
				setTime: null,
				h: '00',
				i: '00',
				s: '',
				leftTime: 0,
				text:'获取验证码',
				id:1
			}
		},
		created: function(e) {	
			var reg = /^([0-9]{4})-([0-9]{2})-([0-9]{2}) ([0-9]{2}):([0-9]{2}):([0-9]{2})$/;
			var res = this.timer;
			// console.log(this.timer)
			if (res == null) {
				console.log('时间格式错误');
				return false;
			} else {
				var s = parseInt(res);
				if (s < 0 || s > 60) {
					console.log('时间格式错误');
					return false;
				}
				// var leftTime = new Date(i, s);
				this.leftTime = '60';
				this.countDown(this);
				this.setInterValFunc(this);
			}
		},
		beforeDestroy() {
			clearInterval(this.setTime)
		},
		methods: {
			setInterValFunc: function(obj) {
				this.setTime = setInterval(function() {
					obj.countDown(obj);
				}, 1000);
			},
			click:function(){
				this.text = '重新获取'
				this.s = 60
			},
			countDown: function(self) {
				
				if(self.text == '重新获取'){
					if(self.s > 0){
						self.s -= 1;
					}else if(self.s == 0){
						self.s = 60;
						self.text = '获取验证码'
					}
				}
				
				
				
				
			}
		}
	}
</script>
<style>
	.uni-countdown {
		display: flex;
		padding: 2upx 0;
		flex-wrap: nowrap;
		justify-content: center;
	}

	.uni-countdown-splitor {
		width: auto !important;
		justify-content: center;
		line-height: 44upx;
		padding: 0 5upx;
	}

	.uni-countdown-numbers {
		line-height: 44upx;
		width: auto !important;
		padding: 0 10upx;
		justify-content: center;
		height: 44upx;
		/* border-radius: 8upx; */
		margin: 0 5upx;
		/* border: 1px solid #000000; */
		font-size: 22upx;
	}
</style>

倒入组件使用即可