From 7a6f5c2db8be917a884f9567a358a1c14a097297 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Mon, 1 Jul 2024 17:11:47 +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=E6=B6=88=E6=81=AF=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E8=AE=BE=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../promotion/kefu/components/KeFuChatBox.vue |  8 +++--
 .../kefu/components/KeFuConversationBox.vue   | 31 ++++++++++---------
 2 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/src/views/mall/promotion/kefu/components/KeFuChatBox.vue b/src/views/mall/promotion/kefu/components/KeFuChatBox.vue
index ee41564b..2a4efd2b 100644
--- a/src/views/mall/promotion/kefu/components/KeFuChatBox.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuChatBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-container class="kefu">
+  <el-container v-if="showChatBox" class="kefu">
     <el-header>
       <div class="kefu-title">{{ keFuConversation.userNickname }}</div>
     </el-header>
@@ -46,6 +46,7 @@
         />
       </div>
     </el-main>
+    <!-- TODO puhui999: 发送下次提交完善 -->
     <el-footer height="230px">
       <div class="h-[100%]">
         <div class="chat-tools">
@@ -58,7 +59,7 @@
       </div>
     </el-footer>
   </el-container>
-  <!-- 没选择左侧会话时显示空界面 -->
+  <el-empty v-else description="请选择左侧的一个会话后开始" />
 </template>
 
 <script lang="ts" setup>
@@ -67,6 +68,7 @@ import { KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
 import { UserTypeEnum } from '@/utils/constants'
 import { replaceEmoji } from '@/views/mall/promotion/kefu/components/emoji'
 import { KeFuMessageContentTypeEnum } from '@/views/mall/promotion/kefu/components/constants'
+import { isEmpty } from '@/utils/is'
 
 defineOptions({ name: 'KeFuMessageBox' })
 const message = ref('') // 消息
@@ -82,6 +84,8 @@ const getMessageList = async (conversation: KeFuConversationRespVO) => {
   messageList.value = list
 }
 defineExpose({ getMessageList })
+// 是否显示聊天区域
+const showChatBox = computed(() => !isEmpty(keFuConversation.value))
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/mall/promotion/kefu/components/KeFuConversationBox.vue b/src/views/mall/promotion/kefu/components/KeFuConversationBox.vue
index 595475be..69063b45 100644
--- a/src/views/mall/promotion/kefu/components/KeFuConversationBox.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuConversationBox.vue
@@ -7,19 +7,21 @@
       class="kefu-conversation flex justify-between items-center"
       @click="openRightMessage(item, index)"
     >
-      <div class="kefu-conversation-left flex justify-center items-center">
+      <div class="flex justify-center items-center w-100%">
         <el-avatar :src="item.userAvatar" alt="avatar" />
-        <div class="ml-10px">
-          <div class="nickname">{{ item.userNickname }}</div>
+        <div class="ml-10px w-100%">
+          <div class="flex justify-between items-center w-100%">
+            <span>{{ item.userNickname }}</span>
+            <span class="color-[#989EA6]">
+              {{ formatDate(item.lastMessageTime) }}
+            </span>
+          </div>
           <div
             v-dompurify-html="replaceEmoji(item.lastMessageContent)"
             class="last-message flex items-center color-[#989EA6]"
           ></div>
         </div>
       </div>
-      <div class="kefu-conversation-right color-[#989EA6]">
-        {{ formatDate(item.lastMessageTime) }}
-      </div>
     </div>
   </div>
 </template>
@@ -30,7 +32,7 @@ import { replaceEmoji } from '@/views/mall/promotion/kefu/components/emoji'
 import { formatDate, getNowDateTime } from '@/utils/formatTime'
 
 defineOptions({ name: 'KeFuConversationBox' })
-const activeConversationIndex = ref(0) // 默认激活第一个
+const activeConversationIndex = ref(-1) // 选中的会话
 const conversationList = ref<KeFuConversationRespVO[]>([]) // 会话列表
 const getConversationList = async () => {
   conversationList.value = await KeFuConversationApi.getConversationList()
@@ -43,7 +45,8 @@ const getConversationList = async () => {
         'https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKMezSxtOImrC9lbhwHiazYwck3xwrEcO7VJfG6WQo260whaeVNoByE5RreiaGsGfOMlIiaDhSaA991w/132',
       userNickname: '辉辉鸭' + i,
       lastMessageTime: getNowDateTime(),
-      lastMessageContent: '[爱心][爱心]你好哇',
+      lastMessageContent:
+        '[爱心][爱心]你好哇你好哇你好哇你好哇你好哇你好哇你好哇你好哇你好哇你好哇你好哇你好哇你好哇你好哇你好哇你好哇你好哇你好哇',
       lastMessageContentType: 1,
       adminPinned: false,
       userDeleted: false,
@@ -71,13 +74,11 @@ const openRightMessage = (item: KeFuConversationRespVO, index: number) => {
     background-color: #fff;
     transition: border-left 0.05s ease-in-out; /* 设置过渡效果 */
 
-    &-left {
-      .last-message {
-        width: 300px;
-        overflow: hidden; // 隐藏超出的文本
-        white-space: nowrap; // 禁止换行
-        text-overflow: ellipsis; // 添加省略号
-      }
+    .last-message {
+      width: 200px;
+      overflow: hidden; // 隐藏超出的文本
+      white-space: nowrap; // 禁止换行
+      text-overflow: ellipsis; // 添加省略号
     }
   }