airz-uniapp/packages/account/password/password.uvue

<template>
	<view class="page" :style="pageStyle()"><AppHeader :title="mode == 'password' ? '修改密码' : '重设密码'" />
		<scroll-view scroll-y :style="contentStyle(96, false)"><view class="account-form-content" :style="bottomStyle(40)">
			<text class="form-title">{{ mode == 'password' ? '设置新的登录密码' : '验证手机号，重设密码' }}</text>
			<text class="form-description">{{ mode == 'password' ? '为保障账户安全，请先验证当前密码。' : '验证码将发送至绑定手机号 ' + maskPhone(phone) }}</text>
			<view class="form-card">
				<template v-if="mode == 'password'"><text class="form-label">当前密码</text><input v-model="oldPassword" class="account-input old-password" :disabled="submitting" :password="!visible" maxlength="64" placeholder="请输入当前密码" /></template>
				<template v-else><text class="form-label">短信验证码</text><SecurityCode v-model="code" :disabled="submitting" :active="pageVisible" :ownerToken="ownerToken" purpose="password" @error="codeError" @sent="errorMessage = ''" /></template>
				<text class="form-label">新密码</text><input v-model="newPassword" class="account-input new-password" :disabled="submitting" :password="!visible" maxlength="32" placeholder="8–32 位，包含字母和数字" />
				<text class="form-label">确认新密码</text><input v-model="confirmation" class="account-input confirm-password" :disabled="submitting" :password="!visible" maxlength="32" placeholder="请再次输入新密码" confirm-type="done" @confirm="submit" />
				<text class="visibility-control" @click="toggleVisibility">{{ visible ? '隐藏密码' : '显示密码' }}</text>
			</view>
			<text class="form-hint">密码可包含英文符号，不支持空格。修改成功后请使用新密码重新登录。</text>
			<text v-if="errorMessage.length > 0" class="form-error">{{ errorMessage }}</text>
			<button class="primary-button form-submit" :disabled="submitting" @click="submit">{{ submitting ? '提交中…' : '确认修改' }}</button>
			<text class="form-link" @click="switchMode">{{ mode == 'password' ? '忘记当前密码？使用短信验证' : '使用当前密码验证' }}</text>
		</view></scroll-view>
	</view>
</template>
<script setup lang="uts">
	import AppHeader from '@/components/AppHeader.uvue'
	import SecurityCode from '@/packages/account/components/SecurityCode.uvue'
	import { usePageLayout } from '@/services/layout.uts'
	import { getSession, clearSession } from '@/services/api.uts'
	import { getAccountProfile, maskPhone, validNewPassword, validCode, changeAccountPassword } from '@/packages/account/services/account.uts'
	const { pageStyle, contentStyle, bottomStyle } = usePageLayout()
	const mode = ref('password'); const phone = ref(''); const oldPassword = ref(''); const newPassword = ref(''); const confirmation = ref(''); const code = ref(''); const visible = ref(false); const submitting = ref(false); const errorMessage = ref('')
	const ownerToken = ref(''); const pageVisible = ref(false)
	let ownerId = ''; let generation = 0; let accountTimer = 0
	onLoad((options) => { const session = getSession(); ownerToken.value = session?.getString('token') ?? ''; ownerId = session?.getString('userId') ?? ''; phone.value = getAccountProfile().phone; if (options != null && options['mode'] == 'sms') mode.value = 'sms' })
	const clearSecrets = () => { oldPassword.value = ''; newPassword.value = ''; confirmation.value = ''; code.value = ''; visible.value = false }
	const stopAccountTimer = () => { clearInterval(accountTimer); accountTimer = 0 }
	const sameOwner = (): boolean => {
		if (!pageVisible.value) return false
		const session = getSession()
		if (ownerToken.value.length > 0 && session?.getString('token') == ownerToken.value && session?.getString('userId') == ownerId) return true
		generation++; clearSecrets(); phone.value = ''; errorMessage.value = ''; stopAccountTimer()
		uni.redirectTo({ url: session == null ? '/packages/account/login/login' : '/packages/account/security/security' })
		return false
	}
	const switchMode = () => { if (!sameOwner() || submitting.value) return; clearSecrets(); errorMessage.value = ''; mode.value = mode.value == 'password' ? 'sms' : 'password' }
	const toggleVisibility = () => { if (sameOwner()) visible.value = !visible.value }
	const codeError = (message: string) => { if (sameOwner()) errorMessage.value = message }
	onShow(() => { pageVisible.value = true; generation++; stopAccountTimer(); if (sameOwner()) accountTimer = setInterval(() => { sameOwner() }, 1000) })
	const submit = async () => {
		if (!sameOwner() || submitting.value) return
		errorMessage.value = ''
		if (mode.value == 'password' && oldPassword.value.length == 0) { errorMessage.value = '请输入当前密码'; return }
		if (mode.value == 'sms' && !validCode(code.value)) { errorMessage.value = '请输入 6 位数字验证码'; return }
		if (!validNewPassword(newPassword.value)) { errorMessage.value = '新密码需为 8–32 位，包含字母和数字，可使用符号'; return }
		if (newPassword.value != confirmation.value) { errorMessage.value = '两次输入的新密码不一致'; return }
		submitting.value = true
		const view = generation; const token = ownerToken.value; const userId = ownerId
		try {
			await changeAccountPassword(mode.value, oldPassword.value, code.value, newPassword.value)
			// 服务端已撤销原账户会话；离页仍清理该会话，但不能影响新账户或跳转隐藏页面。
			if (getSession()?.getString('token') != token || getSession()?.getString('userId') != userId) return
			clearSecrets(); clearSession()
			if (view == generation && pageVisible.value) { uni.reLaunch({ url: '/packages/account/login/login' }); uni.showToast({ title: '密码已修改，请重新登录', icon: 'none' }) }
		} catch (error) { if (view == generation && sameOwner()) errorMessage.value = error instanceof Error ? error.message : '修改失败，请稍后重试' }
		finally { submitting.value = false }
	}
	onHide(() => { pageVisible.value = false; generation++; stopAccountTimer(); clearSecrets(); errorMessage.value = '' })
	onUnload(() => { pageVisible.value = false; generation++; stopAccountTimer(); clearSecrets(); phone.value = '' })
</script>
<style>
	@import '../styles/forms.css';
	.visibility-control { color: #0868f7; font-size: 24rpx; padding: 20rpx 0 4rpx; text-align: right; }
</style>