rtliveDoctor/pages_user/forgetPassword.vue

<template>
	<view class="setting-page">
		<view class="content">
			<view class="info-item">
				<text class="title">手机号码</text>
				<input class="input-field code-input" type="number" v-model="phone"
					placeholder="请输入手机号码" maxlength="11" />
			</view>
			<view class="info-item">
				<text class="title">验证码</text>
				<input class="input-field code-input" type="number" v-model="code"
					placeholder="请输入验证码" maxlength="6" />
				<view  class="get-code-btn" @click="getVerifyCode">
					{{ codeText }}
				</view>
			</view>
			<view class="info-item">
				<text class="title">密码</text>
				<input class="input-field code-input" type="text" :password="!showNewPassword" v-model="newPassword"
					placeholder="请输入8-16位字符，必须包含数字和字母" />
				<view class="img-box" @click="toggleNewPassword">
					<image class="icon"
						:src="showNewPassword?'/static/image/icon_visible.png':'/static/image/icon_invisible.png'"
						mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<view class="btn-box">
			<view class="confirm" @click="confirm">确认</view>
		</view>
	</view>
</template>

<script>
import { resetPassword, sendPasswordVerifyCode } from '@/api/password'
export default {
		data() {
			return {
				phone: '',
				code: '',
				codeText: '获取验证码', // 验证码按钮文字
				countdown: 0, // 倒计时
				countdownTimer: null, // 倒计时定时器
				newPassword: '',
				confirmPassword: '',
				// 为每个密码框单独设置显示状态
				showOldPassword: false,
				showNewPassword: false,
				showConfirmPassword: false
			}
		},
		onUnload() {
			// 清除倒计时
			if(this.countdownTimer) {
				clearInterval(this.countdownTimer);
				this.countdownTimer = null;
			}
		},
		onLoad() {},
		methods: {
			// 获取验证码
			async getVerifyCode() {
				if (this.countdown > 0) {
					return;
				}
				if (!this.phone) {
					uni.showToast({
						icon: 'none',
						title: "请输入手机号",
					});
					return;
				}
				if (!/^1[3-9]\d{9}$/.test(this.phone)) {
					uni.showToast({
						icon: 'none',
						title: "请输入正确的手机号",
					});
					return;
				}
				try {
					uni.showLoading({
						title: "发送中..."
					});
					const res = await sendPasswordVerifyCode({ phone: this.phone });
					uni.hideLoading();
					
					if (res.code === 200) {
						uni.showToast({
							icon: 'success',
							title: "验证码已发送",
						});
						// 开始倒计时
						this.countdown = 60;
						this.codeText = this.countdown + '秒重新获取';
						this.countdownTimer = setInterval(() => {
							this.countdown--;
							this.codeText = this.countdown + '秒重新获取';
							if (this.countdown <= 0) {
								clearInterval(this.countdownTimer);
								this.countdownTimer = null;
								this.codeText = '获取验证码';
							}
						}, 1000);
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg || "发送验证码失败",
						});
					}
				} catch (e) {
					uni.hideLoading();
					console.error('发送验证码失败', e);
					uni.showToast({
						icon: 'none',
						title: "发送验证码失败",
					});
				}
			},
			// 分别控制每个密码框的显示/隐藏
			toggleOldPassword() {
				this.showOldPassword = !this.showOldPassword;
			},
			toggleNewPassword() {
				this.showNewPassword = !this.showNewPassword;
			},
			toggleConfirmPassword() {
				this.showConfirmPassword = !this.showConfirmPassword;
			},
			confirm() {
				// 验证逻辑
				if (!this.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return;
				}
				if (!/^1[3-9]\d{9}$/.test(this.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return;
				}
				if (!this.code) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					});
					return;
				}
				if (!this.newPassword) {
					uni.showToast({
						title: '请输入新密码',
						icon: 'none'
					});
					return;
				}

				// 密码格式验证
				const passwordRegex = /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{8,20}$/;
				if (!passwordRegex.test(this.newPassword)) {
					uni.showToast({
						title: '密码需8-20位字母和数字组合',
						icon: 'none'
					});
					return;
				}

				// 调用重置密码的API
				this.resetPassword();
			},

			// 重置密码的API调用
			async resetPassword() {
				try {
					uni.showLoading({
						title: '修改中...'
					});

					const res = await resetPassword({
						phone: this.phone,
						code: this.code,
						newPassword: this.newPassword,
						confirmPassword: this.newPassword,
					});

					uni.hideLoading();

					if (res.code === 200) {
						uni.showToast({
							title: '密码修改成功',
							icon: 'success'
						});

						// 清空表单
						this.phone = '';
						this.code = '';
						this.newPassword = '';
						this.confirmPassword = '';

						// 跳转到其他页面或返回
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					} else {
						uni.showToast({
							title: res.msg || '修改失败',
							icon: 'none'
						});
					}
				} catch (error) {
					uni.hideLoading();
					console.error('修改密码失败', error);
					uni.showToast({
						title: error.message || '修改失败',
						icon: 'none'
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.setting-page {
		background: #ffffff;
		min-height: 100vh;

		.content {
			background: #ffffff;
		}

		.info-item {
			height: 104upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #F5F6FA;

			.title {
				width: 160rpx;
				font-size: 28rpx;
				color: #666666;
				margin-left: 32rpx;
			}

			.input-field {
				width: 100%;
				font-size: 30rpx;
				font-family: PingFang SC;
				color: #333333;
			}

			.code-input {
				flex: 1;
			}

			.img-box {
				padding: 32rpx;

				.icon {
					width: 32rpx;
					height: 32rpx;
				}
			}

			.get-code-btn {
				margin-right: 32rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #157CF8;
				padding-left: 20rpx;
				white-space: nowrap;
			}
		}

		.btn-box {
			padding: 64upx 32upx;

			.confirm {
				width: 100%;
				height: 88upx;
				line-height: 88upx;
				text-align: center;
				font-family: PingFang SC;
				font-size: 32upx;
				color: #FFFFFF;
				background: #388BFF;
				border-radius: 44upx;
			}
		}
	}
</style>