【新增】：mall 客服消息样式设计

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

@@ -0,0 +1,167 @@
+<template>
+  <el-container class="kefu">
+    <el-header>
+      <div class="kefu-title">{{ keFuConversation.userNickname }}</div>
+    </el-header>
+    <el-main class="kefu-content">
+      <div
+        v-for="item in messageList"
+        :key="item.id"
+        :class="[
+          item.senderType === UserTypeEnum.MEMBER
+            ? `ss-row-left`
+            : item.senderType === UserTypeEnum.ADMIN
+              ? `ss-row-right`
+              : ''
+        ]"
+        class="flex mb-20px w-[100%]"
+      >
+        <el-avatar
+          v-show="item.senderType === UserTypeEnum.MEMBER"
+          :src="keFuConversation.userAvatar"
+          alt="avatar"
+        />
+        <div class="kefu-message flex items-center p-10px">
+          <!-- 文本消息 -->
+          <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`
+                    : ''
+              ]"
+            ></div>
+          </template>
+          <template v-else>
+            {{ item.content }}
+          </template>
+        </div>
+        <el-avatar
+          v-show="item.senderType === UserTypeEnum.ADMIN"
+          :src="item.senderAvatar"
+          alt="avatar"
+        />
+      </div>
+    </el-main>
+    <el-footer height="230px">
+      <div class="h-[100%]">
+        <div class="chat-tools">
+          <Icon :size="30" class="ml-10px" icon="fa:frown-o" />
+        </div>
+        <el-input v-model="message" :rows="6" type="textarea" />
+        <div class="h-45px flex justify-end">
+          <el-button class="mt-10px" type="primary">发送</el-button>
+        </div>
+      </div>
+    </el-footer>
+  </el-container>
+  <!-- 没选择左侧会话时显示空界面 -->
+</template>
+
+<script lang="ts" setup>
+import { KeFuMessageApi, KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message'
+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'
+
+defineOptions({ name: 'KeFuMessageBox' })
+const message = ref('') // 消息
+const messageList = ref<KeFuMessageRespVO[]>([]) // 消息列表
+const keFuConversation = ref<KeFuConversationRespVO>({} as KeFuConversationRespVO) // 用户会话
+// 获得消息
+const getMessageList = async (conversation: KeFuConversationRespVO) => {
+  keFuConversation.value = conversation
+  const { list } = await KeFuMessageApi.getKeFuMessagePage({
+    pageNo: 1,
+    conversationId: conversation.id
+  })
+  messageList.value = list
+}
+defineExpose({ getMessageList })
+</script>
+
+<style lang="scss" scoped>
+.kefu {
+  &-title {
+    border-bottom: #e4e0e0 solid 1px;
+    height: 60px;
+    line-height: 60px;
+  }
+
+  &-content {
+    .ss-row-left {
+      justify-content: flex-start;
+
+      .kefu-message {
+        margin-left: 20px;
+        position: relative;
+
+        &::before {
+          content: '';
+          width: 10px;
+          height: 10px;
+          left: -19px;
+          top: calc(50% - 10px);
+          position: absolute;
+          border-left: 5px solid transparent;
+          border-bottom: 5px solid transparent;
+          border-top: 5px solid transparent;
+          border-right: 5px solid #ffffff;
+        }
+      }
+    }
+
+    .ss-row-right {
+      justify-content: flex-end;
+
+      .kefu-message::after {
+        content: '';
+        width: 10px;
+        height: 10px;
+        right: -19px;
+        top: calc(50% - 10px);
+        position: absolute;
+        border-left: 5px solid #ffffff;
+        border-bottom: 5px solid transparent;
+        border-top: 5px solid transparent;
+        border-right: 5px solid transparent;
+      }
+    }
+
+    .kefu-message {
+      color: #333;
+      border-radius: 5px;
+      box-shadow: 3px 5px 15px rgba(0, 0, 0, 0.2);
+      padding: 5px 10px;
+      width: auto;
+      max-width: 50%;
+      text-align: left;
+      display: inline-block !important;
+      position: relative;
+      word-break: break-all;
+      background-color: #ffffff;
+      transition: all 0.2s;
+
+      &:hover {
+        transform: scale(1.03);
+      }
+    }
+  }
+
+  .chat-tools {
+    width: 100%;
+    border: #e4e0e0 solid 1px;
+    height: 44px;
+    display: flex;
+    align-items: center;
+  }
+
+  ::v-deep(textarea) {
+    resize: none;
+  }
+}
+</style>