【新增】：mall 客服选择并发送图片信息

Author: puhui999

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

@@ -71,10 +71,14 @@
     </el-main>
     <el-footer height="230px">
       <div class="h-[100%]">
-        <div class="chat-tools">
+        <div class="chat-tools flex items-center">
           <EmojiSelectPopover @select-emoji="handleEmojiSelect" />
+          <PictureSelectUpload
+            class="ml-15px mt-3px cursor-pointer"
+            @send-picture="handleSendPicture"
+          />
         </div>
-        <el-input v-model="message" :rows="6" type="textarea" />
+        <el-input v-model="message" :rows="6" style="border-style: none" type="textarea" />
         <div class="h-45px flex justify-end">
           <el-button class="mt-10px" type="primary" @click="handleSendMessage">发送</el-button>
         </div>
@@ -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) {

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

@@ -35,9 +35,9 @@
 
 <script lang="ts" setup>
 import { KeFuConversationApi, KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
-import { useEmoji } from './emoji'
+import { useEmoji } from './tools/emoji'
 import { formatDate, getNowDateTime } from '@/utils/formatTime'
-import { KeFuMessageContentTypeEnum } from '@/views/mall/promotion/kefu/components/constants'
+import { KeFuMessageContentTypeEnum } from './tools/constants'
 
 defineOptions({ name: 'KeFuConversationBox' })
 const { replaceEmoji } = useEmoji()

src/views/mall/promotion/kefu/components/images/picture.svg

@@ -1,5 +1,5 @@
 import KeFuConversationBox from './KeFuConversationBox.vue'
 import KeFuChatBox from './KeFuChatBox.vue'
-import * as Constants from './constants'
+import * as Constants from './tools/constants'
 
 export { KeFuConversationBox, KeFuChatBox, Constants }

src/views/mall/promotion/kefu/components/index.ts

@@ -2,7 +2,7 @@
 <template>
   <el-popover :width="500" placement="top" trigger="click">
     <template #reference>
-      <Icon :size="30" class="ml-10px" icon="twemoji:grinning-face" />
+      <Icon :size="30" class="ml-10px cursor-pointer" icon="twemoji:grinning-face" />
     </template>
     <ElScrollbar height="300px">
       <ul class="ml-2 flex flex-wrap px-2">

src/views/mall/promotion/kefu/components/EmojiSelectPopover.vue renamed to src/views/mall/promotion/kefu/components/tools/EmojiSelectPopover.vue

@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <img :src="Picture" style="width: 35px; height: 35px" @click="selectAndUpload" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Picture from '@/views/mall/promotion/kefu/components/images/picture.svg'
+import * as FileApi from '@/api/infra/file'
+
+defineOptions({ name: 'PictureSelectUpload' })
+const message = useMessage()
+const emits = defineEmits<{
+  (e: 'send-picture', v: string): void
+}>()
+// 选择并上传文件
+const selectAndUpload = async () => {
+  const files: any = await getFiles()
+  message.success('图片发送请稍等。。。')
+  const res = await FileApi.updateFile({ file: files[0].file })
+  message.success('图片发送成功!')
+  emits('send-picture', res.data)
+}
+
+/**
+ * 唤起文件选择窗口，并获取选择的文件
+ * @param {Object} options - 配置选项
+ * @param {boolean} [options.multiple=true] - 是否支持多选
+ * @param {string} [options.accept=''] - 文件上传格式限制
+ * @param {number} [options.limit=1] - 单次上传最大文件数
+ * @param {number} [options.fileSize=500] - 单个文件大小限制（单位：MB）
+ * @returns {Promise<Array>} 选择的文件列表，每个文件带有一个uid
+ */
+async function getFiles(options = {}) {
+  const { multiple, accept, limit, fileSize } = {
+    multiple: true,
+    accept: 'image/jpeg, image/png, image/gif',
+    limit: 1,
+    fileSize: 500,
+    ...options
+  }
+
+  // 创建文件选择元素
+  const input = document.createElement('input')
+  input.type = 'file'
+  input.style.display = 'none'
+  if (multiple) input.multiple = true
+  if (accept) input.accept = accept
+
+  // 将文件选择元素添加到文档中
+  document.body.appendChild(input)
+
+  // 触发文件选择元素的点击事件
+  input.click()
+
+  // 等待文件选择元素的 change 事件
+  try {
+    const files = await new Promise((resolve, reject) => {
+      input.addEventListener('change', (event: any) => {
+        const filesArray = Array.from(event?.target?.files || [])
+
+        // 从文档中移除文件选择元素
+        document.body.removeChild(input)
+
+        // 判断是否超出上传数量限制
+        if (filesArray.length > limit) {
+          reject({ errorType: 'limit', files: filesArray })
+          return
+        }
+
+        // 判断是否超出上传文件大小限制
+        const oversizedFiles = filesArray.filter((file: File) => file.size / 1024 ** 2 > fileSize)
+        if (oversizedFiles.length > 0) {
+          reject({ errorType: 'fileSize', files: oversizedFiles })
+          return
+        }
+
+        // 生成文件列表，并添加 uid
+        const fileList = filesArray.map((file, index) => ({ file, uid: Date.now() + index }))
+        resolve(fileList)
+      })
+    })
+
+    return files
+  } catch (error) {
+    console.error('选择文件出错:', error)
+    throw error
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>