From 00619ca6dbe4796848760461d3bed230d0d9370f Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Tue, 2 Jul 2024 17:31:26 +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=E5=9B=BE=E7=89=87=E6=B6=88=E6=81=AF?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../promotion/kefu/components/KeFuChatBox.vue | 30 +++++++++++++++++--
 .../kefu/components/KeFuConversationBox.vue   | 16 +++++++---
 2 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/src/views/mall/promotion/kefu/components/KeFuChatBox.vue b/src/views/mall/promotion/kefu/components/KeFuChatBox.vue
index 84a2dac0..bda7c483 100644
--- a/src/views/mall/promotion/kefu/components/KeFuChatBox.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuChatBox.vue
@@ -24,6 +24,7 @@
               alt="avatar"
             />
             <div class="kefu-message p-10px">
+              <!-- TODO puhui999: 消息相关等后续完成后统一抽离封装 -->
               <!-- 文本消息 -->
               <template v-if="KeFuMessageContentTypeEnum.TEXT === item.contentType">
                 <div
@@ -38,8 +39,25 @@
                   class="flex items-center"
                 ></div>
               </template>
-              <template v-else>
-                {{ item.content }}
+              <!-- 图片消息 -->
+              <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>
             </div>
             <el-avatar
@@ -75,6 +93,7 @@ import { Emoji, replaceEmoji } from './emoji'
 import { KeFuMessageContentTypeEnum } from './constants'
 import { isEmpty } from '@/utils/is'
 import { UserTypeEnum } from '@/utils/constants'
+import { createImageViewer } from '@/components/ImageViewer'
 
 defineOptions({ name: 'KeFuMessageBox' })
 const messageTool = useMessage()
@@ -134,6 +153,13 @@ 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/KeFuConversationBox.vue b/src/views/mall/promotion/kefu/components/KeFuConversationBox.vue
index 3552d7bd..19984db2 100644
--- a/src/views/mall/promotion/kefu/components/KeFuConversationBox.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuConversationBox.vue
@@ -16,10 +16,17 @@
               {{ formatDate(item.lastMessageTime) }}
             </span>
           </div>
-          <div
-            v-dompurify-html="replaceEmoji(item.lastMessageContent)"
-            class="last-message flex items-center color-[#989EA6]"
-          ></div>
+          <!-- 文本消息 -->
+          <template v-if="KeFuMessageContentTypeEnum.TEXT === item.lastMessageContentType">
+            <div
+              v-dompurify-html="replaceEmoji(item.lastMessageContent)"
+              class="last-message flex items-center color-[#989EA6]"
+            ></div>
+          </template>
+          <!-- 图片消息 -->
+          <template v-if="KeFuMessageContentTypeEnum.IMAGE === item.lastMessageContentType">
+            <div class="last-message flex items-center color-[#989EA6]">【图片消息】</div>
+          </template>
         </div>
       </div>
     </div>
@@ -30,6 +37,7 @@
 import { KeFuConversationApi, KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
 import { replaceEmoji } from '@/views/mall/promotion/kefu/components/emoji'
 import { formatDate, getNowDateTime } from '@/utils/formatTime'
+import { KeFuMessageContentTypeEnum } from '@/views/mall/promotion/kefu/components/constants'
 
 defineOptions({ name: 'KeFuConversationBox' })
 const activeConversationIndex = ref(-1) // 选中的会话