From e89b274e3f66d8c0ac539b62e22f00d4577290e0 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Thu, 4 Jul 2024 15:41:15 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E4=BC=98=E5=8C=96=E3=80=91=EF=BC=9Ama?=
 =?UTF-8?q?ll=20=E5=AE=A2=E6=9C=8D=E6=B6=88=E6=81=AF=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E6=8A=BD=E7=A6=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../promotion/kefu/components/KeFuChatBox.vue | 52 +++----------------
 .../components/message/ImageMessageItem.vue   | 40 ++++++++++++++
 .../components/message/TextMessageItem.vue    | 29 +++++++++++
 3 files changed, 76 insertions(+), 45 deletions(-)
 create mode 100644 src/views/mall/promotion/kefu/components/message/ImageMessageItem.vue
 create mode 100644 src/views/mall/promotion/kefu/components/message/TextMessageItem.vue

diff --git a/src/views/mall/promotion/kefu/components/KeFuChatBox.vue b/src/views/mall/promotion/kefu/components/KeFuChatBox.vue
index cba5869b..da25c9d9 100644
--- a/src/views/mall/promotion/kefu/components/KeFuChatBox.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuChatBox.vue
@@ -19,49 +19,18 @@
             class="flex mb-20px w-[100%]"
           >
             <el-avatar
-              v-show="item.senderType === UserTypeEnum.MEMBER"
+              v-if="item.senderType === UserTypeEnum.MEMBER"
               :src="keFuConversation.userAvatar"
               alt="avatar"
             />
             <div class="kefu-message p-10px">
-              <!-- TODO puhui999: 消息相关等后续完成后统一抽离封装 -->
               <!-- 文本消息 -->
-              <template v-if="KeFuMessageContentTypeEnum.TEXT === item.contentType">
-                <div
-                  v-dompurify-html="replaceEmoji(item.content)"
-                  :class="[
-                    item.senderType === UserTypeEnum.MEMBER
-                      ? `ml-10px`
-                      : item.senderType === UserTypeEnum.ADMIN
-                        ? `mr-10px`
-                        : ''
-                  ]"
-                  class="flex items-center"
-                ></div>
-              </template>
+              <TextMessageItem :message="item" />
               <!-- 图片消息 -->
-              <template v-if="KeFuMessageContentTypeEnum.IMAGE === item.contentType">
-                <div
-                  :class="[
-                    item.senderType === UserTypeEnum.MEMBER
-                      ? `ml-10px`
-                      : item.senderType === UserTypeEnum.ADMIN
-                        ? `mr-10px`
-                        : ''
-                  ]"
-                  class="flex items-center"
-                >
-                  <el-image
-                    :src="item.content"
-                    fit="contain"
-                    style="width: 200px; height: 200px"
-                    @click="imagePreview(item.content)"
-                  />
-                </div>
-              </template>
+              <ImageMessageItem :message="item" />
             </div>
             <el-avatar
-              v-show="item.senderType === UserTypeEnum.ADMIN"
+              v-if="item.senderType === UserTypeEnum.ADMIN"
               :src="item.senderAvatar"
               alt="avatar"
             />
@@ -94,14 +63,14 @@ import { KeFuMessageApi, KeFuMessageRespVO } from '@/api/mall/promotion/kefu/mes
 import { KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
 import EmojiSelectPopover from './tools/EmojiSelectPopover.vue'
 import PictureSelectUpload from './tools/PictureSelectUpload.vue'
-import { Emoji, useEmoji } from './tools/emoji'
+import TextMessageItem from './message/TextMessageItem.vue'
+import ImageMessageItem from './message/ImageMessageItem.vue'
+import { Emoji } from './tools/emoji'
 import { KeFuMessageContentTypeEnum } from './tools/constants'
 import { isEmpty } from '@/utils/is'
 import { UserTypeEnum } from '@/utils/constants'
-import { createImageViewer } from '@/components/ImageViewer'
 
 defineOptions({ name: 'KeFuMessageBox' })
-const { replaceEmoji } = useEmoji()
 const messageTool = useMessage()
 const message = ref('') // 消息
 const messageList = ref<KeFuMessageRespVO[]>([]) // 消息列表
@@ -175,13 +144,6 @@ const scrollToBottom = async () => {
   scrollbarRef.value!.setScrollTop(innerRef.value!.clientHeight)
 }
 
-/** 图预览 */
-const imagePreview = (imgUrl: string) => {
-  createImageViewer({
-    urlList: [imgUrl]
-  })
-}
-
 // TODO puhui999: 轮训相关，功能完善后移除
 onBeforeUnmount(() => {
   if (!poller.value) {
diff --git a/src/views/mall/promotion/kefu/components/message/ImageMessageItem.vue b/src/views/mall/promotion/kefu/components/message/ImageMessageItem.vue
new file mode 100644
index 00000000..7b890cf1
--- /dev/null
+++ b/src/views/mall/promotion/kefu/components/message/ImageMessageItem.vue
@@ -0,0 +1,40 @@
+<template>
+  <!-- 图片消息 -->
+  <template v-if="KeFuMessageContentTypeEnum.IMAGE === message.contentType">
+    <div
+      :class="[
+        message.senderType === UserTypeEnum.MEMBER
+          ? `ml-10px`
+          : message.senderType === UserTypeEnum.ADMIN
+            ? `mr-10px`
+            : ''
+      ]"
+      class="flex messages-center"
+    >
+      <el-image
+        :src="message.content"
+        fit="contain"
+        style="width: 200px; height: 200px"
+        @click="imagePreview(message.content)"
+      />
+    </div>
+  </template>
+</template>
+
+<script lang="ts" setup>
+import { KeFuMessageContentTypeEnum } from '../tools/constants'
+import { UserTypeEnum } from '@/utils/constants'
+import { KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message'
+import { createImageViewer } from '@/components/ImageViewer'
+
+defineOptions({ name: 'ImageMessageItem' })
+defineProps<{
+  message: KeFuMessageRespVO
+}>()
+/** 图预览 */
+const imagePreview = (imgUrl: string) => {
+  createImageViewer({
+    urlList: [imgUrl]
+  })
+}
+</script>
diff --git a/src/views/mall/promotion/kefu/components/message/TextMessageItem.vue b/src/views/mall/promotion/kefu/components/message/TextMessageItem.vue
new file mode 100644
index 00000000..fd4b6edb
--- /dev/null
+++ b/src/views/mall/promotion/kefu/components/message/TextMessageItem.vue
@@ -0,0 +1,29 @@
+<template>
+  <!-- 文本消息 -->
+  <template v-if="KeFuMessageContentTypeEnum.TEXT === message.contentType">
+    <div
+      v-dompurify-html="replaceEmoji(message.content)"
+      :class="[
+        message.senderType === UserTypeEnum.MEMBER
+          ? `ml-10px`
+          : message.senderType === UserTypeEnum.ADMIN
+            ? `mr-10px`
+            : ''
+      ]"
+      class="flex items-center"
+    ></div>
+  </template>
+</template>
+
+<script lang="ts" setup>
+import { KeFuMessageContentTypeEnum } from '../tools/constants'
+import { UserTypeEnum } from '@/utils/constants'
+import { useEmoji } from '../tools/emoji'
+import { KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message'
+
+defineOptions({ name: 'TextMessageItem' })
+defineProps<{
+  message: KeFuMessageRespVO
+}>()
+const { replaceEmoji } = useEmoji()
+</script>