【功能完善】商城: 客服消息JSON 化

b9e15296 · puhui999 · 649c24ed · b9e15296 · b9e15296 · b9e15296
Commit b9e15296 authored Nov 10, 2024 by puhui999
4 changed files
--- a/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
 <template>
  <el-aside class="kefu p-5px h-100%" width="260px">
-    <div class="color-[#999] font-bold my-10px"
+    <div class="color-[#999] font-bold my-10px">
-      >会话记录({{ kefuStore.getConversationList.length }})
+      会话记录({{ kefuStore.getConversationList.length }})
    </div>
    <div
      v-for="item in kefuStore.getConversationList"
@@ -78,6 +78,7 @@ import { formatPast } from '@/utils/formatTime'
 import { KeFuMessageContentTypeEnum } from './tools/constants'
 import { useAppStore } from '@/store/modules/app'
 import { useMallKefuStore } from '@/store/modules/mall/kefu'
+import { jsonParse } from '@/utils'
 defineOptions({ name: 'KeFuConversationList' })
@@ -118,7 +119,7 @@ const getConversationDisplayText = computed(
      case KeFuMessageContentTypeEnum.VOICE:
        return '[语音消息]'
      case KeFuMessageContentTypeEnum.TEXT:
-        return replaceEmoji(lastMessageContent)
+        return replaceEmoji(jsonParse(lastMessageContent).text || lastMessageContent)
      default:
        return ''
    }

--- a/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
@@ -52,7 +52,7 @@
                <MessageItem :message="item">
                  <template v-if="KeFuMessageContentTypeEnum.TEXT === item.contentType">
                    <div
-                      v-dompurify-html="replaceEmoji(item.content)"
+                      v-dompurify-html="replaceEmoji(getMessageContent(item).text || item.content)"
                      class="flex items-center"
                    ></div>
                  </template>
@@ -62,8 +62,8 @@
                  <el-image
                    v-if="KeFuMessageContentTypeEnum.IMAGE === item.contentType"
                    :initial-index="0"
-                    :preview-src-list="[item.content]"
+                    :preview-src-list="[getMessageContent(item).picUrl || item.content]"
-                    :src="item.content"
+                    :src="getMessageContent(item).picUrl || item.content"
                    class="w-200px"
                    fit="contain"
                    preview-teleported
@@ -244,6 +244,7 @@ const getNewMessageList = async (val: KeFuConversationRespVO) => {
  total.value = messageList.value.length || 0
  loadHistory.value = false
  refreshContent.value = false
+  skipGetMessageList.value = false
  // 2.2 设置会话相关属性
  conversation.value = val
  queryParams.conversationId = val.id
@@ -267,7 +268,7 @@ const handleSendPicture = async (picUrl: string) => {
  const msg = {
    conversationId: conversation.value.id,
    contentType: KeFuMessageContentTypeEnum.IMAGE,
-    content: picUrl
+    content: JSON.stringify({ picUrl })
  }
  await sendMessage(msg)
 }
@@ -287,7 +288,7 @@ const handleSendMessage = async (event: any) => {
  const msg = {
    conversationId: conversation.value.id,
    contentType: KeFuMessageContentTypeEnum.TEXT,
-    content: message.value
+    content: JSON.stringify({ text: message.value })
  }
  await sendMessage(msg)
 }

--- a/src/views/mall/promotion/kefu/components/message/OrderItem.vue
+++ b/src/views/mall/promotion/kefu/components/message/OrderItem.vue
@@ -14,11 +14,11 @@
      </div>
      <div v-for="item in getMessageContent.items" :key="item.id" class="border-bottom">
        <ProductItem
-          :spu-id="item.spuId"
          :num="item.count"
          :picUrl="item.picUrl"
          :price="item.price"
          :skuText="item.properties.map((property: any) => property.valueName).join(' ')"
+          :spu-id="item.spuId"
          :title="item.spuName"
        />
      </div>
@@ -112,14 +112,14 @@ function formatOrderStatus(order: any) {
  border-radius: 10px;
  padding: 10px;
  border: 1px var(--el-border-color) solid;
-  background-color: var(--app-content-bg-color);
+  background-color: rgba(128, 128, 128, 0.5); // 透明色，暗黑模式下也能体现
  .order-card-header {
    height: 28px;
+    font-weight: bold;
    .order-no {
-      font-size: 12px;
+      font-size: 13px;
-      font-weight: 500;
      span {
        &:hover {
@@ -128,27 +128,30 @@ function formatOrderStatus(order: any) {
        }
      }
    }
+    .order-state {
+      font-size: 13px;
+    }
  }
  .pay-box {
    padding-top: 10px;
+    color: #fff;
+    font-weight: bold;
    .discounts-title {
      font-size: 16px;
      line-height: normal;
-      color: #999999;
    }
    .discounts-money {
      font-size: 16px;
      line-height: normal;
-      color: #999;
      font-family: OPPOSANS;
    }
    .pay-color {
      font-size: 13px;
-      color: var(--left-menu-text-color);
    }
  }
 }

--- a/src/views/mall/promotion/kefu/index.vue
+++ b/src/views/mall/promotion/kefu/index.vue
@@ -57,7 +57,6 @@ watchEffect(() => {
    if (type === WebSocketMessageTypeConstants.KEFU_MESSAGE_TYPE) {
      const message = JSON.parse(jsonMessage.content)
      // 刷新会话列表
-      // TODO @puhui999：不应该刷新列表，而是根据消息，本地 update 列表的数据；
      kefuStore.updateConversation(message.conversationId)
      // 刷新消息列表
      keFuChatBoxRef.value?.refreshMessageList(message)
@@ -66,7 +65,7 @@ watchEffect(() => {
    // 2.3 消息类型：KEFU_MESSAGE_ADMIN_READ
    if (type === WebSocketMessageTypeConstants.KEFU_MESSAGE_ADMIN_READ) {
      // 更新会话已读
-      kefuStore.updateConversationStatus(JSON.parse(jsonMessage.content)?.id)
+      kefuStore.updateConversationStatus(JSON.parse(jsonMessage.content))
    }
  } catch (error) {
    console.error(error)