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

121
pages/mall/consumer/chat_new.uvue
View File

@@ -1,22 +1,22 @@
<template>
<template>
<view class="chat-page">
<!-- 聊天头部 -->
<!-- 鑱婂ぉ澶撮儴 -->
<view class="chat-header" :style="{ paddingTop: statusBarHeight + 'px' }">
<view class="header-content">
<view class="header-back" @click="goBack">
<text class="back-icon">‹</text>
<text class="back-icon">鈥?/text>
</view>
<view class="header-info">
<text class="chat-title">{{ merchantName || '在线客服' }}</text>
<text class="chat-status">在线</text>
<text class="chat-title">{{ merchantName || '鍦ㄧ嚎瀹㈡湇' }}</text>
<text class="chat-status">鍦ㄧ嚎</text>
</view>
<view class="header-actions">
<text class="action-icon" @click="showMoreActions">⋮</text>
<text class="action-icon" @click="showMoreActions">鈰?/text>
</view>
</view>
</view>
<!-- 聊天内容 -->
<!-- 鑱婂ぉ鍐呭 -->
<scroll-view
scroll-y
class="chat-content"
@@ -24,29 +24,29 @@
scroll-with-animation
@scrolltoupper="loadMoreHistory"
>
<!-- 占位，防止内容被头部遮挡 -->
<!-- 鍗犱綅锛岄槻姝㈠唴瀹硅澶撮儴閬尅 -->
<view :style="{ height: (statusBarHeight + 44) + 'px' }"></view>
<!-- 聊天消息列表 -->
<!-- 鑱婂ぉ娑堟伅鍒楄〃 -->
<view class="chat-messages">
<!-- 系统提示 -->
<!-- 绯荤粺鎻愮ず -->
<view class="message-item system">
<text class="system-text">已连接到商家，开始聊天吧</text>
<text class="system-text">宸茶繛鎺ュ埌鍟嗗锛屽紑濮嬭亰澶╁惂</text>
</view>
<!-- 消息项 -->
<!-- 娑堟伅椤?-->
<view
v-for="(message, index) in messages"
:key="message.id"
:class="['message-item', message.type]"
:id="'msg-' + message.id"
>
<!-- 时间显示逻辑：每5分钟显示一次时间 -->
<!-- 鏃堕棿鏄剧ず閫昏緫锛氭瘡5鍒嗛挓鏄剧ず涓€娆℃椂闂?-->
<view v-if="shouldShowTime(index)" class="time-divider">
<text>{{ formatTime(message.rawTime) }}</text>
</view>
<!-- 对方消息 -->
<!-- 瀵规柟娑堟伅 -->
<view v-if="message.type === 'received'" class="message-wrapper">
<image
class="avatar"
@@ -61,7 +61,7 @@
</view>
</view>
<!-- 我的消息 -->
<!-- 鎴戠殑娑堟伅 -->
<view v-else class="message-wrapper me">
<view class="message-content-wrapper">
<view class="message-bubble me">
@@ -75,24 +75,24 @@
/>
</view>
</view>
<!-- 底部填充，防止被输入框遮挡 -->
<!-- 搴曢儴濉厖锛岄槻姝㈣杈撳叆妗嗛伄鎸?-->
<view style="height: 20px;"></view>
<view id="bottom-anchor" style="height: 1px;"></view>
</view>
</scroll-view>
<!-- 聊天输入区 -->
<!-- 鑱婂ぉ杈撳叆鍖?-->
<view class="chat-input-area">
<view class="input-tools">
<text class="tool-icon" @click="toggleEmoji">😊</text>
<!-- <text class="tool-icon" @click="chooseImage">📷</text> -->
<text class="tool-icon" @click="toggleEmoji">馃槉</text>
<!-- <text class="tool-icon" @click="chooseImage">馃摲</text> -->
</view>
<view class="input-wrapper">
<input
class="message-input"
v-model="inputMessage"
placeholder="请输入消息..."
placeholder="璇疯緭鍏ユ秷鎭?.."
:adjust-position="true"
confirm-type="send"
@confirm="sendMessage"
@@ -102,11 +102,11 @@
:class="{ active: inputMessage.trim().length > 0 }"
@click="sendMessage"
>
发送
鍙戦€?
</button>
</view>
<!-- 表情选择器 (简化版) -->
<!-- 琛ㄦ儏閫夋嫨鍣?(绠€鍖栫増) -->
<scroll-view scroll-y v-if="showEmoji" class="emoji-picker">
<view class="emoji-grid">
<text
@@ -131,13 +131,13 @@ import type { ChatMessage } from '@/utils/supabaseService.uts'
import supa from '@/components/supadb/aksupainstance.uts'
// import { getCurrentUser } from '@/utils/store.uts'
// 界面状态
// 鐣岄潰鐘舵€?
const statusBarHeight = ref(0)
const scrollToView = ref('')
const showEmoji = ref(false)
const inputMessage = ref('')
// 业务数据
// 涓氬姟鏁版嵁
const merchantId = ref('')
const merchantName = ref('')
const merchantLogo = ref('')
@@ -145,38 +145,38 @@ const userAvatar = ref('')
const currentUserId = ref('')
const messages = ref<any[]>([])
const emojiList = ['😊', '😂', '👍', '👌', '❤️', '🌹', '🙏', '🎉', '😡', '😭', '🤔', '👋', '🤝', '💊', '🏥']
const emojiList = ['馃槉', '馃槀', '馃憤', '馃憣', '鉂わ笍', '馃尮', '馃檹', '馃帀', '馃槨', '馃槶', '馃', '馃憢', '馃', '馃拪', '馃彞']
let realtimeChannel: any | null = null
onLoad((options: any) => {
// 获取状态栏高度
// 鑾峰彇鐘舵€佹爮楂樺害
const sys = uni.getSystemInfoSync()
statusBarHeight.value = sys.statusBarHeight ?? 0
// 获取参数
// 鑾峰彇鍙傛暟
const optObj = (options instanceof UTSJSONObject) ? (options as UTSJSONObject) : (JSON.parse(JSON.stringify(options ?? {})) as UTSJSONObject)
const mid = optObj.getString('merchantId') ?? ''
if (mid !== '') {
merchantId.value = mid
merchantName.value = optObj.getString('merchantName') ?? '商家'
merchantName.value = optObj.getString('merchantName') ?? '鍟嗗'
merchantLogo.value = optObj.getString('merchantLogo') ?? ''
console.log('开始聊天，商家ID:', merchantId.value)
console.log('寮€濮嬭亰澶╋紝鍟嗗ID:', merchantId.value)
} else {
merchantName.value = '平台客服'
merchantName.value = '骞冲彴瀹㈡湇'
}
// 获取当前用户
// 鑾峰彇褰撳墠鐢ㄦ埛
const uid = supabaseService.getCurrentUserId()
if (uid != null) {
currentUserId.value = uid
// 简单获取一下头像，实际应该从Profile获取
// 绠€鍗曡幏鍙栦竴涓嬪ご鍍忥紝瀹為檯搴旇浠嶱rofile鑾峰彇
userAvatar.value = 'https://picsum.photos/100'
}
// 加载历史消息
// 鍔犺浇鍘嗗彶娑堟伅
loadHistory()
// 开启实时订阅
// 寮€鍚疄鏃惰闃?
startRealtimeSubscription()
})
@@ -186,15 +186,15 @@ onUnmounted(() => {
}
})
// 加载历史记录
// 鍔犺浇鍘嗗彶璁板綍
const loadHistory = async () => {
let rawMsgs: ChatMessage[] = []
if (merchantId.value) {
// 获取与特定商家的聊天
// 鑾峰彇涓庣壒瀹氬晢瀹剁殑鑱婂ぉ
rawMsgs = await supabaseService.getChatMessages(merchantId.value)
} else {
// 获取所有（比如客服）
// 鑾峰彇鎵€鏈夛紙姣斿瀹㈡湇锛?
rawMsgs = await supabaseService.getUserChatMessages()
}
@@ -205,14 +205,14 @@ const loadHistory = async () => {
}
const loadMoreHistory = () => {
// TODO: 实现下拉加载更多历史
// TODO: 瀹炵幇涓嬫媺鍔犺浇鏇村鍘嗗彶
}
// 开启实时订阅
// 寮€鍚疄鏃惰闃?
const startRealtimeSubscription = () => {
if (currentUserId.value == '') return
console.log('开启消息监听...')
console.log('寮€鍚秷鎭洃鍚?..')
const filterObj = ({
event: 'INSERT',
schema: 'public',
@@ -223,12 +223,12 @@ const startRealtimeSubscription = () => {
'postgres_changes',
filterObj,
(payload: any) => {
console.log('收到新消息:', payload)
console.log('鏀跺埌鏂版秷鎭?', payload)
const payloadObj = (payload instanceof UTSJSONObject) ? (payload as UTSJSONObject) : (JSON.parse(JSON.stringify(payload ?? {})) as UTSJSONObject)
const newAny = payloadObj.get('new')
if (newAny == null) return
const newMsg = (newAny instanceof UTSJSONObject) ? (newAny as UTSJSONObject) : (JSON.parse(JSON.stringify(newAny)) as UTSJSONObject)
// 只有来自当前聊天的商家的消息才显示，或者如果是全局客服模式
// 鍙湁鏉ヨ嚜褰撳墠鑱婂ぉ鐨勫晢瀹剁殑娑堟伅鎵嶆樉绀猴紝鎴栬€呭鏋滄槸鍏ㄥ眬瀹㈡湇妯″紡
const senderId = newMsg.getString('sender_id') ?? ''
if (senderId === merchantId.value || merchantId.value == '') {
const formatted = formatMessage({
@@ -237,14 +237,14 @@ const startRealtimeSubscription = () => {
msg_type: newMsg.getString('msg_type') ?? '',
sender_id: senderId,
receiver_id: newMsg.getString('receiver_id') ?? '',
is_from_user: false, // 收到的一定不是自己发的
is_from_user: false, // 鏀跺埌鐨勪竴瀹氫笉鏄嚜宸卞彂鐨?
created_at: newMsg.getString('created_at') ?? ''
} as ChatMessage)
messages.value.push(formatted)
scrollToBottom()
// 震动提示
// 闇囧姩鎻愮ず
uni.vibrateShort({})
}
}
@@ -252,11 +252,11 @@ const startRealtimeSubscription = () => {
.subscribe()
}
// 格式化消息
// 鏍煎紡鍖栨秷鎭?
const formatMessage = (m: ChatMessage): any => {
// 如果 sender_id 是自己，就是 'sent'，否则 'received'
// 注意：数据库字段 is_from_user 有时可能只是标记是否由C端用户发起，
// 最准确的是对比 id
// 濡傛灉 sender_id 鏄嚜宸憋紝灏辨槸 'sent'锛屽惁鍒?'received'
// 娉ㄦ剰锛氭暟鎹簱瀛楁 is_from_user 鏈夋椂鍙兘鍙槸鏍囪鏄惁鐢盋绔敤鎴峰彂璧凤紝
// 鏈€鍑嗙‘鐨勬槸瀵规瘮 id
let isMe = false
if (currentUserId.value) {
isMe = m.sender_id === currentUserId.value
@@ -277,7 +277,7 @@ const sendMessage = async () => {
const text = inputMessage.value.trim()
if (text == '') return
// 乐观更新 UI
// 涔愯鏇存柊 UI
const tempId = 'temp_' + Date.now()
const tempMsg = {
id: tempId,
@@ -291,21 +291,21 @@ const sendMessage = async () => {
scrollToBottom()
showEmoji.value = false
// 发送请求
// 注意：如果 merchantId 为空，sendChatMessage 第二个参数传 null，会变成无主消息
// 鍙戦€佽姹?
// 娉ㄦ剰锛氬鏋?merchantId 涓虹┖锛宻endChatMessage 绗簩涓弬鏁颁紶 null锛屼細鍙樻垚鏃犱富娑堟伅
const success = await supabaseService.sendChatMessage(text, merchantId.value ? merchantId.value : null)
if (!success) {
uni.showToast({ title: '发送失败', icon: 'none' })
// 这里可以加一个重试按钮或移除消息
uni.showToast({ title: '鍙戦€佸け璐?, icon: 'none' })
// 杩欓噷鍙互鍔犱竴涓噸璇曟寜閽垨绉婚櫎娑堟伅
}
}
const scrollToBottom = () => {
// 延时滚动以确保视图更新
// 寤舵椂婊氬姩浠ョ‘淇濊鍥炬洿鏂?
setTimeout(() => {
scrollToView.value = 'bottom-anchor'
// Hack: 重置再设置以强制触发
// Hack: 閲嶇疆鍐嶈缃互寮哄埗瑙﹀彂
setTimeout(() => {
scrollToView.value = 'msg-' + (messages.value.length > 0 ? messages.value[messages.value.length-1].id : '')
}, 50)
@@ -320,13 +320,13 @@ const formatTime = (isoString: string): string => {
const date = new Date(isoString)
const now = new Date()
// 如果是今天，显示 HH:mm
// 濡傛灉鏄粖澶╋紝鏄剧ず HH:mm
if (date.toDateString() === now.toDateString()) {
const h = date.getHours().toString().padStart(2, '0')
const m = date.getMinutes().toString().padStart(2, '0')
return `${h}:${m}`
}
// 否则显示 MM-DD HH:mm
// 鍚﹀垯鏄剧ず MM-DD HH:mm
const mo = (date.getMonth() + 1).toString().padStart(2, '0')
const d = date.getDate().toString().padStart(2, '0')
const h = date.getHours().toString().padStart(2, '0')
@@ -340,7 +340,7 @@ const shouldShowTime = (index: number): boolean => {
const curr = messages.value[index]
const t1 = new Date(prev.rawTime).getTime()
const t2 = new Date(curr.rawTime).getTime()
// 间隔超过5分钟(300000ms)显示时间
// 闂撮殧瓒呰繃5鍒嗛挓(300000ms)鏄剧ず鏃堕棿
return (t2 - t1) > 300000
}
@@ -357,10 +357,10 @@ const insertEmoji = (emoji: string) => {
const showMoreActions = () => {
uni.showActionSheet({
itemList: ['清空记录', '投诉商家'],
itemList: ['娓呯┖璁板綍', '鎶曡瘔鍟嗗'],
success: (res) => {
if (res.tapIndex === 0) {
messages.value = [] // 仅本地清空
messages.value = [] // 浠呮湰鍦版竻绌?
}
}
})
@@ -620,3 +620,4 @@ const showMoreActions = () => {
}
</style>