officialAccount/pages/login/code.vue

<template>
	<view class="login-container">
		<image class="photo-imge" src="https://www.focusnu.com/media/directive/login/bgc.png" />
		<image class="back-imge" src="https://www.focusnu.com/media/directive/login/back.png" @click="goback" />
		<view class="under-container-title">
			<view class="code-title">
				请输入验证码
			</view>
			<view class="code-number">
				验证码已发送到
				<view class="code-font">
					{{ mobile }}
				</view> 
			</view>
		</view>
		<view class="captcha-container">
			<u-message-input active-color="#333333" inactive-color="rgb(175,179,189)" width="150" :focus="true" mode="bottomLine" @finish="finshinput" ></u-message-input>
		</view>
		<view class="under-view" style="z-index: 1;">

			<view class="right-blue" v-if="!countdown" @click="getcode">
				重新发送
			</view>
			
			<view class="right-white" v-if="countdown">
			 	 <text style="color: #0096FF;">{{countdown}}秒</text>后重新发送
			</view>
			<view class="right-black" @click="isFadingOut=true">
				收不到验证码?
			</view>
		</view>
		<!-- </view> -->
		<!-- 遮罩 -->
		<!-- <transition name="fade"> -->
			<view v-if="isFadingOut" class="overlay" @click="closeModal" :style="{ backgroundColor: maskColor }" />
		<!-- </transition>

		<!-- 底部弹窗 -->
		<!-- <transition name="slide-up"> -->
			<view v-if="isFadingOut" class="modal">
				<view class="modal-title">收不到验证码</view>
				<view class="model-p">
					<view class="text-view" style="font-weight: 600;">手机号可正常使用:</view>
					<view class="text-view">1 是否输错手机号</view>
					<view class="text-view">2 手机是否设置短信拦截/欠费/信号不好</view>
					<view class="text-view">3 手机内存是否满了</view>
					<view class="text-view">4 手机卡是否为物联卡，而非SIM卡</view>
				</view>
			</view>
		<!-- </transition> -->
	</view>
</template>

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

	import {
		smsCode,
		checkPhoneCode,
		getMessage
	} from "@/api/loginApi.js"

	const mobile = ref("")
	const hkcode = ref("")
	const captcha = ref(['', '', '', '']); // 用来存储4个小方块的验证码输入
	const focusedIndex = ref(-1); // 当前聚焦的小方块索引
	const isFadingOut = ref(false);
	// 遮罩色，rgba 可调透明度
	const maskColor = ref('rgba(0, 0, 0, 0.5)')

	function closeModal() {
		isFadingOut.value = false
	}
	const aaaa = () =>{
		console.log("?????")
	}
	function filterToSingleDigit(number) {
		if (typeof number === 'number') {
			return number % 10; // 只保留个位数
		}
		return number; // 如果不是 number，原样返回
	}
	
	const finshinput = (res) => {
		// console.log("res",res)
		submitCaptcha(res);
	}
	
	// 输入框输入时的处理函数
	const handleInput = (index, event) => {
		const val = event.detail.value || '';
		captcha.value[index] = val
		if (val.length == 4) {
			// 1. 转成字符串，并补足前导 0 到 4 位
			const codeStr = event.detail.value.toString().padStart(4, '0') // "0123"    
			captcha.value = codeStr.split('')
			focusedIndex.value = 3
			nextTick(() => {
				submitCaptcha()
			})
		} else if (val.length == 2) {
			captcha.value[index] = filterToSingleDigit(captcha.value[index])
			if (captcha.value[index]) {
				if (index < 3) {
					focusedIndex.value = index + 1; // 输入后自动聚焦到下一个小方块
					// console.log("cccccccccc")
				}
			}
			let isFour = true;
			captcha.value.forEach(number => {
				if (!number) {
					isFour = false;
				}
			})
			nextTick(() => {
				if (isFour) {
					submitCaptcha()
				}
			})

		} else {
			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 rightCode = ref("")
	// 提交验证码
	const submitCaptcha = (res0) => {
		const code = res0
		if (code.length === 4) {
			let openid = uni.getStorageSync('openid')
			if (rightCode.value != code) {
				rightCode.value = code;
				checkPhoneCode({
					mobile: mobile.value,
					openId: openid,
					smscode: code
				}).then(res => {
					if (res.success) {
						getMessage(openid).then(res => {
							// uni.setStorageSync('tel', res.result.tel);
							// uni.setStorageSync('token', res.result.token);
							// uni.setStorageSync('serverUrl', res.result.serverUrl);
							// uni.redirectTo({
							// 	url: `/pages/login/threeselectone`
							// });
							if(uni.getStorageSync('special')){
								uni.setStorageSync('tel', res.result.tel);
								uni.setStorageSync('token', res.result.token);
								uni.setStorageSync('serverUrl', res.result.serverUrl);
								uni.redirectTo({
									url: `/pages/login/special`
								});
							}else{
								uni.setStorageSync('tel', res.result.tel);
								uni.setStorageSync('token', res.result.token);
								uni.setStorageSync('serverUrl', res.result.serverUrl);
								uni.redirectTo({
									url: `/pages/login/threeselectone`
								});
							}
						})
						
					} else {
						uni.showToast({
							title: '验证码错误',
							icon: 'none', // 不显示图标（提示信息）
							duration: 2000 // 显示时长（毫秒）
						})
					}
				})
			}
			// 执行验证码提交的逻辑
		} else {
			console.log('验证码未输入完整');
		}
	};

	const getcode = () => {

		smsCode({
			mobile: mobile.value,
			hkcode: hkcode.value,
			smsmode: 1
		}).then(res => {
			if (res.success) {
				uni.showToast({
					title: '发送成功',
					icon: 'none', // 不显示图标（提示信息）
					duration: 2000 // 显示时长（毫秒）
				})
				focusedIndex.value = 0;
				// 倒计时逻辑
				countdown.value = 60;
				timerId = setInterval(() => {
					if (countdown.value > 0) {
						countdown.value--;
					} else {
						clearInterval(timerId);
						timerId = null;
					}
				}, 1000);
			} else {
				uni.showToast({
					title: res.message,
					icon: 'none', // 不显示图标（提示信息）
					duration: 2000 // 显示时长（毫秒）
				})
			}
		})

	}
	const goback = () => {
		uni.navigateBack()
	}
	// 新增：倒计时相关
	const countdown = ref(0);
	let timerId = null;
	// 页面卸载时清除定时器
	onUnmounted(() => {
		if (timerId) {
			clearInterval(timerId);
		}
	});

	onLoad((options) => {
		mobile.value = options.mobile;
		hkcode.value = options.hkcode;
		getcode()
	});
</script>

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

		.title {
			margin-top: 180rpx;
			align-items: center;

			.title-imge {
				width: 100rpx;
				height: 105rpx;
				margin-left: 100rpx;
			}

			.title-font {
				font-size: 35rpx;
				font-weight: 600;
				margin-left: 105rpx;
				margin-top: 10rpx;
			}
		}

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

		.old-imge {
			position: absolute;
			right: 30rpx;
			top: 400rpx;
			width: 400rpx;
			height: 400rpx;
		}

		.under-container {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 45vh;
			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;
			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 {
		margin-top: 270rpx;
		margin-bottom: 20rpx;
		font-size: 25rpx;
		font-weight: 500;
		width: 100%;

		.code-title {
			margin-left: 80rpx;
			font-size: 40rpx;
			color: #333333;
			font-weight: 600;
			margin-bottom: 20rpx;
		}

		.code-number {
			margin-left: 80rpx;
			font-size: 25rpx;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
		}
	}

	.captcha-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.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-bottom: 5rpx solid #333333;
		// border-radius: 30rpx;
		font-size: 50rpx;
		font-weight: 700;
		text-align: center;
		margin-right: 40rpx;
		outline: none;
	}

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

	.right-blue {
		
		color: #0083FF;
		margin-left: 70rpx;
	}

	.right-white {
		color: rgb(194, 198, 211);
		margin-left: 70rpx;
	}

	.right-black {
		// float: right;
		
		margin-right: 110rpx;
		color: #00A2FF;
	}

	.under-view {
		width: 100%;
		margin-top: 10rpx;
		display: flex;
		justify-content: space-between;
	}

	/* 遮罩 */
	.overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 998;
	}

	/* 弹窗 */
	.modal {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		z-index: 999;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		width: 100%;
		height: 500rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.modal-title {
			font-size: 32rpx;
			font-weight: 700;
			margin: 50rpx 0;
			margin-bottom: 30rpx;
		}

		.model-p {
			padding: 0 50rpx;
			width: 100%;
			font-size: 30rpx;
		}

		.model-down {
			display: flex;
			width: 100%;
			justify-content: space-between;
			padding: 0 50rpx;
			margin-top: 40rpx;

			.model-white {
				border-radius: 50rpx;
				width: 300rpx;
				height: 95rpx;
				border: 5rpx solid rgb(0, 141, 255);
				color: rgb(0, 141, 255);
				font-size: 35rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.model-blue {
				border-radius: 50rpx;
				width: 300rpx;
				height: 95rpx;
				background: linear-gradient(to right, #00C9FF, #0076FF);
				color: #fff;
				font-size: 35rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}

	/* 动画：遮罩淡入淡出 */
	.fade-enter-active,
	.fade-leave-active {
		transition: opacity 0.3s;
	}

	.fade-enter-from,
	.fade-leave-to {
		opacity: 0;
	}

	.fade-enter-to,
	.fade-leave-from {
		opacity: 1;
	}

	/* 动画：弹窗上滑 */
	.slide-up-enter-active,
	.slide-up-leave-active {
		transition: transform 0.3s;
	}

	.slide-up-enter-from,
	.slide-up-leave-to {
		transform: translateY(100%);
	}

	.slide-up-enter-to,
	.slide-up-leave-from {
		transform: translateY(0);
	}

	.text-view {
		margin-bottom: 20rpx;
	}

	.back-imge {
		position: absolute;
		top: 100rpx;
		left: 30rpx;
		width: 50rpx;
		height: 50rpx;
	}

	.code-font {
		font-weight: 600;
		font-size: 30rpx;
		margin-left: 15rpx;
		
	}
</style>