【新增】：mall 客服初始化
puhui999
parent
bc8948eecf
commit
d3614cbbac
|
|
@ -29,5 +29,8 @@ VITE_BASE_PATH=/
|
|||
# 商城H5会员端域名
|
||||
VITE_MALL_H5_DOMAIN='http://localhost:3000'
|
||||
|
||||
# 客户端静态资源地址 空=默认使用服务端指定的CDN资源地址前缀 | local=本地 | http(s)://xxx.xxx=自定义静态资源地址前缀
|
||||
VITE_STATIC_URL = https://file.sheepjs.com
|
||||
|
||||
# 验证码的开关
|
||||
VITE_APP_CAPTCHA_ENABLE=false
|
||||
|
|
|
|||
|
|
@ -0,0 +1,71 @@
|
|||
import request from '@/config/axios'
|
||||
|
||||
export interface KeFuConversationRespVO {
|
||||
/**
|
||||
* 编号
|
||||
*/
|
||||
id: number
|
||||
/**
|
||||
* 会话所属用户
|
||||
*/
|
||||
userId: number
|
||||
/**
|
||||
* 会话所属用户头像
|
||||
*/
|
||||
userAvatar: string
|
||||
/**
|
||||
* 会话所属用户昵称
|
||||
*/
|
||||
nickname: string
|
||||
/**
|
||||
* 最后聊天时间
|
||||
*/
|
||||
lastMessageTime: Date
|
||||
/**
|
||||
* 最后聊天内容
|
||||
*/
|
||||
lastMessageContent: string
|
||||
/**
|
||||
* 最后发送的消息类型
|
||||
*/
|
||||
lastMessageContentType: number
|
||||
/**
|
||||
* 管理端置顶
|
||||
*/
|
||||
adminPinned: boolean
|
||||
/**
|
||||
* 用户是否可见
|
||||
*/
|
||||
userDeleted: boolean
|
||||
/**
|
||||
* 管理员是否可见
|
||||
*/
|
||||
adminDeleted: boolean
|
||||
/**
|
||||
* 管理员未读消息数
|
||||
*/
|
||||
adminUnreadMessageCount: number
|
||||
/**
|
||||
* 创建时间
|
||||
*/
|
||||
createTime?: string
|
||||
}
|
||||
|
||||
// 客服会话 API
|
||||
export const KeFuConversationApi = {
|
||||
// 获得客服会话列表
|
||||
getConversationList: async () => {
|
||||
return await request.get({ url: '/promotion/kefu-conversation/list' })
|
||||
},
|
||||
// 客服会话置顶
|
||||
updateConversationPinned: async (data: any) => {
|
||||
return await request.put({
|
||||
url: '/promotion/kefu-conversation/update-conversation-pinned',
|
||||
data
|
||||
})
|
||||
},
|
||||
// 删除客服会话
|
||||
deleteConversation: async (id: number) => {
|
||||
return await request.get({ url: '/promotion/kefu-conversation/delete?id' + id })
|
||||
}
|
||||
}
|
||||
|
|
@ -29,8 +29,8 @@
|
|||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||||
:disabled="!getIsOpen"
|
||||
clearable
|
||||
type="textarea"
|
||||
placeholder="请输入你要发送的消息"
|
||||
type="textarea"
|
||||
/>
|
||||
<el-select v-model="sendUserId" class="mt-4" placeholder="请选择发送人">
|
||||
<el-option key="" label="所有人" value="" />
|
||||
|
|
@ -71,7 +71,7 @@
|
|||
<script lang="ts" setup>
|
||||
import { formatDate } from '@/utils/formatTime'
|
||||
import { useWebSocket } from '@vueuse/core'
|
||||
import { getAccessToken } from '@/utils/auth'
|
||||
// import { getAccessToken } from '@/utils/auth'
|
||||
import * as UserApi from '@/api/system/user'
|
||||
|
||||
defineOptions({ name: 'InfraWebSocket' })
|
||||
|
|
|
|||
|
|
@ -0,0 +1,89 @@
|
|||
<template>
|
||||
<div class="kefu">
|
||||
<div
|
||||
v-for="(item, index) in conversationList"
|
||||
:key="item.id"
|
||||
:class="{ active: index === activeConversationIndex }"
|
||||
class="kefu-conversation flex justify-between items-center"
|
||||
@click="openRightMessage(item, index)"
|
||||
>
|
||||
<div class="kefu-conversation-left flex justify-center items-center">
|
||||
<el-avatar :src="item.userAvatar" alt="avatar" />
|
||||
<div class="ml-10px">
|
||||
<div class="nickname">{{ item.nickname }}</div>
|
||||
<div
|
||||
v-dompurify-html="replaceEmoji(item.lastMessageContent)"
|
||||
class="last-message flex items-center color-[#989EA6]"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="kefu-conversation-right color-[#989EA6]">
|
||||
{{ formatDate(item.lastMessageTime) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { KeFuConversationApi, KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
|
||||
import { replaceEmoji } from '@/views/mall/promotion/kefu/components/emoji'
|
||||
import { formatDate, getNowDateTime } from '@/utils/formatTime'
|
||||
|
||||
defineOptions({ name: 'KeFuConversationBox' })
|
||||
const activeConversationIndex = ref(0) // 默认激活第一个
|
||||
const conversationList = ref<KeFuConversationRespVO[]>([]) // 会话列表
|
||||
const getConversationList = async () => {
|
||||
conversationList.value = await KeFuConversationApi.getConversationList()
|
||||
// 测试数据
|
||||
for (let i = 0; i < 5; i++) {
|
||||
conversationList.value.push({
|
||||
id: 1,
|
||||
userId: 283,
|
||||
userAvatar:
|
||||
'https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKMezSxtOImrC9lbhwHiazYwck3xwrEcO7VJfG6WQo260whaeVNoByE5RreiaGsGfOMlIiaDhSaA991w/132',
|
||||
nickname: '辉辉鸭' + i,
|
||||
lastMessageTime: getNowDateTime(),
|
||||
lastMessageContent: '[爱心][爱心]你好哇',
|
||||
lastMessageContentType: 1,
|
||||
adminPinned: false,
|
||||
userDeleted: false,
|
||||
adminDeleted: false,
|
||||
adminUnreadMessageCount: 19
|
||||
})
|
||||
}
|
||||
}
|
||||
defineExpose({ getConversationList })
|
||||
const emits = defineEmits<{
|
||||
(e: 'change', v: number): void
|
||||
}>()
|
||||
// 打开右侧消息
|
||||
const openRightMessage = (item: KeFuConversationRespVO, index: number) => {
|
||||
activeConversationIndex.value = index
|
||||
emits('change', item.id)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.kefu {
|
||||
&-conversation {
|
||||
height: 60px;
|
||||
padding: 10px;
|
||||
background-color: #fff;
|
||||
transition: border-left 0.05s ease-in-out; /* 设置过渡效果 */
|
||||
|
||||
&-left {
|
||||
.last-message {
|
||||
width: 300px;
|
||||
overflow: hidden; // 隐藏超出的文本
|
||||
white-space: nowrap; // 禁止换行
|
||||
text-overflow: ellipsis; // 添加省略号
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
border-left: 5px #3271ff solid;
|
||||
background-color: #eff0f1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<template>
|
||||
<el-container class="kefu">
|
||||
<el-header>
|
||||
<div class="kefu-title">芋道</div>
|
||||
</el-header>
|
||||
<el-main class="kefu-content">
|
||||
<div
|
||||
v-for="item in 100"
|
||||
:key="item"
|
||||
:class="[item % 2 === 0 ? `ss-row-left` : `ss-row-right`]"
|
||||
class="flex mb-20px w-[100%]"
|
||||
>
|
||||
<el-avatar
|
||||
v-if="item % 2 === 0"
|
||||
alt="avatar"
|
||||
src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
|
||||
/>
|
||||
<div class="ml-10px"> Lorem Ipsum，也称乱数假文或者哑元文本</div>
|
||||
<el-avatar
|
||||
v-if="item % 2 !== 0"
|
||||
alt="avatar"
|
||||
src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
|
||||
/>
|
||||
</div>
|
||||
</el-main>
|
||||
<el-footer height="230px">
|
||||
<div class="h-[100%]">
|
||||
<div class="chat-tools">
|
||||
<Icon :size="30" class="ml-10px" icon="fa:frown-o" />
|
||||
</div>
|
||||
<el-input v-model="message" :autosize="{ minRows: 6, maxRows: 6 }" type="textarea" />
|
||||
<div class="h-45px flex justify-end">
|
||||
<el-button class="mt-10px" type="primary">发送</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-footer>
|
||||
</el-container>
|
||||
<!-- 没选择左侧会话时显示空界面 -->
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
defineOptions({ name: 'KeFuMessageBox' })
|
||||
const message = ref('')
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.kefu {
|
||||
&-title {
|
||||
border-bottom: #e4e0e0 solid 1px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
&-content {
|
||||
}
|
||||
|
||||
.chat-tools {
|
||||
width: 100%;
|
||||
border: #e4e0e0 solid 1px;
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ss-row-left {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.ss-row-right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
::v-deep(textarea) {
|
||||
resize: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
export const KeFuMessageContentTypeEnum = {
|
||||
TEXT: 1, // 文本消息
|
||||
IMAGE: 2, // 图片消息
|
||||
VOICE: 3, // 语音消息
|
||||
VIDEO: 4, // 视频消息
|
||||
SYSTEM: 5, // 系统消息
|
||||
// ========== 商城特殊消息 ==========
|
||||
PRODUCT: 10, // 商品消息
|
||||
ORDER: 11 // 订单消息"
|
||||
}
|
||||
export const UserTypeEnum = {
|
||||
MEMBER: 1, // 会员 面向 c 端，普通用户
|
||||
ADMIN: 2 // 管理员 面向 b 端，管理后台
|
||||
}
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
export const emojiList = [
|
||||
{ name: '[笑掉牙]', file: 'xiaodiaoya.png' },
|
||||
{ name: '[可爱]', file: 'keai.png' },
|
||||
{ name: '[冷酷]', file: 'lengku.png' },
|
||||
{ name: '[闭嘴]', file: 'bizui.png' },
|
||||
{ name: '[生气]', file: 'shengqi.png' },
|
||||
{ name: '[惊恐]', file: 'jingkong.png' },
|
||||
{ name: '[瞌睡]', file: 'keshui.png' },
|
||||
{ name: '[大笑]', file: 'daxiao.png' },
|
||||
{ name: '[爱心]', file: 'aixin.png' },
|
||||
{ name: '[坏笑]', file: 'huaixiao.png' },
|
||||
{ name: '[飞吻]', file: 'feiwen.png' },
|
||||
{ name: '[疑问]', file: 'yiwen.png' },
|
||||
{ name: '[开心]', file: 'kaixin.png' },
|
||||
{ name: '[发呆]', file: 'fadai.png' },
|
||||
{ name: '[流泪]', file: 'liulei.png' },
|
||||
{ name: '[汗颜]', file: 'hanyan.png' },
|
||||
{ name: '[惊悚]', file: 'jingshu.png' },
|
||||
{ name: '[困~]', file: 'kun.png' },
|
||||
{ name: '[心碎]', file: 'xinsui.png' },
|
||||
{ name: '[天使]', file: 'tianshi.png' },
|
||||
{ name: '[晕]', file: 'yun.png' },
|
||||
{ name: '[啊]', file: 'a.png' },
|
||||
{ name: '[愤怒]', file: 'fennu.png' },
|
||||
{ name: '[睡着]', file: 'shuizhuo.png' },
|
||||
{ name: '[面无表情]', file: 'mianwubiaoqing.png' },
|
||||
{ name: '[难过]', file: 'nanguo.png' },
|
||||
{ name: '[犯困]', file: 'fankun.png' },
|
||||
{ name: '[好吃]', file: 'haochi.png' },
|
||||
{ name: '[呕吐]', file: 'outu.png' },
|
||||
{ name: '[龇牙]', file: 'ziya.png' },
|
||||
{ name: '[懵比]', file: 'mengbi.png' },
|
||||
{ name: '[白眼]', file: 'baiyan.png' },
|
||||
{ name: '[饿死]', file: 'esi.png' },
|
||||
{ name: '[凶]', file: 'xiong.png' },
|
||||
{ name: '[感冒]', file: 'ganmao.png' },
|
||||
{ name: '[流汗]', file: 'liuhan.png' },
|
||||
{ name: '[笑哭]', file: 'xiaoku.png' },
|
||||
{ name: '[流口水]', file: 'liukoushui.png' },
|
||||
{ name: '[尴尬]', file: 'ganga.png' },
|
||||
{ name: '[惊讶]', file: 'jingya.png' },
|
||||
{ name: '[大惊]', file: 'dajing.png' },
|
||||
{ name: '[不好意思]', file: 'buhaoyisi.png' },
|
||||
{ name: '[大闹]', file: 'danao.png' },
|
||||
{ name: '[不可思议]', file: 'bukesiyi.png' },
|
||||
{ name: '[爱你]', file: 'aini.png' },
|
||||
{ name: '[红心]', file: 'hongxin.png' },
|
||||
{ name: '[点赞]', file: 'dianzan.png' },
|
||||
{ name: '[恶魔]', file: 'emo.png' }
|
||||
]
|
||||
|
||||
export const emojiPage = {}
|
||||
emojiList.forEach((item, index) => {
|
||||
if (!emojiPage[Math.floor(index / 30) + 1]) {
|
||||
emojiPage[Math.floor(index / 30) + 1] = []
|
||||
}
|
||||
emojiPage[Math.floor(index / 30) + 1].push(item)
|
||||
})
|
||||
|
||||
// 后端上传地址
|
||||
const staticUrl = import.meta.env.VITE_STATIC_URL
|
||||
|
||||
// 处理表情
|
||||
export function replaceEmoji(data: string) {
|
||||
let newData = data
|
||||
if (typeof newData !== 'object') {
|
||||
const reg = /\[(.+?)\]/g // [] 中括号
|
||||
const zhEmojiName = newData.match(reg)
|
||||
if (zhEmojiName) {
|
||||
zhEmojiName.forEach((item) => {
|
||||
const emojiFile = selEmojiFile(item)
|
||||
newData = newData.replace(
|
||||
item,
|
||||
`<img class="chat-img" style="width: 24px;height: 24px;margin: 0 3px;" src="${
|
||||
staticUrl + '/static/img/chat/emoji/' + emojiFile
|
||||
}"/>`
|
||||
)
|
||||
})
|
||||
}
|
||||
}
|
||||
return newData
|
||||
}
|
||||
|
||||
function selEmojiFile(name: string) {
|
||||
for (const index in emojiList) {
|
||||
if (emojiList[index].name === name) {
|
||||
return emojiList[index].file
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
import KeFuConversationBox from './KeFuConversationBox.vue'
|
||||
import KeFuChatBox from './KefuChatBox.vue'
|
||||
import * as Constants from './constants'
|
||||
|
||||
export { KeFuConversationBox, KeFuChatBox, Constants }
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<template>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="8">
|
||||
<ContentWrap>
|
||||
<KeFuConversationBox ref="keFuConversationRef" @change="handleChange" />
|
||||
</ContentWrap>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<ContentWrap>
|
||||
<KeFuChatBox ref="keFuChatBoxRef" />
|
||||
</ContentWrap>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { KeFuChatBox, KeFuConversationBox } from './components'
|
||||
|
||||
defineOptions({ name: 'KeFu' })
|
||||
|
||||
const keFuChatBoxRef = ref<InstanceType<typeof KeFuChatBox>>()
|
||||
const handleChange = () => {}
|
||||
|
||||
const keFuConversationRef = ref<InstanceType<typeof KeFuConversationBox>>()
|
||||
onMounted(() => {
|
||||
keFuConversationRef.value?.getConversationList()
|
||||
})
|
||||
</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 0px rgba(240, 240, 240, 0.5);
|
||||
border-radius: 10px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/*定义滑块 内阴影+圆角*/
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5);
|
||||
background-color: rgba(240, 240, 240, 0.5);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -19,6 +19,7 @@ interface ImportMetaEnv {
|
|||
readonly VITE_UPLOAD_URL: string
|
||||
readonly VITE_API_URL: string
|
||||
readonly VITE_BASE_PATH: string
|
||||
readonly VITE_STATIC_URL: string
|
||||
readonly VITE_DROP_DEBUGGER: string
|
||||
readonly VITE_DROP_CONSOLE: string
|
||||
readonly VITE_SOURCEMAP: string
|
||||
|
|
|
|||
Loading…
Reference in New Issue