From fe48f87f37f1a6d7cddf6bf17789f7bbcdd41e16 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Wed, 17 Jul 2024 17:22:19 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E9=87=8D=E6=9E=84=E3=80=91=E5=AE=A2?=
=?UTF-8?q?=E6=9C=8D=E6=8A=BD=E7=A6=BB=E5=B0=81=E8=A3=85=E6=B6=88=E6=81=AF?=
=?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E7=A7=BB=E9=99=A4=E5=86=97=E4=BD=99?=
=?UTF-8?q?=E5=B0=81=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../kefu/components/KeFuMessageList.vue | 47 ++++++++++---
.../components/message/ImageMessageItem.vue | 34 ----------
.../{TextMessageItem.vue => MessageItem.vue} | 16 ++---
.../{OrderMessageItem.vue => OrderItem.vue} | 68 ++++++++-----------
.../components/message/ProductMessageItem.vue | 39 -----------
5 files changed, 71 insertions(+), 133 deletions(-)
delete mode 100644 src/views/mall/promotion/kefu/components/message/ImageMessageItem.vue
rename src/views/mall/promotion/kefu/components/message/{TextMessageItem.vue => MessageItem.vue} (53%)
rename src/views/mall/promotion/kefu/components/message/{OrderMessageItem.vue => OrderItem.vue} (56%)
delete mode 100644 src/views/mall/promotion/kefu/components/message/ProductMessageItem.vue
diff --git a/src/views/mall/promotion/kefu/components/KeFuMessageList.vue b/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
index bdcab5dc..7e0306c4 100644
--- a/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
+++ b/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)
diff --git a/src/views/mall/promotion/kefu/components/message/ImageMessageItem.vue b/src/views/mall/promotion/kefu/components/message/ImageMessageItem.vue
deleted file mode 100644
index 6b60651b..00000000
--- a/src/views/mall/promotion/kefu/components/message/ImageMessageItem.vue
+++ /dev/null
@@ -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>
diff --git a/src/views/mall/promotion/kefu/components/message/TextMessageItem.vue b/src/views/mall/promotion/kefu/components/message/MessageItem.vue
similarity index 53%
rename from src/views/mall/promotion/kefu/components/message/TextMessageItem.vue
rename to src/views/mall/promotion/kefu/components/message/MessageItem.vue
index fd4b6edb..c3033ac3 100644
--- a/src/views/mall/promotion/kefu/components/message/TextMessageItem.vue
+++ b/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>
diff --git a/src/views/mall/promotion/kefu/components/message/OrderMessageItem.vue b/src/views/mall/promotion/kefu/components/message/OrderItem.vue
similarity index 56%
rename from src/views/mall/promotion/kefu/components/message/OrderMessageItem.vue
rename to src/views/mall/promotion/kefu/components/message/OrderItem.vue
index cebe9626..80a4ab72 100644
--- a/src/views/mall/promotion/kefu/components/message/OrderMessageItem.vue
+++ b/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))
/**
diff --git a/src/views/mall/promotion/kefu/components/message/ProductMessageItem.vue b/src/views/mall/promotion/kefu/components/message/ProductMessageItem.vue
deleted file mode 100644
index 72cd8726..00000000
--- a/src/views/mall/promotion/kefu/components/message/ProductMessageItem.vue
+++ /dev/null
@@ -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>