增加消息界面 删除我的界面无用的图标
This commit is contained in:
yml
@@ -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;
|
||||
}
|
||||
|
||||
/* ========== 底部导航 - 手写原生 ========== */
|
||||
|
||||
Reference in New Issue
Block a user