输入6位数验证码的实现原理

<template>
	<view>
		<view class="Box">
			<view class="Get_the_prize">
				<view class="Award_name">输入验证码</view>
				<view class="Award_input"></view>
			</view>

			<!-- 6位验证码第二版开始 -->
			<view class="verification_frame">
				<!-- 六个显示框 -->
				<view class="top_three">
					<view :class="{ inb: inputVerifications[0] >= 0 ? true : false }" class="input">
						<text>{{ inputVerifications[0] }}</text>
						<view v-if="!inputVerifications[0]" class="fours"></view>
					</view>
					<view :class="{ inb: inputVerifications[1] >= 0 ? true : false }" class="input">
						<text>{{ inputVerifications[1] }}</text>
						<view v-if="inputVerifications[0] && !inputVerifications[1]" class="fours"></view>
					</view>
					<view :class="{ inb: inputVerifications[2] >= 0 ? true : false }" class="input">
						<text>{{ inputVerifications[2] }}</text>
						<view v-if="inputVerifications[1] && !inputVerifications[2]" class="fours"></view>
					</view>
					<view :class="{ inb: inputVerifications[3] >= 0 ? true : false }" class="input">
						<text>{{ inputVerifications[3] }}</text>
						<view v-if="inputVerifications[2] && !inputVerifications[3]" class="fours"></view>
					</view>
					<view :class="{ inb: inputVerifications[4] >= 0 ? true : false }" class="input">
						<text>{{ inputVerifications[4] }}</text>
						<view v-if="inputVerifications[3] && !inputVerifications[4]" class="fours"></view>
					</view>
					<view :class="{ inb: inputVerifications[5] >= 0 ? true : false }" class="input">
						<text>{{ inputVerifications[5] }}</text>
						<view v-if="inputVerifications[4] && !inputVerifications[5]" class="fours"></view>
					</view>
				</view>
				<!-- 隐藏的input -->
				<view class="top_four">
					<input type="number" class="input_show" maxlength="6" v-model="inputVerifications" @input="inputVerification" :focus="true" style="color:transparent; " />
				</view>
			</view>
			<!-- 6位验证码第二版结束 -->
			<view class="getVerification">
				<!-- 输入验证码正确时提示 -->
				<view class="Tips_box">
					<view class="Verification_tips" v-if="againState">验证码已发送，请注意查收</view>
					<view class="error_tips" v-else>验证码不正确</view>
					<view class="Verification_tips">
						<view class="Resend_box" v-if="resendStatus" style="font-weight: 600; color: #333333;" @click="ResendGetData">重新发送</view>
						<view class="Resend_box" v-else>
							重新发送
							<span>{{ time }}</span>
							s
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

javaScript 代码如下：

<script>
export default {
	data() {
		return {
			isShow: true,
			againState: true,
			resendStatus: true, // 切换重新发送短信和倒计时的重新发送
			verificationCode: '', // 获取到的验证码 路由传递过来的
			telValue: '', // 手机号码
			// 验证码开始
			pasteResult: [1, 2, 3, 4, 5, 6], // 生成验证码盒子的个数
			input: [], // 用户输入的值被分割成的数组
			inputVerifications: '', // 输入的值
			// 验证码结束
			// 发送短信的秒数
			time: 60, // 重新发送短信等待时间
			realTime: null, //定时器,
			ropertyConsultantId: '' // 置业顾问id
		};
	},

	components: {},

	onLoad(option) {
		this.verificationCode = option.verificationCode;
		this.telValue = option.valuebox;
	},
	onShow() {
		this.forTheFirstTime();
	},
	mounted() {
		// this.nextStep();
	},
	methods: {
		// 开始
		// 解决一个输入框输入多个字符
		inputEvent() {
			var index = e.target.dataset.index * 1;
			var el = e.target;
			this.$set(this.input, index, el.value.slice(0, 1));
			console.log(this.pasteResult, '输入的验证码');
		},
		// 隐藏输入框的交互逻辑
		inputVerification(e) {
			let inputValue = e.target.value;
			this.inputVerifications = inputValue;
			this.input = inputValue.split('');
			if (this.inputVerifications.length == 6) {
				// this.$apiPost(`/api/estate_show/property_consultant/verification?tel=${this.telValue}&rand=${this.input.__ob__.value.join('')}`)
				this.$apiPost(`/api/estate_show/property_consultant/verification?tel=${this.telValue}&rand=${this.inputVerifications}`)
					.then(data => {
						console.log(data, '用输入的值去验证 手机验证');
						if (data.identity == 'DYNATOWN') {
							this.ropertyConsultantId = data.consultantId;
							uni.showToast({
								title: '置业顾问认证成功',
								duration: 2000,
								icon: 'none'
							});
							// 跳转
							uni.navigateTo({
								url: `/pages/propertyConsultant/verificationCode?ropertyConsultantId=${this.ropertyConsultantId}`
							});
						}
					})
					.catch(err => {
						console.log(err.status, '验证失败请重新输入');
						if (err.status == 'error') {
							uni.showToast({
								title: '验证失败，请重新获输入',
								duration: 2000,
								icon: 'none'
							});
							this.againState = false;
							// this.inputVerifications = ''; // 验证失败后清空
							// this.input = []; // 验证失败后清空
						}
					});
			}
		},
		// 重新获取验证码
		ResendGetData() {
			this.resendStatus = false;
			this.againStat = true;
			console.log('开启定时');
			console.log(this.telValue, '传递过来的手机号');
			this.$apiPost(`/api/estate_show/property_consultant/authentication?tel=${this.telValue}`).then(data => {
				console.log(data, '已发送手机验证');
				if (data) {
					this.verificationCode = data; // 这里只是覆盖验证码打印台测试
				} else {
					return;
				}
			});
			let that = this;
			that.realTime = setInterval(() => {
				// console.log(this.time--,'开启定时')
				if (this.time-- <= 0) {
					console.log(this.time--, '清除定时');
					that.clearIntervalData();
					that.resendStatus = true;
					this.againState = true;
					that.time = 60; // 重新重置为60秒
				}
			}, 1000);
		},
		// 清除定时器
		clearIntervalData() {
			// clearInterva(this.setTime)
			clearInterval(this.realTime); //  清除定时器
			console.log('关闭定时');
		},
		// 第一次进来就倒计时
		forTheFirstTime() {
			this.resendStatus = false;
			let that = this;
			that.realTime = setInterval(() => {
				// console.log(this.time--,'开启定时')
				if (this.time-- <= 0) {
					console.log(this.time--, '清除定时');
					that.clearIntervalData();
					that.resendStatus = true;
					this.againState = true;
					that.time = 60; // 重新重置为60秒
				}
			}, 1000);
		}
	}
};
</script>

css代码如下需要用scss编译 如下

<style lang="scss" scoped>
.Box {
	background-color: #fff;
	width: 100vw;
	height: 100vh;
	.Get_the_prize {
		display: flex;
		justify-content: space-between;
		padding: 0rpx 30rpx;
		.Award_name {
			width: 50%;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
		}
		.Award_input {
			width: 50%;
			height: 80rpx;
			line-height: 80rpx;
			display: flex;
			// line-height: 112rpx;
			align-items: center;
		}
	}
	// 验证码开始

	// 第二版验证码
	/* 六个显示框容器 */
	.verification_frame {
		padding: 0 30rpx;
		.top_three {
			width: 80%;
			height: 120rpx;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: center;
			/* 六个框显示框 */
			.input {
				width: 14%;
				height: 100rpx;
				border-bottom: 2rpx solid #b8b8b8;
				margin-right: 12rpx;
				text-align: center;
				line-height: 100rpx;
				font-size: 50rpx;
				> text {
					font-size: 44rpx;
					color: #333333;
				}
			}
			/* 模拟下边框线的焦点 */
			.inb {
				border-bottom: 2rpx solid #026bac;
			}
			/* 闪烁的假焦点竖线 */
			.fours {
				width: 5rpx;
				height: 40rpx;
				margin: auto;
				background-color: #000000;
				margin-top: 35rpx;
				animation: show 0.8s linear infinite;
				/* 模拟焦点动画  更改animation以更改动画样式*/
				@keyframes show {
					from {
						background-color: #000000;
					}
					to {
						background-color: #ffffff;
					}
				}
			}
		}

		/* 隐藏的inpit容器 */
		.top_four {
			width: 100%;
			height: 100rpx;
			margin: auto;
			margin-top: -100rpx;
			background-color: #fff;
			// 隐藏的输入框
			.input_show {
				position: fixed;
				width: 105%;
				height: 100rpx;
				left: -110rpx;
				top: 86rpx;
				// border: 2rpx solid #aaaa7f;
				opacity: 0;
				text-align: left;
				color: rgba(255, 255, 255, 0);
			}
		}
	}
	// 第二版结束

	// 验证码结束

	.getVerification {
		margin-top: 40rpx;
		padding: 0 30rpx;
		.Tips_box {
			display: flex;
			justify-content: space-between;
			height: 34rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
			line-height: 34rpx;
			text-align: center;
			margin-top: 20rpx;
			.Verification_tips {
				width: 50%;
				color: #999999;
				.Resend_box {
					text-align: right;
					color: #999999;
				}
				.Resend_view {
					text-align: right;
					color: #333333;
					font-weight: 600;
				}
			}
			// 验证码错误时
			.error_tips {
				color: #de3f59;
			}
		}
	}
}
</style>