rtliveCompany/pages/auth/changePassword.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="!showOldPassword" v-model="oldPassword"
					placeholder="请输入现有密码" />
				<view class="img-box" @click="toggleOldPassword">
					<image class="icon"
						:src="showOldPassword?'/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="!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 {
				oldPassword: '',
				newPassword: '',
				confirmPassword: '',
				// 为每个密码框单独设置显示状态
				showOldPassword: false,
				showNewPassword: false,
				showConfirmPassword: false
			}
		},
		onLoad() {},
		methods: {
			// 分别控制每个密码框的显示/隐藏
			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;
				}
			}
		}

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