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>
<div class="kefu">
<div
v-for="item in conversationList"
:key="item.id"
@ -9,7 +10,7 @@
@contextmenu.prevent="rightClick($event as PointerEvent, item)"
>
<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
:hidden="item.adminUnreadMessageCount === 0"
@ -19,10 +20,10 @@
<el-avatar :src="item.userAvatar" alt="avatar" />
</el-badge>
</div>
<div class="ml-10px w-100%">
<div class="flex justify-between items-center w-100%">
<div class="ml-3px w-full">
<div class="flex justify-between items-center w-full">
<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') }}
</span>
</div>
@ -182,12 +183,13 @@ watch(showRightMenu, (val) => {
<style lang="scss" scoped>
.kefu {
&-conversation {
height: 60px;
padding: 10px;
height: 55px;
padding: 8px;
//background-color: #fff;
transition: border-left 0.05s ease-in-out; /* 设置过渡效果 */
.username {
font-size: 20%;
min-width: 0;
max-width: 60%;
overflow: hidden;
@ -198,7 +200,7 @@ watch(showRightMenu, (val) => {
}
.last-message {
font-size: 13px;
font-size: 15px;
width: 200px;
overflow: hidden; // 隐藏超出的文本
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 class="flex justify-center items-center mb-20px">
<!-- 日期 -->
<div
v-if="
<div v-if="
item.contentType !== KeFuMessageContentTypeEnum.SYSTEM && showTime(item, index)
" class="date-message">
{{ formatDate(item.createTime) }}
@ -21,19 +20,16 @@ v-if="
{{ item.content }}
</div>
</div>
<div
:class="[
<div :class="[
item.senderType === UserTypeEnum.MEMBER
? `ss-row-left`
: item.senderType === UserTypeEnum.ADMIN
? `ss-row-right`
: ''
]" class="flex mb-20px w-[100%]">
<el-avatar
v-if="item.senderType === UserTypeEnum.MEMBER" :src="conversation.userAvatar"
<el-avatar v-if="item.senderType === UserTypeEnum.MEMBER" :src="conversation.userAvatar"
alt="avatar" class="w-60px h-60px" />
<div
:class="{ 'kefu-message': KeFuMessageContentTypeEnum.TEXT === item.contentType }"
<div :class="{ 'kefu-message': KeFuMessageContentTypeEnum.TEXT === item.contentType }"
class="p-10px">
<!-- 文本消息 -->
<MessageItem :message="item">
@ -44,15 +40,13 @@ v-if="item.senderType === UserTypeEnum.MEMBER" :src="conversation.userAvatar"
</MessageItem>
<!-- 图片消息 -->
<MessageItem :message="item">
<el-image
v-if="KeFuMessageContentTypeEnum.IMAGE === item.contentType"
<el-image v-if="KeFuMessageContentTypeEnum.IMAGE === item.contentType"
:initial-index="0" :preview-src-list="[item.content]" :src="item.content"
class="w-200px" fit="contain" preview-teleported />
</MessageItem>
<!-- 商品消息 -->
<MessageItem :message="item">
<ProductItem
v-if="KeFuMessageContentTypeEnum.PRODUCT === item.contentType"
<ProductItem v-if="KeFuMessageContentTypeEnum.PRODUCT === item.contentType"
:spuId="getMessageContent(item).spuId" :picUrl="getMessageContent(item).picUrl"
:price="getMessageContent(item).price"
:skuText="getMessageContent(item).introduction"
@ -61,20 +55,17 @@ v-if="KeFuMessageContentTypeEnum.PRODUCT === item.contentType"
</MessageItem>
<!-- 订单消息 -->
<MessageItem :message="item">
<OrderItem
v-if="KeFuMessageContentTypeEnum.ORDER === item.contentType"
<OrderItem v-if="KeFuMessageContentTypeEnum.ORDER === item.contentType"
:message="item" class="max-w-100%" />
</MessageItem>
</div>
<el-avatar
v-if="item.senderType === UserTypeEnum.ADMIN" :src="item.senderAvatar"
<el-avatar v-if="item.senderType === UserTypeEnum.ADMIN" :src="item.senderAvatar"
alt="avatar" />
</div>
</div>
</div>
</el-scrollbar>
<div
v-show="showNewMessageTip" class="newMessageTip flex items-center cursor-pointer"
<div v-show="showNewMessageTip" class="newMessageTip flex items-center cursor-pointer"
@click="handleToNewMessage">
<span>有新消息</span>
<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" />
</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>
<img :src="Picture2" class="w-27px h-27px" @click="getOnlineStaffList" title="转接"/>
<img :src="Picture2" class="w-27px h-27px" @click="getOnlineStaffList" title="转接" />
</div>
<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 }}
</el-dropdown-item>
</template>
</el-dropdown>
</div>
<el-input v-model="message" :rows="6" style="border-style: none" type="textarea" />
<div class="h-45px flex justify-end">
@ -120,12 +114,15 @@ v-show="showNewMessageTip" class="newMessageTip flex items-center cursor-pointer
<!-- 左边占 30% -->
<div style="flex: 0 0 20%; padding: 10px;">
<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>
</div>
<!-- 右边占 70% -->
<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}}
</p>
</div>
@ -155,11 +152,11 @@ v-show="showNewMessageTip" class="newMessageTip flex items-center cursor-pointer
import relativeTime from 'dayjs/plugin/relativeTime'
import { debounce } from 'lodash-es'
import { jsonParse } from '@/utils'
import { getStaffToken, setStaffToken} from '@/utils/auth'
import { getStaffToken, setStaffToken } from '@/utils/auth'
import type { DropdownInstance } from 'element-plus'
import { ref } from 'vue'
import * as DictDataApi from '@/api/system/dict/dict.data'
const huashuType = ref<DictDataApi.DictDataVO[]>([]) //
const targetMenuId = ref('0')
@ -170,7 +167,7 @@ v-show="showNewMessageTip" class="newMessageTip flex items-center cursor-pointer
let dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('客服话术') // 客服话术库弹窗标题
// 话术库的数据
const verbalTrickList = ref<VerbalTrickVO[]>([])
const verbalTrickList = ref<VerbalTrickVO[]>([])
const message = ref('') // 消息弹窗
const { replaceEmoji } = useEmoji()
const messageTool = useMessage()
@ -178,10 +175,10 @@ v-show="showNewMessageTip" class="newMessageTip flex items-center cursor-pointer
const conversation = ref<KeFuConversationRespVO>({} as KeFuConversationRespVO) // 用户会话
const showNewMessageTip = ref(false) // 显示有新消息提示
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'
const onlineStaffList = ref<SupportStaffVO[]>([]) // 在线客服列表的数据
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
@ -297,25 +294,25 @@ v-show="showNewMessageTip" class="newMessageTip flex items-center cursor-pointer
//话术分类菜单
const getHuaShuTypeList = async () => {
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);
verbalTrickList.value = response; // 将数据部分赋值给 verbalTrickList
}
verbalTrickList.value = response; // 将数据部分赋值给 verbalTrickList
}
/*选择话术库内容*/
const huashuClick = (content: string) => {
const huashuClick = (content : string) => {
message.value = content;
dialogVisible.value = false;
}
const clickMenu = (id: string) => {
console.log('1111111111',id)
const clickMenu = (id : string) => {
console.log('1111111111', id)
getVerbalTrickList(id)
}
/** 发送文本消息 */
const handleSendMessage = async () => {
@ -423,9 +420,9 @@ v-show="showNewMessageTip" class="newMessageTip flex items-center cursor-pointer
} finally {
}
}
/** 转接客服人员列表 id：会话id kefuId：客服人员id */
const transferConversion = async (kefuId: number) => {
const transferConversion = async (kefuId : number) => {
try {
await KeFuConversationApi.transferConversion(queryParams.conversationId, kefuId)
} finally {
@ -435,15 +432,17 @@ v-show="showNewMessageTip" class="newMessageTip flex items-center cursor-pointer
/** 初始化 **/
onMounted(() => {
getHuaShuTypeList()
getVerbalTrickList(targetMenuId.value)
getVerbalTrickList(targetMenuId.value)
})
</script>
<style lang="scss" scoped>
.hover-shadow:hover {
background-color: lightgray; /* 可根据需要调整颜色 */
background-color: lightgray;
/* 可根据需要调整颜色 */
}
.kefu {
&-title {
border-bottom: #e4e0e0 solid 1px;
@ -487,8 +486,8 @@ v-show="showNewMessageTip" class="newMessageTip flex items-center cursor-pointer
}
}
}
.ss-row-right {
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，里面有浏览足迹 -->
<template>
<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-tab-pane label="最近浏览" name="a" />
<el-tab-pane label="订单列表" name="b" />

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

@ -1,35 +1,99 @@
<template>
<el-row :gutter="10" style="display: flex; justify-content: center;">
<!-- 会话列表 -->
<el-col :span="5" >
<ContentWrap>
<KeFuConversationList ref="keFuConversationRef" @change="handleChange" />
</ContentWrap>
</el-col>
<!-- 会话详情（选中会话的消息列表） -->
<el-col :span="10">
<ContentWrap>
<KeFuMessageList ref="keFuChatBoxRef" @change="getConversationList" />
</ContentWrap>
</el-col>
<!-- 会员足迹（选中会话的会员足迹） -->
<el-col :span="5">
<ContentWrap>
<MemberBrowsingHistory ref="memberBrowsingHistoryRef" />
</ContentWrap>
</el-col>
</el-row>
<div>
<!-- 新区域，放在头部 -->
<el-row style="display: flex; justify-content: center;">
<el-col :span="24">
<div style="width:100%;height:70px;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="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
/>
<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>
<script lang="ts" setup>
import { KeFuConversationList, KeFuMessageList, MemberBrowsingHistory } 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 {KeFuConversationList, KeFuMessageList, MemberBrowsingHistory} 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'
defineOptions({ name: 'KeFu' })
defineOptions({name: 'KeFu'})
const value6 = ref(true)
const message = useMessage() // 消息弹窗
@ -41,7 +105,7 @@
) // WebSocket 服务地址
/** 发起 WebSocket 连接 */
const { data, close, open } = useWebSocket(server.value, {
const {data, close, open} = useWebSocket(server.value, {
autoReconnect: false,
heartbeat: true
})
@ -116,6 +180,7 @@
.kefu {
height: calc(100vh - 165px);
overflow: auto; /* 确保内容可滚动 */
}
/* 定义滚动条样式 */
@ -133,8 +198,10 @@
/* 定义滑块 内阴影+圆角 */
::-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>