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"
		>
			<u-form-item
				label="原密码"
				prop="oldPassword"
				borderBottom
			>
				<u-input
					v-model="formData.oldPassword"
					type="password"
					placeholder="请输入原密码"
					:password="!showPassword.old"
					:border="false"
				>
					<template #suffix>
						<u-icon
							:name="showPassword.old ? 'eye-fill' : 'eye-off'"
							size="20"
							color="#909399"
							@click="togglePasswordVisible('old')"
						></u-icon>
					</template>
				</u-input>
			</u-form-item>

			<u-form-item
				label="新密码"
				prop="newPassword"
				borderBottom
			>
				<u-input
					v-model="formData.newPassword"
					type="password"
					placeholder="请输入新密码"
					:password="!showPassword.new"
					:border="false"
				>
					<template #suffix>
						<u-icon
							:name="showPassword.new ? 'eye-fill' : 'eye-off'"
							size="20"
							color="#909399"
							@click="togglePasswordVisible('new')"
						></u-icon>
					</template>
				</u-input>
			</u-form-item>

			<u-form-item
				label="确认新密码"
				prop="confirmPassword"
				borderBottom
			>
				<u-input
					v-model="formData.confirmPassword"
					type="password"
					placeholder="请再次输入新密码"
					:password="!showPassword.confirm"
					:border="false"
				>
					<template #suffix>
						<u-icon
							:name="showPassword.confirm ? 'eye-fill' : 'eye-off'"
							size="20"
							color="#909399"
							@click="togglePasswordVisible('confirm')"
						></u-icon>
					</template>
				</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 togglePasswordVisible(field) {
	showPassword[field] = !showPassword[field]
}

// 提交表单
function submitForm() {
	if (!formRef.value) return
	
	formRef.value.validate(valid => {
		if (valid) {
			loading.value = true
			// 这里添加修改密码的API调用
			setTimeout(() => {
				uni.showToast({
					title: '密码修改成功',
					icon: 'success'
				})
				loading.value = false
				// 重置表单
				resetForm()
				// 可以添加成功后的跳转
				// uni.navigateBack()
			}, 1500)
		}
	})
}

// 重置表单
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>