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

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>