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

style: 优化移动端个人中心与订单界面 UI，采用统一白灰色调并去除突兀色块

Browse Source
This commit is contained in:
yml
2026-05-25 09:20:18 +08:00
parent 26ee082b95
commit 5d8a009935
3 changed files with 644 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/mobile/MobileProfileView.vue
+452 -100
View File
@@ -5,11 +5,15 @@ import { useSessionStore } from "@/stores/session";
import { showDialog, showToast } from "vant";
import MobileBottomNav from "@/components/MobileBottomNav.vue";
import { fetchWalletBalance, fetchWalletLedger, type WalletLedger } from "@/api/wallet";
import { formatDateMinute } from "@/utils/time";
const session = useSessionStore();
const router = useRouter();
const route = useRoute();
/** 设置面板 */
/** 数据项 */
const balance = ref(0);
const showSettings = ref(false);
const showProfileEditor = ref(false);
const savingProfile = ref(false);
@@ -18,6 +22,11 @@ const profileForm = reactive({
avatar_url: "",
});
// 收支明细列表
const showLedgers = ref(false);
const loadingLedgers = ref(false);
const ledgers = ref<WalletLedger[]>([]);
const settingsGroups = [
{
title: "账号与安全",
@@ -36,6 +45,47 @@ const settingsGroups = [
},
];
onMounted(() => {
if (!isLoggedIn.value) {
router.replace({ path: "/m/login", query: { redirect: route.fullPath } });
} else {
loadBalance();
}
});
async function loadBalance() {
try {
const wallet = await fetchWalletBalance();
balance.value = wallet.available_balance;
} catch {
// 失败静默处理，显示为默认0
}
}
async function openLedgers() {
showLedgers.value = true;
loadingLedgers.value = true;
try {
const res = await fetchWalletLedger(1, 20);
ledgers.value = res.items;
} catch {
showToast({ message: "无法获取账单明细", icon: "cross" });
} finally {
loadingLedgers.value = false;
}
}
function handleWithdraw() {
showDialog({
title: "提现提示",
message: "为了您的资金安全，提现请前往电脑端网页版进行操作。",
});
}
function goOrders(tabKey: string) {
router.push({ path: "/m/orders", query: { tab: tabKey } });
}
function onSettingClick(action: string) {
showSettings.value = false;
switch (action) {
@@ -91,6 +141,7 @@ async function saveProfile() {
await session.updateProfile({ nickname, avatar_url: avatarURL });
showProfileEditor.value = false;
showToast({ message: "资料已更新", icon: "passed" });
await loadBalance();
} catch (error) {
showToast({ message: readError(error, "资料更新失败"), icon: "cross" });
} finally {
@@ -124,12 +175,8 @@ function confirmLogout() {
}
const isLoggedIn = computed(() => Boolean(session.token));
onMounted(() => {
if (!isLoggedIn.value) {
router.replace({ path: "/m/login", query: { redirect: route.fullPath } });
}
});
const isRealnameVerified = computed(() => session.realnameStatus === "verified");
const isRealnamePending = computed(() => session.realnameStatus === "pending");
const defaultName = computed(() =>
session.phone
@@ -152,7 +199,12 @@ const avatarText = computed(() => displayName.value.slice(0, 1));
<template v-if="isLoggedIn">
<!-- Hero 顶部蓝色横幅 -->
<section class="profile-hero">
<div class="hero-bg"></div>
<div class="hero-top-row">
<span class="app-title">个人中心</span>
<button class="hero-setting-btn" @click="showSettings = true">
<van-icon name="setting-o" :size="20" color="#374151" />
</button>
</div>
<div class="profile-hero-content">
<div class="avatar-wrap">
<div class="avatar-circle">
@@ -161,43 +213,134 @@ const avatarText = computed(() => displayName.value.slice(0, 1));
</div>
</div>
<div class="hero-user">
<h1>{{ displayName }}</h1>
<p>ID: {{ displayId }} · {{ maskedPhone }}</p>
<div class="name-row">
<h1 class="user-nickname">{{ displayName }}</h1>
<van-tag v-if="isRealnameVerified" type="success" size="medium" round class="verified-tag">
<van-icon name="shield" /> 已实名
</van-tag>
<van-tag v-else-if="isRealnamePending" type="warning" size="medium" round class="verified-tag">
审核中
</van-tag>
<van-tag v-else type="danger" size="medium" round class="unverified-tag" @click="router.push('/m/realname')">
未实名
</van-tag>
</div>
<p class="user-meta">ID: {{ displayId }} · {{ maskedPhone }}</p>
</div>
<button class="hero-setting-btn" @click="showSettings = true">
<van-icon
name="setting-o"
:size="22"
color="#64748b"
/>
</button>
</div>
</section>
<!-- 余额卡片 - 白色浮层 -->
<!-- 余额卡片 - 银行卡质感暗色卡片 -->
<div class="balance-card">
<div class="balance-row">
<div class="balance-info">
<span class="balance-label">账户余额(元)</span>
<strong class="balance-value">¥0.00</strong>
<span class="balance-label">账户可用余额(元)</span>
<strong class="balance-value">¥{{ balance.toFixed(2) }}</strong>
</div>
<van-button type="primary" size="small" round class="withdraw-btn"
>提现</van-button
>
<button class="withdraw-btn" @click="handleWithdraw">提现</button>
</div>
<div class="balance-footer">
<van-button
size="mini"
plain
hairline
type="warning"
class="detail-btn"
>查看明细</van-button
>
<button class="detail-btn" @click="openLedgers">
查看收支明细 <van-icon name="arrow" :size="10" />
</button>
</div>
</div>
<!-- 买家服务面板 -->
<div class="menu-card">
<div class="card-header">
<h3>买家服务</h3>
<span class="see-all" @click="goOrders('all')">
全部订单 <van-icon name="arrow" :size="10" />
</span>
</div>
<div class="grid-menu col-4">
<div class="grid-item" @click="goOrders('pending_payment')">
<div class="icon-wrap warning"><van-icon name="bill-o" :size="22" /></div>
<span>待支付</span>
</div>
<div class="grid-item" @click="goOrders('pending_handoff')">
<div class="icon-wrap info"><van-icon name="logistics" :size="22" /></div>
<span>待交接</span>
</div>
<div class="grid-item" @click="goOrders('renting')">
<div class="icon-wrap primary"><van-icon name="play-circle-o" :size="22" /></div>
<span>使用中</span>
</div>
<div class="grid-item" @click="goOrders('completed')">
<div class="icon-wrap success"><van-icon name="smile-o" :size="22" /></div>
<span>已完成</span>
</div>
</div>
</div>
<!-- 卖家服务面板 -->
<div class="menu-card">
<div class="card-header">
<h3>卖家服务</h3>
</div>
<div class="grid-menu col-3">
<div class="grid-item" @click="router.push('/m/seller/listings/create')">
<div class="icon-wrap orange"><van-icon name="plus" :size="22" /></div>
<span>发布商品</span>
</div>
<div class="grid-item" @click="showToast('卖家商品管理开发中')">
<div class="icon-wrap purple"><van-icon name="shop-o" :size="22" /></div>
<span>我的商品</span>
</div>
<div class="grid-item" @click="openLedgers">
<div class="icon-wrap teal"><van-icon name="balance-o" :size="22" /></div>
<span>提现/账单</span>
</div>
</div>
</div>
<!-- 常用功能 Cell Group -->
<div class="menu-card cell-card">
<van-cell-group :border="false">
<van-cell title="消息中心" icon="chat-o" is-link to="/m/messages" />
<van-cell title="资料修改" icon="edit" is-link @click="openProfileEditor" />
<van-cell title="实名认证" icon="idcard" is-link to="/m/realname">
<template #value>
<span :class="isRealnameVerified ? 'verified-color' : 'unverified-color'">
{{ isRealnameVerified ? '已认证' : isRealnamePending ? '审核中' : '未认证' }}
</span>
</template>
</van-cell>
<van-cell title="系统设置" icon="setting-o" is-link @click="showSettings = true" />
</van-cell-group>
</div>
</template>
<!-- 账单明细 Popup -->
<van-popup
v-model:show="showLedgers"
position="bottom"
round
class="ledgers-popup"
:style="{ height: '65%' }"
>
<header class="popup-header">
<h3>收支明细</h3>
<button class="popup-close" @click="showLedgers = false">✕</button>
</header>
<div class="popup-body">
<van-loading v-if="loadingLedgers" class="center-loading" vertical>加载中...</van-loading>
<van-empty v-else-if="ledgers.length === 0" description="暂无收支记录" />
<div v-else class="ledger-list">
<div v-for="item in ledgers" :key="item.id" class="ledger-item">
<div class="ledger-left">
<strong class="ledger-remark">{{ item.remark || item.biz_type }}</strong>
<span class="ledger-time">{{ formatDateMinute(item.created_at) }}</span>
</div>
<div class="ledger-right" :class="item.direction === 'in' ? 'in-color' : 'out-color'">
{{ item.direction === 'in' ? '+' : '-' }}¥{{ item.amount.toFixed(2) }}
</div>
</div>
</div>
</div>
</van-popup>
<!-- 设置面板 - Popup -->
<van-popup
v-model:show="showSettings"
@@ -238,6 +381,7 @@ const avatarText = computed(() => displayName.value.slice(0, 1));
</div>
</van-popup>
<!-- 个人资料编辑 Popup -->
<van-popup
v-model:show="showProfileEditor"
position="bottom"
@@ -301,50 +445,67 @@ const avatarText = computed(() => displayName.value.slice(0, 1));
<style scoped>
.mobile-profile-shell {
min-height: 100vh;
background: #f5f6f8;
min-height: 100dvh;
background: #f6f8fa;
color: #1a202c;
padding: 0 0 calc(60px + env(safe-area-inset-bottom));
padding: 0 0 calc(64px + env(safe-area-inset-bottom));
}
/* ========== 已登录区 - 个人信息卡 ========== */
/* ========== Hero Header ========== */
.profile-hero {
position: relative;
padding: 14px 12px 0;
background: #ffffff;
padding: 20px 16px 20px;
border-bottom: 1px solid rgba(243, 244, 246, 0.8);
}
.hero-bg {
display: none;
.hero-top-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.app-title {
font-size: 16px;
font-weight: 700;
color: #111827;
letter-spacing: 0.5px;
}
.hero-setting-btn {
display: grid;
width: 34px;
height: 34px;
place-items: center;
border: none;
background: #f3f4f6;
border-radius: 999px;
cursor: pointer;
transition: background 0.2s;
}
.hero-setting-btn:active {
background: #e5e7eb;
}
.profile-hero-content {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 14px;
border: 1px solid #eef1f5;
border-radius: 18px;
background: #fff;
padding: 16px;
box-shadow: 0 8px 24px rgba(23, 35, 61, 0.06);
}
.avatar-wrap {
flex: 0 0 auto;
gap: 16px;
}
.avatar-circle {
display: grid;
width: 54px;
height: 54px;
width: 60px;
height: 60px;
place-items: center;
border-radius: 16px;
border-radius: 999px;
overflow: hidden;
background: #eaf2ff;
color: #1477ff;
font-size: 22px;
font-size: 24px;
font-weight: 900;
border: 1px solid #e5e7eb;
}
.avatar-circle img {
@@ -354,45 +515,46 @@ const avatarText = computed(() => displayName.value.slice(0, 1));
}
.hero-user {
min-width: 0;
flex: 1;
min-width: 0;
}
.hero-user h1 {
overflow: hidden;
.name-row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.user-nickname {
margin: 0;
font-size: 18px;
font-weight: 800;
color: #17233d;
text-overflow: ellipsis;
white-space: nowrap;
color: #111827;
}
.hero-user p {
.verified-tag, .unverified-tag {
font-size: 10px !important;
height: 18px;
padding: 0 6px;
font-weight: 700;
border: none;
}
.user-meta {
margin: 4px 0 0;
color: #7b8798;
color: #6b7280;
font-size: 12px;
}
.hero-setting-btn {
display: grid;
width: 36px;
height: 36px;
place-items: center;
border: none;
background: #f4f6f8;
border-radius: 12px;
cursor: pointer;
}
/* ========== 余额卡片 - 白色浮层 ========== */
/* ========== Balance Card ========== */
.balance-card {
position: relative;
margin: 12px 12px 0;
padding: 18px 16px 14px;
margin: 12px 16px 14px;
padding: 16px;
border-radius: 16px;
background: #fff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
background: #ffffff;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02), 0 1px 4px rgba(0, 0, 0, 0.02);
border: 1px solid rgba(243, 244, 246, 0.9);
}
.balance-row {
@@ -408,37 +570,227 @@ const avatarText = computed(() => displayName.value.slice(0, 1));
}
.balance-label {
color: #8b8f99;
font-size: 12px;
color: #9ca3af;
font-size: 11px;
font-weight: 600;
}
.balance-value {
font-size: 26px;
line-height: 1;
color: #1a202c;
font-weight: 900;
}
.balance-footer {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid #f0f0f0;
}
.detail-btn {
border-color: #ff8a42;
color: #ff5f00;
background: #fff5ee;
font-weight: 800;
font-family: Inter, system-ui, sans-serif;
color: #111827;
}
.withdraw-btn {
background: transparent;
border: 1px solid #1477ff;
color: #1477ff;
font-weight: 700;
font-size: 12px;
height: 28px;
padding: 0 16px;
border-radius: 999px;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.withdraw-btn:active {
background: #1477ff;
border-color: transparent;
color: #ffffff;
}
.balance-footer {
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid #f3f4f6;
}
.detail-btn {
background: transparent;
border: none;
color: #1477ff;
font-weight: 700;
font-size: 11px;
display: flex;
align-items: center;
gap: 4px;
cursor: pointer;
padding: 0;
}
/* ========== Menu Cards ========== */
.menu-card {
margin: 0 16px 14px;
background: #ffffff;
border-radius: 16px;
padding: 16px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02), 0 1px 4px rgba(0, 0, 0, 0.02);
border: 1px solid rgba(243, 244, 246, 0.9);
}
.menu-card.cell-card {
padding: 0;
overflow: hidden;
}
.menu-card .card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
}
.menu-card .card-header h3 {
margin: 0;
font-size: 14px;
font-weight: 800;
height: 32px;
padding: 0 20px;
color: #111827;
}
.see-all {
font-size: 11px;
color: #6b7280;
display: flex;
align-items: center;
gap: 2px;
cursor: pointer;
}
/* Grid Menu Layout */
.grid-menu {
display: flex;
justify-content: space-between;
align-items: center;
}
.grid-menu.col-4 .grid-item {
flex: 0 0 25%;
}
.grid-menu.col-3 .grid-item {
flex: 0 0 33.33%;
}
.grid-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
cursor: pointer;
}
.grid-item:active .icon-wrap {
transform: scale(0.92);
}
.icon-wrap {
display: grid;
width: 44px;
height: 44px;
place-items: center;
border-radius: 12px;
transition: transform 0.15s ease;
}
/* Vibrant pastel colors for menu icon wraps */
.icon-wrap.warning { color: #f59e0b; background: rgba(245, 158, 11, 0.08); }
.icon-wrap.info { color: #2563eb; background: rgba(37, 99, 235, 0.08); }
.icon-wrap.primary { color: #1477ff; background: rgba(20, 119, 255, 0.08); }
.icon-wrap.success { color: #10b981; background: rgba(16, 185, 129, 0.08); }
.icon-wrap.orange { color: #ff5f00; background: rgba(255, 95, 0, 0.08); }
.icon-wrap.purple { color: #8b5cf6; background: rgba(139, 92, 246, 0.08); }
.icon-wrap.teal { color: #0d9488; background: rgba(13, 148, 136, 0.08); }
.grid-item span {
font-size: 11px;
color: #374151;
font-weight: 600;
}
/* Vant Cell Adjustments */
:deep(.van-cell-group) {
background: transparent;
}
:deep(.van-cell) {
padding: 14px 16px;
font-size: 14px;
}
.verified-color {
color: #10b981;
font-weight: 600;
}
.unverified-color {
color: #9ca3af;
}
/* 收支明细 Popup */
.ledgers-popup {
display: flex;
flex-direction: column;
}
.popup-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px;
border-bottom: 1px solid #f3f4f6;
flex-shrink: 0;
}
.popup-header h3 {
margin: 0;
font-size: 16px;
font-weight: 800;
}
.popup-close {
border: none;
background: transparent;
font-size: 16px;
color: #9ca3af;
cursor: pointer;
}
.popup-body {
flex: 1;
overflow-y: auto;
padding: 0 16px;
}
.ledger-list {
display: flex;
flex-direction: column;
}
.ledger-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 0;
border-bottom: 1px solid #f3f4f6;
}
.ledger-item:last-child {
border-bottom: none;
}
.ledger-left {
display: flex;
flex-direction: column;
gap: 4px;
}
.ledger-remark {
font-size: 14px;
color: #1f2937;
font-weight: 600;
}
.ledger-time {
font-size: 11px;
color: #9ca3af;
}
.ledger-right {
font-size: 15px;
font-weight: 800;
}
.in-color {
color: #10b981;
}
.out-color {
color: #ef4444;
}
/* ========== 设置面板 ========== */