rtliveCompany/pages/auth/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="text" :password="!phone" v-model="phone"
					placeholder="请输入手机号码" />
			</view>
			<view class="info-item">
				<text class="title">验证码</text>
				<input class="input-field code-input" type="number" v-model="verifyCode"
					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-20位字母、数字" />
				<view class="img-box" @click="toggleNewPassword">
					<image class="icon"
						:src="showNewPassword?'https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_visible.png':'https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_invisible.png'"
						mode="aspectFill"></image>
				</view>
			</view>
			<view class="info-item">
				<text class="title">确认密码</text>
				<input class="input-field code-input" type="text" :password="!showConfirmPassword"
					v-model="confirmPassword" placeholder="请再次输入新密码" />
				<view class="img-box" @click="toggleConfirmPassword">
					<image class="icon"
						:src="showConfirmPassword?'https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_visible.png':'https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/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 { forgetPassword } from '@/api/user.js'
	import {
		sendSmsCode,//发送短信验证码
	} from '@/api/user'
	export default {
		data() {
			return {
				phone: '',
				verifyCode: '', // 验证码
				codeText: '获取验证码', // 验证码按钮文字
				newPassword: '',
				confirmPassword: '',
				// 为每个密码框单独设置显示状态
				showNewPassword: false,
				showConfirmPassword: false,
				// 倒计时相关
				countdown: 0,
				countdownTimer: null
			}
		},
		onLoad(options) {
			// this.phone = options.phone || '';
	},
		methods: {
			// 修改密码的API调用
			async changePassword() {
				try {
					uni.showLoading({
						title: '修改中...'
					});
					
					// 构建请求参数
					const params = {
						phone: this.phone,
						code: this.codeText,
						newPassword: this.newPassword,
						confirmPassword: this.confirmPassword
					};
					
					// 调用修改密码接口
					const res = await forgetPassword(params);
					
					uni.hideLoading();
					
					if (res.code === 200) {
						uni.showToast({
							title: '密码修改成功',
							icon: 'success'
						});
						
						// 清空表单
						this.newPassword = '';
						this.confirmPassword = '';
						
						// 跳转到其他页面或返回
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					} else {
						uni.showToast({
							title: res.message || '修改失败',
							icon: 'none'
						});
					}
					
				} catch (error) {
					uni.hideLoading();
					uni.showToast({
						title: error.message || '修改失败',
						icon: 'none'
					});
				}
			},
			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;
			}
			// 调用发送验证码API
				uni.showLoading({
					title: "发送中..."
				});
				let params = {
					phone: this.phone,
					type: '1',
				}
				sendSmsCode(params)
					.then(res => {
						uni.hideLoading();
						if (res.code == 200) {
							uni.showToast({
								icon: 'success',
								title: "验证码已发送",
							});
							// 开始倒计时
							this.countdown = 60;
							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.message || "发送验证码失败",
							});
						}
					})
					.catch(err => {
						uni.hideLoading();
						uni.showToast({
							icon: 'none',
							title: "发送验证码接口调用失败",
						});
					});
		},
			toggleNewPassword() {
				this.showNewPassword = !this.showNewPassword;
			},
			toggleConfirmPassword() {
				this.showConfirmPassword = !this.showConfirmPassword;
			},
			confirm() {
				

				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;
				}

				if (this.newPassword !== this.confirmPassword) {
					uni.showToast({
						title: '两次输入的新密码不一致',
						icon: 'none'
					});
					return;
				}

				// 调用修改密码的API
				this.changePassword();
			},

			// 修改密码的API调用
			async changePassword() {
				try {
					uni.showLoading({
						title: '修改中...'
					});
					
					// 构建请求参数
					const params = {
						phone: this.phone,
						code: this.verifyCode,
						newPassword: this.newPassword,
						confirmPassword: this.confirmPassword
					};
					
					// 调用修改密码接口
					const res = await forgetPassword(params);
					
					uni.hideLoading();
					
					if (res.code === 200) {
						uni.showToast({
							title: '密码修改成功',
							icon: 'success'
						});
						
						// 清空表单
						this.newPassword = '';
						this.confirmPassword = '';
						
						// 跳转到其他页面或返回
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					} else {
						uni.showToast({
							title: res.message || '修改失败',
							icon: 'none'
						});
					}
					
				} catch (error) {
					uni.hideLoading();
					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>