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

优化移动端ui

Browse Source
This commit is contained in:
yml
2026-05-25 13:07:46 +08:00
parent 0764e4b249
commit 1a3886f8d1
4 changed files with 298 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/mobile/MobileMessagesView.vue
+295 -13
View File
@@ -1,22 +1,184 @@
<script setup lang="ts">
import { useRouter } from "vue-router";
import MobileBottomNav from "@/components/MobileBottomNav.vue";
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import MobileBottomNav from '@/components/MobileBottomNav.vue'
import { fetchNotifications, markNotificationRead, type NotificationItem } from '@/api/notifications'
import { formatDateMinute } from '@/utils/time'
const router = useRouter();
const router = useRouter()
const loading = ref(false)
const refreshing = ref(false)
const finished = ref(false)
const notifications = ref<NotificationItem[]>([])
const page = ref(1)
const pageSize = 15
const total = ref(0)
onMounted(() => {
onRefresh()
})
async function loadNotifications(isRefresh = false) {
if (isRefresh) {
page.value = 1
finished.value = false
}
loading.value = true
try {
const res = await fetchNotifications(page.value, pageSize)
if (isRefresh) {
notifications.value = res.items
} else {
notifications.value = [...notifications.value, ...res.items]
}
total.value = res.total
if (notifications.value.length >= res.total || res.items.length === 0) {
finished.value = true
} else {
page.value += 1
}
} catch {
showToast({ message: '获取消息失败', icon: 'cross' })
finished.value = true
} finally {
loading.value = false
refreshing.value = false
}
}
function onRefresh() {
refreshing.value = true
loadNotifications(true)
}
function onLoad() {
if (loading.value || finished.value) return
loadNotifications(false)
}
async function handleMarkRead(id: number) {
try {
await markNotificationRead(id)
const index = notifications.value.findIndex(item => item.id === id)
if (index !== -1) {
// 局部更新状态，避免整站刷新
const item = notifications.value[index]
if (item) {
item.read_at = new Date().toISOString()
}
}
} catch {
showToast({ message: '标记已读失败', icon: 'cross' })
}
}
// 全部已读逻辑
const hasUnread = computed(() => notifications.value.some(item => !item.read_at))
async function markAllRead() {
const unreadItems = notifications.value.filter(item => !item.read_at)
if (unreadItems.length === 0) return
showToast({
type: 'loading',
message: '处理中...',
forbidClick: true,
duration: 0
})
try {
await Promise.all(unreadItems.map(item => markNotificationRead(item.id)))
showToast({ message: '已全部标记为已读', icon: 'passed' })
onRefresh()
} catch {
showToast({ message: '操作失败，请重试', icon: 'cross' })
}
}
function getNotificationBadge(type: string) {
const map: Record<string, { text: string; class: string }> = {
listing_review: { text: '上架审核', class: 'badge-review' },
listing_admin: { text: '后台管控', class: 'badge-admin' },
order_state: { text: '订单状态', class: 'badge-order' },
dispute_state: { text: '纠纷仲裁', class: 'badge-dispute' }
}
return map[type] || { text: '通知', class: 'badge-system' }
}
</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>
<h1>消息中心</h1>
<button v-if="hasUnread" class="header-action-btn" @click="markAllRead">
全部已读
</button>
<span v-else class="header-spacer"></span>
</header>
<!-- 空状态 -->
<van-empty description="暂无消息" image="search" />
<!-- 下拉刷新 + 上拉加载列表 -->
<van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="scroll-container">
<van-list
v-model:loading="loading"
:finished="finished"
finished-text="没有更多消息了"
@load="onLoad"
:immediate-check="false"
>
<!-- 空状态 -->
<van-empty
v-if="!loading && notifications.length === 0"
description="暂无消息记录"
class="empty-state"
/>
<div v-else class="messages-list">
<div
v-for="item in notifications"
:key="item.id"
class="message-card"
:class="{ unread: !item.read_at }"
@click="!item.read_at && handleMarkRead(item.id)"
>
<!-- 头部类型与未读红点 -->
<div class="card-header-row">
<span class="type-badge" :class="getNotificationBadge(item.type).class">
{{ getNotificationBadge(item.type).text }}
</span>
<span class="time-label">{{ formatDateMinute(item.created_at) }}</span>
</div>
<!-- 消息主体 -->
<h3 class="message-title">
<span v-if="!item.read_at" class="unread-dot"></span>
{{ item.title }}
</h3>
<p class="message-content">{{ item.content }}</p>
<!-- 操作按钮 -->
<div class="card-actions" v-if="item.biz_type === 'order' && item.biz_id">
<van-button
size="mini"
type="primary"
plain
round
class="action-btn"
@click.stop="router.push(`/m/orders/${item.biz_id}`)"
>
查看订单
</van-button>
</div>
</div>
</div>
</van-list>
</van-pull-refresh>
<!-- 底部导航 -->
<MobileBottomNav />
@@ -26,21 +188,23 @@ const router = useRouter();
<style scoped>
.mobile-messages {
min-height: 100dvh;
background: #f5f7fa;
padding-bottom: calc(56px + env(safe-area-inset-bottom));
background: #f6f8fa;
padding-bottom: calc(64px + env(safe-area-inset-bottom));
}
/* ========== 顶部导航 ========== */
.page-header {
position: sticky;
top: 0;
z-index: 10;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
height: 48px;
padding: 0 12px;
background: #fff;
border-bottom: 1px solid #eee;
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(243, 244, 246, 0.8);
}
.page-header h1 {
@@ -48,6 +212,7 @@ const router = useRouter();
margin: 0;
font-size: 17px;
font-weight: 700;
color: #111827;
text-align: center;
}
@@ -58,11 +223,128 @@ const router = useRouter();
place-items: center;
border: none;
background: none;
color: #333;
color: #374151;
cursor: pointer;
}
.header-action-btn {
border: none;
background: none;
color: #1477ff;
font-size: 13px;
font-weight: 700;
cursor: pointer;
padding: 0 8px;
white-space: nowrap;
}
.header-spacer {
width: 36px;
}
/* ========== 列表内容 ========== */
.scroll-container {
min-height: calc(100dvh - 48px - 64px - env(safe-area-inset-bottom));
}
.empty-state {
padding: 80px 0;
}
.messages-list {
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 12px;
}
/* ========== 消息卡片 ========== */
.message-card {
background: #ffffff;
border-radius: 16px;
padding: 14px;
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);
transition: transform 0.15s ease, background 0.15s ease;
position: relative;
display: flex;
flex-direction: column;
gap: 6px;
}
.message-card:active {
transform: scale(0.98);
}
/* 未读态加点微弱阴影背景 */
.message-card.unread {
border-color: rgba(20, 119, 255, 0.15);
background: linear-gradient(135deg, #ffffff 0%, #fafcff 100%);
}
.card-header-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.type-badge {
font-size: 10px;
padding: 2px 6px;
border-radius: 6px;
font-weight: 700;
}
/* 消息类型徽章颜色 */
.badge-review { color: #f59e0b; background: rgba(245, 158, 11, 0.08); }
.badge-admin { color: #ef4444; background: rgba(239, 68, 68, 0.08); }
.badge-order { color: #1477ff; background: rgba(20, 119, 255, 0.08); }
.badge-dispute { color: #8b5cf6; background: rgba(139, 92, 246, 0.08); }
.badge-system { color: #6b7280; background: rgba(107, 114, 128, 0.08); }
.time-label {
font-size: 10px;
color: #9ca3af;
}
.message-title {
margin: 2px 0 0;
font-size: 14px;
font-weight: 800;
color: #111827;
display: flex;
align-items: center;
gap: 6px;
}
.unread-dot {
width: 6px;
height: 6px;
background-color: #ef4444;
border-radius: 50%;
display: inline-block;
}
.message-content {
margin: 0;
font-size: 12px;
color: #4b5563;
line-height: 1.5;
word-break: break-all;
}
.card-actions {
display: flex;
justify-content: flex-end;
margin-top: 4px;
padding-top: 8px;
border-top: 1px solid #f3f4f6;
}
.action-btn {
height: 24px !important;
padding: 0 10px !important;
font-size: 11px !important;
font-weight: 700 !important;
}
</style>