MrleeAdmin/frontend/app/pages/profile/password.vue

<template>
	<view class="password-page" :class="`theme-${themeMode}`">
		<view class="form-card">
			<view class="form-header">
				<text class="form-title">修改密码</text>
				<text class="form-desc">修改成功后需要重新登录</text>
			</view>

			<u-form :model="form" :border-bottom="false" label-position="top" label-width="120">
				<u-form-item label="原密码" prop="oldPassword" :border-bottom="false">
					<view class="field-card">
						<u-input v-model="form.oldPassword" type="password" clearable password-icon placeholder="请输入原密码" placeholder-style="color: #a0a7b5;" />
					</view>
				</u-form-item>
				<u-form-item label="新密码" prop="newPassword" :border-bottom="false">
					<view class="field-card">
						<u-input v-model="form.newPassword" type="password" clearable password-icon placeholder="请输入新密码" placeholder-style="color: #a0a7b5;" />
					</view>
				</u-form-item>
				<u-form-item label="确认新密码" prop="confirmPassword" :border-bottom="false">
					<view class="field-card">
						<u-input v-model="form.confirmPassword" type="password" clearable password-icon placeholder="请再次输入新密码" placeholder-style="color: #a0a7b5;" />
					</view>
				</u-form-item>
			</u-form>
		</view>

		<view class="tips-card">
			<text class="tips-title">密码要求</text>
			<text class="tips-text">长度不少于 6 位，建议同时包含字母、数字或符号。</text>
		</view>

		<view class="bottom-actions">
			<u-button type="primary" shape="circle" size="large" :loading="submitting" @click="submitForm">确认修改</u-button>
		</view>
	</view>
</template>

<script>
import { changePassword } from '@/api/member.js'

export default {
	data() {
		return {
			submitting: false,
			form: {
				oldPassword: '',
				newPassword: '',
				confirmPassword: ''
			}
		}
	},
	methods: {
		validateForm() {
			if (!this.form.oldPassword) {
				uni.showToast({ title: '请输入原密码', icon: 'none' })
				return false
			}
			if (!this.form.newPassword || this.form.newPassword.length < 6) {
				uni.showToast({ title: '新密码至少 6 位', icon: 'none' })
				return false
			}
			if (this.form.newPassword !== this.form.confirmPassword) {
				uni.showToast({ title: '两次新密码不一致', icon: 'none' })
				return false
			}
			if (this.form.oldPassword === this.form.newPassword) {
				uni.showToast({ title: '新密码不能与原密码相同', icon: 'none' })
				return false
			}
			return true
		},
		async submitForm() {
			if (this.submitting || !this.validateForm()) {
				return
			}
			this.submitting = true
			try {
				await changePassword({
					old_password: this.form.oldPassword,
					new_password: this.form.newPassword
				})
				uni.removeStorageSync('scanapp_token')
				uni.removeStorageSync('scanapp_refresh_token')
				uni.removeStorageSync('scanapp_user')
				uni.showToast({ title: '密码已修改，请重新登录', icon: 'none' })
				setTimeout(() => {
					uni.reLaunch({ url: '/pages/auth/login' })
				}, 700)
			} catch (error) {
				console.error('[scanapp] 修改密码失败', error)
			} finally {
				this.submitting = false
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.password-page {
	min-height: 100vh;
	padding: 28rpx 24rpx 48rpx;
	box-sizing: border-box;
	background: #f4f6fb;
}

.form-card,
.tips-card {
	padding: 34rpx 30rpx;
	border-radius: 28rpx;
	background: #ffffff;
	box-shadow: 0 16rpx 40rpx rgba(23, 35, 61, 0.06);
}

.form-header {
	margin-bottom: 24rpx;
}

.form-title,
.form-desc,
.tips-title,
.tips-text {
	display: block;
}

.form-title {
	color: #17233d;
	font-size: 28rpx;
	font-weight: 700;
	line-height: 1.35;
}

.form-desc {
	margin-top: 10rpx;
	color: #8a94a6;
	font-size: 22rpx;
	line-height: 1.45;
}

.field-card {
	display: flex;
	align-items: center;
	width: 100%;
	height: 88rpx;
	padding: 0 24rpx;
	box-sizing: border-box;
	border: 1rpx solid #edf1f7;
	border-radius: 22rpx;
	background: #f8fbff;
}

.tips-card {
	margin-top: 24rpx;
	background: #f8fbff;
}

.tips-title {
	color: #17233d;
	font-size: 24rpx;
	font-weight: 700;
	line-height: 1.4;
}

.tips-text {
	margin-top: 10rpx;
	color: #6b778c;
	font-size: 22rpx;
	line-height: 1.55;
}

.bottom-actions {
	margin-top: 36rpx;
}
.theme-dark.password-page {
	background: #151923;
}

.theme-dark .form-card,
.theme-dark .tips-card,
.theme-dark .field-card {
	border-color: #364152;
	background: #222936;
	box-shadow: none;
}

.theme-dark .tips-card,
.theme-dark .field-card {
	background: #1c2431;
}

.theme-dark .form-title,
.theme-dark .tips-title {
	color: #f2f5fa;
}

.theme-dark .form-desc,
.theme-dark .tips-text {
	color: #aeb9ca;
}

.theme-dark :deep(.u-input__input) {
	color: #f2f5fa !important;
}
</style>