新增订单群聊

frontend/src/views/mobile/MobileMessagesView.vue

@@ -1,47 +1,41 @@
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { computed, onMounted, ref } 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 { fetchChats, type ChatConversation } from '@/api/chats'
 import { formatDateMinute } from '@/utils/time'
 
 const router = useRouter()
 const loading = ref(false)
 const refreshing = ref(false)
 const finished = ref(false)
-const notifications = ref<NotificationItem[]>([])
+const conversations = ref<ChatConversation[]>([])
 const page = ref(1)
-const pageSize = 15
+const pageSize = 20
 const total = ref(0)
 
 onMounted(() => {
   onRefresh()
 })
 
-async function loadNotifications(isRefresh = false) {
+async function loadChats(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]
-    }
+    const res = await fetchChats(page.value, pageSize)
+    conversations.value = isRefresh ? res.items : [...conversations.value, ...res.items]
     total.value = res.total
-
-    if (notifications.value.length >= res.total || res.items.length === 0) {
+    if (conversations.value.length >= res.total || res.items.length === 0) {
       finished.value = true
     } else {
       page.value += 1
     }
   } catch {
-    showToast({ message: '获取消息失败', icon: 'cross' })
+    showToast({ message: '获取会话失败', icon: 'cross' })
     finished.value = true
   } finally {
     loading.value = false
@@ -51,136 +45,89 @@ async function loadNotifications(isRefresh = false) {
 
 function onRefresh() {
   refreshing.value = true
-  loadNotifications(true)
+  loadChats(true)
 }
 
 function onLoad() {
   if (loading.value || finished.value) return
-  loadNotifications(false)
+  loadChats(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' })
+function openConversation(item: ChatConversation) {
+  router.push(`/m/chats/${item.id}`)
+}
+
+function roleLabel(role: string) {
+  const map: Record<string, string> = {
+    renter: '租客',
+    owner: '号主',
+    support: '客服',
   }
+  return map[role] || '成员'
 }
 
-// 全部已读逻辑
-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 previewText(item: ChatConversation) {
+  return item.last_message_preview || '订单群聊已创建'
 }
 
-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' }
-}
+const unreadTotal = computed(() => conversations.value.reduce((sum, item) => sum + item.unread_count, 0))
 </script>
 
 <template>
   <main class="mobile-messages">
-    <!-- 顶部导航栏 -->
     <header class="page-header">
-      <button class="back-btn" @click="router.back()">
+      <button class="back-btn" type="button" @click="router.back()">
         <van-icon name="arrow-left" :size="20" />
       </button>
-      <h1>消息中心</h1>
-      <button v-if="hasUnread" class="header-action-btn" @click="markAllRead">
-        全部已读
-      </button>
-      <span v-else class="header-spacer"></span>
+      <h1>消息</h1>
+      <span class="header-count">{{ unreadTotal > 0 ? `${unreadTotal} 未读` : '' }}</span>
     </header>
 
-    <!-- 下拉刷新 + 上拉加载列表 -->
-    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="scroll-container">
+    <van-pull-refresh v-model="refreshing" class="scroll-container" @refresh="onRefresh">
       <van-list
         v-model:loading="loading"
         :finished="finished"
-        finished-text="没有更多消息了"
-        @load="onLoad"
+        finished-text="没有更多会话了"
         :immediate-check="false"
+        @load="onLoad"
       >
-        <!-- 空状态 -->
         <van-empty
-          v-if="!loading && notifications.length === 0"
-          description="暂无消息记录"
+          v-if="!loading && conversations.length === 0"
+          description="暂无订单群聊"
           class="empty-state"
         />
 
-        <div v-else class="messages-list">
-          <div
-            v-for="item in notifications"
+        <div v-else class="conversation-list">
+          <button
+            v-for="item in conversations"
             :key="item.id"
-            class="message-card"
-            :class="{ unread: !item.read_at }"
-            @click="!item.read_at && handleMarkRead(item.id)"
+            class="conversation-item"
+            type="button"
+            @click="openConversation(item)"
           >
-            <!-- 头部类型与未读红点 -->
-            <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 class="avatar-stack">
+              <span class="avatar main">{{ roleLabel(item.role).slice(0, 1) }}</span>
+              <span class="avatar support">客</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 class="conversation-main">
+              <div class="conversation-title-row">
+                <h2>{{ item.title }}</h2>
+                <span class="conversation-time">{{ formatDateMinute(item.last_message_at || item.created_at) }}</span>
+              </div>
+              <div class="conversation-meta">
+                <span class="role-chip">{{ roleLabel(item.role) }}</span>
+                <span>订单 #{{ item.order_id }}</span>
+              </div>
+              <p>{{ previewText(item) }}</p>
             </div>
-          </div>
+            <span v-if="item.unread_count > 0" class="unread-badge">
+              {{ item.unread_count > 99 ? '99+' : item.unread_count }}
+            </span>
+          </button>
         </div>
       </van-list>
     </van-pull-refresh>
 
-    <!-- 底部导航 -->
     <MobileBottomNav />
   </main>
 </template>
@@ -188,163 +135,182 @@ function getNotificationBadge(type: string) {
 <style scoped>
 .mobile-messages {
   min-height: 100dvh;
-  background: #f6f8fa;
-  padding-bottom: calc(64px + env(safe-area-inset-bottom));
+  background: #f5f7fb;
+  padding-bottom: calc(62px + env(safe-area-inset-bottom));
 }
 
-/* ========== 顶部导航 ========== */
 .page-header {
   position: sticky;
   top: 0;
   z-index: 100;
-  display: flex;
+  display: grid;
+  grid-template-columns: 44px 1fr 72px;
   align-items: center;
-  justify-content: space-between;
   height: 48px;
-  padding: 0 12px;
-  background: rgba(255, 255, 255, 0.94);
+  padding: 0 8px;
+  background: rgba(255, 255, 255, 0.96);
+  border-bottom: 1px solid #edf0f5;
   backdrop-filter: blur(10px);
-  border-bottom: 1px solid rgba(243, 244, 246, 0.8);
 }
 
 .page-header h1 {
-  flex: 1;
   margin: 0;
-  font-size: 17px;
-  font-weight: 700;
   color: #111827;
+  font-size: 17px;
+  font-weight: 800;
   text-align: center;
 }
 
 .back-btn {
   display: grid;
-  width: 36px;
-  height: 36px;
+  width: 40px;
+  height: 40px;
   place-items: center;
-  border: none;
-  background: none;
+  border: 0;
+  background: transparent;
   color: #374151;
-  cursor: pointer;
 }
 
-.header-action-btn {
-  border: none;
-  background: none;
-  color: #1477ff;
-  font-size: 13px;
+.header-count {
+  color: #ef4444;
+  font-size: 12px;
   font-weight: 700;
-  cursor: pointer;
-  padding: 0 8px;
-  white-space: nowrap;
+  text-align: right;
 }
 
-.header-spacer {
-  width: 36px;
-}
-
-/* ========== 列表内容 ========== */
 .scroll-container {
-  min-height: calc(100dvh - 48px - 64px - env(safe-area-inset-bottom));
+  min-height: calc(100dvh - 48px - 62px - env(safe-area-inset-bottom));
 }
 
 .empty-state {
-  padding: 80px 0;
+  padding-top: 90px;
 }
 
-.messages-list {
-  padding: 14px 16px;
+.conversation-list {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 10px;
+  padding: 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;
+.conversation-item {
   position: relative;
+  display: grid;
+  grid-template-columns: 52px minmax(0, 1fr);
+  gap: 10px;
+  width: 100%;
+  padding: 12px;
+  border: 1px solid #e8edf3;
+  border-radius: 8px;
+  background: #fff;
+  text-align: left;
+  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
+}
+
+.conversation-item:active {
+  transform: scale(0.99);
+}
+
+.avatar-stack {
+  position: relative;
+  width: 48px;
+  height: 48px;
+}
+
+.avatar {
+  display: grid;
+  place-items: center;
+  border-radius: 50%;
+  color: #fff;
+  font-weight: 800;
+}
+
+.avatar.main {
+  width: 44px;
+  height: 44px;
+  background: #1477ff;
+  font-size: 16px;
+}
+
+.avatar.support {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 22px;
+  height: 22px;
+  border: 2px solid #fff;
+  background: #10b981;
+  font-size: 11px;
+}
+
+.conversation-main {
+  min-width: 0;
+}
+
+.conversation-title-row {
   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;
+  gap: 8px;
 }
 
-.type-badge {
-  font-size: 10px;
-  padding: 2px 6px;
-  border-radius: 6px;
+.conversation-title-row h2 {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  color: #111827;
+  font-size: 15px;
+  font-weight: 800;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.conversation-time {
+  flex: none;
+  color: #9ca3af;
+  font-size: 11px;
+}
+
+.conversation-meta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 5px;
+  color: #6b7280;
+  font-size: 11px;
+}
+
+.role-chip {
+  padding: 1px 6px;
+  border-radius: 999px;
+  background: #eef6ff;
+  color: #1477ff;
   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;
+.conversation-main p {
+  margin: 7px 0 0;
+  overflow: hidden;
   color: #4b5563;
-  line-height: 1.5;
-  word-break: break-all;
+  font-size: 13px;
+  line-height: 1.4;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.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;
+.unread-badge {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 9px;
+  background: #ef4444;
+  color: #fff;
+  font-size: 10px;
+  font-weight: 800;
+  line-height: 18px;
+  text-align: center;
 }
 </style>