【新增】客服会话所属会员足迹展示组件

Author: puhui999

src/views/mall/promotion/kefu/components/KeFuMessageList.vue

@@ -78,7 +78,7 @@
                 </MessageItem>
                 <!-- 订单消息 -->
                 <MessageItem :content-type="KeFuMessageContentTypeEnum.ORDER" :message="item">
-                  <OrderItem :message="item" />
+                  <OrderItem :message="item" class="max-w-70%" />
                 </MessageItem>
               </div>
               <el-avatar

src/views/mall/promotion/kefu/components/history/MemberBrowsingHistory.vue

@@ -5,28 +5,37 @@
       <el-tab-pane label="最近浏览" name="a" />
       <el-tab-pane label="订单列表" name="b" />
     </el-tabs>
-    <!--  最近浏览  -->
-    <ProductBrowsingHistory v-if="activeName === 'a'" ref="productBrowsingHistoryRef" />
-    <!--  订单列表  -->
-    <template v-if="activeName === 'b'"></template>
+    <div>
+      <el-scrollbar ref="scrollbarRef" always height="calc(100vh - 400px)" @scroll="handleScroll">
+        <!--  最近浏览  -->
+        <ProductBrowsingHistory v-if="activeName === 'a'" ref="productBrowsingHistoryRef" />
+        <!--  订单列表  -->
+        <OrderBrowsingHistory v-if="activeName === 'b'" ref="orderBrowsingHistoryRef" />
+      </el-scrollbar>
+    </div>
   </div>
   <el-empty v-show="isEmpty(conversation)" description="请选择左侧的一个会话后开始" />
 </template>
 
 <script lang="ts" setup>
 import type { TabsPaneContext } from 'element-plus'
 import ProductBrowsingHistory from './ProductBrowsingHistory.vue'
+import OrderBrowsingHistory from './OrderBrowsingHistory.vue'
 import { KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
 import { isEmpty } from '@/utils/is'
+import { debounce } from 'lodash-es'
+import { ElScrollbar as ElScrollbarType } from 'element-plus/es/components/scrollbar'
 
 defineOptions({ name: 'MemberBrowsingHistory' })
 
 const activeName = ref('a')
 /** tab 切换 */
 const productBrowsingHistoryRef = ref<InstanceType<typeof ProductBrowsingHistory>>()
-const handleClick = (tab: TabsPaneContext) => {
+const orderBrowsingHistoryRef = ref<InstanceType<typeof OrderBrowsingHistory>>()
+const handleClick = async (tab: TabsPaneContext) => {
   activeName.value = tab.paneName as string
-  getHistoryList()
+  await nextTick()
+  await getHistoryList()
 }
 /** 获得历史数据 */
 const getHistoryList = async () => {
@@ -35,6 +44,20 @@ const getHistoryList = async () => {
       await productBrowsingHistoryRef.value?.getHistoryList(conversation.value)
       break
     case 'b':
+      await orderBrowsingHistoryRef.value?.getHistoryList(conversation.value)
+      break
+    default:
+      break
+  }
+}
+/** 加载下一页数据 */
+const loadMore = async () => {
+  switch (activeName.value) {
+    case 'a':
+      await productBrowsingHistoryRef.value?.loadMore()
+      break
+    case 'b':
+      await orderBrowsingHistoryRef.value?.loadMore()
       break
     default:
       break
@@ -45,9 +68,20 @@ const conversation = ref<KeFuConversationRespVO>({} as KeFuConversationRespVO) /
 const initHistory = async (val: KeFuConversationRespVO) => {
   activeName.value = 'a'
   conversation.value = val
+  await nextTick()
   await getHistoryList()
 }
 defineExpose({ initHistory })
+
+/** 处理消息列表滚动事件(debounce 限流) */
+const scrollbarRef = ref<InstanceType<typeof ElScrollbarType>>()
+const handleScroll = debounce(() => {
+  const wrap = scrollbarRef.value?.wrapRef
+  // 触底重置
+  if (Math.abs(wrap!.scrollHeight - wrap!.clientHeight - wrap!.scrollTop) < 1) {
+    loadMore()
+  }
+}, 200)
 </script>
 
 <style lang="scss" scoped>

src/views/mall/promotion/kefu/components/history/OrderBrowsingHistory.vue

@@ -0,0 +1,42 @@
+<template>
+  <OrderItem v-for="item in list" :key="item.id" :order="item" class="mb-10px" />
+</template>
+
+<script lang="ts" setup>
+import OrderItem from '@/views/mall/promotion/kefu/components/message/OrderItem.vue'
+import { KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
+import { getOrderPage } from '@/api/mall/trade/order'
+import { concat } from 'lodash-es'
+
+defineOptions({ name: 'OrderBrowsingHistory' })
+
+const list = ref<any>([]) // 列表
+const total = ref(0) // 总数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  userId: 0
+})
+const skipGetMessageList = computed(() => {
+  // 已加载到最后一页的话则不触发新的消息获取
+  return total.value > 0 && Math.ceil(total.value / queryParams.pageSize) === queryParams.pageNo
+}) // 跳过消息获取
+/** 获得浏览记录 */
+const getHistoryList = async (val: KeFuConversationRespVO) => {
+  queryParams.userId = val.userId
+  const res = await getOrderPage(queryParams)
+  total.value = res.total
+  list.value = res.list
+}
+/** 加载下一页数据 */
+const loadMore = async () => {
+  if (skipGetMessageList.value) {
+    return
+  }
+  queryParams.pageNo += 1
+  const res = await getOrderPage(queryParams)
+  total.value = res.total
+  concat(list.value, res.list)
+}
+defineExpose({ getHistoryList, loadMore })
+</script>

src/views/mall/promotion/kefu/components/history/ProductBrowsingHistory.vue

@@ -16,23 +16,40 @@
 import { getBrowseHistoryPage } from '@/api/mall/product/history'
 import ProductItem from '@/views/mall/promotion/kefu/components/message/ProductItem.vue'
 import { KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
+import { concat } from 'lodash-es'
 
 defineOptions({ name: 'ProductBrowsingHistory' })
 
 const list = ref<any>([]) // 列表
+const total = ref(0) // 总数
 const queryParams = reactive({
-  pageNum: 1,
+  pageNo: 1,
   pageSize: 10,
   userId: 0,
   userDeleted: false
 })
+const skipGetMessageList = computed(() => {
+  // 已加载到最后一页的话则不触发新的消息获取
+  return total.value > 0 && Math.ceil(total.value / queryParams.pageSize) === queryParams.pageNo
+}) // 跳过消息获取
 /** 获得浏览记录 */
 const getHistoryList = async (val: KeFuConversationRespVO) => {
   queryParams.userId = val.userId
   const res = await getBrowseHistoryPage(queryParams)
+  total.value = res.total
   list.value = res.list
 }
-defineExpose({ getHistoryList })
+/** 加载下一页数据 */
+const loadMore = async () => {
+  if (skipGetMessageList.value) {
+    return
+  }
+  queryParams.pageNo += 1
+  const res = await getBrowseHistoryPage(queryParams)
+  total.value = res.total
+  concat(list.value, res.list)
+}
+defineExpose({ getHistoryList, loadMore })
 </script>
 
 <style lang="scss" scoped></style>

src/views/mall/promotion/kefu/components/message/OrderItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :key="getMessageContent.id" class="order-list-card-box mt-14px max-w-70%">
+  <div :key="getMessageContent.id" class="order-list-card-box mt-14px">
     <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">
@@ -32,13 +32,17 @@
 import { fenToYuan } from '@/utils'
 import ProductItem from './ProductItem.vue'
 import { KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message'
+import { isEmpty } from '@/utils/is'
 
 defineOptions({ name: 'OrderItem' })
 const props = defineProps<{
-  message: KeFuMessageRespVO
+  message?: KeFuMessageRespVO
+  order?: any
 }>()
 
-const getMessageContent = computed(() => JSON.parse(props.message.content))
+const getMessageContent = computed(() =>
+  isEmpty(props.order) ? JSON.parse(props!.message!.content) : props.order
+)
 
 /**
  * 格式化订单状态的颜色