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

登陆注册界面优化了

Browse Source
This commit is contained in:
yml
2026-05-22 20:38:52 +08:00
parent 5f1a7f46a8
commit aa9410b990
9 changed files with 1864 additions and 379 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/mobile/MobileProfileView.vue
+426 -72
View File
@@ -1,9 +1,10 @@
<script setup lang="ts">
import { computed } from "vue";
import { RouterLink } from "vue-router";
import { useRouter } from "vue-router";
import { useSessionStore } from "@/stores/session";
const session = useSessionStore();
const router = useRouter();
const isLoggedIn = computed(() => Boolean(session.token));
const displayName = computed(() => session.phone ? `用户${session.phone.slice(-6)}` : `用户${session.userId || 883099}`);
const displayId = computed(() => session.userId || 138865);
@@ -27,104 +28,457 @@ const serviceIcons = ["👥", "🪙", "💸", "💼", "⚔️", "💎", "⭐", "
function logout() {
session.logout();
}
function goToLogin() {
router.push("/m/login");
}
</script>
<template>
<main class="mobile-profile-shell">
<!-- 未登录区 → van-empty + van-button -->
<template v-if="!isLoggedIn">
<section class="guest-card">
<div class="guest-logo">锤</div>
<h1>登录大锤商行</h1>
<p>登录后查看订单、管理发布、提现余额，并享受平台担保交易服务。</p>
<RouterLink to="/m/login" class="guest-login">立即登录</RouterLink>
<div class="guest-benefits"><span>担保交易</span><span>订单留痕</span><span>安全交接</span></div>
<section class="guest-section">
<van-empty
image="error"
description="登录后查看订单、管理发布、提现余额"
class="guest-empty"
>
<template #image>
<div class="guest-logo">锤</div>
</template>
</van-empty>
<van-button
type="primary"
block
round
class="guest-login-btn"
@click="goToLogin"
>
立即登录
</van-button>
<div class="guest-benefits">
<span>担保交易</span><span>订单留痕</span><span>安全交接</span>
</div>
</section>
</template>
<!-- 已登录区 -->
<template v-else>
<!-- 头像区 → van-cell + van-image -->
<section class="profile-header">
<div class="avatar">👤</div>
<van-image
round
width="64px"
height="64px"
src=""
class="avatar-image"
>
<template #error>
<div class="avatar-fallback">👤</div>
</template>
</van-image>
<div class="profile-user">
<h1>{{ displayName }}<span>✎</span></h1>
<h1>{{ displayName }}<span class="edit-icon">✎</span></h1>
<p>ID:{{ displayId }} · {{ maskedPhone }}</p>
</div>
<button class="setting-btn" type="button">⚙</button>
<van-icon name="setting-o" size="24" class="setting-icon" />
</section>
<section class="balance-card">
<div><span>账户余额(元)</span><strong>¥0.00</strong><button type="button">查看明细</button></div>
<button class="withdraw-btn" type="button">提现</button>
</section>
<!-- 余额卡片 → van-cell-group + van-cell -->
<van-cell-group inset class="balance-group">
<van-cell center>
<template #title>
<div class="balance-info">
<span class="balance-label">账户余额(元)</span>
<strong class="balance-value">¥0.00</strong>
<van-button
size="mini"
plain
hairline
type="warning"
class="detail-btn"
>
查看明细
</van-button>
</div>
</template>
<template #value>
<van-button
type="primary"
size="small"
class="withdraw-btn"
>
提现
</van-button>
</template>
</van-cell>
</van-cell-group>
</template>
<section class="menu-card">
<!-- 订单菜单 → van-grid -->
<section class="menu-section">
<h2>我的订单</h2>
<div class="icon-grid four">
<RouterLink v-for="item in sellerOrders" :key="item.label" :to="item.to"><span>{{ item.icon }}</span><em>{{ item.label }}</em></RouterLink>
</div>
<van-grid :column-num="4" :border="false" class="order-grid">
<van-grid-item
v-for="item in sellerOrders"
:key="item.label"
:to="item.to"
>
<template #icon>
<span class="menu-icon">{{ item.icon }}</span>
</template>
<template #text>
<span class="menu-text">{{ item.label }}</span>
</template>
</van-grid-item>
</van-grid>
</section>
<section class="menu-card">
<!-- 我买的 → van-grid -->
<section class="menu-section">
<h2>我买的</h2>
<div class="icon-grid four">
<RouterLink v-for="item in buyerOrders" :key="item.label" :to="item.to"><span>{{ item.icon }}</span><em>{{ item.label }}</em></RouterLink>
</div>
<van-grid :column-num="4" :border="false" class="order-grid">
<van-grid-item
v-for="item in buyerOrders"
:key="item.label"
:to="item.to"
>
<template #icon>
<span class="menu-icon">{{ item.icon }}</span>
</template>
<template #text>
<span class="menu-text">{{ item.label }}</span>
</template>
</van-grid-item>
</van-grid>
</section>
<section class="menu-card service-card">
<div class="icon-grid service-grid">
<button v-for="(item, index) in serviceItems" :key="item" type="button"><span>{{ serviceIcons[index] }}</span><em>{{ item }}</em></button>
</div>
</section>
<!-- 服务菜单 → van-grid -->
<van-cell-group inset class="service-group">
<van-grid :column-num="4" :border="false" class="service-grid">
<van-grid-item
v-for="(item, index) in serviceItems"
:key="item"
>
<template #icon>
<span class="menu-icon">{{ serviceIcons[index] }}</span>
</template>
<template #text>
<span class="menu-text">{{ item }}</span>
</template>
</van-grid-item>
</van-grid>
</van-cell-group>
<button v-if="isLoggedIn" class="logout-btn" type="button" @click="logout">退出登录</button>
<!-- 退出登录 → van-button -->
<van-button
v-if="isLoggedIn"
plain
type="danger"
block
class="logout-btn"
@click="logout"
>
退出登录
</van-button>
<nav class="profile-tabbar" aria-label="底部导航">
<RouterLink to="/m" class="tab-item">首页</RouterLink>
<RouterLink to="/m/listings" class="tab-item">租号</RouterLink>
<RouterLink to="/m/seller/listings/create" class="publish-tab">发布</RouterLink>
<RouterLink to="/m/orders" class="tab-item">订单</RouterLink>
<RouterLink to="/m/profile" class="tab-item active">我的</RouterLink>
</nav>
<!-- 底部 TabBar → van-tabbar route -->
<van-tabbar route class="profile-tabbar">
<van-tabbar-item to="/m" icon="home-o">首页</van-tabbar-item>
<van-tabbar-item to="/m/listings" icon="search">租号</van-tabbar-item>
<van-tabbar-item to="/m/seller/listings/create" icon="add-o" class="tabbar-publish">发布</van-tabbar-item>
<van-tabbar-item to="/m/orders" icon="orders-o">订单</van-tabbar-item>
<van-tabbar-item to="/m/profile" icon="manager-o">我的</van-tabbar-item>
</van-tabbar>
</main>
</template>
<style scoped>
.mobile-profile-shell { min-height: 100vh; background: linear-gradient(180deg, #fbfaff 0, #fbfaff 210px, #f7f7f7 210px); color: #1a202c; padding: 28px 18px 96px; }
.profile-header { display: flex; align-items: center; gap: 14px; min-height: 120px; }
.avatar { display: grid; width: 62px; height: 62px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #fff; font-size: 32px; box-shadow: 0 10px 24px rgba(24,30,45,.08); }
.profile-user { min-width: 0; flex: 1; }
.profile-user h1 { overflow: hidden; margin: 0; font-size: 20px; text-overflow: ellipsis; white-space: nowrap; }
.profile-user h1 span { margin-left: 4px; color: #b7bcc6; font-size: 14px; }
.profile-user p { margin: 7px 0 0; color: #666f7c; font-size: 13px; }
.setting-btn { display: grid; width: 42px; height: 42px; place-items: center; border: 0; border-radius: 50%; background: #fff; font-size: 20px; }
.balance-card, .menu-card, .guest-card { border-radius: 16px; background: #fff; box-shadow: 0 8px 26px rgba(24,30,45,.06); }
.balance-card { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding: 24px 28px; }
.balance-card span, .balance-card strong { display: block; }
.balance-card span { color: #8b8f99; font-weight: 700; }
.balance-card strong { margin-top: 14px; font-size: 34px; line-height: 1; }
.balance-card button { border: 0; border-radius: 6px; font-weight: 800; }
.balance-card div button { margin-top: 14px; background: #fff5ee; color: #ff5f00; padding: 6px 8px; box-shadow: inset 0 0 0 1px #ff8a42; }
.withdraw-btn { background: #050505; color: #fff; padding: 12px 18px; }
.menu-card { margin-top: 12px; padding: 16px 14px; }
.menu-card h2 { margin: 0 0 12px; font-size: 18px; }
.icon-grid { display: grid; gap: 14px 8px; }
.icon-grid.four, .service-grid { grid-template-columns: repeat(4, 1fr); }
.icon-grid a, .icon-grid button { display: grid; gap: 7px; place-items: center; border: 0; background: none; color: #5f6671; text-align: center; }
.icon-grid span { font-size: 25px; line-height: 1; }
.icon-grid em { font-size: 13px; font-style: normal; font-weight: 700; }
.service-card { padding-top: 18px; padding-bottom: 18px; }
.guest-card { margin-top: 18px; padding: 34px 26px; text-align: center; }
.guest-logo { display: grid; width: 74px; height: 74px; margin: 0 auto 18px; place-items: center; border-radius: 22px; background: linear-gradient(145deg, #1777ff, #5ed7ff); color: #fff; font-size: 30px; font-weight: 900; }
.guest-card h1 { margin: 0; font-size: 24px; }
.guest-card p { margin: 12px 0 22px; color: #667386; font-size: 14px; line-height: 1.7; }
.guest-login { display: block; border-radius: 13px; background: #050505; color: #fff; padding: 14px; font-weight: 900; }
.guest-benefits { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.guest-benefits span { border-radius: 999px; background: #eef6ff; color: #1777ff; padding: 6px 9px; font-size: 12px; font-weight: 800; }
.logout-btn { width: 100%; margin-top: 14px; border: 0; border-radius: 14px; background: #fff; color: #ef4444; padding: 14px; font-weight: 900; box-shadow: 0 8px 26px rgba(24,30,45,.06); }
.profile-tabbar { position: fixed; right: 12px; bottom: 12px; left: 12px; z-index: 20; display: flex; height: 60px; align-items: center; justify-content: space-around; border-radius: 22px; background: rgba(255,255,255,.96); box-shadow: 0 16px 36px rgba(23,35,61,.16); backdrop-filter: blur(14px); }
.tab-item { color: #708097; font-size: 12px; font-weight: 800; }
.tab-item.active { color: #5b6ee1; }
.publish-tab { display: grid; width: 58px; height: 58px; place-items: center; border: 5px solid #f7f7f7; border-radius: 50%; background: #536dc8; color: #fff; font-size: 13px; font-weight: 900; transform: translateY(-18px); box-shadow: 0 10px 24px rgba(83,109,200,.35); }
@media (min-width: 520px) { .mobile-profile-shell { max-width: 430px; margin: 0 auto; box-shadow: 0 0 0 1px rgba(23,35,61,.08); } .profile-tabbar { right: calc((100vw - 430px) / 2 + 12px); left: calc((100vw - 430px) / 2 + 12px); } }
.mobile-profile-shell {
min-height: 100vh;
background: linear-gradient(180deg, #fbfaff 0, #fbfaff 210px, #f7f7f7 210px);
color: #1a202c;
padding: 28px 12px 96px;
}
/* ========== 未登录区 ========== */
.guest-section {
text-align: center;
padding: 20px 14px 0;
}
.guest-empty {
padding: 0;
}
.guest-empty :deep(.van-empty__description) {
color: #667386;
font-size: 14px;
line-height: 1.7;
margin-top: 12px;
}
.guest-logo {
display: grid;
width: 74px;
height: 74px;
margin: 0 auto 0;
place-items: center;
border-radius: 22px;
background: linear-gradient(145deg, #1777ff, #5ed7ff);
color: #fff;
font-size: 30px;
font-weight: 900;
}
.guest-login-btn {
margin-top: 18px;
border-radius: 13px;
background: #050505;
border-color: #050505;
font-size: 16px;
font-weight: 900;
height: 48px;
}
.guest-benefits {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 16px;
}
.guest-benefits span {
border-radius: 999px;
background: #eef6ff;
color: #1777ff;
padding: 6px 9px;
font-size: 12px;
font-weight: 800;
}
/* ========== 已登录头像区 ========== */
.profile-header {
display: flex;
align-items: center;
gap: 14px;
min-height: 120px;
}
.avatar-image {
flex: 0 0 auto;
}
.avatar-fallback {
display: grid;
width: 64px;
height: 64px;
place-items: center;
background: #fff;
border-radius: 50%;
font-size: 32px;
box-shadow: 0 10px 24px rgba(24, 30, 45, 0.08);
}
.profile-user {
min-width: 0;
flex: 1;
}
.profile-user h1 {
overflow: hidden;
margin: 0;
font-size: 20px;
text-overflow: ellipsis;
white-space: nowrap;
}
.edit-icon {
margin-left: 4px;
color: #b7bcc6;
font-size: 14px;
}
.profile-user p {
margin: 7px 0 0;
color: #666f7c;
font-size: 13px;
}
.setting-icon {
color: #8b8f99;
cursor: pointer;
}
/* ========== 余额卡片 ========== */
.balance-group {
margin-top: 10px;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 26px rgba(24, 30, 45, 0.06);
}
.balance-group :deep(.van-cell) {
padding: 24px 20px;
}
.balance-info {
display: flex;
flex-direction: column;
gap: 0;
}
.balance-label {
color: #8b8f99;
font-size: 13px;
font-weight: 700;
}
.balance-value {
margin-top: 10px;
font-size: 34px;
line-height: 1;
color: #1a202c;
}
.detail-btn {
margin-top: 10px;
align-self: flex-start;
border-color: #ff8a42;
color: #ff5f00;
background: #fff5ee;
font-weight: 800;
}
.withdraw-btn {
background: #050505;
border-color: #050505;
border-radius: 6px;
padding: 12px 18px;
font-weight: 800;
height: auto;
}
/* ========== 订单菜单 ========== */
.menu-section {
margin-top: 12px;
border-radius: 16px;
background: #fff;
padding: 16px 14px;
box-shadow: 0 8px 26px rgba(24, 30, 45, 0.06);
}
.menu-section h2 {
margin: 0 0 12px;
font-size: 18px;
}
.order-grid :deep(.van-grid-item__content) {
padding: 8px 4px;
background: transparent;
}
.menu-icon {
font-size: 25px;
line-height: 1;
}
.menu-text {
font-size: 13px;
font-weight: 700;
color: #5f6671;
}
/* ========== 服务菜单 ========== */
.service-group {
margin-top: 12px;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 26px rgba(24, 30, 45, 0.06);
}
.service-group :deep(.van-cell-group) {
margin: 0;
}
.service-grid :deep(.van-grid-item__content) {
padding: 14px 4px;
background: #fff;
}
/* ========== 退出登录 ========== */
.logout-btn {
margin-top: 14px;
border-radius: 14px;
font-weight: 900;
height: 48px;
font-size: 16px;
}
/* ========== van-tabbar 底部导航 ========== */
.profile-tabbar {
position: fixed;
right: 12px;
bottom: 12px;
left: 12px;
z-index: 20;
height: 60px;
border-radius: 22px;
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 16px 36px rgba(23, 35, 61, 0.16);
backdrop-filter: blur(14px);
padding: 0;
}
.profile-tabbar :deep(.van-tabbar) {
border-radius: 22px;
height: 60px;
}
.profile-tabbar :deep(.van-tabbar-item) {
color: #708097;
font-size: 12px;
font-weight: 800;
}
.profile-tabbar :deep(.van-tabbar-item--active) {
color: #5b6ee1;
}
.profile-tabbar :deep(.van-tabbar-item__icon) {
font-size: 20px;
}
/* 发布按钮特殊样式 */
.tabbar-publish :deep(.van-tabbar-item__icon) {
display: grid;
width: 48px;
height: 48px;
place-items: center;
border-radius: 50%;
background: linear-gradient(180deg, #ffb21a, #ff6a00);
color: #ffffff !important;
font-size: 22px;
transform: translateY(-8px);
box-shadow: 0 8px 20px rgba(255, 106, 0, 0.35);
}
.tabbar-publish :deep(.van-tabbar-item__text) {
color: #ff6a00;
}
/* ========== 响应式适配 ========== */
@media (min-width: 520px) {
.mobile-profile-shell {
max-width: 430px;
margin: 0 auto;
box-shadow: 0 0 0 1px rgba(23, 35, 61, 0.08);
}
.profile-tabbar {
right: calc((100vw - 430px) / 2 + 12px);
left: calc((100vw - 430px) / 2 + 12px);
}
}
</style>