yml/hfb_sys
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(auth): 新增密码登录注册与改密功能并加固安全

Browse Source 
- 后端：新增密码登录/注册/重置/改密接口，users 表新增 password_hash 字段
- 安全加固：注册改为冲突即失败防止"注册即改密"，登录用户不存在统一返回密码错误并计失败次数防枚举，改密需校验旧密码，清理登录失败计数中的死代码
- 前端：登录页重构为"登录/注册"两个 tab，登录内可切换密码/短信方式，默认密码登录
- 个人中心新增修改密码入口（PC 弹窗 + 移动端 popup），PC 个人资料页移除买家/卖家服务面板
This commit is contained in:
yml2213
2026-07-02 19:02:49 +08:00
parent 3701ae36ab
commit 1ba7c1dea1
13 changed files with 1043 additions and 456 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/features/auth/api/auth.ts
+25
View File
@@ -53,6 +53,31 @@ export async function loginWithSms(phone: string, code: string) {
return data.data
}
export async function loginWithPassword(phone: string, password: string) {
const { data } = await apiClient.post<ApiResponse<LoginData>>('/auth/password/login', {
phone,
password,
})
return data.data
}
export async function registerWithPassword(phone: string, code: string, password: string) {
const { data } = await apiClient.post<ApiResponse<LoginData>>('/auth/password/register', {
phone,
code,
password,
})
return data.data
}
export async function setPassword(password: string, oldPassword?: string) {
await apiClient.put('/password', { password, old_password: oldPassword })
}
export async function resetPassword(phone: string, code: string, newPassword: string) {
await apiClient.post('/auth/password/reset', { phone, code, new_password: newPassword })
}
export async function fetchMe() {
const { data } = await apiClient.get<ApiResponse<AuthUser>>('/me')
return data.data
frontend/src/features/auth/views/LoginView.vue
+236 -66
View File
@@ -1,8 +1,8 @@
<script setup lang="ts">
import { readError } from '@/shared/utils/error'
import { ElMessage } from 'element-plus'
import { ChatLineRound, Iphone, Key } from '@element-plus/icons-vue'
import { onMounted, onUnmounted, reactive, ref } from 'vue'
import { ChatLineRound, Iphone, Key, Lock } from '@element-plus/icons-vue'
import { computed, onMounted, onUnmounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { fetchAuthCaptcha, sendSmsCode, type AuthCaptcha } from '@/features/auth/api/auth'
@@ -15,12 +15,19 @@ const sending = ref(false)
const captchaLoading = ref(false)
const captcha = ref<AuthCaptcha | null>(null)
const countDown = ref(0)
const topTab = ref<'login' | 'register'>('login')
const loginMode = ref<'password' | 'sms'>('password')
const form = reactive({
phone: '',
captchaCode: '',
code: '',
password: '',
confirmPassword: '',
})
const passwordValid = computed(() => form.password.length >= 8 && form.password.length <= 20)
const confirmValid = computed(() => form.confirmPassword && form.confirmPassword === form.password)
let timer: ReturnType<typeof setInterval> | null = null
function startCountDown() {
@@ -43,6 +50,20 @@ onUnmounted(() => {
onMounted(loadCaptcha)
function switchTab(tab: 'login' | 'register') {
topTab.value = tab
form.code = ''
form.captchaCode = ''
form.password = ''
form.confirmPassword = ''
}
function switchLoginMode(mode: 'password' | 'sms') {
loginMode.value = mode
form.code = ''
form.captchaCode = ''
}
async function loadCaptcha() {
captchaLoading.value = true
try {
@@ -78,9 +99,7 @@ async function handleSendCode() {
}
async function refreshCaptcha() {
if (captchaLoading.value) {
return
}
if (captchaLoading.value) return
await loadCaptcha()
}
@@ -96,6 +115,59 @@ async function handleLogin() {
loading.value = false
}
}
async function handlePasswordLogin() {
if (!form.phone.trim()) {
ElMessage.warning('请输入手机号')
return
}
if (!form.password) {
ElMessage.warning('请输入密码')
return
}
loading.value = true
try {
await session.loginByPassword(form.phone, form.password)
ElMessage.success('登录成功')
await router.push('/')
} catch (error) {
ElMessage.error(readError(error, '登录失败'))
} finally {
loading.value = false
}
}
async function handleRegister() {
if (!form.phone.trim()) {
ElMessage.warning('请输入手机号')
return
}
if (!form.code) {
ElMessage.warning('请输入验证码')
return
}
if (!passwordValid.value) {
ElMessage.warning('密码长度应为 8-20 位')
return
}
if (!confirmValid.value) {
ElMessage.warning('两次输入的密码不一致')
return
}
loading.value = true
try {
await session.register(form.phone, form.code, form.password)
ElMessage.success('注册成功')
await router.push('/')
} catch (error) {
ElMessage.error(readError(error, '注册失败'))
} finally {
loading.value = false
}
}
const modeEyebrow = computed(() => (topTab.value === 'register' ? 'Register' : 'Login'))
const modeTitle = computed(() => (topTab.value === 'register' ? '创建账号' : '欢迎回来'))
const modeSubtitle = computed(() => (topTab.value === 'register' ? '注册后即可发布或租赁账号' : '登录后即可发布或租赁账号'))
</script>
<template>
@@ -120,78 +192,104 @@ async function handleLogin() {
<div class="login-right">
<div class="login-header">
<p class="eyebrow">SMS Login</p>
<h1>欢迎回来</h1>
<p class="subtitle">登录后即可发布或租赁账号</p>
<p class="eyebrow">{{ modeEyebrow }}</p>
<h1>{{ modeTitle }}</h1>
<p class="subtitle">{{ modeSubtitle }}</p>
</div>
<el-form class="user-form" label-position="top" @submit.prevent>
<el-form-item label="手机号">
<el-input
v-model="form.phone"
maxlength="11"
placeholder="请输入手机号"
size="large"
:prefix-icon="Iphone"
/>
</el-form-item>
<div class="login-tabs">
<button
:class="{ active: topTab === 'login' }"
@click="switchTab('login')"
>登录</button>
<button
:class="{ active: topTab === 'register' }"
@click="switchTab('register')"
>注册</button>
</div>
<!-- 登录模式下的方式切换 -->
<div v-if="topTab === 'login'" class="login-sub-tabs">
<button
:class="{ active: loginMode === 'password' }"
@click="switchLoginMode('password')"
>密码登录</button>
<span class="sub-divider">|</span>
<button
:class="{ active: loginMode === 'sms' }"
@click="switchLoginMode('sms')"
>短信登录</button>
</div>
<!-- 短信登录 -->
<el-form v-if="topTab === 'login' && loginMode === 'sms'" class="user-form" label-position="top" @submit.prevent>
<el-form-item label="手机号">
<el-input v-model="form.phone" maxlength="11" placeholder="请输入手机号" size="large" :prefix-icon="Iphone" />
</el-form-item>
<el-form-item label="图形验证码">
<div class="user-captcha-row">
<el-input
v-model="form.captchaCode"
maxlength="4"
placeholder="请输入图形验证码"
size="large"
:prefix-icon="Key"
@keyup.enter="handleSendCode"
/>
<button
class="user-captcha-image"
type="button"
:disabled="captchaLoading"
aria-label="刷新图形验证码"
@click="refreshCaptcha"
>
<el-input v-model="form.captchaCode" maxlength="4" placeholder="请输入图形验证码" size="large" :prefix-icon="Key" @keyup.enter="handleSendCode" />
<button class="user-captcha-image" type="button" :disabled="captchaLoading" aria-label="刷新图形验证码" @click="refreshCaptcha">
<img v-if="captcha" :src="captcha.image" alt="图形验证码" />
<span v-else>刷新</span>
</button>
</div>
</el-form-item>
<el-form-item label="验证码">
<div class="user-code-row">
<el-input
v-model="form.code"
maxlength="6"
placeholder="6 位验证码"
size="large"
:prefix-icon="ChatLineRound"
@keyup.enter="handleLogin"
/>
<el-button
size="large"
:disabled="countDown > 0 || sending"
:loading="sending"
@click="handleSendCode"
>
<el-input v-model="form.code" maxlength="6" placeholder="6 位验证码" size="large" :prefix-icon="ChatLineRound" @keyup.enter="handleLogin" />
<el-button size="large" :disabled="countDown > 0 || sending" :loading="sending" @click="handleSendCode">
{{ countDown > 0 ? `${countDown}s` : sending ? '发送中' : '发送验证码' }}
</el-button>
</div>
</el-form-item>
<el-button
class="user-login-btn"
type="primary"
size="large"
:loading="loading"
@click="handleLogin"
>
登录
</el-button>
<el-button class="user-login-btn" type="primary" size="large" :loading="loading" @click="handleLogin">登录</el-button>
<p class="login-notice">未收到验证码时，请稍后重试或联系客服处理</p>
</el-form>
<!-- 密码登录 -->
<el-form v-if="topTab === 'login' && loginMode === 'password'" class="user-form" label-position="top" @submit.prevent>
<el-form-item label="手机号">
<el-input v-model="form.phone" maxlength="11" placeholder="请输入手机号" size="large" :prefix-icon="Iphone" />
</el-form-item>
<el-form-item label="密码">
<el-input v-model="form.password" type="password" maxlength="20" placeholder="请输入密码" size="large" :prefix-icon="Lock" show-password @keyup.enter="handlePasswordLogin" />
</el-form-item>
<el-button class="user-login-btn" type="primary" size="large" :loading="loading" @click="handlePasswordLogin">登录</el-button>
<p class="login-notice">未设置密码？请使用短信登录后前往个人中心设置密码</p>
</el-form>
<!-- 注册 -->
<el-form v-if="topTab === 'register'" class="user-form" label-position="top" @submit.prevent>
<el-form-item label="手机号">
<el-input v-model="form.phone" maxlength="11" placeholder="请输入手机号" size="large" :prefix-icon="Iphone" />
</el-form-item>
<el-form-item label="图形验证码">
<div class="user-captcha-row">
<el-input v-model="form.captchaCode" maxlength="4" placeholder="请输入图形验证码" size="large" :prefix-icon="Key" @keyup.enter="handleSendCode" />
<button class="user-captcha-image" type="button" :disabled="captchaLoading" aria-label="刷新图形验证码" @click="refreshCaptcha">
<img v-if="captcha" :src="captcha.image" alt="图形验证码" />
<span v-else>刷新</span>
</button>
</div>
</el-form-item>
<el-form-item label="验证码">
<div class="user-code-row">
<el-input v-model="form.code" maxlength="6" placeholder="6 位验证码" size="large" :prefix-icon="ChatLineRound" @keyup.enter="handleRegister" />
<el-button size="large" :disabled="countDown > 0 || sending" :loading="sending" @click="handleSendCode">
{{ countDown > 0 ? `${countDown}s` : sending ? '发送中' : '发送验证码' }}
</el-button>
</div>
</el-form-item>
<el-form-item label="设置密码" :error="form.password && !passwordValid ? '密码长度 8-20 位' : ''">
<el-input v-model="form.password" type="password" maxlength="20" placeholder="请输入密码（8-20 位）" size="large" :prefix-icon="Lock" show-password :class="{ 'is-error': form.password && !passwordValid }" />
</el-form-item>
<el-form-item label="确认密码" :error="form.confirmPassword && !confirmValid ? '两次密码不一致' : ''">
<el-input v-model="form.confirmPassword" type="password" maxlength="20" placeholder="请再次输入密码" size="large" :prefix-icon="Lock" show-password :class="{ 'is-error': form.confirmPassword && !confirmValid }" />
</el-form-item>
<el-button class="user-login-btn" type="primary" size="large" :loading="loading" @click="handleRegister">注册</el-button>
<p class="login-notice">注册即表示同意《用户协议》和《隐私政策》</p>
</el-form>
</div>
</div>
</section>
@@ -287,16 +385,16 @@ async function handleLogin() {
display: flex;
flex-direction: column;
justify-content: center;
padding: 36px 32px;
padding: 32px 32px;
background: rgba(255, 255, 255, 0.45);
}
.login-header {
margin-bottom: 24px;
margin-bottom: 16px;
}
.login-header .eyebrow {
margin: 0 0 8px;
margin: 0 0 6px;
color: #ff6a00;
font-size: 12px;
font-weight: 700;
@@ -313,11 +411,79 @@ async function handleLogin() {
}
.login-header .subtitle {
margin: 8px 0 0;
margin: 6px 0 0;
color: #64748b;
font-size: 13px;
}
.login-tabs {
display: flex;
gap: 0;
margin-bottom: 20px;
border: 1px solid #e2e8f0;
border-radius: 10px;
overflow: hidden;
}
.login-tabs button {
flex: 1;
height: 38px;
border: none;
background: #f8fafc;
color: #64748b;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
}
.login-tabs button + button {
border-left: 1px solid #e2e8f0;
}
.login-tabs button.active {
background: #ff6a00;
color: #ffffff;
}
.login-tabs button:hover:not(.active) {
background: #f1f5f9;
color: #334155;
}
.login-sub-tabs {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 18px;
}
.login-sub-tabs button {
border: none;
background: none;
cursor: pointer;
padding: 0;
color: #94a3b8;
font-size: 13px;
font-weight: 600;
transition: color 0.2s;
}
.login-sub-tabs button.active {
color: #ff6a00;
font-weight: 700;
}
.login-sub-tabs button:hover:not(.active) {
color: #475569;
}
.login-sub-tabs .sub-divider {
color: #cbd5e1;
font-size: 12px;
}
.user-form :deep(.el-form-item__label) {
color: #334155;
font-size: 13px;
@@ -425,7 +591,7 @@ async function handleLogin() {
border-radius: 10px;
font-size: 15px;
font-weight: 700;
margin-top: 8px;
margin-top: 4px;
letter-spacing: 0.5px;
background: linear-gradient(135deg, #ff6a00, #ff8a1f);
border: none;
@@ -440,13 +606,17 @@ async function handleLogin() {
}
.login-notice {
margin: 18px 0 0;
margin: 14px 0 0;
color: #94a3b8;
font-size: 12px;
text-align: center;
line-height: 1.5;
}
.is-error :deep(.el-input__wrapper) {
box-shadow: 0 0 0 1px #ef4444 inset !important;
}
/* ========== 响应式 ========== */
@media (max-width: 860px) {
.login-card {
@@ -457,7 +627,7 @@ async function handleLogin() {
display: none;
}
.login-right {
padding: 32px 28px;
padding: 28px 24px;
}
.login-shell {
padding: 24px 16px;
frontend/src/features/auth/views/MobileLoginView.vue
+189 -168
View File
@@ -15,16 +15,29 @@ const loading = ref(false)
const agreed = ref(false)
const captchaLoading = ref(false)
const captcha = ref<AuthCaptcha | null>(null)
const loginMode = ref<'sms' | 'password'>('password')
const form = reactive({
phone: '',
captchaCode: '',
code: '',
password: '',
})
const { countDown, sending, handleSendCode } = useSmsCountdown()
onMounted(loadCaptcha)
function switchToPassword() {
loginMode.value = 'password'
form.captchaCode = ''
form.code = ''
}
function switchToSms() {
loginMode.value = 'sms'
form.password = ''
}
async function loadCaptcha() {
captchaLoading.value = true
try {
@@ -67,6 +80,30 @@ async function handleLogin() {
loading.value = false
}
}
async function handlePasswordLogin() {
if (!agreed.value) {
showDialog({
title: '提示',
message: '请先阅读并同意用户协议和隐私政策',
})
return
}
if (!form.password) {
showToast({ message: '请输入密码', icon: 'warning-o' })
return
}
loading.value = true
try {
await session.loginByPassword(form.phone, form.password)
const redirect = typeof route.query.redirect === 'string' ? route.query.redirect : '/m/profile'
await router.replace(redirect)
} catch (error) {
showToast({ message: readError(error, '登录失败，请检查手机号和密码'), icon: 'cross' })
} finally {
loading.value = false
}
}
</script>
<template>
@@ -84,56 +121,74 @@ async function handleLogin() {
</div>
<div class="form-section">
<h1>登录</h1>
<h1>{{ loginMode === 'sms' ? '登录' : '密码登录' }}</h1>
<label class="auth-input-row">
<input v-model="form.phone" type="tel" maxlength="11" placeholder="手机号" />
</label>
<label class="auth-input-row captcha-row">
<input
v-model="form.captchaCode"
type="text"
maxlength="4"
autocomplete="off"
placeholder="图形验证码"
/>
<button
class="captcha-image-button"
type="button"
:disabled="captchaLoading"
@click="loadCaptcha"
>
<img v-if="captcha" :src="captcha.image" alt="图形验证码" />
<span v-else>刷新</span>
</button>
</label>
<label class="auth-input-row code-row">
<input
v-model="form.code"
type="text"
inputmode="numeric"
maxlength="6"
placeholder="验证码"
/>
<span class="code-action">
<van-button
size="small"
plain
:disabled="sending || countDown > 0"
:loading="sending"
class="code-btn"
@click="sendCode"
<!-- 短信登录 -->
<template v-if="loginMode === 'sms'">
<label class="auth-input-row captcha-row">
<input
v-model="form.captchaCode"
type="text"
maxlength="4"
autocomplete="off"
placeholder="图形验证码"
/>
<button
class="captcha-image-button"
type="button"
:disabled="captchaLoading"
@click="loadCaptcha"
>
{{ countDown > 0 ? `${countDown}s` : sending ? '发送中' : '发送验证码' }}
</van-button>
</span>
</label>
<img v-if="captcha" :src="captcha.image" alt="图形验证码" />
<span v-else>刷新</span>
</button>
</label>
<label class="auth-input-row code-row">
<input
v-model="form.code"
type="text"
inputmode="numeric"
maxlength="6"
placeholder="验证码"
/>
<span class="code-action">
<van-button
size="small"
plain
:disabled="sending || countDown > 0"
:loading="sending"
class="code-btn"
@click="sendCode"
>
{{ countDown > 0 ? `${countDown}s` : sending ? '发送中' : '发送验证码' }}
</van-button>
</span>
</label>
</template>
<!-- 密码登录 -->
<template v-if="loginMode === 'password'">
<label class="auth-input-row">
<input
v-model="form.password"
type="password"
maxlength="20"
placeholder="密码"
/>
</label>
</template>
<div class="assist-row">
<span>验证码登录</span>
<RouterLink to="/m/register">没有账号？<b>立即注册</b></RouterLink>
<span v-if="loginMode === 'sms'">验证码登录</span>
<span v-else>密码登录</span>
<button v-if="loginMode === 'sms'" class="link-btn" type="button" @click="switchToPassword">密码登录</button>
<button v-else class="link-btn" type="button" @click="switchToSms">短信验证码登录</button>
<RouterLink v-if="loginMode === 'sms'" to="/m/register">没有账号？<b>立即注册</b></RouterLink>
</div>
<div class="agreement-row">
@@ -143,6 +198,7 @@ async function handleLogin() {
</div>
<van-button
v-if="loginMode === 'sms'"
type="primary"
block
class="primary-button"
@@ -152,8 +208,19 @@ async function handleLogin() {
>
登录
</van-button>
<van-button
v-else
type="primary"
block
class="primary-button"
:loading="loading"
loading-text="登录中..."
@click="handlePasswordLogin"
>
登录
</van-button>
<RouterLink to="/m/register" class="secondary-entry"> 还没有账号，创建一个 </RouterLink>
<RouterLink to="/m/register" class="secondary-entry">还没有账号，创建一个</RouterLink>
</div>
</section>
</main>
@@ -196,215 +263,169 @@ async function handleLogin() {
.auth-body {
box-sizing: border-box;
display: flex;
min-height: 100dvh;
flex-direction: column;
justify-content: center;
padding: 54px 34px 28px;
align-items: center;
padding: 100px 24px 48px;
min-height: 100dvh;
}
.brand-lockup {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
margin: 0 auto clamp(34px, 6vh, 54px);
gap: 10px;
margin-bottom: 36px;
}
.brand-logo {
display: grid;
width: 46px;
height: 46px;
width: 44px;
height: 44px;
place-items: center;
border-radius: 14px;
border-radius: 12px;
background: linear-gradient(135deg, #ff6a00, #ff914d);
box-shadow: 0 14px 32px rgba(255, 106, 0, 0.2);
color: #ffffff;
font-size: 19px;
box-shadow: 0 10px 28px rgba(255, 106, 0, 0.24);
color: #fff;
font-size: 18px;
font-weight: 900;
}
.brand-lockup strong {
display: block;
color: #111827;
font-size: 18px;
font-weight: 900;
letter-spacing: 0;
color: #0f172a;
font-size: 20px;
font-weight: 800;
}
.form-section {
width: min(100%, 420px);
margin: 0 auto;
width: 100%;
max-width: 400px;
}
.form-section h1 {
margin: 0 0 22px;
color: #05070a;
font-size: 22px;
font-weight: 900;
line-height: 1.2;
margin: 0 0 28px;
color: #0f172a;
font-size: 26px;
font-weight: 800;
}
.auth-input-row {
display: flex;
align-items: center;
min-height: 48px;
margin-bottom: 10px;
padding: 0 16px;
border: 1px solid #e1e5eb;
border-radius: 10px;
background: rgba(255, 255, 255, 0.88);
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.03);
}
.auth-input-row.code-row {
gap: 8px;
}
.auth-input-row.captcha-row {
gap: 10px;
padding-right: 4px;
margin-bottom: 14px;
border: 1px solid #e2e8f0;
border-radius: 12px;
background: #ffffff;
overflow: hidden;
}
.auth-input-row input {
width: 100%;
flex: 1;
min-width: 0;
border: none;
background: transparent;
padding: 14px 16px;
color: #0f172a;
font-size: 16px;
background: transparent;
outline: none;
}
.auth-input-row input::placeholder {
color: #b6beca;
color: #94a3b8;
}
.code-action {
display: flex;
justify-content: flex-end;
.captcha-row {
padding-right: 4px;
}
.captcha-image-button {
display: grid;
flex: 0 0 116px;
width: 116px;
height: 40px;
place-items: center;
overflow: hidden;
border: 1px solid #dbe5f0;
min-width: 110px;
height: 44px;
border: none;
border-radius: 8px;
background: #fff7ed;
color: #ff6a00;
font-size: 12px;
font-weight: 800;
cursor: pointer;
font-size: 13px;
font-weight: 700;
padding: 0;
overflow: hidden;
}
.captcha-image-button:disabled {
opacity: 0.65;
cursor: wait;
opacity: 0.7;
}
.captcha-image-button img {
display: block;
width: 120px;
height: 40px;
object-fit: cover;
width: 110px;
height: 44px;
}
.code-row {
padding-right: 4px;
}
.code-action {
min-width: 110px;
padding: 4px;
}
.code-btn {
min-width: 82px;
height: 32px;
border-color: #ff6a00 !important;
border-radius: 8px;
color: #ff6a00 !important;
font-weight: 700;
width: 100%;
font-size: 12px !important;
}
.assist-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin: 14px 0 24px;
color: #111827;
gap: 12px;
margin: 8px 0 12px;
font-size: 13px;
color: #64748b;
flex-wrap: wrap;
}
.assist-row span {
min-width: 0;
.assist-row a,
.link-btn {
color: #ff6a00;
}
.assist-row a {
flex-shrink: 0;
color: #22252b;
text-decoration: none;
}
.assist-row b {
color: #05070a;
font-weight: 900;
font-size: 13px;
font-weight: 700;
background: none;
border: none;
padding: 0;
cursor: pointer;
}
.agreement-row {
display: flex;
align-items: center;
margin: 0 0 20px;
margin: 16px 0 20px;
font-size: 13px;
color: #475569;
}
.agreement-row :deep(.van-checkbox__label) {
margin-left: 8px;
color: #252b36;
font-size: 12px;
line-height: 1.4;
}
.agreement-row :deep(.van-checkbox__label b) {
.agreement-row b {
color: #ff6a00;
font-weight: 700;
}
.primary-button {
height: 48px;
border: none !important;
border-radius: 10px !important;
background: linear-gradient(135deg, #ff6a00, #ff8a1f) !important;
box-shadow: 0 12px 24px rgba(255, 106, 0, 0.22);
height: 50px;
border-radius: 12px;
font-size: 17px;
font-weight: 900;
font-weight: 700;
background: linear-gradient(135deg, #ff6a00, #ff8a1f);
border: none;
box-shadow: 0 10px 28px rgba(255, 106, 0, 0.24);
}
.secondary-entry {
display: grid;
min-height: 46px;
margin-top: 12px;
place-items: center;
border: 1px solid #e4e8ee;
border-radius: 10px;
background: rgba(255, 255, 255, 0.82);
color: #ff6a00;
font-size: 15px;
font-weight: 900;
display: block;
margin-top: 18px;
text-align: center;
color: #94a3b8;
font-size: 14px;
text-decoration: none;
}
@media (max-height: 700px) {
.auth-body {
justify-content: flex-start;
padding-top: 52px;
}
.brand-lockup {
margin-bottom: 26px;
}
.form-section h1 {
margin-bottom: 18px;
}
.assist-row {
margin-bottom: 18px;
}
}
</style>
frontend/src/features/auth/views/MobileProfileView.vue
+110
View File
@@ -16,6 +16,7 @@ import { fetchPostRentalNotice, type PostRentalNotice } from '@/features/orders/
import { formatDateMinute } from '@/shared/utils/time'
import { uploadFile } from '@/shared/api/files'
import { formatCent } from '@/shared/utils/money'
import { setPassword } from '@/features/auth/api/auth'
const session = useSessionStore()
const router = useRouter()
@@ -36,6 +37,15 @@ const profileForm = reactive({
const avatarFileInput = ref<HTMLInputElement | null>(null)
const uploadingAvatar = ref(false)
// 修改密码
const showPasswordEditor = ref(false)
const savingPassword = ref(false)
const passwordForm = reactive({
oldPassword: '',
newPassword: '',
confirmPassword: '',
})
function triggerAvatarUpload() {
avatarFileInput.value?.click()
}
@@ -209,6 +219,39 @@ async function saveProfile() {
}
}
function openPasswordEditor() {
passwordForm.oldPassword = ''
passwordForm.newPassword = ''
passwordForm.confirmPassword = ''
showPasswordEditor.value = true
}
async function savePassword() {
const { newPassword, confirmPassword } = passwordForm
if (!newPassword) {
showToast({ message: '请输入新密码', icon: 'warning-o' })
return
}
if (newPassword.length < 8 || newPassword.length > 20) {
showToast({ message: '密码长度应为 8-20 位', icon: 'warning-o' })
return
}
if (newPassword !== confirmPassword) {
showToast({ message: '两次输入的密码不一致', icon: 'warning-o' })
return
}
savingPassword.value = true
try {
await setPassword(newPassword, passwordForm.oldPassword || undefined)
showToast({ message: '密码已更新', icon: 'passed' })
showPasswordEditor.value = false
} catch (error) {
showToast({ message: readError(error, '密码更新失败'), icon: 'cross' })
} finally {
savingPassword.value = false
}
}
function confirmLogout() {
showSettings.value = false
showDialog({
@@ -387,6 +430,7 @@ function resolveAvatarURL(url: string | undefined | null) {
</van-cell>
<van-cell title="公告中心" icon="volume-o" is-link to="/m/announcements" />
<van-cell title="资料修改" icon="edit" is-link @click="openProfileEditor" />
<van-cell title="修改密码" icon="lock" is-link @click="openPasswordEditor" />
<van-cell title="实名认证" icon="idcard" is-link to="/m/realname">
<template #value>
<span :class="isRealnameVerified ? 'verified-color' : 'unverified-color'">
@@ -568,6 +612,65 @@ function resolveAvatarURL(url: string | undefined | null) {
</section>
</van-popup>
<!-- 修改密码 Popup -->
<van-popup
v-model:show="showPasswordEditor"
position="bottom"
round
:style="{ maxWidth: '430px', margin: '0 auto', left: 0, right: 0 }"
>
<section class="profile-editor">
<header class="profile-editor-header">
<h2>修改密码</h2>
<button type="button" @click="showPasswordEditor = false">
<van-icon name="cross" :size="20" />
</button>
</header>
<p class="password-hint">未设置过密码的老用户，"原密码"可留空直接设置新密码。</p>
<label class="editor-field">
<span>原密码</span>
<input
v-model="passwordForm.oldPassword"
type="password"
maxlength="20"
placeholder="未设置过密码可留空"
/>
</label>
<label class="editor-field">
<span>新密码</span>
<input
v-model="passwordForm.newPassword"
type="password"
maxlength="20"
placeholder="8-20 位"
/>
</label>
<label class="editor-field">
<span>确认新密码</span>
<input
v-model="passwordForm.confirmPassword"
type="password"
maxlength="20"
placeholder="再次输入新密码"
/>
</label>
<van-button
type="primary"
block
round
class="profile-save-btn"
:loading="savingPassword"
loading-text="保存中..."
@click="savePassword"
>
保存密码
</van-button>
</section>
</van-popup>
<MobileBottomNav />
</main>
</template>
@@ -1156,6 +1259,13 @@ function resolveAvatarURL(url: string | undefined | null) {
margin-bottom: 12px;
}
.password-hint {
margin: 8px 0 14px;
color: #8b9cb5;
font-size: 12px;
line-height: 1.5;
}
.editor-field span {
display: block;
margin-bottom: 6px;
frontend/src/features/auth/views/MobileRegisterView.vue
+33 -1
View File
@@ -19,6 +19,8 @@ const form = reactive({
phone: '',
captchaCode: '',
code: '',
password: '',
confirmPassword: '',
inviteCode: '',
})
@@ -57,10 +59,22 @@ async function handleRegister() {
})
return
}
if (!form.password) {
showToast({ message: '请设置密码', icon: 'warning-o' })
return
}
if (form.password.length < 8 || form.password.length > 20) {
showToast({ message: '密码长度应为 8-20 位', icon: 'warning-o' })
return
}
if (form.password !== form.confirmPassword) {
showToast({ message: '两次输入的密码不一致', icon: 'warning-o' })
return
}
loading.value = true
try {
await session.login(form.phone, form.code)
await session.register(form.phone, form.code, form.password)
const redirect = typeof route.query.redirect === 'string' ? route.query.redirect : '/m/profile'
await router.replace(redirect)
} catch {
@@ -139,6 +153,24 @@ async function handleRegister() {
</span>
</label>
<label class="auth-input-row">
<input
v-model="form.password"
type="password"
maxlength="20"
placeholder="设置密码（8-20 位）"
/>
</label>
<label class="auth-input-row">
<input
v-model="form.confirmPassword"
type="password"
maxlength="20"
placeholder="确认密码"
/>
</label>
<label class="auth-input-row">
<input v-model="form.inviteCode" maxlength="16" placeholder="邀请码（选填）" />
</label>
frontend/src/features/auth/views/ProfileView.vue
+93 -221
View File
@@ -3,19 +3,11 @@ import { readError } from '@/shared/utils/error'
import {
Camera,
CircleCheckFilled,
CirclePlus,
Coin,
EditPen,
Finished,
Goods,
Lock,
Postcard,
RefreshRight,
Shop,
Tickets,
User,
Van,
VideoPlay,
Wallet,
WarningFilled,
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
@@ -25,6 +17,7 @@ import { useRouter } from 'vue-router'
import { uploadFile } from '@/shared/api/files'
import { useSessionStore } from '@/stores/session'
import { realnameStatusLabel } from '@/shared/utils/statusLabels'
import { setPassword } from '@/features/auth/api/auth'
const session = useSessionStore()
const router = useRouter()
@@ -35,37 +28,13 @@ const form = reactive({
nickname: '',
avatar_url: '',
})
const buyerServices = [
{
label: '待支付',
icon: Coin,
tone: 'warning',
to: { path: '/orders', query: { tab: 'pending_payment' } },
},
{
label: '待交接',
icon: Van,
tone: 'info',
to: { path: '/orders', query: { tab: 'pending_handoff' } },
},
{
label: '使用中',
icon: VideoPlay,
tone: 'primary',
to: { path: '/orders', query: { tab: 'renting' } },
},
{
label: '已完成',
icon: Finished,
tone: 'success',
to: { path: '/orders', query: { tab: 'completed' } },
},
]
const sellerServices = [
{ label: '发布商品', icon: CirclePlus, tone: 'orange', to: '/seller/listings/create' },
{ label: '我的商品', icon: Shop, tone: 'purple', to: '/seller/listings' },
{ label: '提现/账单', icon: Wallet, tone: 'teal', to: '/wallet' },
]
const showPasswordDialog = ref(false)
const savingPassword = ref(false)
const passwordForm = reactive({
oldPassword: '',
newPassword: '',
confirmPassword: '',
})
const displayName = computed(() => session.displayName)
const maskedPhone = computed(() => {
@@ -145,6 +114,39 @@ async function saveProfile() {
saving.value = false
}
}
function openPasswordDialog() {
passwordForm.oldPassword = ''
passwordForm.newPassword = ''
passwordForm.confirmPassword = ''
showPasswordDialog.value = true
}
async function savePassword() {
const { newPassword, confirmPassword } = passwordForm
if (!newPassword) {
ElMessage.warning('请输入新密码')
return
}
if (newPassword.length < 8 || newPassword.length > 20) {
ElMessage.warning('密码长度应为 8-20 位')
return
}
if (newPassword !== confirmPassword) {
ElMessage.warning('两次输入的密码不一致')
return
}
savingPassword.value = true
try {
await setPassword(newPassword, passwordForm.oldPassword || undefined)
ElMessage.success('密码已更新')
showPasswordDialog.value = false
} catch (error) {
ElMessage.error(readError(error, '密码更新失败'))
} finally {
savingPassword.value = false
}
}
</script>
<template>
@@ -261,56 +263,55 @@ async function saveProfile() {
<span>查看实名认证</span>
<el-icon><CircleCheckFilled /></el-icon>
</button>
<button class="realname-shortcut" type="button" @click="openPasswordDialog">
<span>修改密码</span>
<el-icon><Lock /></el-icon>
</button>
</aside>
</div>
<div class="service-panels">
<section class="service-panel">
<div class="service-head">
<h2>买家服务</h2>
<RouterLink class="service-all" :to="{ path: '/orders', query: { tab: 'all' } }">
<span>全部订单</span>
<el-icon><Tickets /></el-icon>
</RouterLink>
</div>
<div class="service-grid buyer-grid">
<RouterLink
v-for="item in buyerServices"
:key="item.label"
class="service-item"
:to="item.to"
>
<span class="service-icon" :class="`is-${item.tone}`">
<el-icon><component :is="item.icon" /></el-icon>
</span>
<strong>{{ item.label }}</strong>
</RouterLink>
</div>
</section>
<section class="service-panel">
<div class="service-head">
<h2>卖家服务</h2>
<RouterLink class="service-all" to="/seller/listings">
<span>管理发布</span>
<el-icon><Goods /></el-icon>
</RouterLink>
</div>
<div class="service-grid seller-grid">
<RouterLink
v-for="item in sellerServices"
:key="item.label"
class="service-item"
:to="item.to"
>
<span class="service-icon" :class="`is-${item.tone}`">
<el-icon><component :is="item.icon" /></el-icon>
</span>
<strong>{{ item.label }}</strong>
</RouterLink>
</div>
</section>
</div>
<el-dialog
v-model="showPasswordDialog"
title="修改密码"
width="420px"
:close-on-click-modal="false"
>
<p class="password-hint">未设置过密码的老用户，"原密码"可留空直接设置新密码。</p>
<el-form label-position="top">
<el-form-item label="原密码">
<el-input
v-model="passwordForm.oldPassword"
type="password"
maxlength="20"
placeholder="未设置过密码可留空"
show-password
/>
</el-form-item>
<el-form-item label="新密码">
<el-input
v-model="passwordForm.newPassword"
type="password"
maxlength="20"
placeholder="8-20 位"
show-password
/>
</el-form-item>
<el-form-item label="确认新密码">
<el-input
v-model="passwordForm.confirmPassword"
type="password"
maxlength="20"
placeholder="再次输入新密码"
show-password
@keyup.enter="savePassword"
/>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="showPasswordDialog = false">取消</el-button>
<el-button type="primary" :loading="savingPassword" @click="savePassword">保存密码</el-button>
</template>
</el-dialog>
</section>
</template>
@@ -623,145 +624,16 @@ async function saveProfile() {
color: #ff6a00;
}
.service-panels {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
margin-top: 22px;
}
.service-panel {
padding: 24px;
border: 1px solid #eef1f5;
border-radius: 16px;
background: #ffffff;
box-shadow: 0 10px 28px rgba(23, 35, 61, 0.06);
}
.service-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
}
.service-head h2 {
margin: 0;
color: #17233d;
font-size: 22px;
}
.service-all {
display: inline-flex;
align-items: center;
gap: 6px;
color: #64748b;
font-size: 14px;
font-weight: 900;
text-decoration: none;
}
.service-all:hover {
color: #ff6a00;
}
.service-grid {
display: grid;
gap: 14px;
margin-top: 22px;
}
.buyer-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.seller-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.service-item {
display: grid;
min-width: 0;
min-height: 118px;
place-items: center;
gap: 10px;
padding: 16px 10px;
border: 1px solid #edf2f7;
border-radius: 14px;
background: #fbfdff;
color: #1f2937;
text-align: center;
text-decoration: none;
transition:
border-color 0.18s ease,
box-shadow 0.18s ease,
transform 0.18s ease;
}
.service-item:hover {
border-color: rgba(255, 106, 0, 0.35);
box-shadow: 0 12px 24px rgba(23, 35, 61, 0.08);
transform: translateY(-2px);
}
.service-item strong {
color: #334155;
font-size: 15px;
font-weight: 900;
line-height: 1.35;
}
.service-icon {
display: grid;
width: 58px;
height: 58px;
place-items: center;
border-radius: 14px;
font-size: 28px;
}
.service-icon.is-warning {
background: #fff7ed;
color: #f59e0b;
}
.service-icon.is-info {
background: #eff6ff;
color: #2563eb;
}
.service-icon.is-primary {
background: #eef2ff;
color: #4f46e5;
}
.service-icon.is-success {
background: #ecfdf3;
color: #10b981;
}
.service-icon.is-orange {
background: #fff1e8;
color: #ff6a00;
}
.service-icon.is-purple {
background: #f3e8ff;
color: #8b5cf6;
}
.service-icon.is-teal {
background: #e8f7f5;
color: #0f766e;
.password-hint {
margin: 0 0 12px;
color: #8b9cb5;
font-size: 13px;
line-height: 1.6;
}
@media (max-width: 1100px) {
.profile-layout {
grid-template-columns: 1fr;
}
.service-panels {
grid-template-columns: 1fr;
}
}
</style>
frontend/src/stores/session.ts
+11
View File
@@ -7,6 +7,7 @@ import {
getRefreshToken,
setAuthTokens,
} from '@/shared/utils/authStorage'
import { loginWithPassword, registerWithPassword } from '@/features/auth/api/auth'
export const useSessionStore = defineStore('session', {
state: () => ({
@@ -31,6 +32,16 @@ export const useSessionStore = defineStore('session', {
this.applySession(result.user, result.tokens.access_token, result.tokens.refresh_token)
return result
},
async loginByPassword(phone: string, password: string) {
const result = await loginWithPassword(phone, password)
this.applySession(result.user, result.tokens.access_token, result.tokens.refresh_token)
return result
},
async register(phone: string, code: string, password: string) {
const result = await registerWithPassword(phone, code, password)
this.applySession(result.user, result.tokens.access_token, result.tokens.refresh_token)
return result
},
async loadMe() {
if (this._loadingMe) {
// 如果正在加载，等待完成