【重构】客服抽离封装消息组件，移除冗余封装

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

@@ -40,19 +40,46 @@
                 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"
               >
                 <!-- 文本消息 -->
-                <TextMessageItem :message="item" />
+                <MessageItem :content-type="KeFuMessageContentTypeEnum.TEXT" :message="item">
+                  <div
+                    v-dompurify-html="replaceEmoji(item.content)"
+                    class="flex items-center"
+                  ></div>
+                </MessageItem>
                 <!-- 图片消息 -->
-                <ImageMessageItem :message="item" />
+                <MessageItem :content-type="KeFuMessageContentTypeEnum.IMAGE" :message="item">
+                  <el-image
+                    :initial-index="0"
+                    :preview-src-list="[item.content]"
+                    :src="item.content"
+                    class="w-200px"
+                    fit="contain"
+                    preview-teleported
+                  />
+                </MessageItem>
                 <!-- 商品消息 -->
-                <ProductMessageItem :message="item" />
+                <MessageItem :content-type="KeFuMessageContentTypeEnum.PRODUCT" :message="item">
+                  <ProductItem
+                    :picUrl="getMessageContent(item).picUrl"
+                    :price="getMessageContent(item).price"
+                    :skuText="getMessageContent(item).introduction"
+                    :title="getMessageContent(item).spuName"
+                    :titleWidth="400"
+                    class="max-w-70%"
+                    priceColor="#FF3000"
+                  />
+                </MessageItem>
                 <!-- 订单消息 -->
-                <OrderMessageItem :message="item" />
+                <MessageItem :content-type="KeFuMessageContentTypeEnum.ORDER" :message="item">
+                  <OrderItem :message="item" />
+                </MessageItem>
               </div>
               <el-avatar
                 v-if="item.senderType === UserTypeEnum.ADMIN"
@@ -97,11 +124,9 @@ import { KeFuMessageApi, KeFuMessageRespVO } from '@/api/mall/promotion/kefu/mes
 import { KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
 import EmojiSelectPopover from './tools/EmojiSelectPopover.vue'
 import PictureSelectUpload from './tools/PictureSelectUpload.vue'
-import TextMessageItem from './message/TextMessageItem.vue'
-import ImageMessageItem from './message/ImageMessageItem.vue'
-import ProductMessageItem from './message/ProductMessageItem.vue'
-import OrderMessageItem from './message/OrderMessageItem.vue'
-import { Emoji } from './tools/emoji'
+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'
@@ -115,7 +140,7 @@ 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) // 用户会话
@@ -127,6 +152,8 @@ const queryParams = reactive({
 })
 const total = ref(0) // 消息总条数
 const refreshContent = ref(false) // 内容刷新,主要解决会话消息页面高度不一致导致的滚动功能精度失效
+/** 获悉消息内容 */
+const getMessageContent = computed(() => (item: any) => JSON.parse(item.content))
 /** 获得消息列表 */
 const getMessageList = async () => {
   const res = await KeFuMessageApi.getKeFuMessagePage(queryParams)

src/views/mall/promotion/kefu/components/message/ImageMessageItem.vue

@@ -1,34 +0,0 @@
-<template>
-  <!-- 图片消息 -->
-  <template v-if="KeFuMessageContentTypeEnum.IMAGE === message.contentType">
-    <div
-      :class="[
-        message.senderType === UserTypeEnum.MEMBER
-          ? `ml-10px`
-          : message.senderType === UserTypeEnum.ADMIN
-            ? `mr-10px`
-            : ''
-      ]"
-    >
-      <el-image
-        :initial-index="0"
-        :preview-src-list="[message.content]"
-        :src="message.content"
-        class="w-200px"
-        fit="contain"
-        preview-teleported
-      />
-    </div>
-  </template>
-</template>
-
-<script lang="ts" setup>
-import { KeFuMessageContentTypeEnum } from '../tools/constants'
-import { UserTypeEnum } from '@/utils/constants'
-import { KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message'
-
-defineOptions({ name: 'ImageMessageItem' })
-defineProps<{
-  message: KeFuMessageRespVO
-}>()
-</script>

src/views/mall/promotion/kefu/components/message/MessageItem.vue

@@ -1,8 +1,7 @@
 <template>
-  <!-- 文本消息 -->
-  <template v-if="KeFuMessageContentTypeEnum.TEXT === message.contentType">
+  <!-- 消息组件 -->
+  <template v-if="contentType === message.contentType">
     <div
-      v-dompurify-html="replaceEmoji(message.content)"
       :class="[
         message.senderType === UserTypeEnum.MEMBER
           ? `ml-10px`
@@ -10,20 +9,19 @@
             ? `mr-10px`
             : ''
       ]"
-      class="flex items-center"
-    ></div>
+    >
+      <slot></slot>
+    </div>
   </template>
 </template>
 
 <script lang="ts" setup>
-import { KeFuMessageContentTypeEnum } from '../tools/constants'
 import { UserTypeEnum } from '@/utils/constants'
-import { useEmoji } from '../tools/emoji'
 import { KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message'
 
-defineOptions({ name: 'TextMessageItem' })
+defineOptions({ name: 'MessageItem' })
 defineProps<{
   message: KeFuMessageRespVO
+  contentType: number
 }>()
-const { replaceEmoji } = useEmoji()
 </script>

src/views/mall/promotion/kefu/components/message/OrderItem.vue

@@ -1,57 +1,43 @@
 <template>
-  <!-- 图片消息 -->
-  <template v-if="KeFuMessageContentTypeEnum.ORDER === message.contentType">
-    <div
-      :class="[
-        message.senderType === UserTypeEnum.MEMBER
-          ? `ml-10px`
-          : message.senderType === UserTypeEnum.ADMIN
-            ? `mr-10px`
-            : ''
-      ]"
-    >
-      <div :key="getMessageContent.id" class="order-list-card-box mt-14px max-w-70%">
-        <div class="order-card-header flex items-center justify-between p-x-20px">
-          <div class="order-no">订单号：{{ getMessageContent.no }}</div>
-          <div :class="formatOrderColor(getMessageContent)" class="order-state font-16">
-            {{ formatOrderStatus(getMessageContent) }}
-          </div>
+  <div :key="getMessageContent.id" class="order-list-card-box mt-14px max-w-70%">
+    <div class="order-card-header flex items-center justify-between p-x-20px">
+      <div class="order-no">订单号：{{ getMessageContent.no }}</div>
+      <div :class="formatOrderColor(getMessageContent)" class="order-state font-16">
+        {{ formatOrderStatus(getMessageContent) }}
+      </div>
+    </div>
+    <div v-for="item in getMessageContent.items" :key="item.id" class="border-bottom">
+      <ProductItem
+        :num="item.count"
+        :picUrl="item.picUrl"
+        :price="item.price"
+        :skuText="item.properties.map((property: any) => property.valueName).join(' ')"
+        :title="item.spuName"
+      />
+    </div>
+    <div class="pay-box flex justify-end pr-20px">
+      <div class="flex items-center">
+        <div class="discounts-title pay-color"
+          >共 {{ getMessageContent?.productCount }} 件商品,总金额:
         </div>
-        <div v-for="item in getMessageContent.items" :key="item.id" class="border-bottom">
-          <ProductItem
-            :num="item.count"
-            :picUrl="item.picUrl"
-            :price="item.price"
-            :skuText="item.properties.map((property: any) => property.valueName).join(' ')"
-            :title="item.spuName"
-          />
-        </div>
-        <div class="pay-box flex justify-end pr-20px">
-          <div class="flex items-center">
-            <div class="discounts-title pay-color"
-              >共 {{ getMessageContent?.productCount }} 件商品,总金额:
-            </div>
-            <div class="discounts-money pay-color">
-              ￥{{ fenToYuan(getMessageContent?.payPrice) }}
-            </div>
-          </div>
+        <div class="discounts-money pay-color">
+          ￥{{ fenToYuan(getMessageContent?.payPrice) }}
         </div>
       </div>
     </div>
-  </template>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { KeFuMessageContentTypeEnum } from '../tools/constants'
-import ProductItem from './ProductItem.vue'
-import { UserTypeEnum } from '@/utils/constants'
-import { KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message'
 import { fenToYuan } from '@/utils'
+import ProductItem from './ProductItem.vue'
+import { KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message'
 
-defineOptions({ name: 'OrderMessageItem' })
+defineOptions({ name: 'OrderItem' })
 const props = defineProps<{
   message: KeFuMessageRespVO
 }>()
+
 const getMessageContent = computed(() => JSON.parse(props.message.content))
 
 /**

src/views/mall/promotion/kefu/components/message/ProductMessageItem.vue

@@ -1,39 +0,0 @@
-<template>
-  <!-- 图片消息 -->
-  <template v-if="KeFuMessageContentTypeEnum.PRODUCT === message.contentType">
-    <div
-      :class="[
-        message.senderType === UserTypeEnum.MEMBER
-          ? `ml-10px`
-          : message.senderType === UserTypeEnum.ADMIN
-            ? `mr-10px`
-            : ''
-      ]"
-    >
-      <ProductItem
-        :picUrl="getMessageContent.picUrl"
-        :price="getMessageContent.price"
-        :skuText="getMessageContent.introduction"
-        :title="getMessageContent.spuName"
-        :titleWidth="400"
-        class="max-w-70%"
-        priceColor="#FF3000"
-      />
-    </div>
-  </template>
-</template>
-
-<script lang="ts" setup>
-import { KeFuMessageContentTypeEnum } from '../tools/constants'
-import ProductItem from './ProductItem.vue'
-import { UserTypeEnum } from '@/utils/constants'
-import { KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message'
-
-defineOptions({ name: 'ProductMessageItem' })
-const props = defineProps<{
-  message: KeFuMessageRespVO
-}>()
-
-/** 获悉消息内容 */
-const getMessageContent = computed(() => JSON.parse(props.message.content))
-</script>