634 lines
17 KiB
Plaintext
634 lines
17 KiB
Plaintext
<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>
|
||
</view>
|
||
<view class="header-info">
|
||
<text class="chat-title">{{ getDisplayMerchantName() }}</text>
|
||
<text class="chat-status">在线</text>
|
||
</view>
|
||
<view class="header-actions">
|
||
<text class="action-icon" @click="showMoreActions">⋯</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 聊天内容 -->
|
||
<scroll-view
|
||
direction="vertical"
|
||
class="chat-content"
|
||
:scroll-into-view="scrollToView"
|
||
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>
|
||
</view>
|
||
|
||
<!-- 消息项 -->
|
||
<view
|
||
v-for="(message, index) in messages"
|
||
:key="message.id"
|
||
:class="['message-item', message.type]"
|
||
:id="'msg-' + message.id"
|
||
>
|
||
<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"
|
||
:src="getDisplayMerchantLogo()"
|
||
mode="aspectFill"
|
||
/>
|
||
<view class="message-content-wrapper">
|
||
|
||
<view class="message-bubble">
|
||
<text class="message-text">{{ message.content }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 我的消息 -->
|
||
<view v-else class="message-wrapper me">
|
||
<view class="message-content-wrapper">
|
||
<view class="message-bubble me">
|
||
<text class="message-text">{{ message.content }}</text>
|
||
</view>
|
||
</view>
|
||
<image
|
||
class="avatar me"
|
||
:src="userAvatar !== '' ? userAvatar : '/static/images/default.png'"
|
||
mode="aspectFill"
|
||
/>
|
||
</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>
|
||
</view>
|
||
|
||
<view class="input-wrapper">
|
||
<input
|
||
class="message-input"
|
||
v-model="inputMessage"
|
||
placeholder="请输入要发送的消息..."
|
||
:adjust-position="true"
|
||
confirm-type="send"
|
||
@confirm="sendMessage"
|
||
/>
|
||
<button
|
||
class="send-button"
|
||
:class="{ active: inputMessage.trim().length > 0 }"
|
||
@click="sendMessage"
|
||
>
|
||
发送
|
||
</button>
|
||
</view>
|
||
|
||
<!-- 消息选择器（例如表情） -->
|
||
<scroll-view direction="vertical" v-if="showEmoji" class="emoji-picker">
|
||
<view class="emoji-grid">
|
||
<text
|
||
v-for="emoji in emojiList"
|
||
:key="emoji"
|
||
class="emoji-item"
|
||
@click="insertEmoji(emoji)"
|
||
>
|
||
{{ emoji }}
|
||
</text>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="uts">
|
||
import { ref, onUnmounted } from 'vue'
|
||
import { onLoad } from '@dcloudio/uni-app'
|
||
import supabaseService from '@/utils/supabaseService.uts'
|
||
import type { ChatMessage } from '@/utils/supabaseService.uts'
|
||
import supa from '@/components/supadb/aksupainstance.uts'
|
||
import type { AkSupaRealtimeChannel } from '@/components/supadb/aksupa.uts'
|
||
|
||
type ChatViewMessage = {
|
||
id: string
|
||
type: string
|
||
content: string
|
||
rawTime: string
|
||
senderId: string
|
||
}
|
||
|
||
// 界面状态
|
||
const statusBarHeight = ref<number>(0)
|
||
const scrollToView = ref<string>('')
|
||
const showEmoji = ref<boolean>(false)
|
||
const inputMessage = ref<string>('')
|
||
|
||
// 业务数据
|
||
const merchantId = ref<string>('')
|
||
const merchantName = ref<string>('')
|
||
const merchantLogo = ref<string>('')
|
||
const userAvatar = ref<string>('')
|
||
const currentUserId = ref<string>('')
|
||
const messages = ref<ChatViewMessage[]>([])
|
||
|
||
const emojiList = ['😊','🙂','😂','😍','😢','👍','👏','😄','😁','😜','😭','😮','🤔','😎','😅']
|
||
let realtimeChannel: AkSupaRealtimeChannel | null = null
|
||
|
||
function loadMoreHistory(): void {
|
||
// TODO: 实现下拉加载更多历史
|
||
}
|
||
|
||
function scrollToBottom(): void {
|
||
// 延时滚动以确保视图更新
|
||
setTimeout(() => {
|
||
scrollToView.value = 'bottom-anchor'
|
||
// Hack: 重置再设置以强制触发
|
||
setTimeout(() => {
|
||
const lastId = messages.value.length > 0 ? messages.value[messages.value.length - 1].id : ''
|
||
scrollToView.value = lastId != '' ? ('msg-' + lastId) : 'bottom-anchor'
|
||
}, 50)
|
||
}, 100)
|
||
}
|
||
|
||
function emptyChatMessages(): ChatViewMessage[] {
|
||
return [] as ChatViewMessage[]
|
||
}
|
||
|
||
function formatMessage(m: ChatMessage): ChatViewMessage {
|
||
let isMe = false
|
||
if (currentUserId.value != '') {
|
||
isMe = m.sender_id === currentUserId.value
|
||
} else {
|
||
isMe = m.is_from_user === true
|
||
}
|
||
|
||
const rawTime = m.created_at != null && m.created_at != '' ? m.created_at : new Date().toISOString()
|
||
const content = m.content != null ? m.content.toString() : ''
|
||
const senderId = m.sender_id != null ? m.sender_id.toString() : ''
|
||
|
||
return {
|
||
id: m.id,
|
||
type: isMe ? 'sent' : 'received',
|
||
content: content,
|
||
rawTime: rawTime,
|
||
senderId: senderId
|
||
}
|
||
}
|
||
|
||
function getDisplayMerchantName(): string {
|
||
const name = merchantName.value != null ? merchantName.value.toString() : ''
|
||
return name !== '' ? name : '在线客服'
|
||
}
|
||
|
||
function getDisplayMerchantLogo(): string {
|
||
const logo = merchantLogo.value != null ? merchantLogo.value.toString() : ''
|
||
return logo !== '' ? logo : '/static/logo.png'
|
||
}
|
||
|
||
async function loadHistory(): Promise<void> {
|
||
let rawMsgs: ChatMessage[] = []
|
||
|
||
if (merchantId.value != '') {
|
||
rawMsgs = await supabaseService.getChatMessages(merchantId.value)
|
||
} else {
|
||
rawMsgs = await supabaseService.getUserChatMessages()
|
||
}
|
||
|
||
const formatted = rawMsgs.reverse().map((m: ChatMessage) => formatMessage(m))
|
||
messages.value = formatted
|
||
|
||
scrollToBottom()
|
||
}
|
||
|
||
function startRealtimeSubscription(): void {
|
||
if (currentUserId.value == '') return
|
||
|
||
console.log('启动实时订阅')
|
||
const filterObj = ({
|
||
event: 'INSERT',
|
||
schema: 'public',
|
||
table: 'ml_chat_messages'
|
||
} as UTSJSONObject)
|
||
|
||
realtimeChannel = supa.channel(`chat_${currentUserId.value}`)
|
||
.on(
|
||
'postgres_changes',
|
||
filterObj,
|
||
(payload: UTSJSONObject) => {
|
||
console.log('收到变更事件', payload)
|
||
const newAny = payload.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 realtimeMessage = {
|
||
id: newMsg.getString('id') ?? '',
|
||
content: newMsg.getString('content') ?? '',
|
||
msg_type: newMsg.getString('msg_type') ?? '',
|
||
sender_id: senderId,
|
||
receiver_id: newMsg.getString('receiver_id') ?? '',
|
||
is_from_user: false,
|
||
created_at: newMsg.getString('created_at') ?? ''
|
||
} as ChatMessage
|
||
const formatted = formatMessage(realtimeMessage)
|
||
|
||
messages.value.push(formatted)
|
||
scrollToBottom()
|
||
}
|
||
}
|
||
)
|
||
.subscribe((_status) => {})
|
||
}
|
||
|
||
function goBack(): void {
|
||
uni.navigateBack({})
|
||
}
|
||
|
||
function formatTime(isoString: string): string {
|
||
const date = new Date(isoString)
|
||
const now = new Date()
|
||
|
||
if (date.toDateString() === now.toDateString()) {
|
||
const h = date.getHours().toString().padStart(2, "0")
|
||
const m = date.getMinutes().toString().padStart(2, "0")
|
||
return `${h}:${m}`
|
||
}
|
||
|
||
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")
|
||
const m = date.getMinutes().toString().padStart(2, "0")
|
||
return `${mo}-${d} ${h}:${m}`
|
||
}
|
||
|
||
function shouldShowTime(index: number): boolean {
|
||
if (index === 0) return true
|
||
const prev = messages.value[index - 1]
|
||
const curr = messages.value[index]
|
||
const t1 = new Date(prev.rawTime).getTime()
|
||
const t2 = new Date(curr.rawTime).getTime()
|
||
return (t2 - t1) > 300000
|
||
}
|
||
|
||
function toggleEmoji(): void {
|
||
showEmoji.value = !showEmoji.value
|
||
if (showEmoji.value) {
|
||
scrollToBottom()
|
||
}
|
||
}
|
||
|
||
function insertEmoji(emoji: string): void {
|
||
inputMessage.value += emoji
|
||
}
|
||
|
||
function showMoreActions(): void {
|
||
uni.showActionSheet({
|
||
itemList: ['清空记录', '联系客服'],
|
||
success: (res) => {
|
||
if (res.tapIndex === 0) {
|
||
messages.value = emptyChatMessages()
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
onLoad((options) => {
|
||
// 获取状态栏高度
|
||
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') ?? '商家'
|
||
merchantLogo.value = optObj.getString('merchantLogo') ?? '/static/logo.png'
|
||
console.log('已初始化会话，商家ID:', merchantId.value)
|
||
} else {
|
||
merchantName.value = '平台客服'
|
||
}
|
||
|
||
// 获取当前用户
|
||
const uid = supabaseService.getCurrentUserId()
|
||
if (uid != null) {
|
||
currentUserId.value = uid
|
||
// 简单获取一下头像，实际应该从 Profile 获取
|
||
userAvatar.value = '/static/logo.png'
|
||
}
|
||
|
||
// 加载历史消息
|
||
loadHistory()
|
||
|
||
// 启动实时订阅
|
||
startRealtimeSubscription()
|
||
})
|
||
|
||
onUnmounted(() => {
|
||
if (realtimeChannel != null) {
|
||
supa.removeChannel(realtimeChannel as AkSupaRealtimeChannel)
|
||
}
|
||
})
|
||
|
||
const sendMessage = async () => {
|
||
const text = inputMessage.value.trim()
|
||
if (text == '') return
|
||
|
||
// 乐观更新 UI
|
||
const tempId = 'temp_' + Date.now()
|
||
const tempMsg: ChatViewMessage = {
|
||
id: tempId,
|
||
type: 'sent',
|
||
content: text,
|
||
rawTime: new Date().toISOString(),
|
||
senderId: currentUserId.value
|
||
}
|
||
messages.value.push(tempMsg)
|
||
inputMessage.value = ''
|
||
scrollToBottom()
|
||
showEmoji.value = false
|
||
|
||
// 发送请求
|
||
// 注意：如果 merchantId 为空，sendChatMessage 第二个参数传 null，会变成无主消息
|
||
const targetMerchantId = merchantId.value != '' ? merchantId.value : null
|
||
const success = await supabaseService.sendChatMessage(text, targetMerchantId)
|
||
|
||
if (!success) {
|
||
uni.showToast({ title: '发送失败', icon: 'none' })
|
||
// 这里可以重试或删除临时消息
|
||
}
|
||
}
|
||
|
||
</script>
|
||
|
||
<style>
|
||
.chat-page {
|
||
background-color: #f5f5f5;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.chat-header {
|
||
background-color: #fff;
|
||
border-bottom: 1px solid #eee;
|
||
z-index: 100;
|
||
}
|
||
|
||
.header-content {
|
||
height: 44px;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
padding: 0 16px;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.header-back {
|
||
width: 40px;
|
||
height: 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.back-icon {
|
||
font-size: 32px;
|
||
color: #333;
|
||
line-height: 1;
|
||
}
|
||
|
||
.header-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.chat-title {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.chat-status {
|
||
font-size: 10px;
|
||
color: #4CAF50;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.header-actions {
|
||
width: 40px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.action-icon {
|
||
font-size: 24px;
|
||
color: #333;
|
||
}
|
||
|
||
.chat-content {
|
||
flex: 1;
|
||
/* height: 0; flex grow handles it */
|
||
background-color: #f5f5f5;
|
||
padding: 10px 0;
|
||
}
|
||
|
||
.chat-messages {
|
||
padding: 16px;
|
||
padding-bottom: 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.time-divider {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin: 16px 0;
|
||
}
|
||
|
||
.time-divider text {
|
||
background-color: rgba(0,0,0,0.1);
|
||
color: #999;
|
||
font-size: 12px;
|
||
padding: 4px 8px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.system {
|
||
justify-content: center;
|
||
margin-bottom: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.system-text {
|
||
background-color: #e0e0e0;
|
||
color: #666;
|
||
font-size: 12px;
|
||
padding: 4px 12px;
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.message-item {
|
||
margin-bottom: 16px;
|
||
display: flex;
|
||
width: 100%;
|
||
}
|
||
|
||
.received {
|
||
justify-content: flex-start;
|
||
flex-direction: row;
|
||
}
|
||
|
||
.sent {
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.message-wrapper {
|
||
display: flex;
|
||
flex-direction: row;
|
||
max-width: 80%;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.me {
|
||
flex-direction: row; /* Keep standard flow but justify-end handles position */
|
||
}
|
||
|
||
|
||
.avatar {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 20px;
|
||
background-color: #ddd;
|
||
margin-right: 8px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.avatar.me {
|
||
margin-right: 0;
|
||
margin-left: 8px;
|
||
}
|
||
|
||
.message-content-wrapper {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.sender-name {
|
||
font-size: 12px;
|
||
color: #999;
|
||
margin-bottom: 4px;
|
||
margin-left: 4px;
|
||
}
|
||
|
||
.message-bubble {
|
||
background-color: #fff;
|
||
padding: 10px 14px;
|
||
border-radius: 4px 12px 12px 12px;
|
||
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
|
||
}
|
||
|
||
.message-bubble.me {
|
||
background-color: #95ec69; /* WeChat green */
|
||
border-radius: 12px 4px 12px 12px;
|
||
}
|
||
|
||
.message-text {
|
||
font-size: 15px;
|
||
color: #333;
|
||
line-height: 1.4;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.chat-input-area {
|
||
background-color: #f9f9f9;
|
||
padding: 10px;
|
||
border-top: 1px solid #e0e0e0;
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
}
|
||
|
||
.input-wrapper {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
background-color: #fff;
|
||
border-radius: 24px;
|
||
padding: 8px 12px;
|
||
}
|
||
|
||
.message-input {
|
||
flex: 1;
|
||
font-size: 16px;
|
||
height: 36px;
|
||
}
|
||
|
||
.send-button {
|
||
margin-left: 8px;
|
||
background-color: #e0e0e0;
|
||
color: #999;
|
||
font-size: 14px;
|
||
padding: 4px 12px;
|
||
border-radius: 16px;
|
||
border: none;
|
||
line-height: 24px;
|
||
}
|
||
|
||
.send-button.active {
|
||
background-color: #4CAF50;
|
||
color: #fff;
|
||
}
|
||
|
||
.input-tools {
|
||
display: flex;
|
||
flex-direction: row;
|
||
padding-bottom: 8px;
|
||
}
|
||
|
||
.tool-icon {
|
||
font-size: 24px;
|
||
color: #666;
|
||
margin-right: 16px;
|
||
padding: 4px;
|
||
}
|
||
|
||
.emoji-picker {
|
||
height: 150px;
|
||
background-color: #f9f9f9;
|
||
border-top: 1px solid #eee;
|
||
padding: 10px;
|
||
}
|
||
|
||
.emoji-grid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
flex-direction: row;
|
||
}
|
||
|
||
.emoji-item {
|
||
font-size: 24px;
|
||
padding: 8px;
|
||
margin: 4px;
|
||
}
|
||
|
||
</style>
|