|
|
|
@ -68,16 +68,11 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<el-scrollbar ref="refsMessageList" class="message-list">
|
|
|
|
|
<el-button
|
|
|
|
|
v-if="currentSession.messageList?.length"
|
|
|
|
|
class="load"
|
|
|
|
|
type="text"
|
|
|
|
|
@click="handleLoadMore"
|
|
|
|
|
>
|
|
|
|
|
<el-button v-if="sessionMessageList.length" class="load" type="text" @click="handleLoadMore">
|
|
|
|
|
加载更多
|
|
|
|
|
</el-button>
|
|
|
|
|
<message-item
|
|
|
|
|
v-for="(item, index) in currentSession.messageList"
|
|
|
|
|
v-for="(item, index) in sessionMessageList"
|
|
|
|
|
:key="index"
|
|
|
|
|
:message="item"
|
|
|
|
|
:session="currentSession"
|
|
|
|
@ -151,15 +146,13 @@
|
|
|
|
|
const store = useStore();
|
|
|
|
|
store.dispatch('im/queryCurCustomerService');
|
|
|
|
|
const socketInit = () => {
|
|
|
|
|
console.log('----', store.state.im.curCustomerService);
|
|
|
|
|
if (typeof store.state.im.curCustomerService !== 'string') {
|
|
|
|
|
if (!store.state.im.curCustomerService.waiterId) {
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
socketInit();
|
|
|
|
|
}, 1000);
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
console.log('++++', typeof store.state.im.curCustomerService);
|
|
|
|
|
ImInit(store.state.im.curCustomerService).then(() => {
|
|
|
|
|
ImInit(store.state.im.curCustomerService.waiterId).then(() => {
|
|
|
|
|
Im.getSessionList();
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
@ -190,20 +183,24 @@
|
|
|
|
|
currentSessionId.value = id;
|
|
|
|
|
// 设置实例对象当前会话ID
|
|
|
|
|
Im.setCurSessionId(id);
|
|
|
|
|
|
|
|
|
|
// 已读
|
|
|
|
|
Im.setRead({
|
|
|
|
|
content: {
|
|
|
|
|
sessionId: id,
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
if (!sessionMessageList.length) {
|
|
|
|
|
Im.getHistoryMsg();
|
|
|
|
|
}
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
if (!sessionMessageList.value.length) {
|
|
|
|
|
Im.getHistoryMsg();
|
|
|
|
|
}
|
|
|
|
|
}, 100);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 聊天
|
|
|
|
|
const sessionMessageList = computed(() => {
|
|
|
|
|
return currentSession.messageList || [];
|
|
|
|
|
const sessionMessageList = ref([]);
|
|
|
|
|
watch(currentSession, () => {
|
|
|
|
|
sessionMessageList.value = currentSession.value.messageList || [];
|
|
|
|
|
});
|
|
|
|
|
const refsMessageList = ref(null);
|
|
|
|
|
watch(sessionMessageList, (value, old) => {
|
|
|
|
@ -211,11 +208,11 @@
|
|
|
|
|
? refsMessageList.value.resize$.scrollHeight - refsMessageList.value.resize$.scrollTop
|
|
|
|
|
: 0;
|
|
|
|
|
nextTick(() => {
|
|
|
|
|
if (!old?.length || value.indexOf(old[0]) === 0) {
|
|
|
|
|
refsMessageList.value.setScrollTop(refsMessageList.value.resize$.scrollHeight);
|
|
|
|
|
} else {
|
|
|
|
|
refsMessageList.value.setScrollTop(refsMessageList.value.resize$.scrollHeight - offset);
|
|
|
|
|
}
|
|
|
|
|
// if (!old?.length || value.indexOf(old[0]) === 0) {
|
|
|
|
|
refsMessageList.value.setScrollTop(refsMessageList.value.resize$.scrollHeight);
|
|
|
|
|
// } else {
|
|
|
|
|
// refsMessageList.value.setScrollTop(refsMessageList.value.resize$.scrollHeight - offset);
|
|
|
|
|
// }
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
const handleLoadMore = () => {
|
|
|
|
@ -230,6 +227,7 @@
|
|
|
|
|
Im.sendMsg({
|
|
|
|
|
fromId: curService.waiterId,
|
|
|
|
|
fromAvatar: curService.waiterAvatar,
|
|
|
|
|
fromNickname: curService.waiterNickname,
|
|
|
|
|
content: {
|
|
|
|
|
toSessionId: currentSessionId.value,
|
|
|
|
|
payload: { text: state.message },
|
|
|
|
@ -324,10 +322,11 @@
|
|
|
|
|
const file = e.target.files[0];
|
|
|
|
|
e.target.value = null;
|
|
|
|
|
let url = await upload('mall-product', 'im/', file);
|
|
|
|
|
// store.dispatch('chat/submitImage', { url });
|
|
|
|
|
|
|
|
|
|
const curService = store.state.im.curCustomerService;
|
|
|
|
|
Im.sendMsg({
|
|
|
|
|
fromId: 2, //userInfo.value.id,
|
|
|
|
|
fromId: curService.waiterId,
|
|
|
|
|
fromAvatar: curService.waiterAvatar,
|
|
|
|
|
fromNickname: curService.waiterNickname,
|
|
|
|
|
content: {
|
|
|
|
|
toSessionId: currentSessionId.value,
|
|
|
|
|
payload: { url },
|
|
|
|
@ -347,8 +346,11 @@
|
|
|
|
|
let url = await upload('mall-product', 'im/', file);
|
|
|
|
|
// store.dispatch('chat/submitVideo', { url });
|
|
|
|
|
|
|
|
|
|
const curService = store.state.im.curCustomerService;
|
|
|
|
|
Im.sendMsg({
|
|
|
|
|
fromId: 2, //userInfo.value.id,
|
|
|
|
|
fromId: curService.waiterId,
|
|
|
|
|
fromAvatar: curService.waiterAvatar,
|
|
|
|
|
fromNickname: curService.waiterNickname,
|
|
|
|
|
content: {
|
|
|
|
|
toSessionId: currentSessionId.value,
|
|
|
|
|
payload: { url },
|
|
|
|
@ -378,7 +380,6 @@
|
|
|
|
|
display: flex;
|
|
|
|
|
border: 1px solid #ebeef5;
|
|
|
|
|
.aside {
|
|
|
|
|
width: 240px;
|
|
|
|
|
border-right: 1px solid #ebeef5;
|
|
|
|
|
.aside-header {
|
|
|
|
|
height: 60px;
|
|
|
|
|