feat(客户数据展示): 实现聊天记录展示功能并优化表单数据显示

- 在RawDataCards组件中添加chatInfo prop用于接收聊天数据 - 实现聊天记录列表展示功能，使用实际API返回的数据格式 - 优化表单数据显示逻辑，合并相关字段提升可读性 - 添加聊天记录查看功能，完善数据加载和错误处理
2025-08-14 17:26:52 +08:00
parent 32e43a1c6d
commit 7a7b114b35
2 changed files with 110 additions and 171 deletions
--- a/my-vue-app/src/views/person/components/RawDataCards.vue
+++ b/my-vue-app/src/views/person/components/RawDataCards.vue
@@ -70,10 +70,10 @@
                  <span class="content-time">最新: {{ chatData.lastMessage }}</span>
                </div>
                <div class="message-list">
-                  <div v-for="(message, index) in chatMessages" :key="index" class="message-item">
+                  <div v-for="(message, index) in props.chatInfo.messages" :key="index" class="message-item">
                    <div class="message-header">
-                      <span class="message-sender">{{ message.sender }}</span>
-                      <span class="message-time">{{ message.time }}</span>
+                      <span class="message-sender">{{ message.format_direction }}</span>
+                      <span class="message-time">{{ message.format_add_time }}</span>
                    </div>
                    <div class="message-text">{{ message.content }}</div>
                  </div>
@@ -117,12 +117,21 @@ const props = defineProps({
  formInfo: {
    type: Object,
    default: () => ({})
+  },
+  chatInfo: {
+    type: Object,
+    default: () => ({})
  }
 })

 // 当前激活的tab
 const activeTab = ref('chat')

+// 聊天消息列表
+const chatMessages = computed(() => {
+  return props.chatInfo?.messages || []
+})
+
 // 表单字段数据
 const formFields = computed(() => {
  const formData = props.formInfo
@@ -135,55 +144,55 @@ const formFields = computed(() => {
    ]
  }
  
+  let fields = []
+  
  // 检查是否为第一种格式（包含name, mobile等字段）
-  if (formData.name || formData.mobile || formData.child_name) {
-    const fields = [
-      { label: '客户姓名', value: formData.name || '暂无' },
-      { label: '联系方式', value: formData.mobile || '暂无' },
-      { label: '孩子姓名', value: formData.child_name || '暂无' },
-      { label: '孩子性别', value: formData.child_gender || '暂无' },
-      { label: '孩子教育', value: formData.child_education || '暂无' },
-      { label: '关系', value: formData.child_relation || '暂无' },
-      { label: '职业', value: formData.occupation || '暂无' },
-      { label: '地区', value: formData.territory || '暂无' }
-    ]
-    
-    // 如果有additional_info，添加前3个问题
-    if (formData.additional_info && Array.isArray(formData.additional_info)) {
-      formData.additional_info.slice(0, 3).forEach((item, index) => {
-        fields.push({
-          label: `问题${index + 1}`,
-          value: `${item.topic}: ${item.answer}`
-        })
-      })
-    }
-    
-    return fields
-  }
+   if (formData.name || formData.mobile || formData.child_name) {
+     const customerInfo = [formData.name, formData.mobile, formData.child_relation, formData.occupation].filter(item => item && item !== '暂无').join(' | ')
+     const childInfo = [formData.child_name, formData.child_gender, formData.child_education].filter(item => item && item !== '暂无').join(' | ')
+     
+     fields = [
+       { label: '客户信息', value: customerInfo || '暂无' },
+       { label: '孩子信息', value: childInfo || '暂无' },
+       { label: '地区', value: formData.territory || '暂无' }
+     ]
+     
+     // 如果有additional_info，添加所有问题
+       if (formData.additional_info && Array.isArray(formData.additional_info)) {
+         formData.additional_info.forEach((item) => {
+           fields.push({
+             label: item.topic,
+             value: item.answer
+           })
+         })
+       }
+   } else {
+     // 第二种格式（expandXXX字段）
+     const customerInfo = [formData.expandTwentyOne, formData.expandOne].filter(item => item && item !== '暂无').join(' | ')
+     const childInfo = [formData.expandTwentyNine, formData.expandTwentyFive, formData.expandTwo].filter(item => item && item !== '暂无').join(' | ')
+     
+     fields = [
+       { label: '客户信息', value: customerInfo || '暂无' },
+       { label: '孩子信息', value: childInfo || '暂无' },
+       { label: '学习状态', value: formData.expandFive || '暂无' },
+       { label: '沟通情况', value: formData.expandEight || '暂无' },
+       { label: '主要问题', value: formData.expandTwentySeven || '暂无' },
+       { label: '关注领域', value: formData.expandFifteen || '暂无' },
+       { label: '学习成绩', value: formData.expandFourteen || '暂无' },
+       { label: '孩子数量', value: formData.expandTwenty || '暂无' },
+       { label: '预期时间', value: formData.expandThirty || '暂无' }
+     ]
+   }  
+  // 合并表单数据和聊天数据
+  const allFields = [...fields]
  
-  // 第二种格式（expandXXX字段）
-  const fields = [
-    { label: '孩子姓名', value: formData.expandTwentyNine || '暂无' },
-    { label: '孩子性别', value: formData.expandTwentyFive || '暂无' },
-    { label: '孩子教育', value: formData.expandTwo || '暂无' },
-    { label: '关系', value: formData.expandTwentyOne || '暂无' },
-    { label: '职业', value: formData.expandOne || '暂无' },
-    { label: '学习状态', value: formData.expandFive || '暂无' },
-    { label: '沟通情况', value: formData.expandEight || '暂无' },
-    { label: '主要问题', value: formData.expandTwentySeven || '暂无' },
-    { label: '关注领域', value: formData.expandFifteen || '暂无' },
-    { label: '学习成绩', value: formData.expandFourteen || '暂无' },
-    { label: '孩子数量', value: formData.expandTwenty || '暂无' },
-    { label: '预期时间', value: formData.expandThirty || '暂无' }
-  ]
-  
-  return fields.filter(field => field.value !== '暂无' && field.value !== null)
+  return allFields
 })

 // 聊天数据
 const chatData = computed(() => ({
-  count: props.selectedContact?.chatCount || 127,
-  lastMessage: props.selectedContact?.lastMessage || '1小时前'
+  count: props.chatInfo?.messages?.length || 0,
+  lastMessage: props.chatInfo?.update_time || '1小时前'
 }))

 // 通话数据
@@ -192,37 +201,6 @@ const callData = computed(() => ({
  totalDuration: props.selectedContact?.totalCallDuration || '45分钟'
 }))

-// 聊天消息列表
-const chatMessages = computed(() => {
-  return [
-    {
-      sender: '客户',
-      time: '今天 14:30',
-      content: '你好，我想了解一下数学课程的具体安排和费用情况。'
-    },
-    {
-      sender: '我',
-      time: '今天 14:32',
-      content: '您好！我们的数学课程分为基础班和提高班，根据孩子的年龄和基础来安排。费用方面，基础班是6000元/期，提高班是8000元/期。'
-    },
-    {
-      sender: '客户',
-      time: '今天 14:35',
-      content: '孩子现在8岁，数学基础一般，应该选择哪个班级比较合适？'
-    },
-    {
-      sender: '我',
-      time: '今天 14:37',
-      content: '建议先从基础班开始，我们会有专业的测评来确定孩子的具体水平，然后制定个性化的学习方案。'
-    },
-    {
-      sender: '客户',
-      time: '今天 15:20',
-      content: '好的，那什么时候可以安排试听课呢？'
-    }
-  ]
-})
-
 // 通话记录列表
 const callRecords = computed(() => {
  return [
--- a/my-vue-app/src/views/person/sale.vue
+++ b/my-vue-app/src/views/person/sale.vue
@@ -97,6 +97,7 @@
        <RawDataCards 
          :selected-contact="selectedContact"
          :form-info="formInfo"
+          :chat-info="chatRecords"
          @view-form-data="handleViewFormData"
          @view-chat-data="handleViewChatData"
          @view-call-data="handleViewCallData" />
@@ -482,98 +483,6 @@ async function getCustomerForm() {
    const res = await getCustomerFormInfo(params)
    if(res.code === 200) {
      formInfo.value = res.data
-      /**
-       * data
-: 
-{name: "柏媛媛", child_name: "淼淼", child_gender: "女", occupation: "无业", child_education: "高一",…}
-additional_info
-: 
-[{topic: "孩子目前是否能正常上学？", answer: "不稳定：经常请假或迟到，断断续续。"},…]
-0
-: 
-{topic: "孩子目前是否能正常上学？", answer: "不稳定：经常请假或迟到，断断续续。"}
-answer
-: 
-"不稳定：经常请假或迟到，断断续续。"
-topic
-: 
-"孩子目前是否能正常上学？"
-1
-: 
-{topic: "您当前最困扰的孩子的问题，更接近以下哪种描述?", answer: "比如手机不离手、激烈争吵、破坏规则。"}
-answer
-: 
-"比如手机不离手、激烈争吵、破坏规则。"
-topic
-: 
-"您当前最困扰的孩子的问题，更接近以下哪种描述?"
-2
-: 
-{topic: "面对上述问题，您和孩子的互动模式通常是？", answer: "几乎零交流，像生活在两个世界。"}
-answer
-: 
-"几乎零交流，像生活在两个世界。"
-topic
-: 
-"面对上述问题，您和孩子的互动模式通常是？"
-3
-: 
-{topic: "您认为造成今天这个局面的主要责任在于？", answer: "各方面原因都有，感觉很复杂。"}
-answer
-: 
-"各方面原因都有，感觉很复杂。"
-topic
-: 
-"您认为造成今天这个局面的主要责任在于？"
-4
-: 
-{topic: "此刻，您内心最强烈的感受是？", answer: "内疚和迷茫"}
-answer
-: 
-"内疚和迷茫"
-topic
-: 
-"此刻，您内心最强烈的感受是？"
-5
-: 
-{topic: "您目前最迫切的期望是？", answer: "让他少玩手机，能跟我好好说话。"}
-answer
-: 
-"让他少玩手机，能跟我好好说话。"
-topic
-: 
-"您目前最迫切的期望是？"
-child_education
-: 
-"高一"
-child_gender
-: 
-"女"
-child_name
-: 
-"淼淼"
-child_relation
-: 
-"母亲"
-created_at
-: 
-"2025-08-12T10:41:39.798000"
-mobile
-: 
-"15061153145"
-name
-: 
-"柏媛媛"
-occupation
-: 
-"无业"
-territory
-: 
-"江苏省 盐城市 滨海县"
-updated_at
-: 
-"2025-08-12T10:41:41.534000"
-       */
    }
  } catch (error) {
    // 静默处理错误
@@ -592,8 +501,56 @@ async function getCustomerChat() {
  }
  try {
    const res = await getCustomerChatInfo(params)
+    /**
+     * message:[
+     * 0:{content
+: 
+"您好孩子妈妈，我是负责咱们本次课程的王慧老师[玫瑰]"
+format_add_time
+: 
+"2天前"
+format_direction
+: 
+"我"
+type
+: 
+"文本"},
+1:{
+content
+: 
+"嗯，王老师好"
+format_add_time
+: 
+"2天前"
+format_direction
+: 
+"客户"
+type
+: 
+"文本"
+},
+3:{
+content
+: 
+"孩子妈妈，您好，这个是咱们的青少年成长评估表。您这个抽一分钟的时间填写一下孩子的基本信息。填写完了之后，您跟老师说一声。"
+format_add_time
+: 
+"2天前"
+format_direction
+: 
+"我"
+type
+: 
+"语音"
+}
+     * ]
+     */
    if(res.code === 200) {
      chatRecords.value = res.data
+      console.log('聊天数据获取成功:', res.data)
+      console.log('chatRecords.value:', chatRecords.value)
+    } else {
+      console.log('聊天数据获取失败:', res)
    }
  } catch (error) {
    // 静默处理错误
@@ -790,8 +747,12 @@ const handleViewFormData = async (contact) => {
  console.log('表单数据已加载:', formInfo.value);
 };

-const handleViewChatData = (contact) => {
-  // TODO: 实现聊天记录查看逻辑
+const handleViewChatData = async (contact) => {
+  console.log('查看聊天数据:', contact)
+  await getCustomerChatInfo({
+    customerId: selectedContact.value?.customerId || 1
+  })
+  console.log('聊天数据已更新:', chatRecords.value)
 };

 const handleViewCallData = (contact) => {