!576 【功能完善】商城客服

Merge pull request !576 from puhui999/dev-crm

Author: YunaiV

src/api/mall/promotion/kefu/message/index.ts

@@ -29,8 +29,8 @@ export const KeFuMessageApi = {
       url: '/promotion/kefu-message/update-read-status?conversationId=' + conversationId
     })
   },
-  // 获得消息分页数据
-  getKeFuMessagePage: async (params: any) => {
-    return await request.get({ url: '/promotion/kefu-message/page', params })
+  // 获得消息数据
+  getKeFuMessageList: async (params: any) => {
+    return await request.get({ url: '/promotion/kefu-message/list', params })
   }
 }

src/store/modules/mall/kefu.ts

@@ -0,0 +1,37 @@
+import { store } from '@/store'
+import { defineStore } from 'pinia'
+import { KeFuConversationApi, KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
+import { KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message'
+
+// TODO puhui999: 待优化完善
+interface MallKefuInfoVO {
+  conversationList: KeFuConversationRespVO[] // 会话列表
+  conversationMessageList: Map<number, KeFuMessageRespVO[]> // 会话消息
+}
+
+export const useMallKefuStore = defineStore('mall-kefu', {
+  state: (): MallKefuInfoVO => ({
+    conversationList: [],
+    conversationMessageList: new Map<number, KeFuMessageRespVO[]>() // key 会话，value 会话消息列表
+  }),
+  getters: {
+    getConversationList(): KeFuConversationRespVO[] {
+      return this.conversationList
+    },
+    getConversationMessageList(): Map<number, KeFuMessageRespVO[]> {
+      return this.conversationMessageList
+    }
+  },
+  actions: {
+    async setConversationList() {
+      const list = await KeFuConversationApi.getConversationList()
+      list.sort((a: KeFuConversationRespVO, _) => (a.adminPinned ? -1 : 1))
+      this.conversationList = list
+    }
+    // async setConversationMessageList(conversationId: number) {}
+  }
+})
+
+export const useUserStoreWithOut = () => {
+  return useMallKefuStore(store)
+}

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

@@ -1,5 +1,6 @@
 <template>
-  <div class="kefu">
+  <el-aside class="kefu p-5px h-100%" width="260px">
+    <div class="color-[#999] font-bold my-10px">会话记录({{ conversationList.length }})</div>
     <div
       v-for="item in conversationList"
       :key="item.id"
@@ -22,7 +23,7 @@
         <div class="ml-10px w-100%">
           <div class="flex justify-between items-center w-100%">
             <span class="username">{{ item.userNickname }}</span>
-            <span class="color-[var(--left-menu-text-color)]" style="font-size: 13px">
+            <span class="color-[#999]" style="font-size: 13px">
               {{ formatPast(item.lastMessageTime, 'YYYY-MM-DD') }}
             </span>
           </div>
@@ -31,7 +32,7 @@
             v-dompurify-html="
               getConversationDisplayText(item.lastMessageContentType, item.lastMessageContent)
             "
-            class="last-message flex items-center color-[var(--left-menu-text-color)]"
+            class="last-message flex items-center color-[#999]"
           >
           </div>
         </div>
@@ -65,7 +66,7 @@
         取消
       </li>
     </ul>
-  </div>
+  </el-aside>
 </template>
 
 <script lang="ts" setup>
@@ -180,11 +181,12 @@ watch(showRightMenu, (val) => {
 
 <style lang="scss" scoped>
 .kefu {
+  background-color: #fff;
+
   &-conversation {
     height: 60px;
-    padding: 10px;
     //background-color: #fff;
-    transition: border-left 0.05s ease-in-out; /* 设置过渡效果 */
+    //transition: border-left 0.05s ease-in-out; /* 设置过渡效果 */
 
     .username {
       min-width: 0;
@@ -205,13 +207,10 @@ watch(showRightMenu, (val) => {
     }
   }
 
-  .active {
-    border-left: 5px #3271ff solid;
-    background-color: var(--login-bg-color);
-  }
-
+  .active,
   .pinned {
-    background-color: var(--left-menu-bg-active-color);
+    background-color: rgba(128, 128, 128, 0.5); // 透明色，暗黑模式下也能体现
+    border-radius: 8px;
   }
 
   .right-menu-ul {