344 lines
11 KiB
Vue
344 lines
11 KiB
Vue
<template>
|
||
<div>
|
||
<!-- 新区域，放在头部 -->
|
||
<el-row style="display: flex; justify-content: center;">
|
||
|
||
<el-col :span="24">
|
||
<div style="width:100%;height:68px;background-color:#3c80ff;">
|
||
<el-row>
|
||
<el-col :span="6">
|
||
<el-input
|
||
style="width: 80%;margin-top: 20px;margin-left:10px;"
|
||
:suffix-icon="Search"
|
||
/>
|
||
</el-col>
|
||
|
||
<el-col :span="6">
|
||
<span style="display: flex; margin-top: 15px;">
|
||
<el-avatar
|
||
:src="pic"
|
||
/>
|
||
<span style="margin-left:5px;margin-top: 9px;">{{name}}</span>
|
||
<el-switch
|
||
style="margin-top: 4px;--el-switch-on-color: #13ce66; --el-switch-off-color: #b6bac1;"
|
||
v-model="lineStatus"
|
||
class="ml-2"
|
||
width="60"
|
||
inline-prompt
|
||
active-text="在线"
|
||
inactive-text="下线"
|
||
@change="handleSwitchChange"
|
||
|
||
/>
|
||
</span>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-button @click="out" size="small" round style="margin-top:23px;margin-left:75%">退出</el-button>
|
||
</el-col>
|
||
|
||
<el-col :span="6">
|
||
<el-menu
|
||
background-color="#3c80ff"
|
||
text-color="white"
|
||
active-text-color="white"
|
||
style="width:100%;display: flex;"
|
||
>
|
||
<el-menu-item @click="userInfo" style="width:33%;height:70px" index="1">客户信息</el-menu-item>
|
||
<el-menu-item @click="zuoji" style="width:33%;height:70px" index="2">他的足迹</el-menu-item>
|
||
<!-- <el-menu-item style="width:34%;height:70px" index="3">商品信息</el-menu-item> -->
|
||
</el-menu>
|
||
|
||
</el-col>
|
||
</el-row>
|
||
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- 原有的三个区域 -->
|
||
<el-row style="display: flex; justify-content: center;">
|
||
<!-- 会话列表 -->
|
||
<el-col :span="6">
|
||
<ContentWrap>
|
||
<KeFuConversationList ref="keFuConversationRef" @change="handleChange"/>
|
||
</ContentWrap>
|
||
</el-col>
|
||
|
||
<!-- 会话详情（选中会话的消息列表） -->
|
||
<el-col :span="12">
|
||
|
||
<KeFuMessageList ref="keFuChatBoxRef" @change="getConversationList"/>
|
||
|
||
</el-col>
|
||
|
||
<!-- 会员足迹（选中会话的会员足迹） -->
|
||
<el-col :span="6">
|
||
<ContentWrap v-show="chick == '2'">
|
||
<MemberBrowsingHistory ref="memberBrowsingHistoryRef"/>
|
||
</ContentWrap>
|
||
|
||
<ContentWrap v-show = "chick == '1'">
|
||
<div style="height: 522px ;" >
|
||
<div>
|
||
<span style="display: flex;">
|
||
<el-avatar
|
||
style="border: 1px solid #f8f9ee;"
|
||
:src="user.avatar"
|
||
/>
|
||
<span style="margin-left:5px;margin-top: 9px;">{{user.nickname}}</span>
|
||
</span>
|
||
</div>
|
||
|
||
<el-divider style="border-color: #f5f5f5;margin-top: 15px;margin-bottom:15px;" />
|
||
<div>
|
||
<span style="color: #5d5d59;font-size: 13px ;">手机号</span><span style="margin-left: 47px;font-size: 14px ;">{{user.mobile}}</span>
|
||
</div>
|
||
<div style="margin-top: 5px;">
|
||
<span style="color: #5d5d59;font-size: 13px ;">分组</span><span style="margin-left: 60px;font-size: 14px ;">{{user.groupName}}</span>
|
||
</div>
|
||
<div style="margin-top: 5px;">
|
||
<span style="color: #5d5d59;font-size: 13px ;">用户标签</span><span style="margin-left: 33px;font-size: 14px ;">小客户</span>
|
||
</div>
|
||
<el-divider style="border-color: #f5f5f5;margin-top: 15px;margin-bottom:15px;" />
|
||
|
||
<div>
|
||
<span style="color: #5d5d59;font-size: 13px ;">用户等级</span><span style="margin-left: 35px;font-size: 14px ;">{{user.levelName}}</span>
|
||
</div>
|
||
<div style="margin-top: 5px;">
|
||
<span style="color: #5d5d59;font-size: 13px ;">推荐人</span><span style="margin-left: 47px;font-size: 14px ;">客户</span>
|
||
</div>
|
||
<div style="margin-top: 5px;">
|
||
<span style="color: #5d5d59;font-size: 13px ;">用户类型</span><span style="margin-left: 33px;font-size: 14px ;">小客户</span>
|
||
</div>
|
||
<div style="margin-top: 5px;">
|
||
<span style="color: #5d5d59;font-size: 13px ;">积分</span><span style="margin-left: 60px;font-size: 14px ;">{{user.point}}</span>
|
||
</div>
|
||
<div style="margin-top: 5px;">
|
||
<span style="color: #5d5d59;font-size: 13px ;">推广员</span><span style="margin-left: 47px;font-size: 14px ;">客户</span>
|
||
</div>
|
||
<div style="margin-top: 5px;">
|
||
<span style="color: #5d5d59;font-size: 13px ;">生日</span><span style="margin-left: 60px;font-size: 14px ;">{{user.birthday}}</span>
|
||
</div>
|
||
<el-divider style="border-color: #f5f5f5;margin-top: 15px;margin-bottom:15px;" />
|
||
</div>
|
||
</ContentWrap>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
|
||
|
||
<script lang="ts" setup>
|
||
import { KeFuConversationList, KeFuMessageList,MemberBrowsingHistory,UserInfo } from './components'
|
||
import {WebSocketMessageTypeConstants} from './components/tools/constants'
|
||
import {KeFuConversationRespVO} from '@/api/mall/promotion/kefu/conversation'
|
||
import {getRefreshToken, getAccessToken} from '@/utils/auth'
|
||
import {useWebSocket} from '@vueuse/core'
|
||
import {Search} from '@element-plus/icons-vue'
|
||
import * as UserApi from '@/api/member/user'
|
||
import { SupportStaffApi, SupportStaffVO } from '@/api/mall/promotion/supportstaff'
|
||
|
||
|
||
|
||
defineOptions({name: 'KeFu'})
|
||
|
||
const lineStatus = ref(true)
|
||
|
||
const message = useMessage() // 消息弹窗
|
||
|
||
const params = new URLSearchParams(window.location.search);
|
||
const name = params.get('name');
|
||
const pic = params.get('pic');
|
||
const kefuId = params.get('id')
|
||
const conversations = ref<KeFuConversationRespVO[]>([])
|
||
// const userInfoRef = ref<InstanceType<typeof UserInfo>>()
|
||
const user = ref<UserApi.UserVO>({} as UserApi.UserVO)
|
||
const userId = ref(0)
|
||
|
||
|
||
// ======================= WebSocket start =======================
|
||
const server = ref(
|
||
(import.meta.env.VITE_BASE_URL + '/infra/ws').replace('http', 'ws') +
|
||
'?token=' +
|
||
getRefreshToken()
|
||
// 使用 getRefreshToken() 方法，而不使用 getAccessToken() 方法的原因：WebSocket 无法方便的刷新访问令牌
|
||
) // WebSocket 服务地址
|
||
|
||
const handleSwitchChange = async (value) =>{
|
||
console.log('11111:',value)
|
||
let a = 0;
|
||
|
||
if(value == true){
|
||
a = 1;
|
||
await SupportStaffApi.updateLineStatus(kefuId,a)
|
||
message.success('已上线')
|
||
}else{
|
||
a = 2;
|
||
await SupportStaffApi.updateLineStatus(kefuId,a)
|
||
message.success('已下线')
|
||
}
|
||
|
||
|
||
|
||
}
|
||
|
||
let a = 0;
|
||
|
||
const {status, data, send, open, close} = useWebSocket(server.value, {
|
||
onConnected: function (ws) {
|
||
console.log('websocket 连接成功！', ws);
|
||
},
|
||
onDisconnected: function (ws, event) {
|
||
console.log('WebSocket 连接断开', event);
|
||
},
|
||
onError: function (ws, event) {
|
||
console.error('WebSocket 连接错误:', event);
|
||
if (event instanceof ErrorEvent) {
|
||
console.error('详细错误信息:', event.message);
|
||
} else {
|
||
console.error('非标准错误:', event);
|
||
}
|
||
},
|
||
onMessage: function (ws, event) {
|
||
console.log('收到的 WebSocket 消息:', event.data);
|
||
|
||
|
||
a = a + 1 ;
|
||
if(a == 2){
|
||
getConversationList()
|
||
keFuChatBoxRef.value?.refreshMessageList()
|
||
a = 0;
|
||
}
|
||
|
||
|
||
},
|
||
autoReconnect: false, // 开启自动重连
|
||
heartbeat: true
|
||
});
|
||
|
||
|
||
|
||
|
||
/** 监听 WebSocket 数据 */
|
||
watchEffect(() => {
|
||
console.log('连接服务器得到消息:',data.value)
|
||
if (!data.value) {
|
||
return
|
||
}
|
||
try {
|
||
// 1. 收到心跳
|
||
if (data.value === 'pong') {
|
||
return
|
||
}
|
||
|
||
// 2.1 解析 type 消息类型
|
||
const jsonMessage = JSON.parse(data.value)
|
||
const type = jsonMessage.type
|
||
console.log('来自用户发送的消息:',data.value)
|
||
|
||
if (!type) {
|
||
message.error('未知的消息类型：' + data.value)
|
||
return
|
||
}
|
||
// 2.2 消息类型：KEFU_MESSAGE_TYPE
|
||
if (type === WebSocketMessageTypeConstants.KEFU_MESSAGE_TYPE) {
|
||
// 刷新会话列表
|
||
// TODO @puhui999：不应该刷新列表，而是根据消息，本地 update 列表的数据；
|
||
getConversationList()
|
||
// 刷新消息列表
|
||
keFuChatBoxRef.value?.refreshMessageList(JSON.parse(jsonMessage.content))
|
||
return
|
||
}
|
||
// 2.3 消息类型：KEFU_MESSAGE_ADMIN_READ
|
||
if (type === WebSocketMessageTypeConstants.KEFU_MESSAGE_ADMIN_READ) {
|
||
// 刷新会话列表
|
||
// TODO @puhui999：不应该刷新列表，而是根据消息，本地 update 列表的数据；
|
||
getConversationList()
|
||
}
|
||
} catch (error) {
|
||
console.error(error)
|
||
}
|
||
})
|
||
|
||
|
||
// ======================= WebSocket end =======================
|
||
/** 加载会话列表 */
|
||
const keFuConversationRef = ref<InstanceType<typeof KeFuConversationList>>()
|
||
const getConversationList = () => {
|
||
keFuConversationRef.value?.getConversationList()
|
||
}
|
||
|
||
/** 加载指定会话的消息列表 */
|
||
const keFuChatBoxRef = ref<InstanceType<typeof KeFuMessageList>>()
|
||
const memberBrowsingHistoryRef = ref<InstanceType<typeof MemberBrowsingHistory>>()
|
||
const handleChange = (conversation: KeFuConversationRespVO) => {
|
||
conversations.value = conversation
|
||
chick.value = '2'
|
||
userId.value = conversation.userId
|
||
keFuChatBoxRef.value?.getNewMessageList(conversation)
|
||
memberBrowsingHistoryRef.value?.initHistory(conversation)
|
||
}
|
||
|
||
const out = () =>{
|
||
window.close();
|
||
// window.location.href = '/kefu/support-staff';
|
||
}
|
||
|
||
|
||
const chick = ref('2')
|
||
const userInfo = async () =>{
|
||
chick.value = '1'
|
||
user.value = await UserApi.getUserInfo(userId.value)
|
||
}
|
||
const zuoji = () =>{
|
||
chick.value = '2'
|
||
// keFuChatBoxRef.value?.getNewMessageList(conversations.value)
|
||
memberBrowsingHistoryRef.value?.initHistory(conversations.value)
|
||
}
|
||
|
||
/** 初始化 */
|
||
onMounted(() => {
|
||
getConversationList()
|
||
// 打开 websocket 连接
|
||
open()
|
||
console.log('WebSocket 已初始化');
|
||
})
|
||
|
||
/** 销毁 */
|
||
onBeforeUnmount(() => {
|
||
// 关闭 websocket 连接
|
||
close()
|
||
console.log('WebSocket 已关闭');
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.kefu {
|
||
height: calc(100vh - 165px);
|
||
overflow: auto; /* 确保内容可滚动 */
|
||
|
||
}
|
||
|
||
/* 定义滚动条样式 */
|
||
::-webkit-scrollbar {
|
||
width: 10px;
|
||
height: 6px;
|
||
}
|
||
|
||
/* 定义滚动条轨道 内阴影+圆角 */
|
||
::-webkit-scrollbar-track {
|
||
box-shadow: inset 0 0 0 rgba(240, 240, 240, 0.5);
|
||
border-radius: 10px;
|
||
background-color: #fff;
|
||
}
|
||
|
||
/* 定义滑块 内阴影+圆角 */
|
||
::-webkit-scrollbar-thumb {
|
||
|
||
border-radius: 10px;
|
||
box-shadow: inset 0 0 0 rgba(240, 240, 240, 0.5);
|
||
background-color: rgba(240, 240, 240, 0.5);
|
||
|
||
}
|
||
</style>
|