54 lines
4.8 KiB
Plaintext
54 lines
4.8 KiB
Plaintext
|
<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" 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="visible = !visible">{{ 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('')
|
|||
|
|
onLoad((options) => { if (getSession() == null) { uni.redirectTo({ url: '/packages/account/login/login' }); return }; 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 switchMode = () => { if (submitting.value) return; clearSecrets(); errorMessage.value = ''; mode.value = mode.value == 'password' ? 'sms' : 'password' }
|
|||
|
|
const codeError = (message: string) => { errorMessage.value = message }
|
|||
|
|
const submit = async () => {
|
|||
|
|
if (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
|
|||
|
|
try {
|
|||
|
|
if (getAccountProfile().phone != phone.value) throw new Error('登录状态已变化，请重新进入页面')
|
|||
|
|
await changeAccountPassword(mode.value, oldPassword.value, code.value, newPassword.value)
|
|||
|
|
clearSecrets(); clearSession(); uni.reLaunch({ url: '/packages/account/login/login' }); uni.showToast({ title: '密码已修改，请重新登录', icon: 'none' })
|
|||
|
|
} catch (error) { errorMessage.value = error instanceof Error ? error.message : '修改失败，请稍后重试' }
|
|||
|
|
finally { submitting.value = false }
|
|||
|
|
}
|
|||
|
|
onHide(() => clearSecrets())
|
|||
|
|
onUnload(() => clearSecrets())
|
|||
|
|
</script>
|
|||
|
|
<style>
|
|||
|
|
@import '../styles/forms.css';
|
|||
|
|
.visibility-control { color: #0868f7; font-size: 24rpx; padding: 20rpx 0 4rpx; text-align: right; }
|
|||
|
|
</style>
|