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

consumer模块完成90%，前端完成supabase对接

Browse Source
This commit is contained in:
cyh666666
2026-02-03 17:11:50 +08:00
parent b6200cda28
commit 8a535e3f38
69 changed files with 5020 additions and 33273 deletions
Download Patch File Download Diff File Expand all files Collapse all files

311
pages/mall/consumer/messages.uvue
View File

@@ -43,8 +43,8 @@
<!-- 客服消息 -->
<view v-if="activeTab === 'service'" class="message-section">
<!-- 在线客服卡片 -->
<view class="customer-service-info">
<!-- 在线客服卡片 (hidden) -->
<!-- <view class="customer-service-info">
<view class="service-header">
<text class="service-title">康乐医药在线客服</text>
<text class="service-status online">在线</text>
@@ -69,7 +69,7 @@
<text class="category-name">药品配送</text>
</view>
</view>
</view>
</view> -->
<!-- 客服消息列表 -->
<view
@@ -214,6 +214,7 @@
<script setup lang="uts">
import { ref, reactive, computed, onMounted } from 'vue'
import { supabaseService, type Notification, type ChatMessage } from '@/utils/supabaseService.uts'
// 响应式数据
const activeTab = ref<string>('service')
@@ -222,6 +223,7 @@ const loading = ref<boolean>(false)
const unreadCount = ref<number>(12)
const statusBarHeight = ref(0)
const scrollTop = ref(0)
const scrollHeight = ref(0)
// 初始化页面布局数据
const initPage = () => {
@@ -242,182 +244,11 @@ const messageTabs = reactive([
])
// Mock 客服消息数据
const serviceMessages = reactive([
{
id: 'service001',
title: '康乐医药在线客服',
role: '官方客服',
content: '您好，我是康乐医药在线客服，有什么可以帮助您的吗？',
lastMessage: '请问有什么药品需要咨询？',
time: '刚刚',
read: false,
type: 'service',
avatar: 'https://picsum.photos/50/50?random=service1',
online: true,
unreadCount: 3,
tags: ['在线', '专业药师'],
icon: '👨‍⚕️',
color: '#4CAF50'
},
{
id: 'service002',
title: '处方药咨询',
role: '药师',
content: '关于您的处方药咨询，我们已经收到，请提供处方照片。',
lastMessage: '已收到您的处方，正在审核中...',
time: '10:30',
read: true,
type: 'service',
avatar: 'https://picsum.photos/50/50?random=service2',
online: true,
unreadCount: 0,
tags: ['处方药', '审核'],
icon: '💊',
color: '#2196F3'
},
{
id: 'service003',
title: '药品配送服务',
role: '配送客服',
content: '您的订单预计今天下午送达，请保持电话畅通。',
lastMessage: '配送员正在路上，预计30分钟内送达',
time: '09:45',
read: false,
type: 'service',
avatar: 'https://picsum.photos/50/50?random=service3',
online: true,
unreadCount: 1,
tags: ['配送中', '今日达'],
icon: '🚚',
color: '#FF9800'
},
{
id: 'service004',
title: '用药指导',
role: '临床药师',
content: '关于您咨询的药品服用方法，建议饭后半小时服用。',
lastMessage: '记得按时服药，如有不适及时联系',
time: '昨天',
read: true,
type: 'service',
avatar: 'https://picsum.photos/50/50?random=service4',
online: false,
unreadCount: 0,
tags: ['用药指导', '专业'],
icon: '📋',
color: '#9C27B0'
},
{
id: 'service005',
title: '售后服务中心',
role: '售后专员',
content: '您申请的药品退换货已受理，我们会尽快处理。',
lastMessage: '退款将在3-5个工作日内退回原账户',
time: '前天',
read: false,
type: 'service',
avatar: 'https://picsum.photos/50/50?random=service5',
online: true,
unreadCount: 2,
tags: ['售后', '退换货'],
icon: '🔄',
color: '#F44336'
}
])
// Mock 系统通知数据
const systemMessages = reactive([
{
id: 'sys001',
title: '系统维护通知',
content: '平台将于今晚23:00-01:00进行系统维护，届时部分功能可能无法使用。',
time: '2023-11-23 15:30',
read: false,
type: 'system',
important: true
},
{
id: 'sys002',
title: '隐私政策更新',
content: '我们已更新隐私政策，请查阅相关条款。',
time: '2023-11-22 10:15',
read: true,
type: 'system',
important: false
},
{
id: 'sys003',
title: '账户安全提醒',
content: '检测到您的账户在异地登录，如果不是您本人操作，请及时修改密码。',
time: '2023-11-21 18:45',
read: false,
type: 'system',
important: true
}
])
// Mock 订单消息数据
const orderMessages = reactive([
{
id: 'order001',
title: '订单发货通知',
content: '您的订单202311230001已发货，点击查看物流信息。',
time: '2023-11-23 14:20',
read: false,
type: 'order',
order_no: '202311230001',
status: 'shipping',
statusText: '配送中'
},
{
id: 'order002',
title: '订单支付成功',
content: '您的订单202311220001支付成功，商家正在备货中。',
time: '2023-11-22 09:30',
read: false,
type: 'order',
order_no: '202311220001',
status: 'processing',
statusText: '处理中'
},
{
id: 'order003',
title: '订单确认收货',
content: '您的订单202311210001已完成，期待您的评价。',
time: '2023-11-21 16:15',
read: true,
type: 'order',
order_no: '202311210001',
status: 'completed',
statusText: '已完成'
}
])
const serviceMessages = reactive<any[]>([])
const systemMessages = reactive<any[]>([])
const orderMessages = reactive<any[]>([])
// Mock 优惠活动数据
const promoMessages = reactive([
{
id: 'promo001',
title: '新人专享券',
content: '您有一张新人专享优惠券已到账，有效期3天。',
time: '2023-11-23 08:00',
read: false,
type: 'promo',
coupon: '50元',
expiry: '2023-11-26',
claimed: false
},
{
id: 'promo002',
title: '双11大促',
content: '双11狂欢购物节，全场满300减50。',
time: '2023-11-22 12:30',
read: true,
type: 'promo',
coupon: '满300减50',
expiry: '2023-11-30',
claimed: false
}
])
const promoMessages = reactive<any[]>([])
// 计算当前显示的消息
const currentMessages = computed(() => {
@@ -432,18 +263,134 @@ const currentMessages = computed(() => {
// 生命周期
onMounted(() => {
console.log('Messages Page Mounted')
initPage()
loadMessages()
})
// 简单的日期格式化
const formatTime = (isoString: string): string => {
if (!isoString) return ''
try {
return isoString.split('T')[0]
} catch(e) {
return isoString
}
}
// 加载消息
const loadMessages = () => {
const loadMessages = async () => {
loading.value = true
setTimeout(() => {
// 模拟加载消息数据
try {
// 清空现有Mock数据
serviceMessages.length = 0
systemMessages.length = 0
orderMessages.length = 0
promoMessages.length = 0
// 1. 获取通知 (系统、订单、优惠)
const notes = await supabaseService.getUserNotifications()
notes.forEach((note: Notification) => {
// 这里使用 any 类型构建对象，以匹配 reactive 数组的结构
const item = {
id: note.id,
title: note.title,
content: note.content,
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: '点击查看',
expiry: '',
claimed: false,
order_no: '',
status: '',
statusText: '',
role: '',
lastMessage: '',
online: false,
unreadCount: 0,
tags: [],
icon: '',
color: ''
}
if (note.type === 'system') {
systemMessages.push(item)
} else if (note.type === 'order') {
orderMessages.push(item)
} else if (note.type === 'promotion') {
// map type 'promotion' to 'promo' for tab
item.type = 'promo'
promoMessages.push(item)
}
})
// 2. 获取客服消息 (Chat)
const chats = await supabaseService.getUserChatMessages()
if (chats.length > 0) {
// 简单处理：将最新一条显示为"在线客服"会话
const lastMsg = chats[0]
serviceMessages.push({
id: lastMsg.id,
title: '在线客服',
role: '客服专员',
content: lastMsg.content,
lastMessage: lastMsg.content,
time: formatTime(lastMsg.created_at || ''),
read: lastMsg.is_read,
type: 'service',
avatar: '/static/icons/service-avatar.png',
online: true,
unreadCount: chats.filter((m: ChatMessage) => !m.is_read && !m.is_from_user).length,
tags: ['官方客服'],
icon: '👩‍💼',
color: '#2196F3',
important: false,
coupon: '',
expiry: '',
claimed: false,
order_no: '',
status: '',
statusText: ''
})
} else {
// 如果没有真实数据，保留一个默认客服入口
serviceMessages.push({
id: 'default_service',
title: '在线客服',
role: '智能助手',
content: '有问题请随时联系我们',
lastMessage: '欢迎咨询',
time: '刚刚',
read: true,
type: 'service',
avatar: '/static/icons/service-avatar.png',
online: true,
unreadCount: 0,
tags: ['自动回复'],
icon: '🤖',
color: '#2196F3',
important: false,
coupon: '',
expiry: '',
claimed: false,
order_no: '',
status: '',
statusText: ''
})
}
} catch (e) {
console.error('加载消息失败', e)
} finally {
updateUnreadCount()
loading.value = false
}, 800)
}
}
// 更新未读数量