From b0b62eb2506d80726f22505a8109f5d4a28ee87c Mon Sep 17 00:00:00 2001 From: puhui999 Date: Wed, 3 Jul 2024 17:51:58 +0800 Subject: [PATCH 1/5] =?UTF-8?q?=E3=80=90=E4=BC=98=E5=8C=96=E3=80=91?= =?UTF-8?q?=EF=BC=9Amall=20=E5=AE=A2=E6=9C=8D=E8=A1=A8=E6=83=85=E5=8C=85?= =?UTF-8?q?=E5=AD=98=E6=94=BE=E5=88=B0=E6=9C=AC=E5=9C=B0=E4=BD=BF=E7=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.local | 4 - .../kefu/components/EmojiSelectPopover.vue | 3 +- .../promotion/kefu/components/KeFuChatBox.vue | 4 +- .../kefu/components/KeFuConversationBox.vue | 3 +- .../mall/promotion/kefu/components/emoji.ts | 101 ++++++++++-------- .../promotion/kefu/components/images/a.png | Bin 0 -> 4237 bytes .../promotion/kefu/components/images/aini.png | Bin 0 -> 2309 bytes .../kefu/components/images/aixin.png | Bin 0 -> 4431 bytes .../kefu/components/images/baiyan.png | Bin 0 -> 3792 bytes .../kefu/components/images/bizui.png | Bin 0 -> 3768 bytes .../kefu/components/images/buhaoyisi.png | Bin 0 -> 4443 bytes .../kefu/components/images/bukesiyi.png | Bin 0 -> 3979 bytes .../kefu/components/images/dajing.png | Bin 0 -> 4298 bytes .../kefu/components/images/danao.png | Bin 0 -> 4568 bytes .../kefu/components/images/daxiao.png | Bin 0 -> 4382 bytes .../kefu/components/images/dianzan.png | Bin 0 -> 1878 bytes .../promotion/kefu/components/images/emo.png | Bin 0 -> 4956 bytes .../promotion/kefu/components/images/esi.png | Bin 0 -> 3873 bytes .../kefu/components/images/fadai.png | Bin 0 -> 3823 bytes .../kefu/components/images/fankun.png | Bin 0 -> 4236 bytes .../kefu/components/images/feiwen.png | Bin 0 -> 6873 bytes .../kefu/components/images/fennu.png | Bin 0 -> 4590 bytes .../kefu/components/images/ganga.png | Bin 0 -> 4396 bytes .../kefu/components/images/ganmao.png | Bin 0 -> 4727 bytes .../kefu/components/images/hanyan.png | Bin 0 -> 2966 bytes .../kefu/components/images/haochi.png | Bin 0 -> 3794 bytes .../kefu/components/images/hongxin.png | Bin 0 -> 3844 bytes .../kefu/components/images/huaixiao.png | Bin 0 -> 4234 bytes .../kefu/components/images/jingkong.png | Bin 0 -> 4272 bytes .../kefu/components/images/jingshu.png | Bin 0 -> 4702 bytes .../kefu/components/images/jingya.png | Bin 0 -> 4167 bytes .../kefu/components/images/kaixin.png | Bin 0 -> 4008 bytes .../promotion/kefu/components/images/keai.png | Bin 0 -> 4060 bytes .../kefu/components/images/keshui.png | Bin 0 -> 3975 bytes .../promotion/kefu/components/images/kun.png | Bin 0 -> 4460 bytes .../kefu/components/images/lengku.png | Bin 0 -> 4630 bytes .../kefu/components/images/liuhan.png | Bin 0 -> 3823 bytes .../kefu/components/images/liukoushui.png | Bin 0 -> 4072 bytes .../kefu/components/images/liulei.png | Bin 0 -> 4246 bytes .../kefu/components/images/mengbi.png | Bin 0 -> 3345 bytes .../kefu/components/images/mianwubiaoqing.png | Bin 0 -> 2928 bytes .../kefu/components/images/nanguo.png | Bin 0 -> 3882 bytes .../promotion/kefu/components/images/outu.png | Bin 0 -> 4403 bytes .../kefu/components/images/shengqi.png | Bin 0 -> 4629 bytes .../kefu/components/images/shuizhuo.png | Bin 0 -> 4641 bytes .../kefu/components/images/tianshi.png | Bin 0 -> 4192 bytes .../kefu/components/images/xiaodiaoya.png | Bin 0 -> 4326 bytes .../kefu/components/images/xiaoku.png | Bin 0 -> 4725 bytes .../kefu/components/images/xinsui.png | Bin 0 -> 4377 bytes .../kefu/components/images/xiong.png | Bin 0 -> 4525 bytes .../kefu/components/images/yiwen.png | Bin 0 -> 4615 bytes .../promotion/kefu/components/images/yun.png | Bin 0 -> 5991 bytes .../promotion/kefu/components/images/ziya.png | Bin 0 -> 4126 bytes 53 files changed, 62 insertions(+), 53 deletions(-) create mode 100644 src/views/mall/promotion/kefu/components/images/a.png create mode 100644 src/views/mall/promotion/kefu/components/images/aini.png create mode 100644 src/views/mall/promotion/kefu/components/images/aixin.png create mode 100644 src/views/mall/promotion/kefu/components/images/baiyan.png create mode 100644 src/views/mall/promotion/kefu/components/images/bizui.png create mode 100644 src/views/mall/promotion/kefu/components/images/buhaoyisi.png create mode 100644 src/views/mall/promotion/kefu/components/images/bukesiyi.png create mode 100644 src/views/mall/promotion/kefu/components/images/dajing.png create mode 100644 src/views/mall/promotion/kefu/components/images/danao.png create mode 100644 src/views/mall/promotion/kefu/components/images/daxiao.png create mode 100644 src/views/mall/promotion/kefu/components/images/dianzan.png create mode 100644 src/views/mall/promotion/kefu/components/images/emo.png create mode 100644 src/views/mall/promotion/kefu/components/images/esi.png create mode 100644 src/views/mall/promotion/kefu/components/images/fadai.png create mode 100644 src/views/mall/promotion/kefu/components/images/fankun.png create mode 100644 src/views/mall/promotion/kefu/components/images/feiwen.png create mode 100644 src/views/mall/promotion/kefu/components/images/fennu.png create mode 100644 src/views/mall/promotion/kefu/components/images/ganga.png create mode 100644 src/views/mall/promotion/kefu/components/images/ganmao.png create mode 100644 src/views/mall/promotion/kefu/components/images/hanyan.png create mode 100644 src/views/mall/promotion/kefu/components/images/haochi.png create mode 100644 src/views/mall/promotion/kefu/components/images/hongxin.png create mode 100644 src/views/mall/promotion/kefu/components/images/huaixiao.png create mode 100644 src/views/mall/promotion/kefu/components/images/jingkong.png create mode 100644 src/views/mall/promotion/kefu/components/images/jingshu.png create mode 100644 src/views/mall/promotion/kefu/components/images/jingya.png create mode 100644 src/views/mall/promotion/kefu/components/images/kaixin.png create mode 100644 src/views/mall/promotion/kefu/components/images/keai.png create mode 100644 src/views/mall/promotion/kefu/components/images/keshui.png create mode 100644 src/views/mall/promotion/kefu/components/images/kun.png create mode 100644 src/views/mall/promotion/kefu/components/images/lengku.png create mode 100644 src/views/mall/promotion/kefu/components/images/liuhan.png create mode 100644 src/views/mall/promotion/kefu/components/images/liukoushui.png create mode 100644 src/views/mall/promotion/kefu/components/images/liulei.png create mode 100644 src/views/mall/promotion/kefu/components/images/mengbi.png create mode 100644 src/views/mall/promotion/kefu/components/images/mianwubiaoqing.png create mode 100644 src/views/mall/promotion/kefu/components/images/nanguo.png create mode 100644 src/views/mall/promotion/kefu/components/images/outu.png create mode 100644 src/views/mall/promotion/kefu/components/images/shengqi.png create mode 100644 src/views/mall/promotion/kefu/components/images/shuizhuo.png create mode 100644 src/views/mall/promotion/kefu/components/images/tianshi.png create mode 100644 src/views/mall/promotion/kefu/components/images/xiaodiaoya.png create mode 100644 src/views/mall/promotion/kefu/components/images/xiaoku.png create mode 100644 src/views/mall/promotion/kefu/components/images/xinsui.png create mode 100644 src/views/mall/promotion/kefu/components/images/xiong.png create mode 100644 src/views/mall/promotion/kefu/components/images/yiwen.png create mode 100644 src/views/mall/promotion/kefu/components/images/yun.png create mode 100644 src/views/mall/promotion/kefu/components/images/ziya.png diff --git a/.env.local b/.env.local index 82a3f72a..005d2f0d 100644 --- a/.env.local +++ b/.env.local @@ -29,9 +29,5 @@ VITE_BASE_PATH=/ # 商城H5会员端域名 VITE_MALL_H5_DOMAIN='http://localhost:3000' -# TODO puhui999:这个可以不走 cdn 地址么? -# 客户端静态资源地址 空=默认使用服务端指定的CDN资源地址前缀 | local=本地 | http(s)://xxx.xxx=自定义静态资源地址前缀 -VITE_STATIC_URL = https://file.sheepjs.com - # 验证码的开关 VITE_APP_CAPTCHA_ENABLE=false diff --git a/src/views/mall/promotion/kefu/components/EmojiSelectPopover.vue b/src/views/mall/promotion/kefu/components/EmojiSelectPopover.vue index 03a963c6..4c777efb 100644 --- a/src/views/mall/promotion/kefu/components/EmojiSelectPopover.vue +++ b/src/views/mall/promotion/kefu/components/EmojiSelectPopover.vue @@ -26,8 +26,9 @@ + + diff --git a/src/views/mall/promotion/kefu/components/constants.ts b/src/views/mall/promotion/kefu/components/tools/constants.ts similarity index 100% rename from src/views/mall/promotion/kefu/components/constants.ts rename to src/views/mall/promotion/kefu/components/tools/constants.ts diff --git a/src/views/mall/promotion/kefu/components/emoji.ts b/src/views/mall/promotion/kefu/components/tools/emoji.ts similarity index 100% rename from src/views/mall/promotion/kefu/components/emoji.ts rename to src/views/mall/promotion/kefu/components/tools/emoji.ts From e89b274e3f66d8c0ac539b62e22f00d4577290e0 Mon Sep 17 00:00:00 2001 From: puhui999 Date: Thu, 4 Jul 2024 15:41:15 +0800 Subject: [PATCH 3/5] =?UTF-8?q?=E3=80=90=E4=BC=98=E5=8C=96=E3=80=91?= =?UTF-8?q?=EF=BC=9Amall=20=E5=AE=A2=E6=9C=8D=E6=B6=88=E6=81=AF=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E6=8A=BD=E7=A6=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../promotion/kefu/components/KeFuChatBox.vue | 52 +++---------------- .../components/message/ImageMessageItem.vue | 40 ++++++++++++++ .../components/message/TextMessageItem.vue | 29 +++++++++++ 3 files changed, 76 insertions(+), 45 deletions(-) create mode 100644 src/views/mall/promotion/kefu/components/message/ImageMessageItem.vue create mode 100644 src/views/mall/promotion/kefu/components/message/TextMessageItem.vue diff --git a/src/views/mall/promotion/kefu/components/KeFuChatBox.vue b/src/views/mall/promotion/kefu/components/KeFuChatBox.vue index cba5869b..da25c9d9 100644 --- a/src/views/mall/promotion/kefu/components/KeFuChatBox.vue +++ b/src/views/mall/promotion/kefu/components/KeFuChatBox.vue @@ -19,49 +19,18 @@ class="flex mb-20px w-[100%]" >
- - + - +
@@ -94,14 +63,14 @@ 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 { Emoji, useEmoji } from './tools/emoji' +import TextMessageItem from './message/TextMessageItem.vue' +import ImageMessageItem from './message/ImageMessageItem.vue' +import { Emoji } from './tools/emoji' import { KeFuMessageContentTypeEnum } from './tools/constants' import { isEmpty } from '@/utils/is' import { UserTypeEnum } from '@/utils/constants' -import { createImageViewer } from '@/components/ImageViewer' defineOptions({ name: 'KeFuMessageBox' }) -const { replaceEmoji } = useEmoji() const messageTool = useMessage() const message = ref('') // 消息 const messageList = ref([]) // 消息列表 @@ -175,13 +144,6 @@ const scrollToBottom = async () => { scrollbarRef.value!.setScrollTop(innerRef.value!.clientHeight) } -/** 图预览 */ -const imagePreview = (imgUrl: string) => { - createImageViewer({ - urlList: [imgUrl] - }) -} - // TODO puhui999: 轮训相关,功能完善后移除 onBeforeUnmount(() => { if (!poller.value) { diff --git a/src/views/mall/promotion/kefu/components/message/ImageMessageItem.vue b/src/views/mall/promotion/kefu/components/message/ImageMessageItem.vue new file mode 100644 index 00000000..7b890cf1 --- /dev/null +++ b/src/views/mall/promotion/kefu/components/message/ImageMessageItem.vue @@ -0,0 +1,40 @@ + + + diff --git a/src/views/mall/promotion/kefu/components/message/TextMessageItem.vue b/src/views/mall/promotion/kefu/components/message/TextMessageItem.vue new file mode 100644 index 00000000..fd4b6edb --- /dev/null +++ b/src/views/mall/promotion/kefu/components/message/TextMessageItem.vue @@ -0,0 +1,29 @@ + + + From 893cd5d8f528f00e1edb34e495ed0041730bcb00 Mon Sep 17 00:00:00 2001 From: puhui999 Date: Thu, 4 Jul 2024 16:23:11 +0800 Subject: [PATCH 4/5] =?UTF-8?q?=E3=80=90=E4=BC=98=E5=8C=96=E3=80=91?= =?UTF-8?q?=EF=BC=9Amall=20=E5=AE=A2=E6=9C=8D=E4=BC=98=E5=8C=96=E6=B6=88?= =?UTF-8?q?=E6=81=AF=E6=A0=B7=E5=BC=8F=EF=BC=8C=E5=A2=9E=E5=8A=A0=E6=B6=88?= =?UTF-8?q?=E6=81=AF=E6=97=B6=E9=97=B4=E6=AE=B5=E6=98=BE=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../promotion/kefu/components/KeFuChatBox.vue | 106 +++++++++++++----- .../kefu/components/KeFuConversationBox.vue | 20 +--- .../components/message/ImageMessageItem.vue | 3 +- .../components/tools/PictureSelectUpload.vue | 5 +- 4 files changed, 81 insertions(+), 53 deletions(-) diff --git a/src/views/mall/promotion/kefu/components/KeFuChatBox.vue b/src/views/mall/promotion/kefu/components/KeFuChatBox.vue index da25c9d9..8c6b5b71 100644 --- a/src/views/mall/promotion/kefu/components/KeFuChatBox.vue +++ b/src/views/mall/promotion/kefu/components/KeFuChatBox.vue @@ -6,34 +6,55 @@
-
- -
- - - - +
+
+ +
+ {{ formatDate(item.createTime) }} +
+ + + {{ item.content }} + +
+
+ +
+ + + + +
+
-
@@ -69,6 +90,11 @@ import { Emoji } from './tools/emoji' import { KeFuMessageContentTypeEnum } from './tools/constants' import { isEmpty } from '@/utils/is' import { UserTypeEnum } from '@/utils/constants' +import { formatDate } from '@/utils/formatTime' +import dayjs from 'dayjs' +import relativeTime from 'dayjs/plugin/relativeTime' + +dayjs.extend(relativeTime) defineOptions({ name: 'KeFuMessageBox' }) const messageTool = useMessage() @@ -90,7 +116,7 @@ const getMessageList = async (conversation: KeFuConversationRespVO) => { if (!poller.value) { poller.value = setInterval(() => { getMessageList(conversation) - }, 1000) + }, 2000) } } defineExpose({ getMessageList }) @@ -143,7 +169,18 @@ const scrollToBottom = async () => { await nextTick() scrollbarRef.value!.setScrollTop(innerRef.value!.clientHeight) } - +/** + * 是否显示时间 + * @param {*} item - 数据 + * @param {*} index - 索引 + */ +const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => { + if (unref(messageList.value)[index + 1]) { + let dateString = dayjs(unref(messageList.value)[index + 1].createTime).fromNow() + return dateString !== dayjs(unref(item).createTime).fromNow() + } + return false +}) // TODO puhui999: 轮训相关,功能完善后移除 onBeforeUnmount(() => { if (!poller.value) { @@ -225,6 +262,17 @@ onBeforeUnmount(() => { transform: scale(1.03); } } + + .date-message, + .system-message { + width: fit-content; + border-radius: 12rpx; + padding: 8rpx 16rpx; + margin-bottom: 16rpx; + background-color: #e8e8e8; + color: #999; + font-size: 24rpx; + } } .chat-tools { diff --git a/src/views/mall/promotion/kefu/components/KeFuConversationBox.vue b/src/views/mall/promotion/kefu/components/KeFuConversationBox.vue index d45343ad..bf2d6fdd 100644 --- a/src/views/mall/promotion/kefu/components/KeFuConversationBox.vue +++ b/src/views/mall/promotion/kefu/components/KeFuConversationBox.vue @@ -36,7 +36,7 @@