<template>
|
<div class="cs-chat__wrap">
|
<el-badge
|
:value="message.unread"
|
:hidden="!message.unread"
|
v-permission="service.cs.msg.permission.unreadCount"
|
>
|
<div class="cs-chat__icon" @click="open">
|
<cl-svg name="icon-notice" :size="16" />
|
</div>
|
</el-badge>
|
|
<!-- 弹框 -->
|
<cl-dialog
|
v-model="visible"
|
title="客服会话"
|
height="700px"
|
width="1200px"
|
padding="0"
|
keep-alive
|
:scrollbar="false"
|
:close-on-click-modal="false"
|
:close-on-press-escape="false"
|
:controls="['slot-expand', 'cl-flex1', 'fullscreen', 'close']"
|
@close="onClose"
|
>
|
<div
|
class="cs-chat"
|
:class="{
|
'is-mini': browser.isMini,
|
'is-expand': tools.isExpand
|
}"
|
>
|
<div class="cs-chat__left">
|
<cs-session />
|
</div>
|
|
<div class="cs-chat__right">
|
<cs-message />
|
</div>
|
</div>
|
|
<!-- 展开按钮 -->
|
<template #slot-expand>
|
<button class="cl-dialog__controls-icon">
|
<el-icon @click="tools.expand(true)" v-if="!tools.isExpand">
|
<notebook />
|
</el-icon>
|
<el-icon @click="tools.expand(false)" v-else>
|
<arrow-left />
|
</el-icon>
|
</button>
|
</template>
|
</cl-dialog>
|
</div>
|
</template>
|
|
<script lang="tsx" name="cs-chat" setup>
|
import { onMounted, ref } from 'vue';
|
import { useBrowser, useCool } from '/@/cool';
|
import { Notebook, ArrowLeft } from '@element-plus/icons-vue';
|
import { useMessage, useSession, useSocket, useTools, useNotice } from '../hooks';
|
import CsMessage from './message.vue';
|
import CsSession from './session.vue';
|
import type { Cs } from '../types';
|
|
const { mitt, service } = useCool();
|
const { browser } = useBrowser();
|
const socket = useSocket();
|
const session = useSession();
|
const message = useMessage();
|
const tools = useTools();
|
const notice = useNotice();
|
|
// 是否可见
|
const visible = ref(false);
|
|
// 打开
|
async function open() {
|
visible.value = true;
|
|
// 刷新会话
|
await session.refresh();
|
}
|
|
// 关闭
|
function close() {
|
visible.value = false;
|
}
|
|
// 关闭
|
function onClose() {
|
message.getUnread();
|
}
|
|
onMounted(() => {
|
if (service.cs.msg._permission.unreadCount) {
|
// 连接 socket
|
socket.connect();
|
|
// 获取未读消息
|
message.getUnread();
|
|
// 监听消息
|
mitt.on('cs.msg', (data: Cs.Msg) => {
|
if (data.sessionId == session.info?.id) {
|
message.read(data.id!);
|
} else {
|
message.unread += 1;
|
}
|
|
// 消息通知
|
if (!visible.value) {
|
notice.create(data, {
|
open
|
});
|
}
|
});
|
}
|
});
|
|
defineExpose({
|
open,
|
close
|
});
|
</script>
|
|
<style lang="scss">
|
.cs-chat {
|
display: flex;
|
justify-content: flex-end;
|
background-color: #eee;
|
padding: 5px;
|
box-sizing: border-box;
|
position: relative;
|
color: #000;
|
height: 100%;
|
|
&__icon {
|
padding: 0 5px;
|
text-align: center;
|
|
&:hover {
|
color: var(--color-primary);
|
}
|
}
|
|
&__footer {
|
padding: 9px 0;
|
}
|
|
&__left {
|
height: calc(100% - 10px);
|
width: 345px;
|
position: absolute;
|
left: 5px;
|
top: 5px;
|
}
|
|
&__right {
|
position: relative;
|
z-index: 99;
|
transition: width 0.3s;
|
width: 100%;
|
}
|
|
&.is-mini {
|
.cs-chat__right {
|
width: 100% !important;
|
}
|
|
&.is-expand {
|
.cs-chat__left {
|
width: calc(100% - 10px);
|
z-index: 100;
|
}
|
}
|
}
|
|
&.is-expand {
|
.cs-chat__right {
|
width: calc(100% - 350px);
|
}
|
}
|
}
|
</style>
|
