<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
.addEventListener('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
本文详细介绍了ASP.NET中各种数据绑定的方法，包括绑定到简单属性、集合、表达式、方法返回值等多种情况，并对比了不同绑定方式的性能差异。
扫一扫
219
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
