Skip to content

phsl / admin

Go to a project
Commit fe48f87f by puhui999
Options

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

parent f0ba8ff0
Showing with 68 additions and 130 deletions
src/views/mall/promotion/kefu/components/KeFuMessageList.vue
...@@ -40,19 +40,46 @@ ...@@ -40,19 +40,46 @@
v-if="item.senderType === UserTypeEnum.MEMBER" v-if="item.senderType === UserTypeEnum.MEMBER"
:src="conversation.userAvatar" :src="conversation.userAvatar"
alt="avatar" alt="avatar"
class="w-60px h-60px"
/> />
<div <div
:class="{ 'kefu-message': KeFuMessageContentTypeEnum.TEXT === item.contentType }" :class="{ 'kefu-message': KeFuMessageContentTypeEnum.TEXT === item.contentType }"
class="p-10px" 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> </div>
<el-avatar <el-avatar
v-if="item.senderType === UserTypeEnum.ADMIN" v-if="item.senderType === UserTypeEnum.ADMIN"
...@@ -97,11 +124,9 @@ import { KeFuMessageApi, KeFuMessageRespVO } from '@/api/mall/promotion/kefu/mes ...@@ -97,11 +124,9 @@ import { KeFuMessageApi, KeFuMessageRespVO } from '@/api/mall/promotion/kefu/mes
import { KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation' import { KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
import EmojiSelectPopover from './tools/EmojiSelectPopover.vue' import EmojiSelectPopover from './tools/EmojiSelectPopover.vue'
import PictureSelectUpload from './tools/PictureSelectUpload.vue' import PictureSelectUpload from './tools/PictureSelectUpload.vue'
import TextMessageItem from './message/TextMessageItem.vue' import ProductItem from './message/ProductItem.vue'
import ImageMessageItem from './message/ImageMessageItem.vue' import OrderItem from './message/OrderItem.vue'
import ProductMessageItem from './message/ProductMessageItem.vue' import { Emoji, useEmoji } from './tools/emoji'
import OrderMessageItem from './message/OrderMessageItem.vue'
import { Emoji } from './tools/emoji'
import { KeFuMessageContentTypeEnum } from './tools/constants' import { KeFuMessageContentTypeEnum } from './tools/constants'
import { isEmpty } from '@/utils/is' import { isEmpty } from '@/utils/is'
import { UserTypeEnum } from '@/utils/constants' import { UserTypeEnum } from '@/utils/constants'
...@@ -115,7 +140,7 @@ dayjs.extend(relativeTime) ...@@ -115,7 +140,7 @@ dayjs.extend(relativeTime)
defineOptions({ name: 'KeFuMessageList' }) defineOptions({ name: 'KeFuMessageList' })
const message = ref('') // 消息弹窗 const message = ref('') // 消息弹窗
const { replaceEmoji } = useEmoji()
const messageTool = useMessage() const messageTool = useMessage()
const messageList = ref<KeFuMessageRespVO[]>([]) // 消息列表 const messageList = ref<KeFuMessageRespVO[]>([]) // 消息列表
const conversation = ref<KeFuConversationRespVO>({} as KeFuConversationRespVO) // 用户会话 const conversation = ref<KeFuConversationRespVO>({} as KeFuConversationRespVO) // 用户会话
...@@ -127,6 +152,8 @@ const queryParams = reactive({ ...@@ -127,6 +152,8 @@ const queryParams = reactive({
}) })
const total = ref(0) // 消息总条数 const total = ref(0) // 消息总条数
const refreshContent = ref(false) // 内容刷新,主要解决会话消息页面高度不一致导致的滚动功能精度失效 const refreshContent = ref(false) // 内容刷新,主要解决会话消息页面高度不一致导致的滚动功能精度失效
/** 获悉消息内容 */
const getMessageContent = computed(() => (item: any) => JSON.parse(item.content))
/** 获得消息列表 */ /** 获得消息列表 */
const getMessageList = async () => { const getMessageList = async () => {
const res = await KeFuMessageApi.getKeFuMessagePage(queryParams) const res = await KeFuMessageApi.getKeFuMessagePage(queryParams)
......
src/views/mall/promotion/kefu/components/message/ImageMessageItem.vue → src/views/mall/promotion/kefu/components/message/MessageItem.vue
<template> <template>
<!-- 图片消息 --> <!-- 消息组件 -->
<template v-if="KeFuMessageContentTypeEnum.IMAGE === message.contentType"> <template v-if="contentType === message.contentType">
<div <div
:class="[ :class="[
message.senderType === UserTypeEnum.MEMBER message.senderType === UserTypeEnum.MEMBER
...@@ -10,25 +10,18 @@ ...@@ -10,25 +10,18 @@
: '' : ''
]" ]"
> >
<el-image <slot></slot>
:initial-index="0"
:preview-src-list="[message.content]"
:src="message.content"
class="w-200px"
fit="contain"
preview-teleported
/>
</div> </div>
</template> </template>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { KeFuMessageContentTypeEnum } from '../tools/constants'
import { UserTypeEnum } from '@/utils/constants' import { UserTypeEnum } from '@/utils/constants'
import { KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message' import { KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message'
defineOptions({ name: 'ImageMessageItem' }) defineOptions({ name: 'MessageItem' })
defineProps<{ defineProps<{
message: KeFuMessageRespVO message: KeFuMessageRespVO
contentType: number
}>() }>()
</script> </script>
src/views/mall/promotion/kefu/components/message/OrderMessageItem.vue → src/views/mall/promotion/kefu/components/message/OrderItem.vue
<template> <template>
<!-- 图片消息 --> <div :key="getMessageContent.id" class="order-list-card-box mt-14px max-w-70%">
<template v-if="KeFuMessageContentTypeEnum.ORDER === message.contentType"> <div class="order-card-header flex items-center justify-between p-x-20px">
<div <div class="order-no">订单号：{{ getMessageContent.no }}</div>
:class="[ <div :class="formatOrderColor(getMessageContent)" class="order-state font-16">
message.senderType === UserTypeEnum.MEMBER {{ formatOrderStatus(getMessageContent) }}
? `ml-10px` </div>
: message.senderType === UserTypeEnum.ADMIN </div>
? `mr-10px` <div v-for="item in getMessageContent.items" :key="item.id" class="border-bottom">
: '' <ProductItem
]" :num="item.count"
> :picUrl="item.picUrl"
<div :key="getMessageContent.id" class="order-list-card-box mt-14px max-w-70%"> :price="item.price"
<div class="order-card-header flex items-center justify-between p-x-20px"> :skuText="item.properties.map((property: any) => property.valueName).join(' ')"
<div class="order-no">订单号：{{ getMessageContent.no }}</div> :title="item.spuName"
<div :class="formatOrderColor(getMessageContent)" class="order-state font-16"> />
{{ formatOrderStatus(getMessageContent) }} </div>
</div> <div class="pay-box flex justify-end pr-20px">
</div> <div class="flex items-center">
<div v-for="item in getMessageContent.items" :key="item.id" class="border-bottom"> <div class="discounts-title pay-color"
<ProductItem >共 {{ getMessageContent?.productCount }} 件商品,总金额:
:num="item.count"
:picUrl="item.picUrl"
:price="item.price"
:skuText="item.properties.map((property: any) => property.valueName).join(' ')"
:title="item.spuName"
/>
</div> </div>
<div class="pay-box flex justify-end pr-20px"> <div class="discounts-money pay-color">
<div class="flex items-center"> ￥{{ fenToYuan(getMessageContent?.payPrice) }}
<div class="discounts-title pay-color"
>共 {{ getMessageContent?.productCount }} 件商品,总金额:
</div>
<div class="discounts-money pay-color">
￥{{ fenToYuan(getMessageContent?.payPrice) }}
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</template> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { KeFuMessageContentTypeEnum } from '../tools/constants' import { fenToYuan } from '@/utils'
import ProductItem from './ProductItem.vue' import ProductItem from './ProductItem.vue'
import { UserTypeEnum } from '@/utils/constants'
import { KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message' import { KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message'
import { fenToYuan } from '@/utils'
defineOptions({ name: 'OrderMessageItem' }) defineOptions({ name: 'OrderItem' })
const props = defineProps<{ const props = defineProps<{
message: KeFuMessageRespVO message: KeFuMessageRespVO
}>() }>()
const getMessageContent = computed(() => JSON.parse(props.message.content)) const getMessageContent = computed(() => JSON.parse(props.message.content))
/** /**
......
src/views/mall/promotion/kefu/components/message/ProductMessageItem.vue deleted 100644 → 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>
src/views/mall/promotion/kefu/components/message/TextMessageItem.vue deleted 100644 → 0
<template>
<!-- 文本消息 -->
<template v-if="KeFuMessageContentTypeEnum.TEXT === message.contentType">
<div
v-dompurify-html="replaceEmoji(message.content)"
:class="[
message.senderType === UserTypeEnum.MEMBER
? `ml-10px`
: message.senderType === UserTypeEnum.ADMIN
? `mr-10px`
: ''
]"
class="flex items-center"
></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' })
defineProps<{
message: KeFuMessageRespVO
}>()
const { replaceEmoji } = useEmoji()
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment