root/allLikeMall
1
0
Fork 1
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

添加通知弹窗、音效，具有防抖

Browse Source
This commit is contained in:
peak 2025-06-12 18:43:40 +08:00
parent d8f71b14cb
commit 8114f48e70
9 changed files with 9346 additions and 7592 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
yudao-admin-vue3/.env.local
View File

@ -5,7 +5,8 @@ VITE_DEV=true
# 请求路径 # 请求路径
VITE_BASE_URL='https://zysc.fjptzykj.com' VITE_BASE_URL='https://zysc.fjptzykj.com'
# VITE_BASE_URL='http://192.168.1.12:6127' # VITE_BASE_URL='http://192.168.10.75:6127'
# VITE_BASE_URL='http://127.0.0.1:6127'
# 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务
VITE_UPLOAD_TYPE=server VITE_UPLOAD_TYPE=server

2
yudao-admin-vue3/.vscode/settings.json vendored
View File

@ -62,7 +62,7 @@
"editor.defaultFormatter": "esbenp.prettier-vscode" "editor.defaultFormatter": "esbenp.prettier-vscode"
}, },
"[typescript]": { "[typescript]": {
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint" "editor.defaultFormatter": "vscode.typescript-language-features"
}, },
"[typescriptreact]": { "[typescriptreact]": {
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint" "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"

16343
yudao-admin-vue3/pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

15
yudao-admin-vue3/src/App.vue
View File

@ -4,7 +4,9 @@ import { useAppStore } from '@/store/modules/app'
import { useDesign } from '@/hooks/web/useDesign' import { useDesign } from '@/hooks/web/useDesign'
import { CACHE_KEY, useCache } from '@/hooks/web/useCache' import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
import routerSearch from '@/components/RouterSearch/index.vue' import routerSearch from '@/components/RouterSearch/index.vue'
import EventBus from '@/utils/eventBus'
import { debounce } from 'lodash'
import { ElNotification } from 'element-plus'
defineOptions({ name: 'APP' }) defineOptions({ name: 'APP' })
const { getPrefixCls } = useDesign() const { getPrefixCls } = useDesign()
@ -23,6 +25,17 @@ const setDefaultTheme = () => {
appStore.setIsDark(isDarkTheme) appStore.setIsDark(isDarkTheme)
} }
setDefaultTheme() setDefaultTheme()
const debounceNotify = debounce((msg) => {
alert(msg)
ElNotification.info({
title: "新消息",
message: msg,
duration: 3000,
})
}, 600);
onMounted(() => {
EventBus.on('show-notification', debounceNotify);
})
</script> </script>
<template> <template>
<ConfigGlobal :size="currentSize"> <ConfigGlobal :size="currentSize">

12
yudao-admin-vue3/src/layout/Layout.vue
View File

@ -5,6 +5,9 @@ import { Backtop } from '@/components/Backtop'
import { Setting } from '@/layout/components/Setting' import { Setting } from '@/layout/components/Setting'
import { useRenderLayout } from './components/useRenderLayout' import { useRenderLayout } from './components/useRenderLayout'
import { useDesign } from '@/hooks/web/useDesign' import { useDesign } from '@/hooks/web/useDesign'
import EventBus from '@/utils/eventBus'
import { debounce } from 'lodash'
import { ElNotification } from 'element-plus'
const { getPrefixCls } = useDesign() const { getPrefixCls } = useDesign()
@ -42,7 +45,14 @@ const renderLayout = () => {
break break
} }
} }
const debounceNotify = debounce((msg) => {
ElNotification.info({
title: "新消息",
message: msg,
duration: 3000,
})
}, 600);
EventBus.on('notification', debounceNotify);
export default defineComponent({ export default defineComponent({
name: 'Layout', name: 'Layout',
setup() { setup() {

2
yudao-admin-vue3/src/utils/eventBus.ts Normal file
View File

@ -0,0 +1,2 @@
import mitt from 'mitt';
export default mitt();

555
yudao-admin-vue3/src/views/mall/promotion/kefu/index.vue
View File

@ -7,14 +7,13 @@
<div style="width:100%;height:68px;background-color:#3c80ff;"> <div style="width:100%;height:68px;background-color:#3c80ff;">
<el-row> <el-row>
<el-col :span="6"> <el-col :span="6">
<el-input @input="findNameInput" v-model="findName" <el-input @input="findNameInput" v-model="findName" style="width: 80%;margin-top: 20px;margin-left:23px;"
style="width: 80%;margin-top: 20px;margin-left:23px;" :suffix-icon="Search" />
:suffix-icon="Search"/>
</el-col> </el-col>
<el-col :span="1"> <el-col :span="1">
<el-avatar style=" margin-top: 15px;" :src="pic"/> <el-avatar style=" margin-top: 15px;" :src="pic" />
<!-- <span style="display: flex; margin-top: 15px;"> <!-- <span style="display: flex; margin-top: 15px;">
<span style="margin-left:5px;margin-top: 9px;">{{name}}</span> <span style="margin-left:5px;margin-top: 9px;">{{name}}</span>
<el-switch <el-switch
@ -23,31 +22,29 @@
inactive-text="下线" @change="handleSwitchChange"/> inactive-text="下线" @change="handleSwitchChange"/>
</span> --> </span> -->
</el-col> </el-col>
<el-col :span="7"> <el-col :span="7">
<span style="display: flex; margin-top: 15px;"> <span style="display: flex; margin-top: 15px;">
<!-- <el-avatar :src="pic"/> --> <!-- <el-avatar :src="pic"/> -->
<span style="margin-left:5px;margin-top: 9px;">{{name}}</span> <span style="margin-left:5px;margin-top: 9px;">{{ name }}</span>
<el-switch <el-switch style="margin-top: 4px;--el-switch-on-color: #13ce66; --el-switch-off-color: #b6bac1;"
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="下线"
v-model="lineStatus" class="ml-2" width="60" inline-prompt active-text="在线" @change="handleSwitchChange" />
inactive-text="下线" @change="handleSwitchChange"/> </span>
</span> </el-col>
</el-col>
<el-col :span="4"> <el-col :span="4">
<el-button @click="out" size="small" round <el-button @click="out" size="small" round style="margin-top:23px;margin-left:72%">退出
style="margin-top:23px;margin-left:72%">退出
</el-button> </el-button>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<el-menu background-color="#3c80ff" text-color="white" active-text-color="white" <el-menu background-color="#3c80ff" text-color="white" active-text-color="white"
style="width:100%;display: flex;"> style="width:100%;display: flex;">
<el-menu-item @click="userInfo" style="width:33%;height:70px" index="1">客户信息 <el-menu-item @click="userInfo" style="width:33%;height:70px" index="1">客户信息
</el-menu-item> </el-menu-item>
<el-menu-item @click="jiaoyi" style="width:33%;height:70px" index="3">交易订单 <el-menu-item @click="jiaoyi" style="width:33%;height:70px" index="3">交易订单
</el-menu-item> </el-menu-item>
<el-menu-item @click="zuoji" style="width:33%;height:70px" index="2">商品信息 <el-menu-item @click="zuoji" style="width:33%;height:70px" index="2">商品信息
</el-menu-item> </el-menu-item>
<!-- <el-menu-item style="width:34%;height:70px" index="3">商品信息</el-menu-item> --> <!-- <el-menu-item style="width:34%;height:70px" index="3">商品信息</el-menu-item> -->
@ -65,84 +62,84 @@
<!-- 会话列表 --> <!-- 会话列表 -->
<el-col :span="6"> <el-col :span="6">
<ContentWrap> <ContentWrap>
<KeFuConversationList ref="keFuConversationRef" @change="handleChange"/> <KeFuConversationList ref="keFuConversationRef" @change="handleChange" />
</ContentWrap> </ContentWrap>
</el-col> </el-col>
<!-- 会话详情（选中会话的消息列表） --> <!-- 会话详情（选中会话的消息列表） -->
<el-col :span="12"> <el-col :span="12">
<KeFuMessageList ref="keFuChatBoxRef" @change="getConversationList"/> <KeFuMessageList ref="keFuChatBoxRef" @change="getConversationList" />
</el-col> </el-col>
<!-- 会员足迹（选中会话的会员足迹） --> <!-- 会员足迹（选中会话的会员足迹） -->
<el-col :span="6"> <el-col :span="6">
<ContentWrap v-show="chick == '1' && clickUser == 2"> <ContentWrap v-show="chick == '1' && clickUser == 2">
<div style="height: 522px ;"> <div style="height: 522px ;">
<div> <div>
<span style="display: flex;"> <span style="display: flex;">
<el-avatar style="border: 1px solid #f8f9ee;" :src="user.avatar"/> <el-avatar style="border: 1px solid #f8f9ee;" :src="user.avatar" />
<span style="margin-left:5px;margin-top: 9px;">{{user.nickname}}</span> <span style="margin-left:5px;margin-top: 9px;">{{ user.nickname }}</span>
</span> </span>
</div> </div>
<el-divider style="border-color: #f5f5f5;margin-top: 15px;margin-bottom:15px;"/> <el-divider style="border-color: #f5f5f5;margin-top: 15px;margin-bottom:15px;" />
<div> <div>
<span style="color: #5d5d59;font-size: 13px ;">手机号</span><span <span style="color: #5d5d59;font-size: 13px ;">手机号</span><span
style="margin-left: 47px;font-size: 14px ;">{{user.mobile}}</span> style="margin-left: 47px;font-size: 14px ;">{{ user.mobile }}</span>
</div> </div>
<div style="margin-top: 5px;"> <div style="margin-top: 5px;">
<span style="color: #5d5d59;font-size: 13px ;">分组</span><span <span style="color: #5d5d59;font-size: 13px ;">分组</span><span
style="margin-left: 60px;font-size: 14px ;">{{user.groupName}}</span> style="margin-left: 60px;font-size: 14px ;">{{ user.groupName }}</span>
</div> </div>
<div style="margin-top: 5px;"> <div style="margin-top: 5px;">
<span style="color: #5d5d59;font-size: 13px ;">用户标签</span><span <span style="color: #5d5d59;font-size: 13px ;">用户标签</span><span
style="margin-left: 33px;font-size: 14px ;">客户</span> style="margin-left: 33px;font-size: 14px ;">客户</span>
</div> </div>
<el-divider style="border-color: #f5f5f5;margin-top: 15px;margin-bottom:15px;"/> <el-divider style="border-color: #f5f5f5;margin-top: 15px;margin-bottom:15px;" />
<div> <div>
<span style="color: #5d5d59;font-size: 13px ;">用户等级</span><span <span style="color: #5d5d59;font-size: 13px ;">用户等级</span><span
style="margin-left: 35px;font-size: 14px ;">{{user.levelName}}</span> style="margin-left: 35px;font-size: 14px ;">{{ user.levelName }}</span>
</div> </div>
<div style="margin-top: 5px;"> <div style="margin-top: 5px;">
<span style="color: #5d5d59;font-size: 13px ;">推荐人</span><span <span style="color: #5d5d59;font-size: 13px ;">推荐人</span><span
style="margin-left: 47px;font-size: 14px ;">客户</span> style="margin-left: 47px;font-size: 14px ;">客户</span>
</div> </div>
<!-- <div style="margin-top: 5px;"> <!-- <div style="margin-top: 5px;">
<span style="color: #5d5d59;font-size: 13px ;">用户类型</span><span <span style="color: #5d5d59;font-size: 13px ;">用户类型</span><span
style="margin-left: 33px;font-size: 14px ;">小客户</span> style="margin-left: 33px;font-size: 14px ;">小客户</span>
</div> --> </div> -->
<div style="margin-top: 5px;"> <div style="margin-top: 5px;">
<span style="color: #5d5d59;font-size: 13px ;">积分</span><span <span style="color: #5d5d59;font-size: 13px ;">积分</span><span
style="margin-left: 60px;font-size: 14px ;">{{user.point}}</span> style="margin-left: 60px;font-size: 14px ;">{{ user.point }}</span>
</div> </div>
<div style="margin-top: 5px;"> <div style="margin-top: 5px;">
<span style="color: #5d5d59;font-size: 13px ;">推广员</span><span <span style="color: #5d5d59;font-size: 13px ;">推广员</span><span
style="margin-left: 47px;font-size: 14px ;">客户</span> style="margin-left: 47px;font-size: 14px ;">客户</span>
</div> </div>
<div style="margin-top: 5px;"> <div style="margin-top: 5px;">
<span style="color: #5d5d59;font-size: 13px ;">生日</span><span <span style="color: #5d5d59;font-size: 13px ;">生日</span><span
style="margin-left: 60px;font-size: 14px ;">{{user.birthday}}</span> style="margin-left: 60px;font-size: 14px ;">{{ user.birthday }}</span>
</div> </div>
<el-divider style="border-color: #f5f5f5;margin-top: 15px;margin-bottom:15px;"/> <el-divider style="border-color: #f5f5f5;margin-top: 15px;margin-bottom:15px;" />
</div> </div>
</ContentWrap> </ContentWrap>
<ContentWrap v-show="chick == '1' && clickUser == 1"> <ContentWrap v-show="chick == '1' && clickUser == 1">
<el-empty description="请选择左侧的一个会话后开始" /> <el-empty description="请选择左侧的一个会话后开始" />
</ContentWrap>
<ContentWrap v-show="chick == '2'">
<MemberBrowsingHistory ref="memberBrowsingHistoryRef"/>
</ContentWrap> </ContentWrap>
<ContentWrap v-show="chick == '3'"> <ContentWrap v-show="chick == '2'">
<MemberBrowsingHistorys ref="memberBrowsingHistorysRef"/> <MemberBrowsingHistory ref="memberBrowsingHistoryRef" />
</ContentWrap> </ContentWrap>
<ContentWrap v-show="chick == '3'">
<MemberBrowsingHistorys ref="memberBrowsingHistorysRef" />
</ContentWrap>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
@ -150,235 +147,245 @@
<script lang="ts" setup> <script lang="ts" setup>
import { import {
KeFuConversationList, KeFuConversationList,
KeFuMessageList, KeFuMessageList,
MemberBrowsingHistorys, MemberBrowsingHistorys,
MemberBrowsingHistory MemberBrowsingHistory
} from './components' } from './components'
import {WebSocketMessageTypeConstants} from './components/tools/constants' import { WebSocketMessageTypeConstants } from './components/tools/constants'
import { KeFuMessageApi, KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message' import { KeFuMessageApi, KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message'
import {KeFuConversationRespVO} from '@/api/mall/promotion/kefu/conversation' import { KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
import {getRefreshToken, getAccessToken} from '@/utils/auth' import { getRefreshToken, getAccessToken } from '@/utils/auth'
import {useWebSocket} from '@vueuse/core' import { useWebSocket } from '@vueuse/core'
import {Search} from '@element-plus/icons-vue' import { Search } from '@element-plus/icons-vue'
import * as UserApi from '@/api/member/user' import * as UserApi from '@/api/member/user'
import {SupportStaffApi, SupportStaffVO} from '@/api/mall/promotion/supportstaff' import { SupportStaffApi, SupportStaffVO } from '@/api/mall/promotion/supportstaff'
import {string} from 'vue-types' import { string } from 'vue-types'
import EventBus from '@/utils/eventBus';
import bgm from './xm3463.mp3'
import type { TabsPaneContext } from 'element-plus' import type { TabsPaneContext } from 'element-plus'
const findName = ref('') import { ElNotification } from 'element-plus'
const findName = ref('')
const audio = new Audio(bgm)
defineOptions({ name: 'KeFu' })
defineOptions({name: 'KeFu'}) const lineStatus = ref(true)
const lineStatus = ref(true) const clickUser = ref(1)
const clickUser = ref(1)
const message = useMessage() // 消息弹窗
const params = new URLSearchParams(window.location.search); const message = useMessage() // 消息弹窗
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)
const stat = ref(false)
// ======================= WebSocket start ======================= const params = new URLSearchParams(window.location.search);
const server = ref( const name = params.get('name');
(import.meta.env.VITE_BASE_URL + '/infra/ws').replace('http', 'ws') + const pic = params.get('pic');
'?token=' + getRefreshToken() const kefuId = params.get('id')
// getAccessToken() const conversations = ref<KeFuConversationRespVO[]>([])
// 使用 getRefreshToken() 方法，而不使用 getAccessToken() 方法的原因：WebSocket 无法方便的刷新访问令牌 // const userInfoRef = ref<InstanceType<typeof UserInfo>>()
) // WebSocket 服务地址 const user = ref<UserApi.UserVO>({} as UserApi.UserVO)
const userId = ref(0)
const stat = ref(false)
const handleSwitchChange = async (value) => { // ======================= WebSocket start =======================
console.log('11111:', value) const server = ref(
let a = 0; (import.meta.env.VITE_BASE_URL + '/infra/ws').replace('http', 'ws') +
'?token=' + getAccessToken()
// getAccessToken()
// 使用 getRefreshToken() 方法，而不使用 getAccessToken() 方法的原因：WebSocket 无法方便的刷新访问令牌
) // WebSocket 服务地址
if (value == true) {
a = 1;
await SupportStaffApi.updateLineStatus(kefuId, a)
message.success('已上线')
} else {
a = 2;
await SupportStaffApi.updateLineStatus(kefuId, a)
message.success('已下线')
}
}
const shangxian = async () => {
await SupportStaffApi.updateLineStatus(kefuId, 1)
}
const xiaxian = async () => {
await SupportStaffApi.updateLineStatus(kefuId, 2)
}
const handleSwitchChange = async (value) => {
console.log('11111:', value)
let a = 0; let a = 0;
const {status, data, send, open, close} = useWebSocket(server.value, { if (value == true) {
onConnected: function (ws) { a = 1;
shangxian(); //连接成功上线 await SupportStaffApi.updateLineStatus(kefuId, a)
console.log('websocket 连接成功！', ws); message.success('已上线')
}, } else {
onDisconnected: function (ws, event) { a = 2;
xiaxian(); //断开下线 await SupportStaffApi.updateLineStatus(kefuId, a)
console.log('WebSocket 连接断开', event); message.success('已下线')
}, }
// 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() const shangxian = async () => {
if(userId.value != 0){ await SupportStaffApi.updateLineStatus(kefuId, 1)
getBySenderIdStat() }
if(stat.value){
keFuChatBoxRef.value?.refreshMessageList() const xiaxian = async () => {
} await SupportStaffApi.updateLineStatus(kefuId, 2)
} }
a = 0; let a = 0;
const { status, data, send, open, close } = useWebSocket(server.value, {
onConnected: function (ws) {
shangxian(); //连接成功上线
console.log('websocket 连接成功！', ws);
},
onDisconnected: function (ws, event) {
xiaxian(); //断开下线
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) {
a = a + 1;
if (a == 2) {
getConversationList()
if (userId.value != 0) {
getBySenderIdStat()
if (stat.value) {
keFuChatBoxRef.value?.refreshMessageList()
}
} }
a = 0;
}
},
autoReconnect: true, // 开启自动重连
heartbeat: true
});
},
autoReconnect: true, // 开启自动重连
heartbeat: true
});
// const { data, close, open } = useWebSocket(server.value, { /** 监听 WebSocket 数据 */
// autoReconnect: true, watchEffect(() => {
// heartbeat: true if (!data.value) {
// }) return
}
try {
/** 监听 WebSocket 数据 */ // 1. 收到心跳
watchEffect(() => { if (data.value === 'pong') {
console.log('连接服务器得到消息:', data.value)
if (!data.value) {
return return
} }
try {
// 1. 收到心跳
if (data.value === 'pong') {
return
}
// 2.1 解析 type 消息类型 // 2.1 解析 type 消息类型
const jsonMessage = JSON.parse(data.value) const jsonMessage = JSON.parse(data.value)
const type = jsonMessage.type const type = jsonMessage.type
if (!type) { if (!type) {
message.error('未知的消息类型：' + data.value) message.error('未知的消息类型：' + data.value)
return return
}
// 2.2 消息类型：KEFU_MESSAGE_TYPE
if (type === WebSocketMessageTypeConstants.KEFU_MESSAGE_TYPE) {
console.log('来自用户发送的消息:', JSON.parse(jsonMessage.content))
// 刷新会话列表
// 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)
} }
}) // 2.2 消息类型：KEFU_MESSAGE_TYPE
if (type === WebSocketMessageTypeConstants.KEFU_MESSAGE_TYPE) {
console.log('来自用户发送的消息:', JSON.parse(jsonMessage.content))
const message = JSON.parse(jsonMessage.content)
if (message.senderType == 1) {
audio.play()
EventBus.emit('notification', message.content)
// Notification.requestPermission().then(permission => {
// if (permission === 'granted') {
// console.log('通知权限已开启');
// }
// });
// if (Notification.permission === 'granted') {
// console.warn('有通知权限');
// new Notification("新消息:"+message.content);
// } else {
// console.warn('没有通知权限');
// }
}
// 刷新会话列表
// 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>>() // ======================= WebSocket end =======================
const getConversationList = () => { /** 加载会话列表 */
keFuConversationRef.value?.getConversationList(findName.value) const keFuConversationRef = ref<InstanceType<typeof KeFuConversationList>>()
const getConversationList = () => {
keFuConversationRef.value?.getConversationList(findName.value)
}
/** 加载指定会话的消息列表 */
const keFuChatBoxRef = ref<InstanceType<typeof KeFuMessageList>>()
const memberBrowsingHistoryRef = ref<InstanceType<typeof MemberBrowsingHistory>>()
const memberBrowsingHistorysRef = ref<InstanceType<typeof MemberBrowsingHistorys>>()
const handleChange = async (conversation: KeFuConversationRespVO) => {
conversations.value = conversation
// chick.value = '1'
clickUser.value = 2
userId.value = conversation.userId
userInfo()
keFuChatBoxRef.value?.getNewMessageList(conversation)
memberBrowsingHistoryRef.value?.initHistory(conversation)
memberBrowsingHistorysRef.value?.initHistory(conversation)
}
const out = async () => {
// await SupportStaffApi.updateLineStatus(kefuId, 2)
window.close();
// window.location.href = '/kefu/support-staff';
}
const getBySenderIdStat = async () => {
stat.value = await KeFuMessageApi.getBySenderIdStat(userId.value)
}
const chick = ref('1')
const userInfo = async () => {
chick.value = '1'
if (clickUser.value == 2) {
user.value = await UserApi.getUserInfo(userId.value)
} }
/** 加载指定会话的消息列表 */ }
const keFuChatBoxRef = ref<InstanceType<typeof KeFuMessageList>>() const zuoji = () => {
const memberBrowsingHistoryRef = ref<InstanceType<typeof MemberBrowsingHistory>>() chick.value = '2'
const memberBrowsingHistorysRef = ref<InstanceType<typeof MemberBrowsingHistorys>>() // keFuChatBoxRef.value?.getNewMessageList(conversations.value)
const handleChange = async (conversation: KeFuConversationRespVO) => { memberBrowsingHistoryRef.value?.initHistory(conversations.value)
conversations.value = conversation }
// chick.value = '1' const jiaoyi = () => {
clickUser.value = 2 chick.value = '3'
userId.value = conversation.userId // keFuChatBoxRef.value?.getNewMessageList(conversations.value)
userInfo() // memberBrowsingHistoryRef.value?.initHistory(conversations.value)
keFuChatBoxRef.value?.getNewMessageList(conversation) }
memberBrowsingHistoryRef.value?.initHistory(conversation)
memberBrowsingHistorysRef.value?.initHistory(conversation)
}
const out = async () => {
// await SupportStaffApi.updateLineStatus(kefuId, 2)
window.close();
// window.location.href = '/kefu/support-staff';
}
const getBySenderIdStat = async () => {
stat.value = await KeFuMessageApi.getBySenderIdStat(userId.value)
}
const chick = ref('1') const findNameInput = () => {
const userInfo = async () => { keFuConversationRef.value?.getConversationList(findName.value)
chick.value = '1' }
if(clickUser.value == 2){
user.value = await UserApi.getUserInfo(userId.value)
}
}
const zuoji = () => {
chick.value = '2'
// keFuChatBoxRef.value?.getNewMessageList(conversations.value)
memberBrowsingHistoryRef.value?.initHistory(conversations.value)
}
const jiaoyi = () => {
chick.value = '3'
// keFuChatBoxRef.value?.getNewMessageList(conversations.value)
// memberBrowsingHistoryRef.value?.initHistory(conversations.value)
}
const findNameInput = () => { /** 初始化 */
keFuConversationRef.value?.getConversationList(findName.value) onMounted(() => {
} getConversationList()
// 打开 websocket 连接
open()
console.log('WebSocket 已初始化');
})
/** 初始化 */ // /** 销毁 */
onMounted(() => {
getConversationList()
// 打开 websocket 连接
open()
console.log('WebSocket 已初始化');
})
// /** 销毁 */
// onBeforeUnmount(() => { // onBeforeUnmount(() => {
// // 关闭 websocket 连接 // // 关闭 websocket 连接
// close() // close()
@ -387,32 +394,32 @@ import type { TabsPaneContext } from 'element-plus'
</script> </script>
<style lang="scss"> <style lang="scss">
.kefu { .kefu {
height: calc(100vh - 165px); height: calc(100vh - 165px);
overflow: auto; overflow: auto;
/* 确保内容可滚动 */ /* 确保内容可滚动 */
} }
/* 定义滚动条样式 */ /* 定义滚动条样式 */
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 10px; width: 10px;
height: 6px; height: 6px;
} }
/* 定义滚动条轨道 内阴影+圆角 */ /* 定义滚动条轨道 内阴影+圆角 */
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
box-shadow: inset 0 0 0 rgba(240, 240, 240, 0.5); box-shadow: inset 0 0 0 rgba(240, 240, 240, 0.5);
border-radius: 10px; border-radius: 10px;
background-color: #fff; background-color: #fff;
} }
/* 定义滑块 内阴影+圆角 */ /* 定义滑块 内阴影+圆角 */
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
border-radius: 10px; border-radius: 10px;
box-shadow: inset 0 0 0 rgba(240, 240, 240, 0.5); box-shadow: inset 0 0 0 rgba(240, 240, 240, 0.5);
background-color: rgba(240, 240, 240, 0.5); background-color: rgba(240, 240, 240, 0.5);
} }
</style> </style>

BIN
yudao-admin-vue3/src/views/mall/promotion/kefu/xm3463.mp3 Normal file
View File

Binary file not shown.

6
yudao-admin-vue3/src/views/mall/promotion/supportstaff/index.vue
View File

@ -169,6 +169,8 @@ import { SupportStaffApi, SupportStaffVO } from '@/api/mall/promotion/supportsta
import SupportStaffForm from './SupportStaffForm.vue' import SupportStaffForm from './SupportStaffForm.vue'
import { setStaffToken} from '@/utils/auth' import { setStaffToken} from '@/utils/auth'
import { createImageViewer } from '@/components/ImageViewer' import { createImageViewer } from '@/components/ImageViewer'
import { useRouter } from 'vue-router'
const router = useRouter()
/** 客服人员 列表 */ /** 客服人员 列表 */
defineOptions({ name: 'SupportStaff' }) defineOptions({ name: 'SupportStaff' })
@ -247,8 +249,10 @@ const handleDelete = async (id: number) => {
/** 客服进入工作台 */ /** 客服进入工作台 */
const handleEnterConsole = async (id: number,name: string,pic: string) => { const handleEnterConsole = async (id: number,name: string,pic: string) => {
setStaffToken(id); setStaffToken(id);
const url = `${window.location.origin}/kefu/kefu?id=${encodeURIComponent(id)}&name=${encodeURIComponent(name)}&pic=${encodeURIComponent(pic)}`; const url = `${window.location.origin}/kefu/chat?id=${encodeURIComponent(id)}&name=${encodeURIComponent(name)}&pic=${encodeURIComponent(pic)}`;
window.open(url, '_blank'); window.open(url, '_blank');
// const url = `/kefu/chat?id=${encodeURIComponent(id)}&name=${encodeURIComponent(name)}&pic=${encodeURIComponent(pic)}`;
// router.push(url);
} }
/** 导出按钮操作 */ /** 导出按钮操作 */
const handleExport = async () => { const handleExport = async () => {