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

优化后台客服界面

Browse Source
This commit is contained in:
sonjinyon 2024-11-04 13:26:06 +08:00
parent ef9ebbfaba
commit 262b098be8
4 changed files with 151 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
yudao-admin-vue3/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
View File

@ -1,5 +1,6 @@
<template> <template>
<div class="kefu"> <div class="kefu">
<div <div
v-for="item in conversationList" v-for="item in conversationList"
:key="item.id" :key="item.id"
@ -9,7 +10,7 @@
@contextmenu.prevent="rightClick($event as PointerEvent, item)" @contextmenu.prevent="rightClick($event as PointerEvent, item)"
> >
<div class="flex justify-center items-center w-100%"> <div class="flex justify-center items-center w-100%">
<div class="flex justify-center items-center w-50px h-50px"> <div class="flex justify-center items-center w-40px h-40px">
<!-- 头像 + 未读 --> <!-- 头像 + 未读 -->
<el-badge <el-badge
:hidden="item.adminUnreadMessageCount === 0" :hidden="item.adminUnreadMessageCount === 0"
@ -19,10 +20,10 @@
<el-avatar :src="item.userAvatar" alt="avatar" /> <el-avatar :src="item.userAvatar" alt="avatar" />
</el-badge> </el-badge>
</div> </div>
<div class="ml-10px w-100%"> <div class="ml-3px w-full">
<div class="flex justify-between items-center w-100%"> <div class="flex justify-between items-center w-full">
<span class="username">{{ item.userNickname }}</span> <span class="username">{{ item.userNickname }}</span>
<span class="color-[var(--left-menu-text-color)]" style="font-size: 13px"> <span class="color-[var(--left-menu-text-color)]" style="font-size: 12px">
{{ formatPast(item.lastMessageTime, 'YYYY-MM-DD') }} {{ formatPast(item.lastMessageTime, 'YYYY-MM-DD') }}
</span> </span>
</div> </div>
@ -182,12 +183,13 @@ watch(showRightMenu, (val) => {
<style lang="scss" scoped> <style lang="scss" scoped>
.kefu { .kefu {
&-conversation { &-conversation {
height: 60px; height: 55px;
padding: 10px; padding: 8px;
//background-color: #fff; //background-color: #fff;
transition: border-left 0.05s ease-in-out; /* 设置过渡效果 */ transition: border-left 0.05s ease-in-out; /* 设置过渡效果 */
.username { .username {
font-size: 20%;
min-width: 0; min-width: 0;
max-width: 60%; max-width: 60%;
overflow: hidden; overflow: hidden;
@ -198,7 +200,7 @@ watch(showRightMenu, (val) => {
} }
.last-message { .last-message {
font-size: 13px; font-size: 15px;
width: 200px; width: 200px;
overflow: hidden; // 隐藏超出的文本 overflow: hidden; // 隐藏超出的文本
white-space: nowrap; // 禁止换行 white-space: nowrap; // 禁止换行

95
yudao-admin-vue3/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
View File

@ -10,8 +10,7 @@
<div v-for="(item, index) in getMessageList0" :key="item.id" class="w-[100%]"> <div v-for="(item, index) in getMessageList0" :key="item.id" class="w-[100%]">
<div class="flex justify-center items-center mb-20px"> <div class="flex justify-center items-center mb-20px">
<!-- 日期 --> <!-- 日期 -->
<div <div v-if="
v-if="
item.contentType !== KeFuMessageContentTypeEnum.SYSTEM && showTime(item, index) item.contentType !== KeFuMessageContentTypeEnum.SYSTEM && showTime(item, index)
" class="date-message"> " class="date-message">
{{ formatDate(item.createTime) }} {{ formatDate(item.createTime) }}
@ -21,19 +20,16 @@ v-if="
{{ item.content }} {{ item.content }}
</div> </div>
</div> </div>
<div <div :class="[
:class="[
item.senderType === UserTypeEnum.MEMBER item.senderType === UserTypeEnum.MEMBER
? `ss-row-left` ? `ss-row-left`
: item.senderType === UserTypeEnum.ADMIN : item.senderType === UserTypeEnum.ADMIN
? `ss-row-right` ? `ss-row-right`
: '' : ''
]" class="flex mb-20px w-[100%]"> ]" class="flex mb-20px w-[100%]">
<el-avatar <el-avatar v-if="item.senderType === UserTypeEnum.MEMBER" :src="conversation.userAvatar"
v-if="item.senderType === UserTypeEnum.MEMBER" :src="conversation.userAvatar"
alt="avatar" class="w-60px h-60px" /> alt="avatar" class="w-60px h-60px" />
<div <div :class="{ 'kefu-message': KeFuMessageContentTypeEnum.TEXT === item.contentType }"
:class="{ 'kefu-message': KeFuMessageContentTypeEnum.TEXT === item.contentType }"
class="p-10px"> class="p-10px">
<!-- 文本消息 --> <!-- 文本消息 -->
<MessageItem :message="item"> <MessageItem :message="item">
@ -44,15 +40,13 @@ v-if="item.senderType === UserTypeEnum.MEMBER" :src="conversation.userAvatar"
</MessageItem> </MessageItem>
<!-- 图片消息 --> <!-- 图片消息 -->
<MessageItem :message="item"> <MessageItem :message="item">
<el-image <el-image v-if="KeFuMessageContentTypeEnum.IMAGE === item.contentType"
v-if="KeFuMessageContentTypeEnum.IMAGE === item.contentType"
:initial-index="0" :preview-src-list="[item.content]" :src="item.content" :initial-index="0" :preview-src-list="[item.content]" :src="item.content"
class="w-200px" fit="contain" preview-teleported /> class="w-200px" fit="contain" preview-teleported />
</MessageItem> </MessageItem>
<!-- 商品消息 --> <!-- 商品消息 -->
<MessageItem :message="item"> <MessageItem :message="item">
<ProductItem <ProductItem v-if="KeFuMessageContentTypeEnum.PRODUCT === item.contentType"
v-if="KeFuMessageContentTypeEnum.PRODUCT === item.contentType"
:spuId="getMessageContent(item).spuId" :picUrl="getMessageContent(item).picUrl" :spuId="getMessageContent(item).spuId" :picUrl="getMessageContent(item).picUrl"
:price="getMessageContent(item).price" :price="getMessageContent(item).price"
:skuText="getMessageContent(item).introduction" :skuText="getMessageContent(item).introduction"
@ -61,20 +55,17 @@ v-if="KeFuMessageContentTypeEnum.PRODUCT === item.contentType"
</MessageItem> </MessageItem>
<!-- 订单消息 --> <!-- 订单消息 -->
<MessageItem :message="item"> <MessageItem :message="item">
<OrderItem <OrderItem v-if="KeFuMessageContentTypeEnum.ORDER === item.contentType"
v-if="KeFuMessageContentTypeEnum.ORDER === item.contentType"
:message="item" class="max-w-100%" /> :message="item" class="max-w-100%" />
</MessageItem> </MessageItem>
</div> </div>
<el-avatar <el-avatar v-if="item.senderType === UserTypeEnum.ADMIN" :src="item.senderAvatar"
v-if="item.senderType === UserTypeEnum.ADMIN" :src="item.senderAvatar"
alt="avatar" /> alt="avatar" />
</div> </div>
</div> </div>
</div> </div>
</el-scrollbar> </el-scrollbar>
<div <div v-show="showNewMessageTip" class="newMessageTip flex items-center cursor-pointer"
v-show="showNewMessageTip" class="newMessageTip flex items-center cursor-pointer"
@click="handleToNewMessage"> @click="handleToNewMessage">
<span>有新消息</span> <span>有新消息</span>
<Icon class="ml-5px" icon="ep:bottom" /> <Icon class="ml-5px" icon="ep:bottom" />
@ -91,18 +82,21 @@ v-show="showNewMessageTip" class="newMessageTip flex items-center cursor-pointer
<img :src="Picture" class="w-32px h-32px" @click="huashu" /> <img :src="Picture" class="w-32px h-32px" @click="huashu" />
</div> </div>
<!-- 转接按钮 --> <!-- 转接按钮 -->
<el-dropdown placement="top" style="margin-left: auto;margin-right: 15px; margin-top:5px;margin-top:5px;cursor: pointer;" ref="dropdown1" trigger="contextmenu"> <el-dropdown placement="top"
style="margin-left: auto;margin-right: 15px; margin-top:5px;margin-top:5px;cursor: pointer;"
ref="dropdown1" trigger="contextmenu">
<div> <div>
<img :src="Picture2" class="w-27px h-27px" @click="getOnlineStaffList" title="转接"/> <img :src="Picture2" class="w-27px h-27px" @click="getOnlineStaffList" title="转接" />
</div> </div>
<template #dropdown> <template #dropdown>
<el-dropdown-item v-for="staff in onlineStaffList" :key="staff.id" :disabled="staff.id===getStaffToken()" @click="transferConversion(staff.id)"> <el-dropdown-item v-for="staff in onlineStaffList" :key="staff.id"
:disabled="staff.id===getStaffToken()" @click="transferConversion(staff.id)">
{{ staff.name }} {{ staff.name }}
</el-dropdown-item> </el-dropdown-item>
</template> </template>
</el-dropdown> </el-dropdown>
</div> </div>
<el-input v-model="message" :rows="6" style="border-style: none" type="textarea" /> <el-input v-model="message" :rows="6" style="border-style: none" type="textarea" />
<div class="h-45px flex justify-end"> <div class="h-45px flex justify-end">
@ -120,12 +114,15 @@ v-show="showNewMessageTip" class="newMessageTip flex items-center cursor-pointer
<!-- 左边占 30% --> <!-- 左边占 30% -->
<div style="flex: 0 0 20%; padding: 10px;"> <div style="flex: 0 0 20%; padding: 10px;">
<el-menu :default-active="targetMenuId"> <el-menu :default-active="targetMenuId">
<el-menu-item v-for="item in huashuType" :index="item.value" :key="item.value" @click="clickMenu(item.value)">{{item.label}}</el-menu-item> <el-menu-item v-for="item in huashuType" :index="item.value" :key="item.value"
@click="clickMenu(item.value)">{{item.label}}</el-menu-item>
</el-menu> </el-menu>
</div> </div>
<!-- 右边占 70% --> <!-- 右边占 70% -->
<div style="flex: 1; padding: 5px; overflow-y: auto; max-height: 400px;"> <div style="flex: 1; padding: 5px; overflow-y: auto; max-height: 400px;">
<p v-for="item in verbalTrickList" :key="item.id" style="font-size: 12px;cursor: pointer;transition: background-color 0.3s;" class="hover-shadow" @click="huashuClick(item.details)"> <p v-for="item in verbalTrickList" :key="item.id"
style="font-size: 12px;cursor: pointer;transition: background-color 0.3s;" class="hover-shadow"
@click="huashuClick(item.details)">
{{item.details}} {{item.details}}
</p> </p>
</div> </div>
@ -155,11 +152,11 @@ v-show="showNewMessageTip" class="newMessageTip flex items-center cursor-pointer
import relativeTime from 'dayjs/plugin/relativeTime' import relativeTime from 'dayjs/plugin/relativeTime'
import { debounce } from 'lodash-es' import { debounce } from 'lodash-es'
import { jsonParse } from '@/utils' import { jsonParse } from '@/utils'
import { getStaffToken, setStaffToken} from '@/utils/auth' import { getStaffToken, setStaffToken } from '@/utils/auth'
import type { DropdownInstance } from 'element-plus' import type { DropdownInstance } from 'element-plus'
import { ref } from 'vue' import { ref } from 'vue'
import * as DictDataApi from '@/api/system/dict/dict.data' import * as DictDataApi from '@/api/system/dict/dict.data'
const huashuType = ref<DictDataApi.DictDataVO[]>([]) // const huashuType = ref<DictDataApi.DictDataVO[]>([]) //
const targetMenuId = ref('0') const targetMenuId = ref('0')
@ -170,7 +167,7 @@ v-show="showNewMessageTip" class="newMessageTip flex items-center cursor-pointer
let dialogVisible = ref(false) // 弹窗的是否展示 let dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('客服话术') // 客服话术库弹窗标题 const dialogTitle = ref('客服话术') // 客服话术库弹窗标题
// 话术库的数据 // 话术库的数据
const verbalTrickList = ref<VerbalTrickVO[]>([]) const verbalTrickList = ref<VerbalTrickVO[]>([])
const message = ref('') // 消息弹窗 const message = ref('') // 消息弹窗
const { replaceEmoji } = useEmoji() const { replaceEmoji } = useEmoji()
const messageTool = useMessage() const messageTool = useMessage()
@ -178,10 +175,10 @@ v-show="showNewMessageTip" class="newMessageTip flex items-center cursor-pointer
const conversation = ref<KeFuConversationRespVO>({} as KeFuConversationRespVO) // 用户会话 const conversation = ref<KeFuConversationRespVO>({} as KeFuConversationRespVO) // 用户会话
const showNewMessageTip = ref(false) // 显示有新消息提示 const showNewMessageTip = ref(false) // 显示有新消息提示
import { SupportStaffApi, SupportStaffVO } from '@/api/mall/promotion/supportstaff' // 客服列表接口 import { SupportStaffApi, SupportStaffVO } from '@/api/mall/promotion/supportstaff' // 客服列表接口
import { KeFuConversationApi} from '@/api/mall/promotion/kefu/conversation' import { KeFuConversationApi } from '@/api/mall/promotion/kefu/conversation'
import { number } from 'vue-types' import { number } from 'vue-types'
const onlineStaffList = ref<SupportStaffVO[]>([]) // 在线客服列表的数据 const onlineStaffList = ref<SupportStaffVO[]>([]) // 在线客服列表的数据
const queryParams = reactive({ const queryParams = reactive({
pageNo: 1, pageNo: 1,
pageSize: 10, pageSize: 10,
@ -297,25 +294,25 @@ v-show="showNewMessageTip" class="newMessageTip flex items-center cursor-pointer
//话术分类菜单 //话术分类菜单
const getHuaShuTypeList = async () => { const getHuaShuTypeList = async () => {
const data = await DictDataApi.getHuaShuTypeList() const data = await DictDataApi.getHuaShuTypeList()
huashuType.value = data huashuType.value = data
} }
//话术内容 //话术内容
const getVerbalTrickList = async (id: string) => { const getVerbalTrickList = async (id : string) => {
const response = await VerbalTrickApi.getVerbalTrickList(id); const response = await VerbalTrickApi.getVerbalTrickList(id);
verbalTrickList.value = response; // 将数据部分赋值给 verbalTrickList verbalTrickList.value = response; // 将数据部分赋值给 verbalTrickList
} }
/*选择话术库内容*/ /*选择话术库内容*/
const huashuClick = (content: string) => { const huashuClick = (content : string) => {
message.value = content; message.value = content;
dialogVisible.value = false; dialogVisible.value = false;
} }
const clickMenu = (id: string) => { const clickMenu = (id : string) => {
console.log('1111111111',id) console.log('1111111111', id)
getVerbalTrickList(id) getVerbalTrickList(id)
} }
/** 发送文本消息 */ /** 发送文本消息 */
const handleSendMessage = async () => { const handleSendMessage = async () => {
@ -423,9 +420,9 @@ v-show="showNewMessageTip" class="newMessageTip flex items-center cursor-pointer
} finally { } finally {
} }
} }
/** 转接客服人员列表 id：会话id kefuId：客服人员id */ /** 转接客服人员列表 id：会话id kefuId：客服人员id */
const transferConversion = async (kefuId: number) => { const transferConversion = async (kefuId : number) => {
try { try {
await KeFuConversationApi.transferConversion(queryParams.conversationId, kefuId) await KeFuConversationApi.transferConversion(queryParams.conversationId, kefuId)
} finally { } finally {
@ -435,15 +432,17 @@ v-show="showNewMessageTip" class="newMessageTip flex items-center cursor-pointer
/** 初始化 **/ /** 初始化 **/
onMounted(() => { onMounted(() => {
getHuaShuTypeList() getHuaShuTypeList()
getVerbalTrickList(targetMenuId.value) getVerbalTrickList(targetMenuId.value)
}) })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.hover-shadow:hover { .hover-shadow:hover {
background-color: lightgray; /* 可根据需要调整颜色 */ background-color: lightgray;
/* 可根据需要调整颜色 */
} }
.kefu { .kefu {
&-title { &-title {
border-bottom: #e4e0e0 solid 1px; border-bottom: #e4e0e0 solid 1px;
@ -487,8 +486,8 @@ v-show="showNewMessageTip" class="newMessageTip flex items-center cursor-pointer
} }
} }
} }
.ss-row-right { .ss-row-right {
justify-content: flex-end; justify-content: flex-end;

2
yudao-admin-vue3/src/views/mall/promotion/kefu/components/history/MemberBrowsingHistory.vue
View File

@ -1,7 +1,7 @@
<!-- 目录是不是叫 member 好点。然后这个组件是 MemberInfo，里面有浏览足迹 --> <!-- 目录是不是叫 member 好点。然后这个组件是 MemberInfo，里面有浏览足迹 -->
<template> <template>
<div v-show="!isEmpty(conversation)" class="kefu"> <div v-show="!isEmpty(conversation)" class="kefu">
<div class="header-title h-60px flex justify-center items-center">他的足迹</div> <!-- <div class="header-title h-60px flex justify-center items-center">他的足迹</div> -->
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
<el-tab-pane label="最近浏览" name="a" /> <el-tab-pane label="最近浏览" name="a" />
<el-tab-pane label="订单列表" name="b" /> <el-tab-pane label="订单列表" name="b" />

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

@ -1,35 +1,99 @@
<template> <template>
<el-row :gutter="10" style="display: flex; justify-content: center;"> <div>
<!-- 会话列表 --> <!-- 新区域，放在头部 -->
<el-col :span="5" > <el-row style="display: flex; justify-content: center;">
<ContentWrap>
<KeFuConversationList ref="keFuConversationRef" @change="handleChange" /> <el-col :span="24">
</ContentWrap> <div style="width:100%;height:70px;background-color:#3c80ff;">
</el-col> <el-row>
<!-- 会话详情（选中会话的消息列表） --> <el-col :span="6">
<el-col :span="10"> <el-input
<ContentWrap> style="width: 80%;margin-top: 20px;margin-left:10px;"
<KeFuMessageList ref="keFuChatBoxRef" @change="getConversationList" /> :suffix-icon="Search"
</ContentWrap> />
</el-col> </el-col>
<!-- 会员足迹（选中会话的会员足迹） -->
<el-col :span="5"> <el-col :span="6">
<ContentWrap> <span style="display: flex; margin-top: 15px;">
<MemberBrowsingHistory ref="memberBrowsingHistoryRef" /> <el-avatar
</ContentWrap> src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
</el-col> />
</el-row> <span style="margin-left:5px;margin-top: 9px;">客服桃子</span>
<el-switch
style="margin-top: 4px;--el-switch-on-color: #13ce66; --el-switch-off-color: #b6bac1;"
v-model="value6"
class="ml-2"
width="60"
inline-prompt
active-text="在线"
inactive-text="下线"
/>
</span>
</el-col>
<el-col :span="6">
<el-button 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 style="width:33%;height:70px" index="1">客户信息</el-menu-item>
<el-menu-item 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>
<!-- <div style="color: #ffffff;" class="header-title h-60px flex justify-center items-center">他的足迹</div> -->
</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">
<ContentWrap>
<KeFuMessageList ref="keFuChatBoxRef" @change="getConversationList"/>
</ContentWrap>
</el-col>
<!-- 会员足迹（选中会话的会员足迹） -->
<el-col :span="6">
<ContentWrap>
<MemberBrowsingHistory ref="memberBrowsingHistoryRef"/>
</ContentWrap>
</el-col>
</el-row>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { KeFuConversationList, KeFuMessageList, MemberBrowsingHistory } from './components' import {KeFuConversationList, KeFuMessageList, MemberBrowsingHistory} from './components'
import { WebSocketMessageTypeConstants } from './components/tools/constants' import {WebSocketMessageTypeConstants} from './components/tools/constants'
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'
defineOptions({ name: 'KeFu' }) defineOptions({name: 'KeFu'})
const value6 = ref(true)
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
@ -41,7 +105,7 @@
) // WebSocket 服务地址 ) // WebSocket 服务地址
/** 发起 WebSocket 连接 */ /** 发起 WebSocket 连接 */
const { data, close, open } = useWebSocket(server.value, { const {data, close, open} = useWebSocket(server.value, {
autoReconnect: false, autoReconnect: false,
heartbeat: true heartbeat: true
}) })
@ -116,6 +180,7 @@
.kefu { .kefu {
height: calc(100vh - 165px); height: calc(100vh - 165px);
overflow: auto; /* 确保内容可滚动 */ overflow: auto; /* 确保内容可滚动 */
} }
/* 定义滚动条样式 */ /* 定义滚动条样式 */
@ -133,8 +198,10 @@
/* 定义滑块 内阴影+圆角 */ /* 定义滑块 内阴影+圆角 */
::-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>