im/pages/common/verifyCode/index.vue

<template>
	<view class="verify_code content_with_back">
		<view class="back_icon">
			<u-icon name="arrow-left" bold size="22" @click="back" />
		</view>
		<view class="title">验证码已发送至手机</view>
		<view class="sub_title">
			{{ `+${userInfo.region} ${userInfo.mobile}` }}
		</view>
		<view class="code_container">
			<!-- <view class="code_title">请输入验证码</view> -->
			<u-code-input fontSize="24" color="#000" :focus="true" v-model="codeValue" hairline space="16"
				@finish="checkCode" />
			<view class="code_des">
				<text v-if="count > 0">
					{{ `${count}s` }}
					后
				</text>
				<text @click="getSmsAgain"> 重发验证码 </text>
			</view>
		</view>
	</view>
</template>
<script>
	import user from "@/store/modules/user";
	import {businessSendSms,businessVerifyCode} from "@/api/login";
	import {SmsUserFor} from "@/constant";
	import {checkLoginError	} from "@/util/common";
	import util from "@/util/index.js"
	let timer;
	export default {
		data() {
			return {
				codeValue: "",
				count: 60,
				userInfo: {
					mobile: "",
					region: "",
					email: "",
					code: "",
					type: "email",
				},
				isRegister: false,
			};
		},
		onLoad(options) {
			const {
				userInfo,
				isRegister,
				resend
			} = options;
			console.log(userInfo,isRegister)
			this.userInfo = util.aesdecode(userInfo);
			this.isRegister = JSON.parse(isRegister);
			if(resend == 1){
				this.count = 0;
				this.getSmsAgain();
			}else{
				this.startCount();
			}
		},
		onReady() {},
		methods: {
			back() {
				uni.$u.route("/pages/common/registerOrForget/index", {
					isRegister: this.isRegister,
				});
			},
			checkCode(value) {
				const options = {
					mobile: this.userInfo.mobile,
					email: this.userInfo.email,
					type: this.userInfo.type,
					region: `+${this.userInfo.region}`,
					event: this.isRegister ? 'register' : 'reset_pwd',
					code: value,
				};
				businessVerifyCode(options)
					.then(() => {
						const s = util.aesencode(this.userInfo);
						if (this.isRegister) {
							uni.$u.route("/pages/common/setSelfInfo/index", {
								userInfo: s,
								isRegister: this.isRegister,
								codeValue: this.codeValue,
							});
						} else {
							uni.$u.route("/pages/common/setPassword/index", {
								userInfo: s,
								isRegister: !this.isRegister,
								codeValue: this.codeValue,
							});
						}
					})
					.catch((err) => {
						uni.$u.toast(checkLoginError(err));
						// uni.$u.toast('验证失败')
					});
			},
			startCount() {
				if (timer) {
					clearInterval(timer);
				}
				timer = setInterval(() => {
					if (this.count > 0) {
						this.count--;
					}
				}, 1000);
			},
			getSmsAgain() {
				if (this.count === 0) {
					const options = {
						mobile: this.userInfo.mobile,
						email: this.userInfo.email,
						type: this.userInfo.type,
						region: `+${this.userInfo.region}`,
						event: this.isRegister ? 'register' : 'reset_pwd',
					};
					businessSendSms(options)
						.then(() => {
							this.count = 60;
							this.startCount();
							uni.$u.toast("验证码已发送！");
						})
						.catch((err) => uni.$u.toast("验证码发送失败"));
				}
			},
		},
	};
</script>
<style lang="scss" scoped>
	.verify_code {
		margin-top: var(--status-bar-height);
		background: linear-gradient(180deg,
				rgba(0, 137, 255, 0.1) 0%,
				rgba(255, 255, 255, 0) 100%);

		.title {
			padding-bottom: 6rpx;
			font-size: 44rpx;
			font-weight: 600;
			color: $u-primary;
		}

		.sub_title {
			font-size: 24rpx;
			color: $u-tips-color;
			margin-top: 6rpx;
		}

		.code_container {
			.code_title {
				font-size: 28rpx;
				margin-bottom: 24rpx;
			}

			.code_des {
				margin-top: 24rpx;
				font-size: 24rpx;
				color: $u-tips-color;

				.blue_text {
					color: $u-primary;

					&:nth-child(2) {
						margin-left: 12rpx;
						cursor: pointer;
					}
				}
			}
		}
	}
</style>