【代码优化】MALL：客服聊天

Author: YunaiV

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

@@ -161,6 +161,7 @@ const queryParams = reactive({
 })
 const total = ref(0) // 消息总条数
 const refreshContent = ref(false) // 内容刷新,主要解决会话消息页面高度不一致导致的滚动功能精度失效
+
 /** 获悉消息内容 */
 const getMessageContent = computed(() => (item: any) => jsonParse(item.content))
 /** 获得消息列表 */
@@ -178,6 +179,7 @@ const getMessageList = async () => {
   }
   refreshContent.value = true
 }
+
 /** 添加消息 */
 const pushMessage = (message: any) => {
   if (messageList.value.some((val) => val.id === message.id)) {
@@ -217,6 +219,7 @@ const refreshMessageList = async (message?: any) => {
     await handleToNewMessage()
   }
 }
+
 const getNewMessageList = async (val: KeFuConversationRespVO) => {
   // 会话切换,重置相关参数
   queryParams.pageNo = 1
@@ -231,6 +234,7 @@ const getNewMessageList = async (val: KeFuConversationRespVO) => {
   await refreshMessageList()
 }
 defineExpose({ getNewMessageList, refreshMessageList })
+
 const showKeFuMessageList = computed(() => !isEmpty(conversation.value)) // 是否显示聊天区域
 const skipGetMessageList = computed(() => {
   // 已加载到最后一页的话则不触发新的消息获取

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

@@ -1,3 +1,4 @@
+<!-- 目录是不是叫 member 好点。然后这个组件是 MemberInfo，里面有浏览足迹 -->
 <template>
   <div v-show="!isEmpty(conversation)" class="kefu">
     <div class="header-title h-60px flex justify-center items-center">他的足迹</div>
@@ -7,9 +8,9 @@
     </el-tabs>
     <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>
@@ -29,6 +30,7 @@ import { ElScrollbar as ElScrollbarType } from 'element-plus/es/components/scrol
 defineOptions({ name: 'MemberBrowsingHistory' })
 
 const activeName = ref('a')
+
 /** tab 切换 */
 const productBrowsingHistoryRef = ref<InstanceType<typeof ProductBrowsingHistory>>()
 const orderBrowsingHistoryRef = ref<InstanceType<typeof OrderBrowsingHistory>>()
@@ -37,7 +39,9 @@ const handleClick = async (tab: TabsPaneContext) => {
   await nextTick()
   await getHistoryList()
 }
+
 /** 获得历史数据 */
+// TODO @puhui：不要用 a、b 哈。就订单列表、浏览列表这种噶
 const getHistoryList = async () => {
   switch (activeName.value) {
     case 'a':
@@ -50,6 +54,7 @@ const getHistoryList = async () => {
       break
   }
 }
+
 /** 加载下一页数据 */
 const loadMore = async () => {
   switch (activeName.value) {
@@ -63,6 +68,7 @@ const loadMore = async () => {
       break
   }
 }
+
 /** 浏览历史初始化 */
 const conversation = ref<KeFuConversationRespVO>({} as KeFuConversationRespVO) // 用户会话
 const initHistory = async (val: KeFuConversationRespVO) => {

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

@@ -21,13 +21,15 @@ 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) {

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

@@ -32,13 +32,15 @@ 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
 }
+
 /** 加载下一页数据 */
 const loadMore = async () => {
   if (skipGetMessageList.value) {