shuhi-app/pages/my/page/password.vue

<template>
	<view class="password-container">
		<u-form :model="formData" :rules="rules" ref="formRef" labelPosition="top" :borderBottom="true"
			labelWidth="300px" error-type="toast">
			<u-form-item label="原密码" prop="oldPassword" borderBottom>
				<u-input v-model="formData.oldPassword" type="password" placeholder="请输入原密码" :border="false">
				</u-input>
			</u-form-item>

			<u-form-item label="新密码" prop="newPassword" borderBottom>
				<u-input v-model="formData.newPassword" type="password" placeholder="请输入新密码" :border="false">
				</u-input>
			</u-form-item>

			<u-form-item label="确认新密码" prop="confirmPassword" borderBottom>
				<u-input v-model="formData.confirmPassword" type="password" placeholder="请再次输入新密码" :border="false">
				</u-input>
			</u-form-item>
		</u-form>

		<view class="submit-btn">
			<u-button type="primary" text="修改密码" @click="submitForm" :loading="loading"></u-button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'

	// 表单引用
	const formRef = ref(null)

	// 加载状态
	const loading = ref(false)

	// 密码显示状态
	const showPassword = reactive({
		old: false,
		new: false,
		confirm: false
	})

	// 表单数据
	const formData = reactive({
		oldPassword: '',
		newPassword: '',
		confirmPassword: ''
	})

	// 表单验证规则
	const rules = {
		oldPassword: [{
			required: true,
			message: '请输入原密码',
			trigger: ['blur', 'change']
		}, {
			min: 6,
			message: '密码长度不能小于6位',
			trigger: ['blur', 'change']
		}],
		newPassword: [{
			required: true,
			message: '请输入新密码',
			trigger: ['blur', 'change']
		}, {
			min: 6,
			message: '密码长度不能小于6位',
			trigger: ['blur', 'change']
		}, {
			validator: (rule, value, callback) => {
				if (value === formData.oldPassword) {
					callback(new Error('新密码不能与原密码相同'))
				} else {
					callback()
				}
			},
			trigger: ['blur', 'change']
		}],
		confirmPassword: [{
			required: true,
			message: '请再次输入新密码',
			trigger: ['blur', 'change']
		}, {
			validator: (rule, value, callback) => {
				if (value !== formData.newPassword) {
					callback(new Error('两次输入的密码不一致'))
				} else {
					callback()
				}
			},
			trigger: ['blur', 'change']
		}]
	}


	// 提交表单
	function submitForm() {
		if (!formRef.value) return

		formRef.value.validate().then(valid => {
			if (valid) {
				loading.value = true
				// 这里添加修改密码的API调用
				uni.$u.http.post('/app/appUser/updatePwd', formData).then(res => {
					if (res.code == 200) {
						uni.showModal({
							title: '提示',
							content: '密码修改成功,是否确定要退出重新登录？',
							success: (res) => {
								if (res.confirm) {
									// 执行退出登录逻辑
									uni.clearStorageSync()
									uni.reLaunch({
										url: '/pages/login/login'
									})
								} else {
									uni.navigateBack({
										delta: 1
									})
								}
							}
						})
					}
				}).finally(() => {
					loading.value = false
				})
			}
		})
	}

	// 重置表单
	function resetForm() {
		if (!formRef.value) return
		formRef.value.resetFields()
	}
</script>

<style>
	page {
		background-color: #ffffff;
	}
</style>
<style lang="scss" scoped>
	.password-container {
		padding: 30rpx;
		box-sizing: border-box;

		:deep(.u-form) {
			.u-input {
				&__content {
					background-color: #f5f5f5;
					border-radius: 8rpx;
					padding: 20rpx;
				}
			}
		}

		.submit-btn {
			margin-top: 60rpx;
			padding: 0 20rpx;

			:deep(.u-button) {
				height: 88rpx;
				border-radius: 44rpx;
			}
		}
	}
</style>