feat: 优化会话记录数据展示

src/views/customerService/chatList.vue

@@ -48,6 +48,13 @@
       :page.sync="listQuery.page"
       :limit.sync="listQuery.limit"
       @pagination="getList" />
+    <el-drawer
+      :visible.sync="showDetail"
+      :with-header="false"
+      size="40%">
+      <span>详情</span>
+      <!--      <MessageDetail :from-account="fromAccount" :to-account="toAccount" />-->
+    </el-drawer>
   </div>
 
 </template>
@@ -55,10 +62,12 @@
 <script>
 import { findAiChatList, getUserList } from '@/api/business/chat'
 import Pagination from '@/components/Pagination'
+import MessageDetail from './components/messageDetail'
 export default {
   name: 'ChatList',
 
   components: {
+    MessageDetail,
     Pagination
   },
   data() {
@@ -70,7 +79,10 @@ export default {
       },
       list: [],
       total: 0,
-      customerList: []
+      customerList: [],
+      showDetail: false,
+      fromAccount: '',
+      toAccount: ''
     }
   },
   created() {
@@ -97,6 +109,9 @@ export default {
     },
 
     handleToDetail(row) {
+      this.fromAccount = row.fromAccount
+      this.toAccount = row.toAccount
+      this.showDetail = true
     },
 
     getList() {

src/views/customerService/components/messageDetail.vue

+<template>
+  <div class="components-message">
+    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
+      <el-menu-item index="0">会话记录</el-menu-item>
+      <el-menu-item index="1">会话信息</el-menu-item>
+    </el-menu>
+  </div>
+
+</template>
+
+<script>
+import { findChatUserInfo } from '@/api/business/chat'
+export default {
+  name: 'MessageDetail',
+  props: {
+    fromAccount: {
+      type: String,
+      required: true
+    },
+    toAccount: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      activeIndex: 0
+    }
+  },
+  created() {
+    this.handleFindChatUserInfo()
+  },
+
+  methods: {
+    handleSelect(key, keyPath) {
+      console.log(key, keyPath)
+    },
+    handleGetMessageList: {},
+    handleFindChatUserInfo() {
+      const params = {
+        fromAccount: this.fromAccount,
+        toAccount: this.toAccount
+      }
+      findChatUserInfo(params).then((response) => {
+        console.log('=====获取聊天用户信息成功，', response)
+        if (response && response.data && response.data.data) {
+          this.chatUserInfo = response.data.data
+        }
+      }).catch((err) => {
+        console.log('=====获取聊天用户信息失败，', err)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.components-message {
+
+}
+
+</style>