pet-system-merchant-app/pages/my/settings/change-password/index.vue

<template>
	<view class="change-password-page">
		<view class="form-container">
			<uni-forms ref="formRef" :model="formData" :rules="rules">
				<view class="form-group">
					<uni-forms-item label="旧密码" name="oldPassword" required label-width="160rpx">
						<uni-easyinput type="password" v-model="formData.oldPassword" placeholder="请输入当前密码"
							:inputBorder="false" />
					</uni-forms-item>
					<view class="line"></view>
					<uni-forms-item label="新密码" name="newPassword" required label-width="160rpx">
						<uni-easyinput type="password" v-model="formData.newPassword" placeholder="6-20位新密码"
							:inputBorder="false" />
					</uni-forms-item>
					<view class="line"></view>
					<uni-forms-item label="确认密码" name="confirmPassword" required label-width="160rpx">
						<uni-easyinput type="password" v-model="formData.confirmPassword" placeholder="请再次输入新密码"
							:inputBorder="false" />
					</uni-forms-item>
				</view>
			</uni-forms>

			<view class="btn-group">
				<button class="submit-btn" @click="submit">提交修改</button>
			</view>

			<view class="tip-text">
				<uni-icons type="info" size="14" color="#999"></uni-icons>
				<text>密码修改成功后，系统将自动安全退出，需重新登录。</text>
			</view>
		</view>
	</view>
</template>

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

const formRef = ref(null)
const formData = reactive({
	oldPassword: '',
	newPassword: '',
	confirmPassword: ''
})

const rules = {
	oldPassword: {
		rules: [{ required: true, errorMessage: '请输入旧密码' }]
	},
	newPassword: {
		rules: [
			{ required: true, errorMessage: '请输入新密码' },
			{ minLength: 6, maxLength: 20, errorMessage: '密码长度在 6-20 位之间' }
		]
	},
	confirmPassword: {
		rules: [
			{ required: true, errorMessage: '请确认新密码' },
			{
				validateFunction: function (rule, value, data, callback) {
					if (value !== data.newPassword) {
						callback('两次输入的密码不一致')
					}
					return true
				}
			}
		]
	}
}

const submit = async () => {
	try {
		await formRef.value.validate()
		uni.showLoading({ title: '修改中...' })

		// 模拟接口请求
		setTimeout(() => {
			uni.hideLoading()
			uni.showToast({ title: '密码修改成功', icon: 'success' })
			setTimeout(() => {
				uni.reLaunch({ url: '/pages/login/index' })
			}, 1500)
		}, 1000)
	} catch (err) {
		console.log('表单校验失败', err)
	}
}
</script>

<style lang="scss" scoped>
.change-password-page {
	min-height: 100vh;
	background-color: #f7f8fa;
	padding-top: 20rpx;
}

.form-group {
	background: #fff;
	margin: 0 24rpx;
	border-radius: 20rpx;
	padding: 0 32rpx;
}

.line {
	height: 1rpx;
	background: #f5f5f5;
	margin: 0;
}

.btn-group {
	margin: 60rpx 32rpx 32rpx;
}

.submit-btn {
	height: 88rpx;
	line-height: 88rpx;
	background: linear-gradient(90deg, #ffd53f, #ff9500);
	color: #333;
	border: none;
	border-radius: 44rpx;
	font-size: 30rpx;
	font-weight: bold;
}

.tip-text {
	padding: 0 40rpx;
	display: flex;
	align-items: center;
	gap: 12rpx;
	font-size: 24rpx;
	color: #999;
}

:deep(.uni-forms-item) {
	border: none !important;
	padding: 10rpx 0;
}
</style>