zhywpt-sp/login/forget-pwd-step2-ali.vue

<!-- 注册第2步 -->
<template>
	<u-form ref="myForm">
		<view class="from">
			<u-form-item prop="phone">
				<view class="from_item" style="background-color: #f7f7f7">
					<text><text style="color: red"></text>手机号：</text>
					<u-input v-model="phone" :disabled="true" class="input" />
				</view>
			</u-form-item>
			<u-form-item prop="code">
				<view class="from_item">
					<text><text style="color: red"></text>验证码：</text>
					<u-input v-model="code" placeholder="请输入验证码" class="input" />
					<view class="hint2">
						<view class="green">{{ codeDuration === 0 ? "" : codeDuration }}</view>
						<view class="grey" @click="sendRegisterCode">{{
  				    codeDuration === 0 ? "发送验证码" : "秒后可重发"
  				  }}</view>
					</view>
				</view>
			</u-form-item>
		</view>
	</u-form>

	<!-- <view class="btn">
		<submit-button title="下一步" @submit="nextStep"></submit-button>
	</view> -->
	<view class="register-main">
		<!-- <view class="title">重置密码</view>
		<view class="hint">重置之前的密码，设置新密码</view> -->
		<view class="hint1">请输入密码</view>
		<view class="form-input">
			<input class="input" v-model="state.password" placeholder="请输入密码" placeholder-class="form-placeholder"
				:password="state.isPwdType ? true : false" type="text" />
			<image :src="`${$imgUrl}login/${
	      state.isPwdType ? 'icon_eye_close' : 'icon_eye_open'
	    }.png`" class="eye" @click="state.isPwdType = !state.isPwdType" mode="aspectFill"></image>
		</view>

		<view class="hint2">请再次输入密码</view>
		<view class="form-input">
			<input class="input" v-model="state.affirmPassword" placeholder="请再次输入密码"
				placeholder-class="form-placeholder" :password="state.isAffirmPwdType ? true : false" type="text" />
			<image :src="`${$imgUrl}login/${
	      state.isAffirmPwdType ? 'icon_eye_close' : 'icon_eye_open'
	    }.png`" class="eye" @click="state.isAffirmPwdType = !state.isAffirmPwdType" mode="aspectFill"></image>
		</view>

		<view class="hint4">{{ state.pwdHint }}</view>
	</view>

	<view class="btn">
		<submit-button title="确认更改" @submit="doResetPwd"></submit-button>
	</view>
</template>

<script setup lang="ts">
	import { msg, navTo, confirm, checkStr } from "@/utils/utils";
	import { onLoad } from "@dcloudio/uni-app";
	import { reactive } from "vue";
	import { ref } from "vue";
	import { request } from "@/utils/network/request";
	import { sendCode, resetPwd } from "@/utils/network/api.js";

	//上个界面传递的电话号码
	const phone = ref("");
	const code = ref(null);

	//倒计时时常
	const codeDuration = ref(0);
	let interval = null;
	const state = reactive({
		isPwdType: true,
		isAffirmPwdType: true,
		password: "", //密码
		affirmPassword: "",//再次输入密码
		phone: "", //手机号
		code: "", //验证码
		pwdHint: "密码不少于10位，必须同时包含数字、大小写字母和特殊符号,不能使用3个连续字符",
	});
	onLoad((options) => {
		phone.value = options.phone;
		codeInterval();
	});

	/* 验证码倒计时 */
	const codeInterval = () => {
		codeDuration.value = 60;
		interval = setInterval(() => {
			codeDuration.value--;
			if (codeDuration.value === 0) {
				if (interval) {
					clearInterval(interval);
					interval = null;
				}
			}
		}, 1000);
	};

	/* 发送验证码 */
	const sendRegisterCode = () => {
		if (codeDuration.value !== 0) {
			return;
		}
		const options = {
			type: 2,
			data: { mobile: phone.value },
			method: "POST",
			showLoading: true,
		};
		request(sendCode, options).then((res) => {
			msg("验证码发送成功！");
			codeInterval();
		});
	};

	/* 下一步 */
	const nextStep = () => {
		if (!code.value) {
			msg("请先输入验证码！");
			return;
		}

		navTo(`/login/forget-pwd-step3?phone=${phone.value}&code=${code.value}`);
	};
	/* 忘记密码 */
	const doResetPwd = () => {
		if (!code.value) {
			msg("请先输入验证码！");
			return;
		}
		if (!state.password) {
			msg("请输入密码");
			return;
		}

		if (!state.affirmPassword) {
			msg("请再次输入密码");
			return;
		}

		if (state.password !== state.affirmPassword) {
			msg("两次密码输入不一致，请重新输入！");
			return;
		}

		const options = {
			type: 2,
			data: {
				newPassword: state.password,
				affirmNewPassword: state.affirmPassword,
				mobile: phone.value,
				code: code.value,
			},
			method: "POST",
			showLoading: true,
		};
		request(resetPwd, options).then((res) => {
			confirm(
				"密码重置成功，请登录！",
				() => {
					uni.$emit("login", { phone: phone.value });
					uni.navigateBack({ delta: 2 });
				},
				"提示",
				false
			);
		});
	};
</script>

<style lang="scss" scoped>
	.register-main {
		border-top: 1rpx solid #dcdcdc;
		padding: 78rpx 30rpx 50rpx;

		.title {
			font-size: 32rpx;
			color: #333333;
			font-weight: 600;
		}

		.hint {
			font-size: 24rpx;
			color: #999999;
			margin-top: 20rpx;
		}
	}

	.input-code {
		margin: 100rpx -10rpx 0px;
	}

	.hint2 {
		margin-top: 40rpx;
		display: flex;

		.green {
			font-size: 28rpx;
			color: #00b38b;
		}

		.grey {
			font-size: 24rpx;
			color: #999999;
			margin-left: 16rpx;
		}
	}

	.register-main {
		border-top: 1rpx solid #dcdcdc;
		padding: 78rpx 30rpx 50rpx;

		.title {
			font-size: 32rpx;
			color: #333333;
			font-weight: 600;
		}

		.hint {
			font-size: 24rpx;
			color: #999999;
			margin-top: 20rpx;
		}

		.hint1 {
			color: #333333;
			font-size: 28rpx;
			// margin-top: 100rpx;
			font-weight: 600;
		}

		.hint2 {
			color: #333333;
			font-size: 28rpx;
			margin-top: 50rpx;
			font-weight: 600;
		}

		.hint4 {
			margin-top: 30rpx;
			font-size: 26rpx;
			color: #00b38b;
		}
	}

	.form-input {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 90rpx;
		margin-top: 30rpx;
		border-bottom: 1rpx solid #dcdcdc;
		color: #333333;

		.input {
			flex: 1;
			padding-right: 48rpx;
			font-size: 26rpx;
			background: transparent;
		}

		.eye {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.form-placeholder {
		color: #999999;
	}

	.btn {
		margin: 80rpx 40px;
	}
</style>