From e45cade8776e28699b8da19e03ac3709cd5b656e Mon Sep 17 00:00:00 2001 From: puhui999 Date: Thu, 4 Jul 2024 15:28:34 +0800 Subject: [PATCH] =?UTF-8?q?=E3=80=90=E6=96=B0=E5=A2=9E=E3=80=91=EF=BC=9Ama?= =?UTF-8?q?ll=20=E5=AE=A2=E6=9C=8D=E9=80=89=E6=8B=A9=E5=B9=B6=E5=8F=91?= =?UTF-8?q?=E9=80=81=E5=9B=BE=E7=89=87=E4=BF=A1=E6=81=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../promotion/kefu/components/KeFuChatBox.vue | 33 +++++-- .../kefu/components/KeFuConversationBox.vue | 4 +- .../kefu/components/images/picture.svg | 10 ++ .../mall/promotion/kefu/components/index.ts | 2 +- .../{ => tools}/EmojiSelectPopover.vue | 2 +- .../components/tools/PictureSelectUpload.vue | 92 +++++++++++++++++++ .../kefu/components/{ => tools}/constants.ts | 0 .../kefu/components/{ => tools}/emoji.ts | 0 8 files changed, 132 insertions(+), 11 deletions(-) create mode 100644 src/views/mall/promotion/kefu/components/images/picture.svg rename src/views/mall/promotion/kefu/components/{ => tools}/EmojiSelectPopover.vue (93%) create mode 100644 src/views/mall/promotion/kefu/components/tools/PictureSelectUpload.vue rename src/views/mall/promotion/kefu/components/{ => tools}/constants.ts (100%) rename src/views/mall/promotion/kefu/components/{ => tools}/emoji.ts (100%) diff --git a/src/views/mall/promotion/kefu/components/KeFuChatBox.vue b/src/views/mall/promotion/kefu/components/KeFuChatBox.vue index e675d51d..cba5869b 100644 --- a/src/views/mall/promotion/kefu/components/KeFuChatBox.vue +++ b/src/views/mall/promotion/kefu/components/KeFuChatBox.vue @@ -71,10 +71,14 @@
-
+
+
- +
发送
@@ -88,9 +92,10 @@ import { ElScrollbar as ElScrollbarType } from 'element-plus' import { KeFuMessageApi, KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message' import { KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation' -import EmojiSelectPopover from './EmojiSelectPopover.vue' -import { Emoji, useEmoji } from './emoji' -import { KeFuMessageContentTypeEnum } from './constants' +import EmojiSelectPopover from './tools/EmojiSelectPopover.vue' +import PictureSelectUpload from './tools/PictureSelectUpload.vue' +import { Emoji, useEmoji } from './tools/emoji' +import { KeFuMessageContentTypeEnum } from './tools/constants' import { isEmpty } from '@/utils/is' import { UserTypeEnum } from '@/utils/constants' import { createImageViewer } from '@/components/ImageViewer' @@ -126,6 +131,16 @@ const showChatBox = computed(() => !isEmpty(keFuConversation.value)) const handleEmojiSelect = (item: Emoji) => { message.value += item.name } +// 处理图片发送 +const handleSendPicture = async (picUrl: string) => { + // 组织发送消息 + const msg = { + conversationId: keFuConversation.value.id, + contentType: KeFuMessageContentTypeEnum.IMAGE, + content: picUrl + } + await sendMessage(msg) +} // 发送消息 const handleSendMessage = async () => { // 1. 校验消息是否为空 @@ -139,6 +154,11 @@ const handleSendMessage = async () => { contentType: KeFuMessageContentTypeEnum.TEXT, content: message.value } + await sendMessage(msg) +} + +// 发送消息 【共用】 +const sendMessage = async (msg: any) => { await KeFuMessageApi.sendKeFuMessage(msg) message.value = '' // 3. 加载消息列表 @@ -248,9 +268,8 @@ onBeforeUnmount(() => { .chat-tools { width: 100%; border: #e4e0e0 solid 1px; + border-radius: 10px; height: 44px; - display: flex; - align-items: center; } ::v-deep(textarea) { diff --git a/src/views/mall/promotion/kefu/components/KeFuConversationBox.vue b/src/views/mall/promotion/kefu/components/KeFuConversationBox.vue index 75b4ad08..d45343ad 100644 --- a/src/views/mall/promotion/kefu/components/KeFuConversationBox.vue +++ b/src/views/mall/promotion/kefu/components/KeFuConversationBox.vue @@ -35,9 +35,9 @@ + + diff --git a/src/views/mall/promotion/kefu/components/constants.ts b/src/views/mall/promotion/kefu/components/tools/constants.ts similarity index 100% rename from src/views/mall/promotion/kefu/components/constants.ts rename to src/views/mall/promotion/kefu/components/tools/constants.ts diff --git a/src/views/mall/promotion/kefu/components/emoji.ts b/src/views/mall/promotion/kefu/components/tools/emoji.ts similarity index 100% rename from src/views/mall/promotion/kefu/components/emoji.ts rename to src/views/mall/promotion/kefu/components/tools/emoji.ts