uniapp获取手机验证码组件

待我称王封你为后i 2021-09-17 23:30 871阅读 0赞

<template>
    	<view>
    		<page-head :title="title"></page-head>
    		
    		<view class="uni-text-small uni-center title">示例1</view>
    		<view>
    			<uni-countdown :timer="timer1"></uni-countdown>
    		</view>
    		
    		<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>
    		
    		<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>

倒入组件使用即可