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

<template>
	<view class="change-password-page">
		<nav-bar title="修改密码" bgColor="#fff" color="#000"></nav-bar>
		<view class="form-container">
			<view class="form-group">
				<view class="form-item">
					<label class="form-label">旧密码</label>
					<input class="form-input" type="text" :password="!showOldPwd" v-model="formData.oldPassword"
						placeholder="请输入当前密码" placeholder-class="input-placeholder" />
					<view class="pwd-toggle" @click="showOldPwd = !showOldPwd">
						<text class="toggle-icon">{{ showOldPwd ? '隐藏' : '显示' }}</text>
					</view>
				</view>
				<view class="line"></view>
				<view class="form-item">
					<label class="form-label">新密码</label>
					<input class="form-input" type="text" :password="!showNewPwd" v-model="formData.newPassword"
						placeholder="6-20位新密码" placeholder-class="input-placeholder" />
					<view class="pwd-toggle" @click="showNewPwd = !showNewPwd">
						<text class="toggle-icon">{{ showNewPwd ? '隐藏' : '显示' }}</text>
					</view>
				</view>
				<view class="line"></view>
				<view class="form-item">
					<label class="form-label">确认密码</label>
					<input class="form-input" type="text" :password="!showConfirmPwd" v-model="formData.confirmPassword"
						placeholder="请再次输入新密码" placeholder-class="input-placeholder" />
					<view class="pwd-toggle" @click="showConfirmPwd = !showConfirmPwd">
						<text class="toggle-icon">{{ showConfirmPwd ? '隐藏' : '显示' }}</text>
					</view>
				</view>
			</view>

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

			<view class="tip-text">
				<text class="tip-icon">ℹ️</text>
				<text>密码修改成功后，系统将自动安全退出，需重新登录。</text>
			</view>

			<!-- 错误提示 -->
			<view v-if="errorMsg" class="error-toast">
				<text>{{ errorMsg }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import navBar from '@/components/nav-bar/index.vue'
import { updateUserPwd } from '@/api/system/user'

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

const showOldPwd = ref(false)
const showNewPwd = ref(false)
const showConfirmPwd = ref(false)
const errorMsg = ref('')

const validate = () => {
	errorMsg.value = ''
	if (!formData.oldPassword) {
		errorMsg.value = '请输入旧密码'
		return false
	}
	if (!formData.newPassword) {
		errorMsg.value = '请输入新密码'
		return false
	}
	if (formData.newPassword.length < 6 || formData.newPassword.length > 20) {
		errorMsg.value = '密码长度在 6-20 位之间'
		return false
	}
	if (!formData.confirmPassword) {
		errorMsg.value = '请确认新密码'
		return false
	}
	if (formData.confirmPassword !== formData.newPassword) {
		errorMsg.value = '两次输入的密码不一致'
		return false
	}
	return true
}

const submit = async () => {
	if (!validate()) return

	try {
		uni.showLoading({ title: '修改中...' })

		await updateUserPwd(formData.oldPassword, formData.newPassword)

		uni.hideLoading()
		uni.showToast({ title: '密码修改成功，请重新登录', icon: 'success' })

		setTimeout(() => {
			uni.removeStorageSync('token')
			uni.reLaunch({ url: '/pages/login/index' })
		}, 1500)
	} catch (err) {
		uni.hideLoading()
		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;
}

.form-item {
	display: flex;
	align-items: center;
	padding: 28rpx 0;
}

.form-label {
	width: 140rpx;
	flex-shrink: 0;
	font-size: 30rpx;
	color: #333;
	font-weight: 500;
}

.form-input {
	flex: 1;
	font-size: 28rpx;
	color: #333;
	height: 48rpx;
	line-height: 48rpx;
}

.pwd-toggle {
	margin-left: 16rpx;
	padding: 8rpx 16rpx;

	.toggle-icon {
		font-size: 24rpx;
		color: #999;
	}
}

.line {
	height: 2rpx;
	background: #EEEEEE;
	margin: 0;
}

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

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

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

.tip-icon {
	font-size: 28rpx;
}

.error-toast {
	margin: 20rpx 32rpx 0;
	padding: 16rpx 24rpx;
	background: #fff2f0;
	border-radius: 10rpx;

	text {
		color: #ff4d4f;
		font-size: 26rpx;
	}
}

.input-placeholder {
	color: #c0c4cc;
	font-size: 28rpx;
}
</style>