smart-flow/yudao-ui-admin-vben
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: ele kefu

Browse Source
This commit is contained in:
xingyu4j
2025-11-06 16:27:18 +08:00
parent 36addb1380
commit c405e464a0
8 changed files with 277 additions and 272 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
apps/web-ele/src/views/mall/promotion/kefu/index.vue
View File

@@ -7,7 +7,7 @@ import { Page } from '@vben/common-ui';
import { useAccessStore } from '@vben/stores';
import { useWebSocket } from '@vueuse/core';
import { ElContainer, ElMessage } from 'element-plus';
import { ElMessage } from 'element-plus';
import { useMallKefuStore } from '#/store/mall/kefu';
@@ -104,13 +104,19 @@ onBeforeUnmount(() => {
<template>
<Page auto-content-height>
<ElContainer class="absolute left-0 top-0 flex h-full w-full flex-1">
<!-- 会话列表 -->
<ConversationList ref="conversationListRef" @change="handleChange" />
<!-- 会话详情（选中会话的消息列表） -->
<MessageList ref="messageListRef" />
<!-- 会员信息（选中会话的会员信息） -->
<MemberInfo ref="memberInfoRef" />
</ElContainer>
<div class="flex h-full antialiased">
<div class="flex h-full w-full flex-row overflow-x-hidden">
<!-- 会话列表 -->
<ConversationList
class="w-1/6"
ref="conversationListRef"
@change="handleChange"
/>
<!-- 会话详情（选中会话的消息列表） -->
<MessageList class="w-4/6" ref="messageListRef" />
<!-- 会员信息（选中会话的会员信息） -->
<MemberInfo class="w-1/6" ref="memberInfoRef" />
</div>
</div>
</Page>
</template>

83
apps/web-ele/src/views/mall/promotion/kefu/modules/conversation-list.vue
View File

@@ -7,7 +7,7 @@ import { confirm } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
import { formatPast, jsonParse } from '@vben/utils';
import { ElAside, ElAvatar, ElBadge, ElMessage } from 'element-plus';
import { ElAvatar, ElMessage } from 'element-plus';
import {
deleteConversation,
@@ -158,39 +158,36 @@ onBeforeUnmount(() => {
</script>
<template>
<ElAside class="!bg-card pt-[5px]" width="260px">
<div class="my-[10px] font-bold text-[#999]">
会话记录({{ kefuStore.getConversationList.length }})
<div
class="bg-background flex flex-shrink-0 flex-col border-r border-gray-200 p-4"
>
<div class="flex h-12 w-full flex-row items-center justify-between">
<span class="text-lg font-bold">会话记录</span>
<span
class="flex h-4 w-4 items-center justify-center rounded-full bg-indigo-100 text-indigo-600"
>
{{ kefuStore.getConversationList.length }}
</span>
</div>
<div
v-for="item in kefuStore.getConversationList"
:key="item.id"
:class="{
'bg-gray-500/50': item.id === activeConversationId,
}"
class="flex h-[60px] cursor-pointer items-center px-[10px]"
@click="openRightMessage(item)"
@contextmenu.prevent="rightClick($event as PointerEvent, item)"
>
<div class="flex w-full items-center justify-center">
<div class="flex h-[50px] w-[50px] items-center justify-center">
<!-- 头像 + 未读 -->
<ElBadge
:hidden="item.adminUnreadMessageCount === 0"
:max="99"
:value="item.adminUnreadMessageCount"
<div class="mt-2 flex flex-col">
<div class="-mx-2 mt-4 flex h-48 flex-col space-y-1 overflow-y-auto">
<button
v-for="(item, index) in kefuStore.getConversationList"
:key="index"
class="flex flex-row items-center rounded-xl p-2 hover:bg-gray-100"
:class="{
'bg-gray-500/50': item.id === activeConversationId,
}"
@click="openRightMessage(item)"
@contextmenu.prevent="rightClick($event as PointerEvent, item)"
>
<div
class="flex h-8 w-8 items-center justify-center rounded-full bg-gray-200"
>
<ElAvatar :src="item.userAvatar" alt="avatar" />
</ElBadge>
</div>
<div class="ml-[10px] w-full">
<div class="flex w-full items-center justify-between">
<span class="line-clamp-1 min-w-0 max-w-[60%]">{{
item.userNickname || 'null'
}}</span>
<span class="text-[13px] text-[#999]">
{{ lastMessageTimeMap.get(item.id) ?? '计算中' }}
</span>
<ElAvatar :src="item.userAvatar" alt="avatar" class="size-8" />
</div>
<div class="ml-2 text-sm font-semibold">
{{ item.userNickname || 'null' }}
</div>
<!-- 最后聊天内容 -->
<div
@@ -200,9 +197,15 @@ onBeforeUnmount(() => {
item.lastMessageContent,
)
"
class="line-clamp-1 flex items-center text-[13px] text-[#999]"
class="line-clamp-1 flex items-center text-sm text-gray-500"
></div>
</div>
<div
v-if="item.adminUnreadMessageCount > 0"
class="ml-auto flex h-4 w-4 items-center justify-center rounded bg-red-500 text-xs leading-none text-white"
>
{{ item.adminUnreadMessageCount }}
</div>
</button>
</div>
</div>
@@ -210,14 +213,14 @@ onBeforeUnmount(() => {
<ul
v-show="showRightMenu"
:style="rightMenuStyle"
class="absolute z-[1999] m-0 w-[130px] list-none rounded-xl bg-[hsl(var(--background))] p-[5px] shadow-md"
class="bg-background absolute z-[9999] m-0 w-32 list-none rounded-xl p-1 shadow-md"
>
<li
v-show="!rightClickConversation.adminPinned"
class="flex cursor-pointer items-center rounded-xl px-4 py-2 transition-colors hover:bg-gray-500/50"
@click.stop="updateConversationPinnedFn(true)"
>
<IconifyIcon class="mr-[5px]" icon="ep:top" />
<IconifyIcon class="mr-1" icon="lucide:arrow-up-to-line" />
置顶会话
</li>
<li
@@ -225,23 +228,23 @@ onBeforeUnmount(() => {
class="flex cursor-pointer items-center rounded-xl px-4 py-2 transition-colors hover:bg-gray-500/50"
@click.stop="updateConversationPinnedFn(false)"
>
<IconifyIcon class="mr-[5px]" icon="ep:bottom" />
<IconifyIcon class="mr-1" icon="lucide:arrow-down-from-line" />
取消置顶
</li>
<li
class="flex cursor-pointer items-center rounded-xl px-4 py-2 transition-colors hover:bg-gray-500/50"
@click.stop="deleteConversationFn"
>
<IconifyIcon class="mr-[5px]" color="red" icon="ep:delete" />
<IconifyIcon class="mr-1" color="red" icon="lucide:trash-2" />
删除会话
</li>
<li
class="flex cursor-pointer items-center rounded-xl px-4 py-2 transition-colors hover:bg-gray-500/50"
@click.stop="closeRightMenu"
>
<IconifyIcon class="mr-[5px]" color="red" icon="ep:close" />
<IconifyIcon class="mr-1" color="red" icon="lucide:x" />
取消
</li>
</ul>
</ElAside>
</div>
</template>

70
apps/web-ele/src/views/mall/promotion/kefu/modules/member/member-info.vue
View File

@@ -1,25 +1,15 @@
<!-- 右侧信息：会员信息 + 最近浏览 + 交易订单 -->
<script lang="ts" setup>
import type { UseScrollReturn } from '@vueuse/core';
import type { MallKefuConversationApi } from '#/api/mall/promotion/kefu/conversation';
import type { MemberUserApi } from '#/api/member/user';
import type { PayWalletApi } from '#/api/pay/wallet/balance';
import { computed, nextTick, ref } from 'vue';
import { computed, nextTick, ref, toRefs, watch } from 'vue';
import { isEmpty } from '@vben/utils';
import { vScroll } from '@vueuse/components';
import { useDebounceFn } from '@vueuse/core';
import {
ElCard,
ElContainer,
ElEmpty,
ElHeader,
ElMain,
ElMessage,
} from 'element-plus';
import { useScroll } from '@vueuse/core';
import { ElEmpty, ElMessage } from 'element-plus';
import { getUser } from '#/api/member/user';
import { getWallet } from '#/api/pay/wallet/balance';
@@ -29,7 +19,7 @@ import BasicInfo from '#/views/member/user/detail/modules/basic-info.vue';
import OrderBrowsingHistory from './order-browsing-history.vue';
import ProductBrowsingHistory from './product-browsing-history.vue';
const activeTab = ref<'交易订单' | '会员信息' | '最近浏览'>('会员信息');
const activeTab = ref<string>('会员信息');
const tabActivation = computed(() => (tab: string) => activeTab.value === tab);
@@ -100,12 +90,16 @@ defineExpose({ initHistory });
/** 处理消息列表滚动事件(debounce 限流) */
const scrollbarRef = ref<InstanceType<any>>();
const handleScroll = useDebounceFn(async (state: UseScrollReturn) => {
const { arrivedState } = state;
if (arrivedState.bottom) {
await loadMore();
}
}, 200);
const { arrivedState } = useScroll(scrollbarRef);
const { bottom } = toRefs(arrivedState);
watch(
() => bottom.value,
async (newVal) => {
if (newVal) {
await loadMore();
}
},
);
/** 查询用户钱包信息 */
// TODO @jawe：idea 的导入报错；需要看下；
@@ -146,18 +140,16 @@ async function getUserData() {
</script>
<template>
<ElContainer
class="relative w-[300px] bg-[var(--background)] after:absolute after:left-0 after:top-0 after:h-full after:w-[1px] after:scale-x-[0.3] after:bg-[var(--el-border-color)] after:content-['']"
>
<ElHeader
class="relative flex items-center justify-around bg-[var(--background)] before:absolute before:bottom-0 before:left-0 before:h-[1px] before:w-full before:scale-y-[0.3] before:bg-[var(--el-border-color)] before:content-['']"
<div class="bg-background relative">
<div
class="relative flex h-12 items-center justify-around before:absolute before:bottom-0 before:left-0 before:h-[1px] before:w-full before:scale-y-[0.3] before:bg-gray-200 before:content-['']"
>
<div
:class="{
'before:border-b-2 before:border-gray-500/50':
tabActivation('会员信息'),
}"
class="relative flex h-full w-full cursor-pointer items-center justify-center before:pointer-events-none before:absolute before:inset-0 before:content-[''] hover:before:border-b-2 hover:before:border-gray-500/50"
class="relative flex w-full cursor-pointer items-center justify-center before:pointer-events-none before:absolute before:inset-0 before:content-[''] hover:before:border-b-2 hover:before:border-gray-500/50"
@click="handleClick('会员信息')"
>
会员信息
@@ -167,7 +159,7 @@ async function getUserData() {
'before:border-b-2 before:border-gray-500/50':
tabActivation('最近浏览'),
}"
class="relative flex h-full w-full cursor-pointer items-center justify-center before:pointer-events-none before:absolute before:inset-0 before:content-[''] hover:before:border-b-2 hover:before:border-gray-500/50"
class="relative flex w-full cursor-pointer items-center justify-center before:pointer-events-none before:absolute before:inset-0 before:content-[''] hover:before:border-b-2 hover:before:border-gray-500/50"
@click="handleClick('最近浏览')"
>
最近浏览
@@ -177,18 +169,18 @@ async function getUserData() {
'before:border-b-2 before:border-gray-500/50':
tabActivation('交易订单'),
}"
class="relative flex h-full w-full cursor-pointer items-center justify-center before:pointer-events-none before:absolute before:inset-0 before:content-[''] hover:before:border-b-2 hover:before:border-gray-500/50"
class="relative flex w-full cursor-pointer items-center justify-center before:pointer-events-none before:absolute before:inset-0 before:content-[''] hover:before:border-b-2 hover:before:border-gray-500/50"
@click="handleClick('交易订单')"
>
交易订单
</div>
</ElHeader>
<ElMain class="relative m-0 h-full w-full p-[10px]">
</div>
<div class="relative m-0 w-full p-2">
<template v-if="!isEmpty(conversation)">
<div
v-loading="loading"
v-if="activeTab === '会员信息'"
class="relative h-full overflow-y-auto overflow-x-hidden"
class="relative overflow-y-auto overflow-x-hidden"
>
<!-- 基本信息 -->
<BasicInfo :user="user" mode="kefu">
@@ -197,17 +189,21 @@ async function getUserData() {
</template>
</BasicInfo>
<!-- 账户信息 -->
<ElCard class="mt-10px h-full" shadow="never">
<AccountInfo
:column="1"
:user="user"
:wallet="wallet"
mode="kefu"
class="mt-2"
>
<template #title>
<span class="text-sm font-bold">账户信息</span>
</template>
<AccountInfo :column="1" :user="user" :wallet="wallet" />
</ElCard>
</AccountInfo>
</div>
<div
v-show="activeTab !== '会员信息'"
ref="scrollbarRef"
v-scroll="handleScroll"
class="relative h-full overflow-y-auto overflow-x-hidden"
>
<!-- 最近浏览 -->
@@ -227,6 +223,6 @@ async function getUserData() {
description="请选择左侧的一个会话后开始"
class="mt-[20%]"
/>
</ElMain>
</ElContainer>
</div>
</div>
</template>

2
apps/web-ele/src/views/mall/promotion/kefu/modules/member/product-browsing-history.vue
View File

@@ -53,6 +53,6 @@ defineExpose({ getHistoryList, loadMore });
:spu-id="item.spuId"
:stock="item.stock"
:title="item.spuName"
class="mb-10px"
class="mb-2.5"
/>
</template>

326
apps/web-ele/src/views/mall/promotion/kefu/modules/message-list.vue
View File

@@ -1,30 +1,23 @@
<script lang="ts" setup>
import type { UseScrollReturn } from '@vueuse/core';
import type { Emoji } from './tools/emoji';
import type { MallKefuConversationApi } from '#/api/mall/promotion/kefu/conversation';
import type { MallKefuMessageApi } from '#/api/mall/promotion/kefu/message';
import { computed, reactive, ref, unref } from 'vue';
import { computed, reactive, ref, toRefs, unref, watch } from 'vue';
import { UserTypeEnum } from '@vben/constants';
import { IconifyIcon } from '@vben/icons';
import { formatDate, isEmpty, jsonParse } from '@vben/utils';
import { vScroll } from '@vueuse/components';
import { useDebounceFn, useScroll } from '@vueuse/core';
import { useScroll } from '@vueuse/core';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import {
ElAvatar,
ElContainer,
ElEmpty,
ElFooter,
ElHeader,
ElImage,
ElInput,
ElMain,
ElNotification,
} from 'element-plus';
@@ -209,7 +202,9 @@ async function sendMessage(msg: MallKefuMessageApi.MessageSend) {
/** 滚动到底部 */
const scrollbarRef = ref<HTMLElement | null>(null);
const { y } = useScroll(scrollbarRef);
const { y, arrivedState } = useScroll(scrollbarRef);
const { bottom } = toRefs(arrivedState);
async function scrollToBottom() {
if (!scrollbarRef.value) return;
@@ -231,23 +226,26 @@ async function handleToNewMessage() {
await scrollToBottom();
}
/** 处理消息列表滚动事件(debounce 限流) */
const handleScroll = useDebounceFn((state: UseScrollReturn) => {
const { arrivedState } = state;
if (skipGetMessageList.value) {
return;
}
// 滚动到底部了
if (arrivedState.bottom) {
loadHistory.value = false;
refreshMessageList();
}
watch(
() => bottom.value,
(newVal) => {
if (newVal) {
if (skipGetMessageList.value) {
return;
}
// 滚动到底部了
if (newVal) {
loadHistory.value = false;
refreshMessageList();
}
// 触顶自动加载下一页数据
if (arrivedState.top) {
handleOldMessage();
}
}, 200);
// 触顶自动加载下一页数据
if (arrivedState.top) {
handleOldMessage();
}
}
},
);
/** 加载历史消息 */
async function handleOldMessage() {
loadHistory.value = true;
@@ -258,7 +256,7 @@ async function handleOldMessage() {
function showTime(item: MallKefuMessageApi.Message, index: number) {
if (unref(messageList.value)[index + 1]) {
const dateString = dayjs(
unref(messageList.value)[index + 1].createTime,
unref(messageList.value)[index + 1]!.createTime,
).fromNow();
return dateString !== dayjs(unref(item).createTime).fromNow();
}
@@ -267,158 +265,160 @@ function showTime(item: MallKefuMessageApi.Message, index: number) {
</script>
<template>
<ElContainer
<div
v-if="showMessageList()"
class="bg-card relative w-[calc(100%-300px-260px)]"
class="bg-background flex h-full flex-auto flex-col p-4"
>
<ElHeader
class="!bg-card border-border flex items-center justify-between border-b"
>
<div class="text-lg font-bold">{{ conversation.userNickname }}</div>
</ElHeader>
<ElMain class="relative m-0 p-0">
<div class="flex h-full flex-auto flex-shrink-0 flex-col">
<div class="flex h-12 w-full flex-row items-center justify-between">
<span class="text-lg font-bold">{{ conversation.userNickname }}</span>
</div>
<div
ref="scrollbarRef"
class="absolute inset-0 m-0 overflow-y-auto overflow-x-hidden p-0"
v-scroll="handleScroll"
class="mb-4 flex h-full flex-col overflow-x-auto rounded-lg bg-gray-100 p-2"
>
<!-- <div v-if="refreshContent" ref="innerRef" class="w-full px-[10px] absolute inset-0 m-0 overflow-x-hidden p-0 overflow-y-auto"> -->
<!-- 消息列表 -->
<div
v-for="(item, index) in getMessageList0"
:key="item.id"
class="w-full"
>
<div class="mb-[20px] flex items-center justify-center">
<!-- 日期 -->
<div
v-if="
item.contentType !== KeFuMessageContentTypeEnum.SYSTEM &&
showTime(item, index)
"
class="w-fit rounded-lg bg-black/10 px-[5px] text-[10px] text-white"
>
{{ formatDate(item.createTime) }}
</div>
<!-- 系统消息 -->
<div
v-if="item.contentType === KeFuMessageContentTypeEnum.SYSTEM"
class="w-fit rounded-lg bg-black/10 px-[5px] text-[10px] text-white"
>
{{ item.content }}
</div>
</div>
<div class="flex flex-col">
<!-- 消息列表 -->
<div
:class="[
item.senderType === UserTypeEnum.MEMBER
? 'justify-start'
: item.senderType === UserTypeEnum.ADMIN
? 'justify-end'
: '',
]"
class="mb-[20px] flex w-full"
v-for="(item, index) in getMessageList0"
:key="item.id"
class="w-full"
>
<ElAvatar
v-if="item.senderType === UserTypeEnum.MEMBER"
:src="conversation.userAvatar"
alt="avatar"
class="h-[60px] w-[60px]"
/>
<div
:class="{
'w-auto max-w-[50%] px-[10px] py-[5px] font-medium text-[#414141] transition-all duration-200 hover:scale-105':
KeFuMessageContentTypeEnum.TEXT === item.contentType,
'ml-[10px] mt-[3px] rounded-bl-[10px] rounded-br-[10px] rounded-tr-[10px] bg-white':
KeFuMessageContentTypeEnum.TEXT === item.contentType &&
item.senderType === UserTypeEnum.MEMBER,
'mr-[10px] mt-[3px] rounded-bl-[10px] rounded-br-[10px] rounded-tl-[10px] bg-[rgb(206_223_255)]':
KeFuMessageContentTypeEnum.TEXT === item.contentType &&
item.senderType === UserTypeEnum.ADMIN,
}"
>
<!-- 文本消息 -->
<MessageItem :message="item">
<template
v-if="KeFuMessageContentTypeEnum.TEXT === item.contentType"
>
<div
v-dompurify-html="
replaceEmoji(getMessageContent(item).text || item.content)
"
class="line-height-normal h-1/1 w-full text-justify"
></div>
</template>
</MessageItem>
<!-- 图片消息 -->
<MessageItem :message="item">
<ElImage
v-if="KeFuMessageContentTypeEnum.IMAGE === item.contentType"
:src="getMessageContent(item).picUrl || item.content"
class="mx-[10px] !w-[200px]"
fit="cover"
/>
</MessageItem>
<!-- 商品消息 -->
<MessageItem :message="item">
<ProductItem
v-if="KeFuMessageContentTypeEnum.PRODUCT === item.contentType"
:pic-url="getMessageContent(item).picUrl"
:price="getMessageContent(item).price"
:sales-count="getMessageContent(item).salesCount"
:spu-id="getMessageContent(item).spuId"
:stock="getMessageContent(item).stock"
:title="getMessageContent(item).spuName"
class="mx-[10px] max-w-[300px]"
/>
</MessageItem>
<!-- 订单消息 -->
<MessageItem :message="item">
<OrderItem
v-if="KeFuMessageContentTypeEnum.ORDER === item.contentType"
:message="item"
class="mx-[10px] max-w-full"
/>
</MessageItem>
<div class="mb-5 flex items-center justify-center">
<!-- 日期 -->
<div
v-if="
item.contentType !== KeFuMessageContentTypeEnum.SYSTEM &&
showTime(item, index)
"
class="w-fit rounded-lg bg-black/10 px-2 text-xs"
>
{{ formatDate(item.createTime) }}
</div>
<!-- 系统消息 -->
<div
v-if="item.contentType === KeFuMessageContentTypeEnum.SYSTEM"
class="w-fit rounded-lg bg-black/10 px-2 text-xs"
>
{{ item.content }}
</div>
</div>
<div
:class="[
item.senderType === UserTypeEnum.MEMBER
? 'justify-start'
: item.senderType === UserTypeEnum.ADMIN
? 'justify-end'
: '',
]"
class="mb-5 flex w-full"
>
<ElAvatar
v-if="item.senderType === UserTypeEnum.MEMBER"
:src="conversation.userAvatar"
alt="avatar"
class="size-8"
/>
<div
:class="{
'w-auto max-w-[50%] p-1 font-medium text-gray-500 transition-all duration-200 hover:scale-105':
KeFuMessageContentTypeEnum.TEXT === item.contentType,
'm-1 break-words rounded-lg bg-gray-100':
KeFuMessageContentTypeEnum.TEXT === item.contentType &&
item.senderType === UserTypeEnum.MEMBER,
'm-1 break-words rounded-lg bg-blue-50':
KeFuMessageContentTypeEnum.TEXT === item.contentType &&
item.senderType === UserTypeEnum.ADMIN,
}"
>
<!-- 文本消息 -->
<MessageItem :message="item">
<template
v-if="KeFuMessageContentTypeEnum.TEXT === item.contentType"
>
<div
v-dompurify-html="
replaceEmoji(
getMessageContent(item).text || item.content,
)
"
class="h-full w-full text-justify"
></div>
</template>
</MessageItem>
<!-- 图片消息 -->
<MessageItem :message="item">
<ElImage
v-if="KeFuMessageContentTypeEnum.IMAGE === item.contentType"
:initial-index="0"
:src="getMessageContent(item).picUrl || item.content"
class="mx-2 !w-52"
fit="cover"
/>
</MessageItem>
<!-- 商品消息 -->
<MessageItem :message="item">
<ProductItem
v-if="
KeFuMessageContentTypeEnum.PRODUCT === item.contentType
"
:pic-url="getMessageContent(item).picUrl"
:price="getMessageContent(item).price"
:sales-count="getMessageContent(item).salesCount"
:spu-id="getMessageContent(item).spuId"
:stock="getMessageContent(item).stock"
:title="getMessageContent(item).spuName"
class="mx-2 max-w-80"
/>
</MessageItem>
<!-- 订单消息 -->
<MessageItem :message="item">
<OrderItem
v-if="KeFuMessageContentTypeEnum.ORDER === item.contentType"
:message="item"
class="mx-2 max-w-full"
/>
</MessageItem>
</div>
<ElAvatar
v-if="item.senderType === UserTypeEnum.ADMIN"
:src="item.senderAvatar"
alt="avatar"
/>
</div>
<ElAvatar
v-if="item.senderType === UserTypeEnum.ADMIN"
:src="item.senderAvatar"
alt="avatar"
/>
</div>
</div>
<!-- </div> -->
</div>
<div
v-show="showNewMessageTip"
class="absolute bottom-[35px] right-[35px] z-10 flex cursor-pointer items-center rounded-[30px] bg-[var(--background)] p-[10px] text-xs shadow-md"
class="absolute bottom-9 right-9 z-10 flex cursor-pointer items-center rounded-lg p-2 text-xs shadow-md"
@click="handleToNewMessage"
>
<span>有新消息</span>
<IconifyIcon class="ml-5px" icon="ep:bottom" />
<IconifyIcon class="ml-1" icon="lucide:arrow-down-from-line" />
</div>
</ElMain>
<ElFooter class="!bg-card m-0 flex !h-auto flex-col p-0">
<div class="flex h-[44px] w-full items-center">
<EmojiSelectPopover @select-emoji="handleEmojiSelect" />
<PictureSelectUpload
class="ml-[15px] mt-[3px] cursor-pointer"
@send-picture="handleSendPicture"
/>
<div class="flex flex-col">
<div class="border-border -mt-3 flex flex-col rounded-xl border">
<div class="flex h-10 w-full items-center">
<EmojiSelectPopover @select-emoji="handleEmojiSelect" />
<PictureSelectUpload
class="ml-4 mt-1 cursor-pointer"
@send-picture="handleSendPicture"
/>
</div>
<ElInput
type="textarea"
v-model="message"
:rows="4"
class="border-none p-2"
placeholder="输入消息，Enter发送，Shift+Enter换行"
@keyup.enter="handleSendMessage"
/>
</div>
</div>
<ElInput
type="textarea"
v-model="message"
:rows="6"
placeholder="输入消息，Enter发送，Shift+Enter换行"
style="border-style: none"
@keyup.enter="handleSendMessage"
/>
</ElFooter>
</ElContainer>
<ElContainer v-else class="bg-card relative w-[calc(100%-300px-260px)]">
<ElMain>
<ElEmpty description="请选择左侧的一个会话后开始" class="mt-[20%]" />
</ElMain>
</ElContainer>
</div>
</div>
<div v-else class="bg-background relative">
<ElEmpty description="请选择左侧的一个会话后开始" class="mt-[20%]" />
</div>
</template>

24
apps/web-ele/src/views/mall/promotion/kefu/modules/message/order-item.vue
View File

@@ -34,19 +34,19 @@ function openDetail(id: number) {
*/
function formatOrderColor(order: any) {
if (order.status === 0) {
return 'text-[#999]';
return 'text-gray-500';
}
if (
order.status === 10 ||
order.status === 20 ||
(order.status === 30 && !order.commentStatus)
) {
return 'text-[#faad14]';
return 'text-orange-500';
}
if (order.status === 30 && order.commentStatus) {
return 'text-[#52c41a]';
return 'text-green-500';
}
return 'text-[#ff3000]';
return 'text-red-500';
}
/**
@@ -81,10 +81,10 @@ function formatOrderStatus(order: any) {
<div
v-if="isObject(getMessageContent)"
:key="getMessageContent.id"
class="mb-[10px] rounded-[10px] bg-gray-500/30 p-[10px]"
class="mb-2.5 rounded-md bg-gray-500/30 p-2.5"
>
<div class="flex h-[28px] items-center justify-between px-[5px] font-bold">
<div class="text-[13px]">
<div class="flex h-7 items-center justify-between px-1.5 font-bold">
<div class="text-sm">
订单号：
<span
class="cursor-pointer hover:text-[var(--left-menu-bg-active-color)] hover:underline"
@@ -95,7 +95,7 @@ function formatOrderStatus(order: any) {
</div>
<div
:class="formatOrderColor(getMessageContent)"
class="text-[13px] font-bold"
class="text-sm font-bold"
>
{{ formatOrderStatus(getMessageContent) }}
</div>
@@ -103,7 +103,7 @@ function formatOrderStatus(order: any) {
<div
v-for="item in getMessageContent.items"
:key="item.id"
class="border-b"
class="border-b border-gray-200"
>
<ProductItem
:num="item.count"
@@ -116,12 +116,12 @@ function formatOrderStatus(order: any) {
:title="item.spuName"
/>
</div>
<div class="flex justify-end pr-[5px] pt-[10px] font-bold">
<div class="flex justify-end pr-1.5 pt-2.5 font-bold">
<div class="flex items-center">
<div class="text-[13px] leading-normal">
<div class="text-sm leading-normal">
共 {{ getMessageContent?.productCount }} 件商品,总金额:
</div>
<div class="font-[OPPOSANS] text-[13px] leading-normal">
<div class="text-sm font-medium leading-normal">
￥{{ fenToYuan(getMessageContent?.payPrice) }}
</div>
</div>

8
apps/web-ele/src/views/mall/promotion/kefu/modules/message/product-item.vue
View File

@@ -42,11 +42,11 @@ function openDetail(spuId: number) {
<template>
<div
class="mb-[10px] flex w-full cursor-pointer items-center rounded-lg bg-gray-500/30 p-[10px]"
class="mb-2.5 flex w-full cursor-pointer items-center rounded-lg bg-gray-500/30 p-2.5"
@click.stop="openDetail(spuId)"
>
<!-- 左侧商品图片-->
<div class="mr-6 w-[70px]">
<div class="mr-2 w-16">
<ElImage
:initial-index="0"
:preview-src-list="[picUrl]"
@@ -65,8 +65,8 @@ function openDetail(spuId: number) {
<span>销量: {{ salesCount || 0 }}</span>
</div>
<div class="flex items-center justify-between">
<span class="text-[#ff3000]">￥{{ fenToYuan(price) }}</span>
<ElButton size="small" text type="primary">详情</ElButton>
<span class="text-red-500">￥{{ fenToYuan(price) }}</span>
<ElButton size="small" type="text">详情</ElButton>
</div>
</div>
</div>

12
apps/web-ele/src/views/mall/promotion/kefu/modules/tools/emoji.ts
View File

@@ -58,17 +58,17 @@ export interface Emoji {
url: string;
}
export const useEmoji = () => {
export function useEmoji() {
const emojiPathList = ref<any[]>([]);
/** 加载本地图片 */
const initStaticEmoji = async () => {
async function initStaticEmoji() {
const pathList = import.meta.glob('../../asserts/*.{png,jpg,jpeg,svg}');
for (const path in pathList) {
const imageModule: any = await pathList[path]?.();
emojiPathList.value.push({ path, src: imageModule.default });
}
};
}
/** 初始化 */
onMounted(async () => {
@@ -83,7 +83,7 @@ export const useEmoji = () => {
* @return 替换后的文本
* @param content 消息内容
*/
const replaceEmoji = (content: string) => {
function replaceEmoji(content: string) {
let newData = content;
if (typeof newData !== 'object') {
const reg = /\[(.+?)\]/g; // [] 中括号
@@ -99,7 +99,7 @@ export const useEmoji = () => {
}
}
return newData;
};
}
/** 获得所有表情 */
function getEmojiList(): Emoji[] {
@@ -123,4 +123,4 @@ export const useEmoji = () => {
}
return { replaceEmoji, getEmojiList };
};
}