【新增】：mall 客服图片消息显示

src/views/mall/promotion/kefu/components/KeFuChatBox.vue

@@ -24,6 +24,7 @@
               alt="avatar"
               alt="avatar"
             />
             />
             <div class="kefu-message p-10px">
             <div class="kefu-message p-10px">
+              <!-- TODO puhui999: 消息相关等后续完成后统一抽离封装 -->
               <!-- 文本消息 -->
               <!-- 文本消息 -->
               <template v-if="KeFuMessageContentTypeEnum.TEXT === item.contentType">
               <template v-if="KeFuMessageContentTypeEnum.TEXT === item.contentType">
                 <div
                 <div
@@ -38,8 +39,25 @@
                   class="flex items-center"
                   class="flex items-center"
                 ></div>
                 ></div>
               </template>
               </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>
               </template>
             </div>
             </div>
             <el-avatar
             <el-avatar
@@ -75,6 +93,7 @@ import { Emoji, replaceEmoji } from './emoji'
 import { KeFuMessageContentTypeEnum } from './constants'
 import { KeFuMessageContentTypeEnum } from './constants'
 import { isEmpty } from '@/utils/is'
 import { isEmpty } from '@/utils/is'
 import { UserTypeEnum } from '@/utils/constants'
 import { UserTypeEnum } from '@/utils/constants'
+import { createImageViewer } from '@/components/ImageViewer'
 
 
 defineOptions({ name: 'KeFuMessageBox' })
 defineOptions({ name: 'KeFuMessageBox' })
 const messageTool = useMessage()
 const messageTool = useMessage()
@@ -134,6 +153,13 @@ const scrollToBottom = async () => {
   scrollbarRef.value!.setScrollTop(innerRef.value!.clientHeight)
   scrollbarRef.value!.setScrollTop(innerRef.value!.clientHeight)
 }
 }
 
 
+/** 图预览 */
+const imagePreview = (imgUrl: string) => {
+  createImageViewer({
+    urlList: [imgUrl]
+  })
+}
+
 // TODO puhui999: 轮训相关，功能完善后移除
 // TODO puhui999: 轮训相关，功能完善后移除
 onBeforeUnmount(() => {
 onBeforeUnmount(() => {
   if (!poller.value) {
   if (!poller.value) {

src/views/mall/promotion/kefu/components/KeFuConversationBox.vue

@@ -16,10 +16,17 @@
               {{ formatDate(item.lastMessageTime) }}
               {{ formatDate(item.lastMessageTime) }}
             </span>
             </span>
           </div>
           </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>
       </div>
     </div>
     </div>
@@ -30,6 +37,7 @@
 import { KeFuConversationApi, KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
 import { KeFuConversationApi, KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
 import { replaceEmoji } from '@/views/mall/promotion/kefu/components/emoji'
 import { replaceEmoji } from '@/views/mall/promotion/kefu/components/emoji'
 import { formatDate, getNowDateTime } from '@/utils/formatTime'
 import { formatDate, getNowDateTime } from '@/utils/formatTime'
+import { KeFuMessageContentTypeEnum } from '@/views/mall/promotion/kefu/components/constants'
 
 
 defineOptions({ name: 'KeFuConversationBox' })
 defineOptions({ name: 'KeFuConversationBox' })
 const activeConversationIndex = ref(-1) // 选中的会话
 const activeConversationIndex = ref(-1) // 选中的会话