ipms-sjy-ui/src/views/mall/promotion/kefu/components/KeFuMessageList.vue

<template>
  <el-container v-if="showKeFuMessageList" class="kefu">
    <el-header class="kefu-header">
      <div class="kefu-title">{{ conversation.userNickname }}</div>
    </el-header>
    <el-main class="kefu-content overflow-visible">
      <el-scrollbar ref="scrollbarRef" always @scroll="handleScroll">
        <div v-if="refreshContent" ref="innerRef" class="w-[100%] px-10px">
          <!-- 消息列表 -->
          <div v-for="(item, index) in getMessageList0" :key="item.id" class="w-[100%]">
            <div class="flex justify-center items-center mb-20px">
              <!-- 日期 -->
              <div
                v-if="
                  item.contentType !== KeFuMessageContentTypeEnum.SYSTEM && showTime(item, index)
                "
                class="date-message"
              >
                {{ formatDate(item.createTime) }}
              </div>
              <!-- 系统消息 -->
              <div
                v-if="item.contentType === KeFuMessageContentTypeEnum.SYSTEM"
                class="system-message"
              >
                {{ item.content }}
              </div>
            </div>
            <div
              :class="[
                item.senderType === UserTypeEnum.MEMBER
                  ? `ss-row-left`
                  : item.senderType === UserTypeEnum.ADMIN
                    ? `ss-row-right`
                    : ''
              ]"
              class="flex mb-20px w-[100%]"
            >
              <el-avatar
                v-if="item.senderType === UserTypeEnum.MEMBER"
                :src="conversation.userAvatar"
                alt="avatar"
                class="w-60px h-60px"
              />
              <div
                :class="{
                  'kefu-message': KeFuMessageContentTypeEnum.TEXT === item.contentType
                }"
                class="p-10px"
              >
                <!-- 文本消息 -->
                <MessageItem :message="item">
                  <template v-if="KeFuMessageContentTypeEnum.TEXT === item.contentType">
                    <div
                      v-dompurify-html="replaceEmoji(getMessageContent(item).text || item.content)"
                      class="flex items-center"
                    ></div>
                  </template>
                </MessageItem>
                <!-- 图片消息 -->
                <MessageItem :message="item">
                  <el-image
                    v-if="KeFuMessageContentTypeEnum.IMAGE === item.contentType"
                    :initial-index="0"
                    :preview-src-list="[getMessageContent(item).picUrl || item.content]"
                    :src="getMessageContent(item).picUrl || item.content"
                    class="w-200px"
                    fit="contain"
                    preview-teleported
                  />
                </MessageItem>
                <!-- 商品消息 -->
                <MessageItem :message="item">
                  <ProductItem
                    v-if="KeFuMessageContentTypeEnum.PRODUCT === item.contentType"
                    :picUrl="getMessageContent(item).picUrl"
                    :price="getMessageContent(item).price"
                    :sales-count="getMessageContent(item).salesCount"
                    :spuId="getMessageContent(item).spuId"
                    :stock="getMessageContent(item).stock"
                    :title="getMessageContent(item).spuName"
                    class="max-w-300px"
                  />
                </MessageItem>
                <!-- 订单消息 -->
                <MessageItem :message="item">
                  <OrderItem
                    v-if="KeFuMessageContentTypeEnum.ORDER === item.contentType"
                    :message="item"
                    class="max-w-100%"
                  />
                </MessageItem>
              </div>
              <el-avatar
                v-if="item.senderType === UserTypeEnum.ADMIN"
                :src="item.senderAvatar"
                alt="avatar"
              />
            </div>
          </div>
        </div>
      </el-scrollbar>
      <div
        v-show="showNewMessageTip"
        class="newMessageTip flex items-center cursor-pointer"
        @click="handleToNewMessage"
      >
        <span>有新消息</span>
        <Icon class="ml-5px" icon="ep:bottom" />
      </div>
    </el-main>
    <el-footer class="kefu-footer">
      <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"
        placeholder="输入消息，Enter发送，Shift+Enter换行"
        style="border-style: none"
        type="textarea"
        @keyup.enter.prevent="handleSendMessage"
      />
    </el-footer>
  </el-container>
  <el-container v-else class="kefu">
    <el-main>
      <el-empty description="请选择左侧的一个会话后开始" />
    </el-main>
  </el-container>
</template>

<script lang="ts" setup>
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 './tools/EmojiSelectPopover.vue'
import PictureSelectUpload from './tools/PictureSelectUpload.vue'
import ProductItem from './message/ProductItem.vue'
import OrderItem from './message/OrderItem.vue'
import { Emoji, useEmoji } from './tools/emoji'
import { KeFuMessageContentTypeEnum } from './tools/constants'
import { isEmpty } from '@/utils/is'
import { UserTypeEnum } from '@/utils/constants'
import { formatDate } from '@/utils/formatTime'
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import { debounce } from 'lodash-es'
import { jsonParse } from '@/utils'
import { useMallKefuStore } from '@/store/modules/mall/kefu'

dayjs.extend(relativeTime)

defineOptions({ name: 'KeFuMessageList' })

const message = ref('') // 消息弹窗
const { replaceEmoji } = useEmoji()
const messageTool = useMessage()
const messageList = ref<KeFuMessageRespVO[]>([]) // 消息列表
const conversation = ref<KeFuConversationRespVO>({} as KeFuConversationRespVO) // 用户会话
const showNewMessageTip = ref(false) // 显示有新消息提示
const queryParams = reactive({
  conversationId: 0,
  createTime: undefined
})
const total = ref(0) // 消息总条数
const refreshContent = ref(false) // 内容刷新,主要解决会话消息页面高度不一致导致的滚动功能精度失效
const kefuStore = useMallKefuStore() // 客服缓存

/** 获悉消息内容 */
const getMessageContent = computed(() => (item: any) => jsonParse(item.content))
/** 获得消息列表 */
const getMessageList = async () => {
  const res = await KeFuMessageApi.getKeFuMessageList(queryParams)
  if (isEmpty(res)) {
    // 当返回的是空列表说明没有消息或者已经查询完了历史消息
    skipGetMessageList.value = true
    return
  }
  queryParams.createTime = formatDate(res.at(-1).createTime) as any

  // 情况一：加载最新消息
  if (!queryParams.createTime) {
    messageList.value = res
  } else {
    // 情况二：加载历史消息
    for (const item of res) {
      pushMessage(item)
    }
  }
  refreshContent.value = true
}

/** 添加消息 */
const pushMessage = (message: any) => {
  if (messageList.value.some((val) => val.id === message.id)) {
    return
  }
  messageList.value.push(message)
}

/** 按照时间倒序，获取消息列表 */
const getMessageList0 = computed(() => {
  messageList.value.sort((a: any, b: any) => a.createTime - b.createTime)
  return messageList.value
})

/** 刷新消息列表 */
const refreshMessageList = async (message?: any) => {
  if (!conversation.value) {
    return
  }

  if (typeof message !== 'undefined') {
    // 当前查询会话与消息所属会话不一致则不做处理
    if (message.conversationId !== conversation.value.id) {
      return
    }
    pushMessage(message)
  } else {
    queryParams.createTime = undefined
    await getMessageList()
  }

  if (loadHistory.value) {
    // 右下角显示有新消息提示
    showNewMessageTip.value = true
  } else {
    // 滚动到最新消息处
    await handleToNewMessage()
  }
}

/** 获得新会话的消息列表, 点击切换时，读取缓存；然后异步获取新消息，merge 下； */
const getNewMessageList = async (val: KeFuConversationRespVO) => {
  // 1. 缓存当前会话消息列表
  kefuStore.saveMessageList(conversation.value.id, messageList.value)
  // 2.1 会话切换,重置相关参数
  messageList.value = kefuStore.getConversationMessageList(val.id) || []
  total.value = messageList.value.length || 0
  loadHistory.value = false
  refreshContent.value = false
  skipGetMessageList.value = false
  // 2.2 设置会话相关属性
  conversation.value = val
  queryParams.conversationId = val.id
  queryParams.createTime = undefined
  // 3. 获取消息
  await refreshMessageList()
}
defineExpose({ getNewMessageList, refreshMessageList })

const showKeFuMessageList = computed(() => !isEmpty(conversation.value)) // 是否显示聊天区域
const skipGetMessageList = ref(false) // 跳过消息获取

/** 处理表情选择 */
const handleEmojiSelect = (item: Emoji) => {
  message.value += item.name
}

/** 处理图片发送 */
const handleSendPicture = async (picUrl: string) => {
  // 组织发送消息
  const msg = {
    conversationId: conversation.value.id,
    contentType: KeFuMessageContentTypeEnum.IMAGE,
    content: JSON.stringify({ picUrl })
  }
  await sendMessage(msg)
}

/** 发送文本消息 */
const handleSendMessage = async (event: any) => {
  // shift 不发送
  if (event.shiftKey) {
    return
  }
  // 1. 校验消息是否为空
  if (isEmpty(unref(message.value))) {
    messageTool.notifyWarning('请输入消息后再发送哦！')
    return
  }
  // 2. 组织发送消息
  const msg = {
    conversationId: conversation.value.id,
    contentType: KeFuMessageContentTypeEnum.TEXT,
    content: JSON.stringify({ text: message.value })
  }
  await sendMessage(msg)
}

/** 真正发送消息 【共用】*/
const sendMessage = async (msg: any) => {
  // 发送消息
  await KeFuMessageApi.sendKeFuMessage(msg)
  message.value = ''
  // 加载消息列表
  await refreshMessageList()
  // 更新会话缓存
  await kefuStore.updateConversation(conversation.value.id)
}

/** 滚动到底部 */
const innerRef = ref<HTMLDivElement>()
const scrollbarRef = ref<InstanceType<typeof ElScrollbarType>>()
const scrollToBottom = async () => {
  // 1. 首次加载时滚动到最新消息，如果加载的是历史消息则不滚动
  if (loadHistory.value) {
    return
  }
  // 2.1 滚动到最新消息，关闭新消息提示
  await nextTick()
  scrollbarRef.value!.setScrollTop(innerRef.value!.clientHeight)
  showNewMessageTip.value = false
  // 2.2 消息已读
  await KeFuMessageApi.updateKeFuMessageReadStatus(conversation.value.id)
}

/** 查看新消息 */
const handleToNewMessage = async () => {
  loadHistory.value = false
  await scrollToBottom()
}

const loadHistory = ref(false) // 加载历史消息
/** 处理消息列表滚动事件(debounce 限流) */
const handleScroll = debounce(({ scrollTop }) => {
  if (skipGetMessageList.value) {
    return
  }
  // 触顶自动加载下一页数据
  if (Math.floor(scrollTop) === 0) {
    handleOldMessage()
  }
  const wrap = scrollbarRef.value?.wrapRef
  // 触底重置
  if (Math.abs(wrap!.scrollHeight - wrap!.clientHeight - wrap!.scrollTop) < 1) {
    loadHistory.value = false
    refreshMessageList()
  }
}, 200)
/** 加载历史消息 */
const handleOldMessage = async () => {
  // 记录已有页面高度
  const oldPageHeight = innerRef.value?.clientHeight
  if (!oldPageHeight) {
    return
  }
  loadHistory.value = true
  await getMessageList()
  // 等页面加载完后，获得上一页最后一条消息的位置，控制滚动到它所在位置
  scrollbarRef.value!.setScrollTop(innerRef.value!.clientHeight - oldPageHeight)
}

/**
 * 是否显示时间
 *
 * @param {*} item - 数据
 * @param {*} index - 索引
 */
const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
  if (unref(messageList.value)[index + 1]) {
    let dateString = dayjs(unref(messageList.value)[index + 1].createTime).fromNow()
    return dateString !== dayjs(unref(item).createTime).fromNow()
  }
  return false
})
</script>

<style lang="scss" scoped>
.kefu {
  background-color: #fff;
  width: calc(100% - 300px - 260px);
  border-left: var(--el-border-color) solid 1px;

  .kefu-header {
    background: #fbfbfb;
    box-shadow: 0 0 0 0 #dcdfe6;
    display: flex;
    align-items: center;
    justify-content: space-between;

    &-title {
      font-size: 18px;
      font-weight: bold;
    }
  }

  &-content {
    margin: 0;
    padding: 10px;
    position: relative;
    height: 100%;
    width: 100%;

    .newMessageTip {
      position: absolute;
      bottom: 35px;
      right: 35px;
      background-color: var(--app-content-bg-color);
      padding: 10px;
      border-radius: 30px;
      font-size: 12px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    }

    .ss-row-left {
      justify-content: flex-start;

      .kefu-message {
        background-color: rgb(245, 245, 245);
        margin-left: 10px;
        margin-top: 18px;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
      }
    }

    .ss-row-right {
      justify-content: flex-end;

      .kefu-message {
        background-color: rgb(206, 223, 255);
        margin-right: 10px;
        margin-top: 18px;
        border-top-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
      }
    }

    // 消息气泡
    .kefu-message {
      color: #414141;
      font-weight: 500;
      padding: 5px 10px;
      width: auto;
      max-width: 50%;
      text-align: left;
      display: inline-block !important;
      word-break: break-all;
      transition: all 0.2s;

      &:hover {
        transform: scale(1.03);
      }
    }

    .date-message,
    .system-message {
      width: fit-content;
      border-radius: 12rpx;
      padding: 8rpx 16rpx;
      margin-bottom: 16rpx;
      color: #999;
      font-size: 24rpx;
    }
  }

  .kefu-footer {
    display: flex;
    flex-direction: column;
    height: auto;
    margin: 0;
    padding: 0;
    border-top: var(--el-border-color) solid 1px;

    .chat-tools {
      width: 100%;
      height: 44px;
    }
  }

  ::v-deep(textarea) {
    resize: none;
  }

  :deep(.el-input__wrapper) {
    box-shadow: none !important;
    border-radius: 0;
  }

  ::v-deep(.el-textarea__inner) {
    box-shadow: none !important;
  }
}
</style>