前端Vue自定义发送短信验证码弹框popup 实现剩余秒数计数 重发短信验证码

前端Vue自定义发送短信验证码弹框popup 实现剩余秒数计数 重发短信验证码, 请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13207

效果图如下:

实现代码如下:

cc-codeDialog

使用方法


<!-- show:是否显示弹框 phone:手机号  autoCountdown:自动时间秒数 len:短信验证码长度 @closeClick:关闭弹框 @confirmClick:确认事件 -->

<cc-codeDialog :show="show" phone="1900000000" :autoCountdown="true" :len="6" @closeClick="closeCodeDialog" @confirmClick="confirmClick"></cc-codeDialog>

HTML代码实现部分


<template>

<view class="content">

<button @click="showCodeDialog" style="margin-top: 39px;">发送短信验证码 </button>

<!-- show:是否显示弹框 phone:手机号  autoCountdown:自动时间秒数 len:短信验证码长度 @closeClick:关闭弹框 @confirmClick:确认弹框 -->

<cc-codeDialog :show="show" phone="1900000000" :autoCountdown="true" :len="6" @closeClick="closeCodeDialog"

@confirmClick="confirmClick"></cc-codeDialog>

</view>

</template>

<script>

export default {

data() {

return {

show: false

}

},

methods: {

showCodeDialog(item) {

this.show = true;

},

closeCodeDialog(item) {

this.show = false;

},

confirmClick(result) {

console.log("result = " + JSON.stringify(result));

this.show = false;

}

}

}

</script>

<style>

.content {

display: flex;

flex-direction: column;

background-color: aliceblue;

height: 100vh;

}

</style>

组件实现代码


<template>
	<view v-if="show" class="codedialog">
		<view class="mask"></view>
		<view class="dialog-view">
			<text class="dialog-close" @click="closeDialog()"></text>
			<view class="dialog-hd">
				<view class="codedialog-maintitle">
					<text>发送验证码</text>
				</view>
				<view v-if="phone!='' && phone !=null " class="codedialog-subtitle">
					<text>已发送到手机号:{{phoneStr}}</text>
				</view>
			</view>
			<view class="dialog-bd">
				<view class="code-view">
					<view v-for="(code,index) of codeAry" :key="index" class="code-item">{{code.val}}</view>
				</view>
			</view>
			<view class="dialog-ft">
				<view v-if="countdown==60" @click="resend" class="resend">重新发送</view>
				<view v-if="countdown<60" class="countdown">{{countdown}}s</view>
			</view>

			<button style="margin-top: 20px; width: 88%;background-color: royalblue;color: white;"
				@click="confirmClick">确定</button>
		</view>

		<view class="keyboard">
			<view class="keyboard-line">
				<view data-val="1" @click="bindKeyEvent" class="button-item">1</view>
				<view data-val="2" @click="bindKeyEvent" class="button-item">2</view>
				<view data-val="3" @click="bindKeyEvent" class="button-item">3</view>
			</view>
			<view class="keyboard-line">
				<view data-val="4" @click="bindKeyEvent" class="button-item">4</view>
				<view data-val="5" @click="bindKeyEvent" class="button-item">5</view>
				<view data-val="6" @click="bindKeyEvent" class="button-item">6</view>
			</view>
			<view class="keyboard-line">
				<view data-val="7" @click="bindKeyEvent" class="button-item">7</view>
				<view data-val="8" @click="bindKeyEvent" class="button-item">8</view>
				<view data-val="9" @click="bindKeyEvent" class="button-item">9</view>
			</view>
			<view class="keyboard-line">
				<view data-val="clear" @click="bindKeyEvent" class="button-item">清空</view>
				<view data-val="0" @click="bindKeyEvent" class="button-item">0</view>
				<view data-val="delete" @click="bindKeyEvent" class="button-item">x</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			},
			autoCountdown: {
				type: Boolean,
				default: true
			},
			phone: {
				type: String,
				default: ""
			},
			len: {
				type: Number,
				default: 6
			}
		},
		data() {
			return {
				codeAry: [{
						"val": ""
					}, {
						"val": ""
					}, {
						"val": ""
					}, {
						"val": ""
					},
					{
						"val": ""
					},
					{
						"val": ""
					}
				],
				currItem: 0,
				countdown: 60,
				cTimer: null,
				callResult: {
					type: 0,
					code: ''
				},
				suspend: false
			};
		},
		computed: {
			phoneStr() {
				return this.phone.substr(0, 3) + "****" + this.phone.substr(7);
			}
		},
		watch: {
			show: function() {
				console.log(this.show)
				if (this.show) {
					if (!this.suspend) {
						this.init();
					}
				} else {
					if (!this.suspend) {
						this.clearTimer();
					}
					this.clearCode();
				}
			}
		},
		methods: {
			init: function() {
				var codeAry = [];
				for (var i = 0; i < this.len; i++) {
					codeAry.push({
						val: ""
					})
				}
				this.codeAry = codeAry;
				this.currItem = 0;
				if (this.autoCountdown) {
					this.startTimer();
				}
			},
			bindKeyEvent: function(e) {
				var _this = this;
				var val = e.currentTarget.dataset.val;
				switch (val) {
					case "clear":
						_this.clearCode();
						break;
					case "delete":
						_this.deleteCode();
						break;
					default:
						_this.inputVal(val);
						break;
				}
			},
			inputVal: function(val) {
				if (this.currItem < this.len) {
					this.codeAry[this.currItem].val = val;
					this.currItem++;
				}
				if (this.currItem == this.len) {
					this.execuCall(1);
				}
			},
			clearCode: function() {

				this.init();
			},
			deleteCode: function() {
				if (this.currItem > 0) {
					this.codeAry[this.currItem - 1].val = "";
					this.currItem--;
				}
			},
			closeDialog: function() {
				this.execuCall(-1);
				this.$emit("closeClick");
			},
			startTimer: function() {
				var _this = this;
				if (_this.cTimer == null) {
					_this.cTimer = setInterval(function() {
						_this.countdown--;
						if (_this.countdown == 0) {
							_this.clearTimer();
						}
					}, 1000)
				}
			},
			clearTimer: function() {
				var _this = this;
				clearInterval(_this.cTimer);
				_this.cTimer = null;
				_this.countdown = 60;
			},
			getCodeValue: function() {
				var codeStr = "";
				this.codeAry.forEach(function(code) {
					codeStr += code.val;
				})
				return codeStr;
			},
			execuCall: function(type) {
				this.callResult.type = type;
				if (type == 1) {
					this.callResult.code = this.getCodeValue();
					this.clearTimer();

				} else {
					this.suspend = true;
					this.callResult.code = '';
				}
				this.$emit("change", this.callResult);
			},
			resend: function() {
				var _this = this;
				_this.callResult.code = '';
				_this.callResult.type = 0;
				// _this.callResult.resendCall = function() {

				// }
				_this.init();
				_this.$emit("change", _this.callResult);

			},

			confirmClick() {


				console.log("result = " + JSON.stringify(this.callResult));

				if (this.callResult.code.length < 6) {

					uni.showModal({
						title: '温馨提示',
						content: '输入短信验证码长度有误'
					})
				} else {
					this.$emit("confirmClick", this.callResult);

				}

			}


		}
	}
</script>

<style scoped>
	.button-item:active {
		background: #d4d4d4;
	}

	.button-item+.button-item {
		border-left: 0.1px solid #d4d4d4;
	}

	.button-item {
		flex: 1;
		padding: 14px 0px;
	}

	.keyboard-line+.keyboard-line {
		border-top: 0.1px solid #d4d4d4;
	}

	.keyboard-line {
		display: flex;
	}

	.keyboard {
		background: #fff;
		position: absolute;
		z-index: 999;
		width: 100%;
		left: 0;
		bottom: 0;
		font-size: 17px;
	}

	.dialog-close {
		color: #999;
		height: 28px;
		width: 28px;
		font-size: 19px;
		top: 5px;
		left: 5px;
		position: absolute;
	}


	.dialog-close:before {
		content: "\2716";
	}

	.countdown {
		color: #666;
		font-size: 16px;
	}

	.resend {
		color: #007aff;
		font-size: 16px;
	}

	.dialog-ft {
		margin-top: 10px;
	}

	.code-view {
		display: flex;
		text-align: center;
		margin: 0 auto;
		border-collapse: separate;
		border-spacing: 10px 5px;
	}

	.code-item+.code-item {
		margin-left: 5px;
	}

	.code-item {
		flex: 1;
		border-bottom: 1px solid #999;
		padding-bottom: 2px;
		height: 60upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30upx;
	}

	.dialog-bd {
		margin-top: 5px;
	}

	.codedialog-subtitle {
		margin-top: 5px;
		padding: 5px 0px;
		font-size: 15px;
		line-height: 1.4;
		word-wrap: break-word;
		word-break: break-all;
		color: #999;
	}

	.dialog-view {
		position: fixed;
		z-index: 999;
		width: 70%;
		max-width: 300px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -120%);
		background-color: #fff;
		text-align: center;
		border-radius: 3px;
		overflow: hidden;
		padding: 20px 10px;
	}

	.mask {
		position: fixed;
		z-index: 999;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background: rgba(0, 0, 0, .6);
	}

	.codedialog {
		z-index: 999;
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		box-sizing: border-box;
		text-align: center;
	}
</style>



热门相关:总裁别再玩了   变身蜘蛛侠   变身蜘蛛侠   重生野性时代   前任无双