<template>
<div class="conversation
-container">
<div class="conversation
-list">
<div class="conversation
-list-item">
<div class="conversation
-list-title">待接入 {{ pendingConversations
.length }}</div>
<div class="conversation
-list-body">
<router
-link tag="div"
:to="chat
(conversation
)" replace v
-for="
(conversation, key
) in pendingConversations"
:key="key">
<div class="conversation
-item">
<div class="conversation
-item
-head">
<img
:src="conversation
.data
.avatar" class="conversation
-item
-avatar" />
</div>
<div class="item
-info">
<div class="item
-info
-name">{{ conversation
.data
.name }}</div>
<div v
-if="conversation
.lastMessage
.type === 'text'" class="item
-info
-message">
{{ conversation
.lastMessage
.payload
.text }}
</div>
<div v
-else
-if="conversation
.lastMessage
.type === 'image'" class="item
-info
-message">[图片消息]</div>
<div v
-else
-if="conversation
.lastMessage
.type === 'video'" class="item
-info
-message">[视频消息]</div>
<div v
-else
-if="conversation
.lastMessage
.type === 'audio'" class="item
-info
-message">[语音消息]</div>
<div v
-else
-if="conversation
.lastMessage
.type === 'order'" class="item
-info
-message">[自定义消息
:订单]
</div>
<div v
-else
-if="conversation
.lastMessage
.type === 'CS_END'" class="item
-info
-message">会话已结束</div>
<div v
-else
-if="conversation
.lastMessage
.type === 'CS_ACCEPT'" class="item
-info
-message">接入成功</div>
<div v
-else
-if="conversation
.lastMessage
.type === 'CS_TRANSFER'" class="item
-info
-message">
{{
conversation
.lastMessage
.senderId === currentAgent
.id ? `已转接给` +
conversation
.lastMessage
.payload
.transferTo
.data
.name
: '已接入来自' +
conversation
.lastMessage
.senderData
.name + '的转接'
}}
</div>
<div v
-else class="item
-info
-message">[未识别内容]</div>
</div>
</div>
</router
-link>
</div>
</div>
<div class="conversation
-list-item">
<div class="conversation
-list-title">已接入 {{ conversations
.length }}</div>
<div v
-if="conversations
.length" class="conversation
-list-body">
<router
-link tag="div"
:to="chat
(conversation
)" replace v
-for="
(conversation, key
) in conversations"
:key="key">
<div class="conversation
-item" @contextmenu
.prevent
.stop="e => showRightClickMenu
(e, conversation
)">
<div class="conversation
-item
-head">
<img
:src="conversation
.data
.avatar" class="conversation
-item
-avatar" />
<span v
-if="conversation
.unread" class="conversation
-item
-unread">{{ conversation
.unread }}</span>
</div>
<div class="conversation
-item
-info">
<div class="item
-info
-top">
<div class="item
-info
-name">{{ conversation
.data
.name }}</div>
<div class="item
-info
-time">{{ formatDate
(conversation
.lastMessage
.timestamp
) }}</div>
</div>
<div class="item
-info
-bottom">
<div v
-if="conversation
.lastMessage
.status === 'sending'" class="item
-info
-sending"></div>
<div v
-if="conversation
.lastMessage
.status === 'fail'" class="item
-info
-failed"></div>
<div v
-if="conversation
.lastMessage
.type === 'text'" class="item
-info
-message">
{{ conversation
.lastMessage
.senderId === currentAgent
.id ? '你'
:
conversation
.lastMessage
.senderData
.name }}
:
{{ conversation
.lastMessage
.payload
.text }}
</div>
<div v
-else
-if="conversation
.lastMessage
.type === 'image'" class="item
-info
-message">[图片消息]</div>
<div v
-else
-if="conversation
.lastMessage
.type === 'video'" class="item
-info
-message">[视频消息]</div>
<div v
-else
-if="conversation
.lastMessage
.type === 'audio'" class="item
-info
-message">[语音消息]</div>
<div v
-else
-if="conversation
.lastMessage
.type === 'order'" class="item
-info
-message">[自定义消息
:订单]
</div>
<div v
-else
-if="conversation
.lastMessage
.type === 'CS_END'" class="item
-info
-message">会话已结束</div>
<div v
-else
-if="conversation
.lastMessage
.type === 'CS_ACCEPT'" class="item
-info
-message">接入成功</div>
<div v
-else
-if="conversation
.lastMessage
.type === 'CS_TRANSFER'" class="item
-info
-message">
{{
conversation
.lastMessage
.senderId === currentAgent
.id ? `已转接给` +
conversation
.lastMessage
.payload
.transferTo
.data
.name
: '已接入来自' +
conversation
.lastMessage
.senderData
.name + '的转接'
}}
</div>
<div v
-else class="item
-info
-message">[未识别内容]</div>
</div>
</div>
</div>
</router
-link>
</div>
</div>
<div v
-if="rightClickMenu
.visible"
:style="{ 'left'
: rightClickMenu
.x + 'px', 'top'
: rightClickMenu
.y + 'px' }"
class="action
-box">
<div class="action
-item" @click="topConversation">{{ rightClickMenu
.conversation
.top ? '取消置顶'
: '置顶' }}</div>
<div class="action
-item" @click="deleteConversation">删除聊天</div>
</div>
</div>
<div class="conversation
-main">
<router
-view
:key="$route
.params
.id"></router
-view>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { useRouter, useRoute } from 'vue
-router';
import { formatDate } from '
../utils/utils
.js';
import GoEasy from 'goeasy'; // 引入真实的 GoEasy SDK
import { useCounterStore } from '
../stores/counter
.js'
const router = useRouter
();
const route = useRoute
();
// 定义响应式数据
const pendingConversations = ref
([]
);
const conversations = ref
([]
);
const rightClickMenu = ref
({
conversation
: null,
visible
: false,
x
: null,
y
: null,
}
);
const currentAgent = ref
(null
);
// 初始化 GoEasy
const goEasy = GoEasy
.getInstance
({
host
: 'hangzhou
.goeasy
.io', //应用所在的区域地址
: 【hangzhou
.goeasy
.io |singapore
.goeasy
.io】
appkey
: 'BC
-f00d5ee0720d4dab888ca1b5536483ab', // common key,
modules
: ['im'],
}
);
console
.log
('GoEasy initialized
:', goEasy
);
console
.log
('GoEasy IM module
:', goEasy
.im
); // 检查 IM 模块是否存在
// 其他代码保持不变
...
const loadConversations =
() => {
goEasy
.im
.pendingConversations
({
onSuccess
: (result
) => {
console
.log
('待接入会话
:', result
.content
.conversations
);
renderPendingConversations
(result
.content
);
},
onFailed
: (error
) => {
console
.log
('获取待接入列表失败
:', error
);
},
}
);
goEasy
.im
.latestConversations
({
onSuccess
: (result
) => {
console
.log
('已接入会话
:', result
.content
.conversations
);
renderLatestConversations
(result
.content
);
},
onFailed
: (error
) => {
console
.log
('获取已接入列表失败
:', error
);
},
}
);
};
const
listenConversationUpdate =
() => {
// 监听会话列表变化
goEasy
.im
.on
(goEasy
.IM_EVENT
.CONVERSATIONS_UPDATED, renderLatestConversations
);
goEasy
.im
.on
(goEasy
.IM_EVENT
.PENDING_CONVERSATIONS_UPDATED, renderPendingConversations
);
};
const renderPendingConversations =
(content
) => {
pendingConversations
.value = content
.conversations;
};
const renderLatestConversations =
(content
) => {
conversations
.value = content
.conversations;
};
const chat =
(conversation
) => {
return {
path
: `/conversations/chat/${conversation
.id}`,
query
: {
name
: conversation
.data
.name,
avatar
: conversation
.data
.avatar,
},
};
};
const showRightClickMenu =
(e, conversation
) => {
rightClickMenu
.value
.conversation = conversation;
rightClickMenu
.value
.visible = true;
rightClickMenu
.value
.x = e
.pageX;
rightClickMenu
.value
.y = e
.pageY;
};
const hideRightClickMenu =
() => {
rightClickMenu
.value
.visible = false;
};
const topConversation =
() => {
const conversation = rightClickMenu
.value
.conversation;
const description = conversation
.top ? '取消置顶'
: '置顶';
goEasy
.im
.topConversation
({
top
: !conversation
.top,
conversation
: conversation,
onSuccess
: () => {
console
.log
(description, '成功'
);
},
onFailed
: (error
) => {
console
.log
(description, '失败：', error
);
},
}
);
};
const deleteConversation =
() => {
if
(!rightClickMenu
.value
.conversation
.ended
) {
alert
('删除失败：会话尚未结束'
);
return;
}
if
(confirm
('确认要删除这条会话吗？'
)) {
goEasy
.im
.removeConversation
({
conversation
: rightClickMenu
.value
.conversation,
onSuccess
: () => {
console
.log
('删除会话成功'
);
},
onFailed
: (error
) => {
console
.log
(error
);
},
}
);
}
};
onMounted
(() => {
// 隐藏 Conversation 右键菜单
document
.addEvent
Listener
('click', hideRightClickMenu
);
// 获取当前客服信息
currentAgent
.value = useCounterStore
().currentAgent;
console
.log
(currentAgent
.value
);
// 监听 GoEasy 连接状态
goEasy
.connect
({
onSuccess
: () => {
console
.log
('GoEasy connected successfully'
);
// 确保用户信息存在
if
(!currentAgent
.value || !currentAgent
.value
.id || !currentAgent
.value
.name || !currentAgent
.value
.avatar
) {
console
.error
('Agent information is incomplete'
);
return;
}
// 登录IM
goEasy
.im
.login
({
id
: currentAgent
.value
.id, // 必须
data
: { // 必须
name
: currentAgent
.value
.name,
avatar
: currentAgent
.value
.avatar,
// 添加其他必要
字段
},
onSuccess
: () => {
console
.log
('IM login success'
);
listenConversationUpdate
();
loadConversations
();
},
onFailed
: (error
) => {
console
.error
('IM login failed
:', error
);
}
}
);
},
onFailed
: (error
) => {
console
.error
('GoEasy connection failed
:', error
);
}
}
);
}
);
</script>
<style scoped>
.conversation
-container {
width
: 100%;
height
: 100%;
display
: flex;
background: #FFFFFF;
}
.conversation
-list {
width
: 220px;
border
-right
: 1px solid #eee;
display
: flex;
flex
-direction
: column;
padding
: 10px;
position
: relative;
}
.conversation
-list-title {
font
-size
: 15px;
margin
: 5px 10px;
color
: rgba
(0, 0, 0, 0
.9
);
}
.conversation
-list-body {
overflow
-y
: auto;
max
-height
: 350px;
scrollbar
-width
: none;
-ms
-overflow
-style
: none;
}
.conversation
-list-body
::-webkit
-scrollbar {
display
: none;
}
.action
-box {
width
: 100px;
height
: 60px;
background: #ffffff;
border
: 1px solid #cccccc;
position
: fixed;
z
-index
: 100;
border
-radius
: 5px;
}
.action
-item {
padding
-left
: 15px;
line
-height
: 30px;
font
-size
: 13px;
color
: #262628;
cursor
: pointer;
}
.action
-item
:hover {
background: #dddddd;
}
.conversation
-item {
display
: flex;
padding
: 10px;
cursor
: pointer;
}
.conversation
-item
-head {
position
: relative;
margin
-right
: 5px;
}
.conversation
-item
-avatar {
width
: 40px;
height
: 40px;
border
-radius
: 4px;
}
.conversation
-item
-unread {
position
: absolute;
top
: -9px;
right
: -9px;
width
: 18px;
height
: 18px;
line
-height
: 18px;
border
-radius
: 50%;
text
-align
: center;
color
: #fff;
font
-size
: 12px;
background-color
: #fa5151;
}
.conversation
-item
-info {
flex
: 1;
display
: flex;
flex
-direction
: column;
justify
-content
: space
-between;
}
.item
-info
-top {
display
: flex;
justify
-content
: space
-between;
align
-items
: center;
}
.item
-info
-name {
white
-space
: nowrap;
overflow
: hidden;
text
-overflow
: ellipsis;
word
-break
: break
-all;
font
-size
: 15px;
width
: 80px;
line
-height
: 25px;
color
: #333333;
}
.item
-info
-time {
color
: #666666;
font
-size
: 12px;
}
.item
-info
-bottom {
display
: flex;
align
-items
: center;
}
.item
-info
-message {
font
-size
: 12px;
line
-height
: 20px;
overflow
: hidden;
text
-overflow
: ellipsis;
white
-space
: nowrap;
width
: 150px;
color
: #606266;
}
.item
-info
-failed {
background: url("
../assets/
images/failed
.png"
) no-repeat center;
background-size
: 12px;
width
: 12px;
height
: 12px;
margin
-right
: 2px;
}
.item
-info
-sending {
background: url("
../assets/
images/pending
.gif"
) no-repeat center;
background-size
: 12px;
width
: 12px;
height
: 12px;
margin
-right
: 2px;
}
.router
-link
-active {
background: #eeeeee;
border
-radius
: 5px;
}
.conversation
-main {
flex
: 1;
background: #FFFFFF;
}
</style>我在用GoEasy实现即时通讯时报错code
: 400, content
: 'data
: id and data are required for IM module
本文详细解释了CSS中background-position属性的用法，包括其默认值、可能的取值方式及如何精确控制背景图像的位置。
扫一扫
6512
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
