huangzhenbao/medical-mall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

consumer模块完成度95%，准备部署消费者端测试

Browse Source
This commit is contained in:
cyh666666
2026-03-05 08:45:00 +08:00
parent cceb556c62
commit 7f7f723d93
1043 changed files with 53958 additions and 3445 deletions
Download Patch File Download Diff File Expand all files Collapse all files

303
pages/mall/consumer/messages医药.uvue
View File

@@ -1,22 +1,22 @@
<template>
<template>
<view class="messages-page">
<!-- 智能顶部导航栏 - 与主页保持一致 -->
<!-- 鏅鸿兘椤堕儴瀵艰埅鏍?- 涓庝富椤典繚鎸佷竴鑷?-->
<view class="smart-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
<view class="nav-container">
<text class="nav-title">消息中心</text>
<text class="nav-title">娑堟伅涓績</text>
<view class="nav-actions">
<view class="action-btn" @click="clearAllUnread">
<text class="action-icon">🧹</text>
<text class="action-text">一键已读</text>
<text class="action-icon">馃Ч</text>
<text class="action-text">涓€閿凡璇?/text>
</view>
</view>
</view>
</view>
<!-- 导航栏占位符 -->
<!-- 瀵艰埅鏍忓崰浣嶇 -->
<view class="navbar-placeholder" :style="{ height: (statusBarHeight + 10) + 'px' }"></view>
<!-- 消息分类标签 - 固定在顶部，方便随时切换 -->
<!-- 娑堟伅鍒嗙被鏍囩 - 鍥哄畾鍦ㄩ《閮紝鏂逛究闅忔椂鍒囨崲 -->
<view class="tabs-container">
<view class="message-tabs">
<view
@@ -31,7 +31,7 @@
</view>
</view>
<!-- 消息列表内容区 -->
<!-- 娑堟伅鍒楄〃鍐呭鍖?-->
<scroll-view
scroll-y
class="messages-content"
@@ -41,37 +41,37 @@
:scroll-top="scrollTop"
>
<!-- 客服消息 -->
<!-- 瀹㈡湇娑堟伅 -->
<view v-if="activeTab === 'service'" class="message-section">
<!-- 在线客服卡片 -->
<!-- 鍦ㄧ嚎瀹㈡湇鍗＄墖 -->
<view class="customer-service-info">
<view class="service-header">
<text class="service-title">康乐医药在线客服</text>
<text class="service-status online">在线</text>
<text class="service-title">搴蜂箰鍖昏嵂鍦ㄧ嚎瀹㈡湇</text>
<text class="service-status online">鍦ㄧ嚎</text>
</view>
<text class="service-desc">专业医药顾问在线解答，服务时间 9:00-22:00</text>
<text class="service-desc">涓撲笟鍖昏嵂椤鹃棶鍦ㄧ嚎瑙ｇ瓟锛屾湇鍔℃椂闂?9:00-22:00</text>
<view class="service-categories">
<view class="category-item" @click="startQuickService('用药咨询')">
<text class="category-icon">💊</text>
<text class="category-name">用药咨询</text>
<view class="category-item" @click="startQuickService('鐢ㄨ嵂鍜ㄨ')">
<text class="category-icon">馃拪</text>
<text class="category-name">鐢ㄨ嵂鍜ㄨ</text>
</view>
<view class="category-item" @click="startQuickService('处方咨询')">
<text class="category-icon">📋</text>
<text class="category-name">处方咨询</text>
<view class="category-item" @click="startQuickService('澶勬柟鍜ㄨ')">
<text class="category-icon">馃搵</text>
<text class="category-name">澶勬柟鍜ㄨ</text>
</view>
<view class="category-item" @click="startQuickService('副作用咨询')">
<text class="category-icon">⚠️</text>
<text class="category-name">副作用咨询</text>
<view class="category-item" @click="startQuickService('鍓綔鐢ㄥ挩璇?)">
<text class="category-icon">鈿狅笍</text>
<text class="category-name">鍓綔鐢ㄥ挩璇?/text>
</view>
<view class="category-item" @click="startQuickService('药品配送')">
<text class="category-icon">🚚</text>
<text class="category-name">药品配送</text>
<view class="category-item" @click="startQuickService('鑽搧閰嶉€?)">
<text class="category-icon">馃殮</text>
<text class="category-name">鑽搧閰嶉€?/text>
</view>
</view>
</view>
<!-- 客服消息列表 -->
<!-- 瀹㈡湇娑堟伅鍒楄〃 -->
<view
v-for="message in serviceMessages"
:key="message.id"
@@ -111,14 +111,14 @@
</view>
</view>
<!-- 客服系统提示 -->
<!-- 瀹㈡湇绯荤粺鎻愮ず -->
<view class="service-tips">
<text class="tip-icon">💡</text>
<text class="tip-text">温馨提示：请勿相信任何要求转账、付款的信息，谨防诈骗</text>
<text class="tip-icon">馃挕</text>
<text class="tip-text">娓╅Θ鎻愮ず锛氳鍕跨浉淇′换浣曡姹傝浆璐︺€佷粯娆剧殑淇℃伅锛岃皑闃茶瘓楠?/text>
</view>
</view>
<!-- 系统通知 -->
<!-- 绯荤粺閫氱煡 -->
<view v-if="activeTab === 'system'" class="message-section">
<view
v-for="message in systemMessages"
@@ -127,7 +127,7 @@
@click="viewSystemMessage(message)"
>
<view class="message-icon-wrapper">
<text class="message-icon">📢</text>
<text class="message-icon">馃摙</text>
</view>
<view class="message-content">
<view class="message-header">
@@ -135,12 +135,12 @@
<text class="message-time">{{ message.time }}</text>
</view>
<text class="message-preview">{{ message.content }}</text>
<view v-if="message.important" class="important-tag">重要</view>
<view v-if="message.important" class="important-tag">閲嶈</view>
</view>
</view>
</view>
<!-- 订单消息 -->
<!-- 璁㈠崟娑堟伅 -->
<view v-if="activeTab === 'order'" class="message-section">
<view
v-for="message in orderMessages"
@@ -149,7 +149,7 @@
@click="viewOrderMessage(message)"
>
<view class="message-icon-wrapper">
<text class="message-icon">📦</text>
<text class="message-icon">馃摝</text>
</view>
<view class="message-content">
<view class="message-header">
@@ -157,7 +157,7 @@
<text class="message-time">{{ message.time }}</text>
</view>
<text class="message-preview">{{ message.content }}</text>
<text class="order-info" v-if="message.order_no">订单号: {{ message.order_no }}</text>
<text class="order-info" v-if="message.order_no">璁㈠崟鍙? {{ message.order_no }}</text>
<view v-if="message.status" class="order-status" :class="message.status">
{{ message.statusText }}
</view>
@@ -165,7 +165,7 @@
</view>
</view>
<!-- 优惠活动 -->
<!-- 浼樻儬娲诲姩 -->
<view v-if="activeTab === 'promo'" class="message-section">
<view
v-for="message in promoMessages"
@@ -174,7 +174,7 @@
@click="viewPromoMessage(message)"
>
<view class="message-icon-wrapper">
<text class="message-icon">🎁</text>
<text class="message-icon">馃巵</text>
</view>
<view class="message-content">
<view class="message-header">
@@ -183,30 +183,30 @@
</view>
<text class="message-preview">{{ message.content }}</text>
<view v-if="message.coupon" class="coupon-info" @click.stop="claimCoupon(message)">
<text class="coupon-text">{{ message.coupon }}优惠券</text>
<text class="coupon-expiry">有效期至 {{ message.expiry }}</text>
<text class="coupon-action">{{ message.claimed ? '已领取' : '点击领取' }}</text>
<text class="coupon-text">{{ message.coupon }}浼樻儬鍒?/text>
<text class="coupon-expiry">鏈夋晥鏈熻嚦 {{ message.expiry }}</text>
<text class="coupon-action">{{ message.claimed ? '宸查鍙? : '鐐瑰嚮棰嗗彇' }}</text>
</view>
</view>
</view>
</view>
<!-- 空状态 -->
<!-- 绌虹姸鎬?-->
<view v-if="!loading && currentMessages.length === 0 && activeTab !== 'service'" class="empty-messages">
<text class="empty-icon">💬</text>
<text class="empty-title">暂无消息</text>
<text class="empty-desc">暂时没有新消息</text>
<text class="empty-icon">馃挰</text>
<text class="empty-title">鏆傛棤娑堟伅</text>
<text class="empty-desc">鏆傛椂娌℃湁鏂版秷鎭?/text>
</view>
<!-- 底部安全区域 -->
<!-- 搴曢儴瀹夊叏鍖哄煙 -->
<view class="safe-area"></view>
</scroll-view>
<!-- 底部固定按钮 -->
<!-- 搴曢儴鍥哄畾鎸夐挳 -->
<view class="floating-action">
<button class="action-button" @click="startNewChat">
<text class="button-icon">✏️</text>
<text class="button-text">新建聊天</text>
<text class="button-icon">鉁忥笍</text>
<text class="button-text">鏂板缓鑱婂ぉ</text>
</button>
</view>
</view>
@@ -216,7 +216,7 @@
import { ref, reactive, computed, onMounted } from 'vue'
import { supabaseService, type Notification, type ChatMessage } from '@/utils/supabaseService.uts'
// 响应式数据
// 鍝嶅簲寮忔暟鎹?
const activeTab = ref<string>('service')
const refreshing = ref<boolean>(false)
const loading = ref<boolean>(false)
@@ -225,32 +225,32 @@ const statusBarHeight = ref(0)
const scrollTop = ref(0)
const scrollHeight = ref(0)
// 初始化页面布局数据
// 鍒濆鍖栭〉闈㈠竷灞€鏁版嵁
const initPage = () => {
const systemInfo = uni.getSystemInfoSync()
statusBarHeight.value = systemInfo.statusBarHeight || 0
// 计算滚动区域高度：屏幕高度 - 状态栏 - 导航栏(44) - 标签栏(42)
// 璁＄畻婊氬姩鍖哄煙楂樺害锛氬睆骞曢珮搴?- 鐘舵€佹爮 - 瀵艰埅鏍?44) - 鏍囩鏍?42)
const windowHeight = systemInfo.windowHeight
scrollHeight.value = windowHeight - statusBarHeight.value - 44 - 42
}
// 消息分类标签
// 娑堟伅鍒嗙被鏍囩
const messageTabs = reactive([
{ id: 'service', name: '客服消息', unread: 5 },
{ id: 'system', name: '系统通知', unread: 3 },
{ id: 'order', name: '订单消息', unread: 2 },
{ id: 'promo', name: '优惠活动', unread: 2 }
{ id: 'service', name: '瀹㈡湇娑堟伅', unread: 5 },
{ id: 'system', name: '绯荤粺閫氱煡', unread: 3 },
{ id: 'order', name: '璁㈠崟娑堟伅', unread: 2 },
{ id: 'promo', name: '浼樻儬娲诲姩', unread: 2 }
])
// Mock 客服消息数据
// Mock 瀹㈡湇娑堟伅鏁版嵁
const serviceMessages = reactive<any[]>([])
const systemMessages = reactive<any[]>([])
const orderMessages = reactive<any[]>([])
// Mock 优惠活动数据
// Mock 浼樻儬娲诲姩鏁版嵁
const promoMessages = reactive<any[]>([])
// 计算当前显示的消息
// 璁＄畻褰撳墠鏄剧ず鐨勬秷鎭?
const currentMessages = computed(() => {
switch (activeTab.value) {
case 'system': return systemMessages
@@ -261,14 +261,14 @@ const currentMessages = computed(() => {
}
})
// 生命周期
// 鐢熷懡鍛ㄦ湡
onMounted(() => {
console.log('Messages Page Mounted')
initPage()
loadMessages()
})
// 简单的日期格式化
// 绠€鍗曠殑鏃ユ湡鏍煎紡鍖?
const formatTime = (isoString: string): string => {
if (!isoString) return ''
try {
@@ -278,22 +278,22 @@ const formatTime = (isoString: string): string => {
}
}
// 加载消息
// 鍔犺浇娑堟伅
const loadMessages = async () => {
loading.value = true
try {
// 清空现有Mock数据
// 娓呯┖鐜版湁Mock鏁版嵁
serviceMessages.length = 0
systemMessages.length = 0
orderMessages.length = 0
promoMessages.length = 0
// 1. 获取通知 (系统、订单、优惠)
// 1. 鑾峰彇閫氱煡 (绯荤粺銆佽鍗曘€佷紭鎯?
const notes = await supabaseService.getUserNotifications()
notes.forEach((note: Notification) => {
// 这里使用 any 类型构建对象，以匹配 reactive 数组的结构
// 杩欓噷浣跨敤 any 绫诲瀷鏋勫缓瀵硅薄锛屼互鍖归厤 reactive 鏁扮粍鐨勭粨鏋?
const item = {
id: note.id,
title: note.title,
@@ -301,10 +301,10 @@ const loadMessages = async () => {
time: formatTime(note.created_at || ''),
read: note.is_read,
type: note.type, // 'system', 'order', 'promotion' => 'promo'
// 默认填充字段以避免渲染报错
// 榛樿濉厖瀛楁浠ラ伩鍏嶆覆鏌撴姤閿?
avatar: note.icon_url,
important: note.type === 'system', // 简单逻辑
coupon: '点击查看',
important: note.type === 'system', // 绠€鍗曢€昏緫
coupon: '鐐瑰嚮鏌ョ湅',
expiry: '',
claimed: false,
order_no: '',
@@ -330,15 +330,15 @@ const loadMessages = async () => {
}
})
// 2. 获取客服消息 (Chat)
// 2. 鑾峰彇瀹㈡湇娑堟伅 (Chat)
const chats = await supabaseService.getUserChatMessages()
if (chats.length > 0) {
// 简单处理：将最新一条显示为"在线客服"会话
// 绠€鍗曞鐞嗭細灏嗘渶鏂颁竴鏉℃樉绀轰负"鍦ㄧ嚎瀹㈡湇"浼氳瘽
const lastMsg = chats[0]
serviceMessages.push({
id: lastMsg.id,
title: '在线客服',
role: '客服专员',
title: '鍦ㄧ嚎瀹㈡湇',
role: '瀹㈡湇涓撳憳',
content: lastMsg.content,
lastMessage: lastMsg.content,
time: formatTime(lastMsg.created_at || ''),
@@ -347,8 +347,8 @@ const loadMessages = async () => {
avatar: '/static/icons/service-avatar.png',
online: true,
unreadCount: chats.filter((m: ChatMessage) => !m.is_read && !m.is_from_user).length,
tags: ['官方客服'],
icon: '👩‍💼',
tags: ['瀹樻柟瀹㈡湇'],
icon: '馃懇鈥嶐煉?,
color: '#2196F3',
important: false,
coupon: '',
@@ -359,21 +359,21 @@ const loadMessages = async () => {
statusText: ''
})
} else {
// 如果没有真实数据，保留一个默认客服入口
// 濡傛灉娌℃湁鐪熷疄鏁版嵁锛屼繚鐣欎竴涓粯璁ゅ鏈嶅叆鍙?
serviceMessages.push({
id: 'default_service',
title: '在线客服',
role: '智能助手',
content: '有问题请随时联系我们',
lastMessage: '欢迎咨询',
time: '刚刚',
title: '鍦ㄧ嚎瀹㈡湇',
role: '鏅鸿兘鍔╂墜',
content: '鏈夐棶棰樿闅忔椂鑱旂郴鎴戜滑',
lastMessage: '娆㈣繋鍜ㄨ',
time: '鍒氬垰',
read: true,
type: 'service',
avatar: '/static/icons/service-avatar.png',
online: true,
unreadCount: 0,
tags: ['自动回复'],
icon: '🤖',
tags: ['鑷姩鍥炲'],
icon: '馃',
color: '#2196F3',
important: false,
coupon: '',
@@ -386,14 +386,14 @@ const loadMessages = async () => {
}
} catch (e) {
console.error('加载消息失败', e)
console.error('鍔犺浇娑堟伅澶辫触', e)
} finally {
updateUnreadCount()
loading.value = false
}
}
// 更新未读数量
// 鏇存柊鏈鏁伴噺
const updateUnreadCount = () => {
let totalUnread = 0
@@ -416,14 +416,14 @@ const updateUnreadCount = () => {
unreadCount.value = totalUnread
}
// 切换标签
// 鍒囨崲鏍囩
const switchTab = (tabId: string) => {
activeTab.value = tabId
// 切换标签时回到顶部，使用微小变化触发滚动更新
// 鍒囨崲鏍囩鏃跺洖鍒伴《閮紝浣跨敤寰皬鍙樺寲瑙﹀彂婊氬姩鏇存柊
scrollTop.value = scrollTop.value === 0 ? 0.01 : 0
}
// 开始与客服聊天
// 寮€濮嬩笌瀹㈡湇鑱婂ぉ
const startChatWithService = (message: any) => {
message.read = true
message.unreadCount = 0
@@ -434,26 +434,26 @@ const startChatWithService = (message: any) => {
})
}
// 快速开始服务
// 蹇€熷紑濮嬫湇鍔?
const startQuickService = (category: string) => {
uni.navigateTo({
url: `/pages/mall/consumer/chat?category=${encodeURIComponent(category)}`
})
}
// 新建聊天
// 鏂板缓鑱婂ぉ
const startNewChat = () => {
uni.showActionSheet({
itemList: ['用药咨询', '处方咨询', '副作用咨询', '药品配送', '其他问题'],
itemList: ['鐢ㄨ嵂鍜ㄨ', '澶勬柟鍜ㄨ', '鍓綔鐢ㄥ挩璇?, '鑽搧閰嶉€?, '鍏朵粬闂'],
success: (res) => {
const categories = ['用药咨询', '处方咨询', '副作用咨询', '药品配送', '其他问题']
const categories = ['鐢ㄨ嵂鍜ㄨ', '澶勬柟鍜ㄨ', '鍓綔鐢ㄥ挩璇?, '鑽搧閰嶉€?, '鍏朵粬闂']
const category = categories[res.tapIndex]
startQuickService(category)
}
})
}
// 查看系统消息
// 鏌ョ湅绯荤粺娑堟伅
const viewSystemMessage = (message: any) => {
message.read = true
updateUnreadCount()
@@ -462,7 +462,7 @@ const viewSystemMessage = (message: any) => {
})
}
// 查看订单消息
// 鏌ョ湅璁㈠崟娑堟伅
const viewOrderMessage = (message: any) => {
message.read = true
updateUnreadCount()
@@ -471,7 +471,7 @@ const viewOrderMessage = (message: any) => {
})
}
// 查看优惠活动
// 鏌ョ湅浼樻儬娲诲姩
const viewPromoMessage = (message: any) => {
message.read = true
updateUnreadCount()
@@ -480,22 +480,22 @@ const viewPromoMessage = (message: any) => {
})
}
// 领取优惠券
// 棰嗗彇浼樻儬鍒?
const claimCoupon = (message: any) => {
if (message.claimed) {
uni.showToast({
title: '您已领取该优惠券',
title: '鎮ㄥ凡棰嗗彇璇ヤ紭鎯犲埜',
icon: 'none'
})
return
}
message.claimed = true
// 保存领取状态到本地存储，供个人页读取
// 淇濆瓨棰嗗彇鐘舵€佸埌鏈湴瀛樺偍锛屼緵涓汉椤佃鍙?
const claimedCouponsCount = uni.getStorageSync('claimedCoupons') || 0
uni.setStorageSync('claimedCoupons', (claimedCouponsCount as number) + 1)
// 保存详细的优惠券信息到 myCoupons 列表
// 淇濆瓨璇︾粏鐨勪紭鎯犲埜淇℃伅鍒?myCoupons 鍒楄〃
const myCoupons = uni.getStorageSync('myCoupons')
let couponsList: any[] = []
if (myCoupons) {
@@ -515,16 +515,16 @@ const claimCoupon = (message: any) => {
uni.setStorageSync('myCoupons', JSON.stringify(couponsList))
uni.showToast({
title: '领取成功',
title: '棰嗗彇鎴愬姛',
icon: 'success'
})
}
// 清除所有未读
// 娓呴櫎鎵€鏈夋湭璇?
const clearAllUnread = () => {
uni.showModal({
title: '确认操作',
content: '确定要标记所有消息为已读吗？',
title: '纭鎿嶄綔',
content: '纭畾瑕佹爣璁版墍鏈夋秷鎭负宸茶鍚楋紵',
success: (res) => {
if (res.confirm) {
serviceMessages.forEach(msg => {
@@ -539,7 +539,7 @@ const clearAllUnread = () => {
unreadCount.value = 0
uni.showToast({
title: '已标记所有消息为已读',
title: '宸叉爣璁版墍鏈夋秷鎭负宸茶',
icon: 'success'
})
}
@@ -547,14 +547,14 @@ const clearAllUnread = () => {
})
}
// 下拉刷新
// 涓嬫媺鍒锋柊
const onRefresh = () => {
refreshing.value = true
setTimeout(() => {
loadMessages()
refreshing.value = false
uni.showToast({
title: '刷新成功',
title: '鍒锋柊鎴愬姛',
icon: 'success'
})
}, 1000)
@@ -562,17 +562,17 @@ const onRefresh = () => {
</script>
<style>
/* 页面结构优化 - 避免双滚动条 */
/* 椤甸潰缁撴瀯浼樺寲 - 閬垮厤鍙屾粴鍔ㄦ潯 */
.messages-page {
width: 100%;
height: 100vh;
background-color: #f8fafc;
display: flex;
flex-direction: column;
overflow: hidden; /* 关键：防止body滚动 */
overflow: hidden; /* 鍏抽敭锛氶槻姝ody婊氬姩 */
}
/* 智能导航栏 */
/* 鏅鸿兘瀵艰埅鏍?*/
.smart-navbar {
position: fixed;
top: 0;
@@ -581,42 +581,42 @@ const onRefresh = () => {
background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
z-index: 1000;
box-shadow: 0 2px 12px rgba(76, 175, 80, 0.15);
/* height: 50px; 移除固定高度，由内容决定 */
/* height: 50px; 绉婚櫎鍥哄畾楂樺害锛岀敱鍐呭鍐冲畾 */
display: flex;
flex-direction: row; /* 显式设置行方向 */
flex-direction: row; /* 鏄惧紡璁剧疆琛屾柟鍚?*/
align-items: center;
justify-content: center;
flex-shrink: 0; /* 防止被压缩 */
flex-shrink: 0; /* 闃叉琚帇缂?*/
}
.nav-container {
padding: 0 16px;
display: flex;
flex-direction: row; /* 关键修复：UVUE默认是column，必须显式设置为row才能横向排列 */
flex-direction: row; /* 鍏抽敭淇锛歎VUE榛樿鏄痗olumn锛屽繀椤绘樉寮忚缃负row鎵嶈兘妯悜鎺掑垪 */
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 1400px;
margin: 0 auto;
height: 44px; /* 调整为标准高度 44px */
height: 44px; /* 璋冩暣涓烘爣鍑嗛珮搴?44px */
}
.nav-title {
font-size: 18px;
font-weight: bold;
color: white;
flex: 1; /* 自适应宽度 */
flex: 1; /* 鑷€傚簲瀹藉害 */
}
.nav-actions {
display: flex;
flex-direction: row; /* 显式设置行方向 */
flex-direction: row; /* 鏄惧紡璁剧疆琛屾柟鍚?*/
align-items: center;
}
.action-btn {
display: flex;
flex-direction: row; /* 显式设置行方向 */
flex-direction: row; /* 鏄惧紡璁剧疆琛屾柟鍚?*/
align-items: center;
background: rgba(255, 255, 255, 0.2);
padding: 4px 12px;
@@ -640,32 +640,32 @@ const onRefresh = () => {
font-weight: 500;
}
/* 导航栏占位符 */
/* 瀵艰埅鏍忓崰浣嶇 */
.navbar-placeholder {
width: 100%;
flex-shrink: 0;
}
/* 消息分类标签容器 */
/* 娑堟伅鍒嗙被鏍囩瀹瑰櫒 */
.tabs-container {
background: white;
padding: 0 10px;
border-bottom: 1px solid #e0e0e0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
z-index: 900;
height: 42px; /* 减小高度，更紧凑 */
height: 42px; /* 鍑忓皬楂樺害锛屾洿绱у噾 */
flex-shrink: 0;
}
.message-tabs {
display: flex;
flex-direction: row; /* 横向排列 */
flex-direction: row; /* 妯悜鎺掑垪 */
height: 100%;
/* overflow-x: auto; 移除自动滚动，改为自适应宽度 */
/* overflow-x: auto; 绉婚櫎鑷姩婊氬姩锛屾敼涓鸿嚜閫傚簲瀹藉害 */
max-width: 1400px;
margin: 0 auto;
/* gap: 4px; removed for uniapp-x support */
justify-content: space-between; /* 均匀分布 */
justify-content: space-between; /* 鍧囧寑鍒嗗竷 */
}
.message-tabs::-webkit-scrollbar {
@@ -675,17 +675,17 @@ const onRefresh = () => {
.tab-item {
padding: 0 4px;
margin: 0 2px;
display: flex; /* 改为 flex 布局 */
flex-direction: row; /* 关键：横向排列 文字和数字 */
align-items: center; /* 垂直居中 */
display: flex; /* 鏀逛负 flex 甯冨眬 */
flex-direction: row; /* 鍏抽敭锛氭í鍚戞帓鍒?鏂囧瓧鍜屾暟瀛?*/
align-items: center; /* 鍨傜洿灞呬腑 */
justify-content: center;
position: relative;
height: 100%;
border-bottom: 3px solid transparent;
transition: all 0.3s ease;
white-space: nowrap; /* 防止换行 */
flex: 1; /* 关键：均分宽度，消除滚动条 */
min-width: 0; /* 允许压缩 */
white-space: nowrap; /* 闃叉鎹㈣ */
flex: 1; /* 鍏抽敭锛氬潎鍒嗗搴︼紝娑堥櫎婊氬姩鏉?*/
min-width: 0; /* 鍏佽鍘嬬缉 */
}
.tab-item.active {
@@ -695,14 +695,14 @@ const onRefresh = () => {
}
.tab-name {
font-size: 14px; /* 微调字体大小适配小屏 */
font-size: 14px; /* 寰皟瀛椾綋澶у皬閫傞厤灏忓睆 */
overflow: hidden;
text-overflow: ellipsis;
}
/* 徽标样式优化 - 放在文字右边 */
/* 寰芥爣鏍峰紡浼樺寲 - 鏀惧湪鏂囧瓧鍙宠竟 */
.tab-badge {
background-color: #FF5722;
background-color: #ff5000;
color: white;
font-size: 10px;
padding: 1px 5px;
@@ -710,24 +710,24 @@ const onRefresh = () => {
min-width: 16px;
text-align: center;
font-weight: bold;
margin-left: 4px; /* 距离文字的间距 */
margin-left: 4px; /* 璺濈鏂囧瓧鐨勯棿璺?*/
display: flex;
align-items: center;
justify-content: center;
height: 16px;
}
/* 消息内容区 */
/* 娑堟伅鍐呭鍖?*/
.messages-content {
flex: 1; /* 关键：自适应剩余高度 */
height: 0; /* 关键：强制flex item计算高度 */
flex: 1; /* 鍏抽敭锛氳嚜閫傚簲鍓╀綑楂樺害 */
height: 0; /* 鍏抽敭锛氬己鍒秄lex item璁＄畻楂樺害 */
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding-bottom: 20px;
}
/* 客服信息区域 */
/* 瀹㈡湇淇℃伅鍖哄煙 */
.customer-service-info {
background: white;
border-radius: 12px;
@@ -802,7 +802,7 @@ const onRefresh = () => {
font-weight: 500;
}
/* 消息项 */
/* 娑堟伅椤?*/
.message-section {
padding: 10px;
}
@@ -931,7 +931,7 @@ const onRefresh = () => {
.message-unread-count {
font-size: 11px;
color: white;
background: #FF5722;
background: #ff5000;
padding: 2px 6px;
border-radius: 10px;
min-width: 18px;
@@ -1000,7 +1000,7 @@ const onRefresh = () => {
.order-status.processing {
background: #FFF3E0;
color: #FF9800;
color: #ff5000;
}
.order-status.completed {
@@ -1010,7 +1010,7 @@ const onRefresh = () => {
.important-tag {
display: inline-block;
background-color: #FF5722;
background-color: #ff5000;
color: white;
font-size: 11px;
padding: 3px 8px;
@@ -1019,7 +1019,7 @@ const onRefresh = () => {
}
.coupon-info {
background: linear-gradient(135deg, #FF9800, #FF5722);
background: linear-gradient(135deg, #ff5000, #ff5000);
border-radius: 8px;
padding: 10px;
margin-top: 8px;
@@ -1048,7 +1048,7 @@ const onRefresh = () => {
align-self: flex-start;
}
/* 客服系统提示 */
/* 瀹㈡湇绯荤粺鎻愮ず */
.service-tips {
background: #FFF3E0;
border-radius: 10px;
@@ -1061,7 +1061,7 @@ const onRefresh = () => {
.tip-icon {
font-size: 18px;
color: #FF9800;
color: #ff5000;
flex-shrink: 0;
margin-top: 2px;
}
@@ -1072,7 +1072,7 @@ const onRefresh = () => {
line-height: 1.5;
}
/* 空状态 */
/* 绌虹姸鎬?*/
.empty-messages {
display: flex;
flex-direction: column;
@@ -1099,7 +1099,7 @@ const onRefresh = () => {
color: #999;
}
/* 底部浮动按钮 */
/* 搴曢儴娴姩鎸夐挳 */
.floating-action {
position: fixed;
bottom: 20px;
@@ -1133,7 +1133,7 @@ const onRefresh = () => {
height: 80px;
}
/* 响应式适配 */
/* 鍝嶅簲寮忛€傞厤 */
@media screen and (max-width: 320px) {
.tab-name {
font-size: 13px;
@@ -1167,17 +1167,17 @@ const onRefresh = () => {
grid-template-columns: repeat(4, 1fr);
}
/* 平板和桌面端优化标签栏显示 */
/* 骞虫澘鍜屾闈㈢浼樺寲鏍囩鏍忔樉绀?*/
.message-tabs {
justify-content: flex-start; /* 左对齐 */
justify-content: flex-start; /* 宸﹀榻?*/
}
.tab-item {
padding: 0 24px; /* 增加点击区域 */
padding: 0 24px; /* 澧炲姞鐐瑰嚮鍖哄煙 */
}
}
/* 平板设备 */
/* 骞虫澘璁惧 */
@media screen and (min-width: 768px) {
.smart-navbar {
padding: 0 30px;
@@ -1200,7 +1200,7 @@ const onRefresh = () => {
}
}
/* 暗黑模式适配 */
/* 鏆楅粦妯″紡閫傞厤 */
@media (prefers-color-scheme: dark) {
.messages-page {
background-color: #121212;
@@ -1276,3 +1276,4 @@ const onRefresh = () => {
}
}
</style>