From e9bb9403b4ade987b2d7071619dbd9bfa2c13565 Mon Sep 17 00:00:00 2001 From: puhui999 Date: Mon, 8 Jul 2024 12:00:34 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E3=80=90=E4=BC=98=E5=8C=96=E3=80=91spu?= =?UTF-8?q?=EF=BC=9A=E6=96=B0=E5=A2=9E=E5=95=86=E5=93=81=E5=B1=9E=E6=80=A7?= =?UTF-8?q?=E5=B1=9E=E6=80=A7=E5=80=BC=E4=B8=BA=E7=A9=BA=E6=A0=A1=E9=AA=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../mall/product/spu/components/SkuList.vue | 36 ++++++++++++------- .../product/spu/form/ProductAttributes.vue | 12 +++---- src/views/mall/product/spu/form/SkuForm.vue | 14 ++++---- 3 files changed, 37 insertions(+), 25 deletions(-) diff --git a/src/views/mall/product/spu/components/SkuList.vue b/src/views/mall/product/spu/components/SkuList.vue index 2befe640f..9bbd38e4a 100644 --- a/src/views/mall/product/spu/components/SkuList.vue +++ b/src/views/mall/product/spu/components/SkuList.vue @@ -292,6 +292,7 @@ import { createImageViewer } from '@/components/ImageViewer' import { RuleConfig } from '@/views/mall/product/spu/components/index' import { PropertyAndValues } from './index' import { ElTable } from 'element-plus' +import { isEmpty } from '@/utils/is' defineOptions({ name: 'SkuList' }) const message = useMessage() // 消息弹窗 @@ -340,11 +341,22 @@ const imagePreview = (imgUrl: string) => { /** 批量添加 */ const batchAdd = () => { + validateProperty() formData.value!.skus!.forEach((item) => { copyValueToTarget(item, skuList.value[0]) }) } - +/** 校验商品属性属性值 */ +const validateProperty = () => { + // 校验商品属性属性值是否为空，有一个为空都不给过 + const warningInfo = '存在属性属性值为空，请先检查完善属性值后重试！！！' + for (const item of props.propertyList) { + if (!item.values || isEmpty(item.values)) { + message.warning(warningInfo) + throw new Error(warningInfo) + } + } +} /** 删除 sku */ const deleteSku = (row) => { const index = formData.value!.skus!.findIndex( @@ -358,6 +370,7 @@ const tableHeaders = ref<{ prop: string; label: string }[]>([]) // 多属性表 * 保存时，每个商品规格的表单要校验下。例如说，销售金额最低是 0.01 这种。 */ const validateSku = () => { + validateProperty() let warningInfo = '请检查商品各行相关属性配置，' let validate = true // 默认通过 for (const sku of formData.value!.skus!) { @@ -421,7 +434,7 @@ watch( const generateTableData = (propertyList: any[]) => { // 构建数据结构 const propertyValues = propertyList.map((item) => - item.values.map((v) => ({ + item.values.map((v: any) => ({ propertyId: item.id, propertyName: item.name, valueId: v.id, @@ -464,15 +477,14 @@ const generateTableData = (propertyList: any[]) => { */ const validateData = (propertyList: any[]) => { const skuPropertyIds: number[] = [] - formData.value!.skus!.forEach( - (sku) => - sku.properties - ?.map((property) => property.propertyId) - ?.forEach((propertyId) => { - if (skuPropertyIds.indexOf(propertyId!) === -1) { - skuPropertyIds.push(propertyId!) - } - }) + formData.value!.skus!.forEach((sku) => + sku.properties + ?.map((property) => property.propertyId) + ?.forEach((propertyId) => { + if (skuPropertyIds.indexOf(propertyId!) === -1) { + skuPropertyIds.push(propertyId!) + } + }) ) const propertyIds = propertyList.map((item) => item.id) return skuPropertyIds.length === propertyIds.length @@ -543,7 +555,7 @@ watch( return } // 添加新属性没有属性值也不做处理 - if (propertyList.some((item) => item.values!.length === 0)) { + if (propertyList.some((item) => !item.values || isEmpty(item.values))) { return } // 生成 table 数据，即 sku 列表 diff --git a/src/views/mall/product/spu/form/ProductAttributes.vue b/src/views/mall/product/spu/form/ProductAttributes.vue index 28962f47e..ffe7397d7 100644 --- a/src/views/mall/product/spu/form/ProductAttributes.vue +++ b/src/views/mall/product/spu/form/ProductAttributes.vue @@ -3,7 +3,7 @@
属性名： - + {{ item.name }}
@@ -12,8 +12,8 @@ {{ value.name }} @@ -44,7 +44,6 @@ -- Gitee From 848bc6061217352e2a6132303bb8c8decf94d4eb Mon Sep 17 00:00:00 2001 From: puhui999 Date: Mon, 8 Jul 2024 17:53:56 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E3=80=90=E6=96=B0=E5=A2=9E=E3=80=91mall=20?= =?UTF-8?q?=E5=AE=A2=E6=9C=8D=E6=B6=88=E6=81=AF=E4=B8=8B=E6=8B=89=E5=8A=A0?= =?UTF-8?q?=E8=BD=BD=EF=BC=8C=E6=9C=89=E6=96=B0=E6=B6=88=E6=81=AF=E6=8F=90?= =?UTF-8?q?=E9=86=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../promotion/kefu/components/KeFuChatBox.vue | 122 ++++++++++++++++-- .../kefu/components/KeFuConversationBox.vue | 23 +--- 2 files changed, 110 insertions(+), 35 deletions(-) diff --git a/src/views/mall/promotion/kefu/components/KeFuChatBox.vue b/src/views/mall/promotion/kefu/components/KeFuChatBox.vue index 872de7abd..ff5773252 100644 --- a/src/views/mall/promotion/kefu/components/KeFuChatBox.vue +++ b/src/views/mall/promotion/kefu/components/KeFuChatBox.vue @@ -4,9 +4,16 @@
{{ keFuConversation.userNickname }}
- +
+ 加载更多 +
+
-
+
+
+ 有新消息 + +
@@ -101,23 +116,47 @@ const messageTool = useMessage() const message = ref('') // 消息 const messageList = ref([]) // 消息列表 const keFuConversation = ref({} as KeFuConversationRespVO) // 用户会话 -// 获得消息 TODO puhui999: 先不考虑下拉加载历史消息 +const showNewMessageTip = ref(false) // 显示有新消息提示 +const queryParams = reactive({ + pageNo: 1, + conversationId: 0 +}) +const total = ref(0) // 消息总条数 +// 获得消息 const getMessageList = async (conversation: KeFuConversationRespVO) => { keFuConversation.value = conversation - const { list } = await KeFuMessageApi.getKeFuMessagePage({ - pageNo: 1, - conversationId: conversation.id - }) - messageList.value = list.reverse() - // TODO puhui999: 首次加载时滚动到最新消息，如果加载的是历史消息则不滚动 + queryParams.conversationId = conversation.id + const messageTotal = messageList.value.length + if (total.value > 0 && messageTotal > 0 && messageTotal === total.value) { + return + } + const res = await KeFuMessageApi.getKeFuMessagePage(queryParams) + total.value = res.total + for (const item of res.list) { + if (messageList.value.some((val) => val.id === item.id)) { + continue + } + messageList.value.push(item) + } await scrollToBottom() } +const getMessageList0 = computed(() => { + messageList.value.sort((a: any, b: any) => a.createTime - b.createTime) + return messageList.value +}) + // 刷新消息列表 -const refreshMessageList = () => { +const refreshMessageList = async () => { if (!keFuConversation.value) { return } - getMessageList(keFuConversation.value) + + queryParams.pageNo = 1 + await getMessageList(keFuConversation.value) + if (loadHistory.value) { + // 有下角显示有新消息提示 + showNewMessageTip.value = true + } } defineExpose({ getMessageList, refreshMessageList }) // 是否显示聊天区域 @@ -140,7 +179,7 @@ const handleSendPicture = async (picUrl: string) => { const handleSendMessage = async () => { // 1. 校验消息是否为空 if (isEmpty(unref(message.value))) { - messageTool.warning('请输入消息后再发送哦！') + messageTool.notifyWarning('请输入消息后再发送哦！') return } // 2. 组织发送消息 @@ -167,12 +206,41 @@ const innerRef = ref() const scrollbarRef = ref>() // 滚动到底部 const scrollToBottom = async () => { - // 1. 滚动到最新消息 + // 1. 首次加载时滚动到最新消息，如果加载的是历史消息则不滚动 + if (loadHistory.value) { + return + } + // 2.1 滚动到最新消息，关闭新消息提示 await nextTick() scrollbarRef.value!.setScrollTop(innerRef.value!.clientHeight) - // 2. 消息已读 + showNewMessageTip.value = false + // 2.2 消息已读 await KeFuMessageApi.updateKeFuMessageReadStatus(keFuConversation.value.id) } +// 查看新消息 +const handleToNewMessage = async () => { + loadHistory.value = false + await scrollToBottom() +} + +const loadingMore = ref(false) // 滚动到顶部加载更多 +const loadHistory = ref(false) // 加载历史消息 +const handleScroll = async ({ scrollTop }) => { + const messageTotal = messageList.value.length + if (total.value > 0 && messageTotal > 0 && messageTotal === total.value) { + return + } + // 距顶 20 加载下一页数据 + loadingMore.value = scrollTop < 20 +} +const handleOldMessage = async () => { + loadHistory.value = true + // 加载消息列表 + queryParams.pageNo += 1 + await getMessageList(keFuConversation.value) + loadingMore.value = false + // TODO puhui999: 等页面加载完后，获得上一页最后一条消息的位置，控制滚动到它所在位置 +} /** * 是否显示时间 * @param {*} item - 数据 @@ -196,6 +264,32 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => { } &-content { + position: relative; + + .loadingMore { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 50px; + background-color: #eee; + color: #666; + text-align: center; + line-height: 50px; + transform: translateY(-100%); + transition: transform 0.3s ease-in-out; + } + + .newMessageTip { + position: absolute; + bottom: 35px; + right: 35px; + background-color: #fff; + padding: 10px; + border-radius: 30px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */ + } + .ss-row-left { justify-content: flex-start; diff --git a/src/views/mall/promotion/kefu/components/KeFuConversationBox.vue b/src/views/mall/promotion/kefu/components/KeFuConversationBox.vue index 947a7ad62..a9ec94448 100644 --- a/src/views/mall/promotion/kefu/components/KeFuConversationBox.vue +++ b/src/views/mall/promotion/kefu/components/KeFuConversationBox.vue @@ -74,7 +74,7 @@