officialAccount/pages/index/code.vue

<template>
	<view class="login-container">
		<view class="title">
			<image class="title-imge" src="/static/index/nu.png" />
			<view class="title-font">
				<view class="">您好，</view>
				<view class="">欢迎使用nu护理单元~</view>
			</view>
		</view>
		<image class="photo-imge" src="/static/index/bgc.png" />
		<image class="old-imge" src="/static/index/old.png" />
		<view class="under-container">
			<view class="under-container-title">
				<view class="code-title">
					请输入验证码
				</view>
				<view class="code-number">
					验证码已发送至{{ phonenumber }}
				</view>
				<!-- <view class="under-container-input">
					<view class="input-left">+86</view>
					<input type="number" style="width: 600rpx;" maxlength="11" placeholder="请输入手机号" @input="isRight" />
				</view> -->
			</view>
			<view class="captcha-container">
				<view class="captcha-box">
					<view v-for="(digit, index) in captcha" :key="index" class="captcha-item">
						<input v-model="captcha[index]" class="captcha-input" type="number" maxlength="1"
							:placeholder="index < 3 ? '' : ' '" @input="handleInput(index)"
							@keydown="handleKeydown(index, $event)" :focus="focusedIndex === index" />
					</view>
				</view>
				<!-- 触发钩子 -->
				<!-- <button class="submit-btn" @click="submitCaptcha">提交验证码</button> -->
			</view>
			<view style="width: 100%;">
				<view class="right-blue">
					重新发送
				</view>
			</view>
			
			<!-- <view class="under-container-title">
				请输入验证码
			</view>
			<view class="button-blue" v-show="canClick" @click="loginIt">
				获得验证码
			</view>
			<view class="button-gray" v-show="!canClick">
				获得验证码
			</view> -->
		</view>
	</view>
</template>

<script setup>
	import {
		nextTick,
		reactive,
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';

	const phonenumber = ref("")
	const captcha = ref(['', '', '', '']); // 用来存储4个小方块的验证码输入
	const focusedIndex = ref(0); // 当前聚焦的小方块索引

	// 输入框输入时的处理函数
	const handleInput = (index) => {
		if (captcha.value[index]) {
			if (index < 3) {
				focusedIndex.value = index + 1; // 输入后自动聚焦到下一个小方块
			}
		}
		let isFour = true;
		captcha.value.forEach(number=>{
			if(!number){
				isFour = false;
			}
		})
		nextTick(()=>{
			if(isFour){
				submitCaptcha()
			}
			
		})
	};

	// 处理删除键
	const handleKeydown = (index, event) => {
		if (event.key === 'Backspace' && !captcha.value[index]) {
			if (index > 0) {
				focusedIndex.value = index - 1; // 如果当前小方块为空，则聚焦到前一个小方块
			}
		}
	};

	// 提交验证码
	const submitCaptcha = () => {
		const code = captcha.value.join('');
		if (code.length === 4) {
			console.log('提交验证码：', code);
			// 执行验证码提交的逻辑
		} else {
			console.log('验证码未输入完整');
		}
	};

	onLoad((options) => {
		// console.log(options.phonenumber); // 获取传递的参数
		phonenumber.value = options.phonenumber
	});
</script>

<style lang="scss" scoped>
	.login-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 100vh;
		width: 100%;
		background-color: rgb(239, 241, 252);
		position: relative;

		.title {
			display: flex;
			margin-top: 120rpx;
			align-items: center;

			.title-imge {
				width: 110rpx;
				height: 110rpx;
				margin-right: 30rpx;
			}

			.title-font {
				font-size: 35rpx;
				font-weight: 500;
			}
		}

		.photo-imge {
			position: absolute;
			top: 120rpx;
			left: 0;
			width: 100%;
			height: 1100rpx;
		}

		.old-imge {
			position: absolute;
			left: 50%;
			transform: translate(-50%, -50%);
			top: 550rpx;
			width: 400rpx;
			height: 400rpx;
		}

		.under-container {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 680rpx;
			background-color: #fff;
			border-top-left-radius: 50rpx;
			border-top-right-radius: 50rpx;
			box-shadow: 10rpx 10rpx 20rpx rgba(0, 0, 0, 0.1);
			display: flex;
			flex-direction: column;
			// align-items: center;
			color: #5A607F;

			.radio-circle {
				position: relative;
				margin-top: 2rpx;
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				border: 2rpx solid #C0C5D9;
				background-color: transparent;
			}

			.radio-circle-target {
				position: relative;
				margin-top: 2rpx;
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				border: 2rpx solid #C0C5D9;
				background-color: transparent;
			}

			.radio-circle-target::after {
				content: "";
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 30rpx;
				height: 30rpx;
				background-color: #00C9FF;
				border-radius: 50%;
			}
		}
	}

	.under-container-title {
		// display: flex;
		margin-top: 50rpx;
		margin-bottom: 20rpx;
		font-size: 25rpx;
		font-weight: 500;
		width: 100%;

		.code-title {
			margin-left: 80rpx;
			font-size: 33rpx;
			color: black;
			font-weight: 500;
			margin-bottom: 20rpx;
		}

		.code-number {
			margin-left: 80rpx;
			font-size: 28rpx;
			// color: black;
			// font-weight: 500;
			margin-bottom: 20rpx;
		}
	}

	.captcha-container {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.captcha-box {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.captcha-item {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.captcha-input {
		width: 110rpx;
		height: 110rpx;
		border: 2rpx solid #C0C5D9;
		border-radius: 20rpx;
		font-size: 28rpx;
		text-align: center;
		margin-right: 40rpx;
		outline: none;
	}

	.captcha-input:focus {
		border-color: #00C9FF;
	}

	.submit-btn {
		padding: 10rpx 20rpx;
		background-color: #00C9FF;
		color: white;
		border-radius: 43rpx;
		font-size: 28rpx;
		margin-top: 20rpx;
		width: 80%;
		text-align: center;
	}
	.right-blue{
		float: right;
		color: #0083FF;
		margin-right: 80rpx;
	}
</style>