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?'/static/image/icon_visible.png':'/static/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?'/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>
	export default {
		data() {
			return {
				phone:17873014571,
				codeText: '获取验证码', // 验证码按钮文字
				newPassword: '',
				confirmPassword: '',
				// 为每个密码框单独设置显示状态
				showOldPassword: false,
				showNewPassword: false,
				showConfirmPassword: false
			}
		},
		onLoad() {},
		methods: {
			// 获取验证码
			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;
				}
				// TODO: 调用发送验证码API
				// 这里需要对接真实的发送验证码接口
				uni.showLoading({
					title: "发送中..."
				});
				// 模拟发送验证码
				setTimeout(() => {
					uni.hideLoading();
					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);
				}, 1000);
			},
			// 分别控制每个密码框的显示/隐藏
			toggleOldPassword() {
				this.showOldPassword = !this.showOldPassword;
			},
			toggleNewPassword() {
				this.showNewPassword = !this.showNewPassword;
			},
			toggleConfirmPassword() {
				this.showConfirmPassword = !this.showConfirmPassword;
			},
			confirm() {
				// 验证逻辑
				if (!this.oldPassword) {
					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;
				}

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

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

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

					// 这里添加实际的API调用
					// const res = await uni.request({
					// 	url: '/api/change-password',
					// 	method: 'POST',
					// 	data: {
					// 		oldPassword: this.oldPassword,
					// 		newPassword: this.newPassword
					// 	}
					// });

					// 模拟成功
					setTimeout(() => {
						uni.hideLoading();
						uni.showToast({
							title: '密码修改成功',
							icon: 'success'
						});

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

						// 跳转到其他页面或返回
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					}, 1000);

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