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 21:32:44 +08:00
parent 13bb77f89b
commit 36f54d2380
7 changed files with 305 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/router/index.ts
+6
View File
@@ -36,6 +36,12 @@ const router = createRouter({
component: () => import("@/views/mobile/MobileRegisterView.vue"),
meta: { layout: "blank" },
},
{
path: "/m/messages",
name: "mobile-messages",
component: () => import("@/views/mobile/MobileMessagesView.vue"),
meta: { layout: "blank" },
},
{
path: "/m/profile",
name: "mobile-profile",
frontend/src/views/mobile/MobileHomeView.vue
+45 -11
View File
@@ -246,7 +246,11 @@ function formatRatio(item: Listing) {
<!-- 数据背书面板 -->
<div class="trust-panel" aria-label="交易数据背书">
<div v-for="item in platformStats" :key="item.label" class="trust-item">
<div
v-for="item in platformStats"
:key="item.label"
class="trust-item"
>
<span class="trust-icon">{{ item.icon }}</span>
<strong>{{ item.value }}</strong>
<span>{{ item.label }}</span>
@@ -305,14 +309,28 @@ function formatRatio(item: Listing) {
<em>可租</em>
</div>
<div class="card-tags">
<van-tag type="primary" size="medium" plain>{{ item.server_region }}</van-tag>
<van-tag type="primary" size="medium" plain>{{ item.login_platform }}</van-tag>
<van-tag v-if="item.rank_level" type="primary" size="medium" plain>{{ item.rank_level }}</van-tag>
<van-tag type="primary" size="medium" plain>{{
item.server_region
}}</van-tag>
<van-tag type="primary" size="medium" plain>{{
item.login_platform
}}</van-tag>
<van-tag
v-if="item.rank_level"
type="primary"
size="medium"
plain
>{{ item.rank_level }}</van-tag
>
</div>
<div class="card-footer">
<div class="price-col">
<strong>¥{{ item.price_hourly }}<small>/小时</small></strong>
<span class="rent-sub">日租¥{{ item.price_daily || "--" }} · 周租¥{{ item.price_weekly || "--" }}</span>
<span class="rent-sub"
>日租¥{{ item.price_daily || "--" }} · 周租¥{{
item.price_weekly || "--"
}}</span
>
</div>
<div class="coin-badge">
{{ formatCoin(item.haf_coin_amount) }}哈夫币
@@ -325,23 +343,39 @@ function formatRatio(item: Listing) {
<!-- ========== 底部导航：原生App风格，手写，不用 van-tabbar ========== -->
<nav class="bottom-nav">
<RouterLink to="/m" class="nav-item" :class="{ active: isNavActive('/m') }">
<RouterLink
to="/m"
class="nav-item"
:class="{ active: isNavActive('/m') }"
>
<van-icon name="home-o" :size="22" />
<span>首页</span>
</RouterLink>
<RouterLink to="/m/listings" class="nav-item" :class="{ active: isNavActive('/m/listings') }">
<van-icon name="search" :size="22" />
<span>租号</span>
<RouterLink
to="/m/messages"
class="nav-item"
:class="{ active: isNavActive('/m/messages') }"
>
<van-icon name="chat-o" :size="22" />
<span>消息</span>
</RouterLink>
<RouterLink to="/m/seller/listings/create" class="nav-item nav-publish">
<div class="publish-pill">+</div>
<span>发布</span>
</RouterLink>
<RouterLink to="/m/orders" class="nav-item" :class="{ active: isNavActive('/m/orders') }">
<RouterLink
to="/m/orders"
class="nav-item"
:class="{ active: isNavActive('/m/orders') }"
>
<van-icon name="orders-o" :size="22" />
<span>订单</span>
</RouterLink>
<RouterLink to="/m/profile" class="nav-item" :class="{ active: isNavActive('/m/profile') }">
<RouterLink
to="/m/profile"
class="nav-item"
:class="{ active: isNavActive('/m/profile') }"
>
<van-icon name="manager-o" :size="22" />
<span>我的</span>
</RouterLink>
frontend/src/views/mobile/MobileMessagesView.vue
+143
View File
@@ -0,0 +1,143 @@
<script setup lang="ts">
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
function isNavActive(path: string) {
if (path === "/m") return route.path === "/m";
return route.path.startsWith(path);
}
</script>
<template>
<main class="mobile-messages">
<header class="page-header">
<button class="back-btn" @click="router.back()">
<van-icon name="arrow-left" :size="20" />
</button>
<h1>消息</h1>
<span class="header-spacer"></span>
</header>
<!-- 空状态 -->
<van-empty description="暂无消息" image="search" />
<!-- 底部导航 -->
<nav class="bottom-nav">
<RouterLink to="/m" class="nav-item" :class="{ active: isNavActive('/m') }">
<van-icon name="home-o" :size="22" />
<span>首页</span>
</RouterLink>
<RouterLink to="/m/messages" class="nav-item" :class="{ active: isNavActive('/m/messages') }">
<van-icon name="chat-o" :size="22" />
<span>消息</span>
</RouterLink>
<RouterLink to="/m/seller/listings/create" class="nav-item nav-publish">
<div class="publish-pill">+</div>
<span>发布</span>
</RouterLink>
<RouterLink to="/m/orders" class="nav-item" :class="{ active: isNavActive('/m/orders') }">
<van-icon name="orders-o" :size="22" />
<span>订单</span>
</RouterLink>
<RouterLink to="/m/profile" class="nav-item" :class="{ active: isNavActive('/m/profile') }">
<van-icon name="manager-o" :size="22" />
<span>我的</span>
</RouterLink>
</nav>
</main>
</template>
<style scoped>
.mobile-messages {
min-height: 100dvh;
background: #f5f7fa;
padding-bottom: 56px;
}
/* ========== 顶部导航 ========== */
.page-header {
position: sticky;
top: 0;
z-index: 10;
display: flex;
align-items: center;
height: 48px;
padding: 0 12px;
background: #fff;
border-bottom: 1px solid #eee;
}
.page-header h1 {
flex: 1;
margin: 0;
font-size: 17px;
font-weight: 700;
text-align: center;
}
.back-btn {
display: grid;
width: 36px;
height: 36px;
place-items: center;
border: none;
background: none;
color: #333;
cursor: pointer;
}
.header-spacer {
width: 36px;
}
/* ========== 底部导航 ========== */
.bottom-nav {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
display: flex;
height: 50px;
background: #fff;
border-top: 1px solid #eee;
}
.nav-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
color: #999;
font-size: 10px;
text-decoration: none;
}
.nav-item.active {
color: #1477ff;
}
.nav-item span {
font-weight: 600;
}
.publish-pill {
width: 36px;
height: 26px;
display: grid;
place-items: center;
border-radius: 13px;
background: #ff6a00;
color: #fff;
font-size: 18px;
font-weight: 900;
}
.nav-publish span {
color: #ff6a00;
}
</style>
frontend/src/views/mobile/MobileOrdersView.vue
+4 -4
View File
@@ -168,12 +168,12 @@ function goDetail(id: number) {
<span>首页</span>
</RouterLink>
<RouterLink
to="/m/listings"
to="/m/messages"
class="nav-item"
:class="{ active: isNavActive('/m/listings') }"
:class="{ active: isNavActive('/m/messages') }"
>
<van-icon name="search" :size="22" />
<span>租号</span>
<van-icon name="chat-o" :size="22" />
<span>消息</span>
</RouterLink>
<RouterLink to="/m/seller/listings/create" class="nav-item nav-publish">
<div class="publish-pill">+</div>
frontend/src/views/mobile/MobileProfileView.vue
+102 -226
View File
@@ -26,31 +26,6 @@ const maskedPhone = computed(() =>
: "登录后查看手机号"
);
const sellerOrders = [
{ label: "商品管理", icon: "🛍️", to: "/m/seller/listings/create" },
{ label: "交易中", icon: "📦", to: "/m/orders" },
{ label: "已完成", icon: "✈️", to: "/m/orders" },
{ label: "退款/售后", icon: "💴", to: "/m/orders" },
];
const buyerOrders = [
{ label: "未支付", icon: "💳", to: "/m/orders" },
{ label: "交易中", icon: "🪙", to: "/m/orders" },
{ label: "已完成", icon: "☑️", to: "/m/orders" },
{ label: "退款/售后", icon: "🧾", to: "/m/orders" },
];
const serviceItems = [
"收款账户",
"余额明细",
"提现记录",
"商务合作",
"我的代练",
"我的代肝",
"我的收藏",
"我的打赏",
"我的邀请",
];
const serviceIcons = ["👥", "🪙", "💸", "💼", "⚔️", "💎", "⭐", "💰", "🎁"];
function logout() {
session.logout();
}
@@ -87,108 +62,51 @@ function goToLogin() {
<!-- 已登录区 -->
<template v-else>
<!-- 头像区 -->
<section class="profile-header">
<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 class="edit-icon">✎</span></h1>
<p>ID:{{ displayId }} · {{ maskedPhone }}</p>
<!-- Hero 顶部蓝色横幅 -->
<section class="profile-hero">
<div class="hero-bg"></div>
<div class="profile-hero-content">
<div class="avatar-wrap">
<div class="avatar-circle">👤</div>
</div>
<div class="hero-user">
<h1>{{ displayName }}</h1>
<p>ID: {{ displayId }} · {{ maskedPhone }}</p>
</div>
</div>
<van-icon name="setting-o" size="24" class="setting-icon" />
</section>
<!-- 余额卡片 - 两行结构 -->
<van-cell-group inset class="balance-group">
<van-cell center class="balance-main">
<template #title>
<!-- 余额卡片 - 白色浮层 -->
<div class="balance-card">
<div class="balance-row">
<div class="balance-info">
<span class="balance-label">账户余额(元)</span>
</template>
<template #value>
<strong class="balance-value">¥0.00</strong>
</template>
</van-cell>
<van-cell class="balance-actions">
<template #title>
<van-button
size="mini"
plain
hairline
type="warning"
class="detail-btn"
>查看明细</van-button
>
</template>
<template #value>
<van-button type="primary" size="small" round class="withdraw-btn"
>提现</van-button
>
</template>
</van-cell>
</van-cell-group>
</div>
<van-button type="primary" size="small" round class="withdraw-btn"
>提现</van-button
>
</div>
<div class="balance-footer">
<van-button
size="mini"
plain
hairline
type="warning"
class="detail-btn"
>查看明细</van-button
>
</div>
</div>
</template>
<!-- 订单菜单 -->
<section class="menu-section">
<h2>我的订单</h2>
<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-section">
<h2>我买的</h2>
<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>
<!-- 服务菜单 -->
<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>
<!-- 退出登录 -->
<van-button
v-if="isLoggedIn"
plain
type="danger"
block
size="small"
round
class="logout-btn"
@click="logout"
>
@@ -206,12 +124,12 @@ function goToLogin() {
<span>首页</span>
</RouterLink>
<RouterLink
to="/m/listings"
to="/m/messages"
class="nav-item"
:class="{ active: isNavActive('/m/listings') }"
:class="{ active: isNavActive('/m/messages') }"
>
<van-icon name="search" :size="22" />
<span>租号</span>
<van-icon name="chat-o" :size="22" />
<span>消息</span>
</RouterLink>
<RouterLink to="/m/seller/listings/create" class="nav-item nav-publish">
<div class="publish-pill">+</div>
@@ -242,14 +160,14 @@ function goToLogin() {
min-height: 100vh;
background: #f5f6f8;
color: #1a202c;
padding: 28px 12px 60px;
padding: 0 0 60px;
}
/* ========== 未登录区 - 自定义卡片 ========== */
.guest-card {
text-align: center;
padding: 34px 26px;
margin: 0 2px;
margin: 12px;
border-radius: 16px;
background: #fff;
box-shadow: 0 8px 26px rgba(24, 30, 45, 0.06);
@@ -303,100 +221,103 @@ function goToLogin() {
font-weight: 800;
}
/* ========== 已登录头像区 ========== */
.profile-header {
/* ========== 已登录区 - Hero蓝色横幅 ========== */
.profile-hero {
position: relative;
padding: 28px 20px 40px;
border-radius: 0 0 24px 24px;
overflow: hidden;
}
.hero-bg {
position: absolute;
inset: 0;
background: #1479ff;
z-index: 0;
}
.profile-hero-content {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 14px;
min-height: 120px;
}
.avatar-image {
.avatar-wrap {
flex: 0 0 auto;
}
.avatar-fallback {
.avatar-circle {
display: grid;
width: 64px;
height: 64px;
width: 54px;
height: 54px;
place-items: center;
background: #fff;
border-radius: 50%;
font-size: 32px;
box-shadow: 0 10px 24px rgba(24, 30, 45, 0.08);
background: rgba(255, 255, 255, 0.2);
font-size: 28px;
}
.profile-user {
.hero-user {
min-width: 0;
flex: 1;
}
.profile-user h1 {
.hero-user h1 {
overflow: hidden;
margin: 0;
font-size: 20px;
font-size: 18px;
font-weight: 800;
color: #fff;
text-overflow: ellipsis;
white-space: nowrap;
}
.edit-icon {
margin-left: 4px;
color: #b7bcc6;
font-size: 14px;
.hero-user p {
margin: 4px 0 0;
color: rgba(255, 255, 255, 0.75);
font-size: 12px;
}
.profile-user p {
margin: 7px 0 0;
color: #666f7c;
font-size: 13px;
}
.setting-icon {
color: #8b8f99;
cursor: pointer;
}
/* ========== 余额卡片 - 两行结构 ========== */
.balance-group {
margin-top: 10px;
/* ========== 余额卡片 - 白色浮层 ========== */
.balance-card {
position: relative;
margin: -24px 12px 0;
padding: 18px 16px 14px;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 26px rgba(24, 30, 45, 0.06);
background: #fff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.balance-main :deep(.van-cell__title) {
flex: none;
.balance-row {
display: flex;
align-items: center;
justify-content: space-between;
}
.balance-main :deep(.van-cell__value) {
flex: 1;
text-align: right;
.balance-info {
display: flex;
flex-direction: column;
gap: 4px;
}
.balance-label {
color: #8b8f99;
font-size: 13px;
font-weight: 700;
font-size: 12px;
font-weight: 600;
}
.balance-value {
font-size: 32px;
font-size: 26px;
line-height: 1;
color: #1a202c;
font-weight: 900;
}
.balance-actions {
padding-top: 4px !important;
padding-bottom: 12px !important;
}
.balance-actions :deep(.van-cell__title) {
flex: none;
}
.balance-actions :deep(.van-cell__value) {
flex: 1;
text-align: right;
.balance-footer {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid #f0f0f0;
}
.detail-btn {
@@ -414,60 +335,15 @@ function goToLogin() {
padding: 0 20px;
}
/* ========== 订单菜单 ========== */
.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;
display: block;
margin: 20px auto;
padding: 0 24px;
border-radius: 20px;
font-weight: 700;
height: 32px;
font-size: 13px;
}
/* ========== 底部导航 - 手写原生 ========== */
frontend/src/views/mobile/MobileSellerListingCreateView.vue
+4 -4
View File
@@ -297,12 +297,12 @@ function readError(error: unknown, fallback: string) {
<span>首页</span>
</RouterLink>
<RouterLink
to="/m/listings"
to="/m/messages"
class="nav-item"
:class="{ active: isNavActive('/m/listings') }"
:class="{ active: isNavActive('/m/messages') }"
>
<van-icon name="search" :size="22" />
<span>租号</span>
<van-icon name="chat-o" :size="22" />
<span>消息</span>
</RouterLink>
<RouterLink to="/m/seller/listings/create" class="nav-item nav-publish">
<div class="publish-pill">+</div>