From 10c8c7b7961b387e1dc3f60a1117a960e7f4a112 Mon Sep 17 00:00:00 2001
From: lbw_9527443 <780139497@qq.com>
Date: Thu, 16 Oct 2025 11:44:33 +0800
Subject: [PATCH] =?UTF-8?q?refactor(components):=20=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E9=80=9A=E8=AF=9D=E8=AE=B0=E5=BD=95=E5=8D=A1=E7=89=87=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E5=92=8C=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除调试用的console.log语句
- 重新组织通话记录卡片的结构，将用户信息、标签和分数整合到更清晰的布局中
- 新增通话时长格式化方法和分数样式分类方法
- 优化移动端布局和交互效果
- 改进标签和按钮的视觉样式，增加悬停效果
---
 .../views/person/components/RawDataCards.vue  | 486 +++++++++---------
 my-vue-app/src/views/person/sale.vue          |   2 -
 2 files changed, 253 insertions(+), 235 deletions(-)

diff --git a/my-vue-app/src/views/person/components/RawDataCards.vue b/my-vue-app/src/views/person/components/RawDataCards.vue
index d9be774..f36c180 100644
--- a/my-vue-app/src/views/person/components/RawDataCards.vue
+++ b/my-vue-app/src/views/person/components/RawDataCards.vue
@@ -39,8 +39,8 @@
           <!-- Tab 切换 -->
           <div class="tab-container">
             <div class="tab-buttons">
-              <button 
-                class="tab-btn" 
+              <button
+                class="tab-btn"
                 :class="{ active: activeTab === 'chat' }"
                 @click="activeTab = 'chat'"
               >
@@ -49,8 +49,8 @@
                 </svg>
                 聊天记录
               </button>
-              <button 
-                class="tab-btn" 
+              <button
+                class="tab-btn"
                 :class="{ active: activeTab === 'call' }"
                 @click="activeTab = 'call'"
               >
@@ -60,7 +60,7 @@
                 通话录音
               </button>
             </div>
-            
+
             <!-- Tab 内容 -->
             <div class="tab-content">
               <!-- 聊天记录内容 -->
@@ -79,7 +79,7 @@
                   </div>
                 </div>
               </div>
-              
+
               <!-- 通话录音内容 -->
               <div v-if="activeTab === 'call'" class="call-content">
                 <div class="content-header">
@@ -89,13 +89,23 @@
                 <div class="call-list">
                   <div v-for="(call, index) in callRecords" :key="index" class="call-item">
                     <div class="call-header">
-                      <span class="call-type">用户: {{ call.user_name }}</span>
-                      <span class="call-duration">客户: {{ call.customer_name }}</span>
-                      <span class="call-tag" :class="{
-                         'tag-20min': call.record_tag === '20分钟通话',
-                         'tag-other': call.record_tag === '其他'
-                       }" v-if="call.record_tag">{{ call.record_tag }}</span>
+                      <div class="header-main" style="display: flex; flex-direction: row;">
+                        <div class="user-info">
+                          <span class="call-type">用户: {{ call.user_name }}</span>
+                        </div>
+                        <div class="header-tags">
+                          <span class="call-tag" :class="{
+                            'tag-20min': call.record_tag === '20分钟通话',
+                            'tag-invalid': call.record_tag === '无效通话',
+                            'tag-other': call.record_tag !== '20分钟通话' && call.record_tag !== '无效通话'
+                          }" v-if="call.record_tag">{{ call.record_tag }}</span>
+                          <!-- 分数移到类型标签后面 -->
+                          <span class="stat-value" :class="getScoreClass(call.score)">{{ call.score }}分</span>
+                        </div>
+                      </div>
+                      <div class="call-time">{{ formatDateTime(call.record_create_time) }}</div>
                     </div>
+
                     <div class="call-actions">
                       <div class="action-buttons">
                         <button class="action-btn download-btn" @click="downloadRecording(call)">
@@ -106,9 +116,8 @@
                           <i class="icon-view"></i>
                           查看原文
                         </button>
-                      </div>
-                      <div class="call-time-info">
-                        <span class="call-duration">{{ formatDateTime(call.record_create_time) }}</span>
+                        <!-- 时长移到操作按钮后面 -->
+                        <span class="call-duration">{{ formatCallDuration(call.call_duration) }}</span>
                       </div>
                     </div>
                   </div>
@@ -120,8 +129,6 @@
       </div>
     </div>
   </div>
-
-
 </template>
 
 <script setup>
@@ -149,13 +156,11 @@ const props = defineProps({
 })
 
 // Emits
-const emit = defineEmits(['analyze-sop', 'show-modal'])
+const emit = defineEmits(['analyze-sop', 'show-modal', 'show-download-modal'])
 
 // 当前激活的tab
 const activeTab = ref('chat')
 
-
-
 // 聊天消息列表
 const chatMessages = computed(() => {
   return props.chatInfo?.messages || []
@@ -172,20 +177,20 @@ const formFields = computed(() => {
       { label: '地区', value: '暂无数据' }
     ]
   }
-  
+
   let fields = []
-  
+
   // 检查是否为第一种格式（包含name, mobile等字段）
    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) => {
@@ -199,7 +204,7 @@ const formFields = computed(() => {
      // 第二种格式（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 || '暂无' },
@@ -211,10 +216,10 @@ const formFields = computed(() => {
        { label: '孩子数量', value: formData.expandTwenty || '暂无' },
        { label: '预期时间', value: formData.expandThirty || '暂无' }
      ]
-   }  
+   }
   // 合并表单数据和聊天数据
   const allFields = [...fields]
-  
+
   return allFields
 })
 
@@ -232,18 +237,17 @@ const callData = computed(() => ({
 
 // 通话记录列表
 const callRecords = computed(() => {
-  
   // 从 props.callInfo 中获取真实的通话记录数据
   if (props.callInfo && Array.isArray(props.callInfo)) {
     console.log('通话记录:', props.callInfo)
     return props.callInfo
   }
-  
+
   // 如果 callInfo 是单个对象（API返回的数据格式）
   if (props.callInfo && typeof props.callInfo === 'object' && props.callInfo.user_name) {
     return [props.callInfo] // 将单个对象包装成数组
   }
-  
+
   // 如果 callInfo 是对象且包含数据数组
   if (props.callInfo && props.callInfo && Array.isArray(props.callInfo)) {
     return props.callInfo
@@ -252,6 +256,28 @@ const callRecords = computed(() => {
   return []
 })
 
+// 新增：格式化通话时长的方法
+const formatCallDuration = (durationInMinutes) => {
+  if (typeof durationInMinutes !== 'number' || durationInMinutes < 0) {
+    return '暂无';
+  }
+  const totalSeconds = Math.round(durationInMinutes * 60);
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${minutes}分${seconds}秒`;
+};
+
+// 新增：根据分数获取CSS类的方法
+const getScoreClass = (score) => {
+  if (score >= 80) {
+    return 'score-high';
+  } else if (score >= 60) {
+    return 'score-medium';
+  } else {
+    return 'score-low';
+  }
+};
+
 // 录音下载方法
 const downloadRecording = async (call) => {
   console.log('下载录音:', call)
@@ -353,14 +379,14 @@ const downloadRecording = async (call) => {
 const viewTranscript = async (call) => {
   const title = '通话原文内容'
   const content = call.record_context || '该通话记录暂无原文内容'
-  
+
   emit('show-modal', { title, content })
 }
 
 // 时间格式化方法
 const formatDateTime = (dateTimeString) => {
   if (!dateTimeString) return '暂无时间'
-  
+
   try {
     const date = new Date(dateTimeString)
     const year = date.getFullYear()
@@ -369,7 +395,7 @@ const formatDateTime = (dateTimeString) => {
     const hours = String(date.getHours()).padStart(2, '0')
     const minutes = String(date.getMinutes()).padStart(2, '0')
     const seconds = String(date.getSeconds()).padStart(2, '0')
-    
+
     return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
   } catch (error) {
     console.error('时间格式化错误:', error)
@@ -387,7 +413,7 @@ const formatDateTime = (dateTimeString) => {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
-  
+
   @media (max-width: 768px) {
     grid-template-columns: 1fr;
     gap: 16px;
@@ -402,13 +428,13 @@ const formatDateTime = (dateTimeString) => {
   transition: all 0.3s ease;
   position: relative;
   overflow: hidden;
-  
+
   &:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
     border-color: #d1d5db;
   }
-  
+
   &::before {
     content: '';
     position: absolute;
@@ -418,11 +444,11 @@ const formatDateTime = (dateTimeString) => {
     height: 4px;
     background: linear-gradient(90deg, #3b82f6, #8b5cf6);
   }
-  
+
   &.form-card::before {
     background: linear-gradient(90deg, #10b981, #059669);
   }
-  
+
   &.communication-card::before {
     background: linear-gradient(90deg, #3b82f6, #1d4ed8);
   }
@@ -444,12 +470,12 @@ const formatDateTime = (dateTimeString) => {
   justify-content: center;
   background: #f3f4f6;
   color: #6b7280;
-  
+
   .form-card & {
     background: #ecfdf5;
     color: #059669;
   }
-  
+
   .communication-card & {
     background: #eff6ff;
     color: #1d4ed8;
@@ -472,17 +498,17 @@ const formatDateTime = (dateTimeString) => {
     align-items: center;
     padding: 12px 0;
     border-bottom: 1px solid #f3f4f6;
-    
+
     &:last-child {
       border-bottom: none;
     }
-    
+
     .field-label {
       font-size: 14px;
       color: #6b7280;
       font-weight: 500;
     }
-    
+
     .field-value {
       font-size: 14px;
       color: #1f2937;
@@ -497,7 +523,7 @@ const formatDateTime = (dateTimeString) => {
     display: flex;
     border-bottom: 1px solid #e5e7eb;
     margin-bottom: 16px;
-    
+
     .tab-btn {
       flex: 1;
       display: flex;
@@ -513,28 +539,28 @@ const formatDateTime = (dateTimeString) => {
       cursor: pointer;
       border-bottom: 2px solid transparent;
       transition: all 0.2s ease;
-      
+
       &.active {
         color: #3b82f6;
         border-bottom-color: #3b82f6;
       }
-      
+
       &:hover {
         color: #3b82f6;
       }
-      
+
       svg {
         width: 16px;
         height: 16px;
       }
     }
   }
-  
+
   .tab-content {
     min-height: 300px;
     max-height: 450px;
     overflow-y: auto;
-    
+
     .content-header {
       display: flex;
       justify-content: space-between;
@@ -542,13 +568,13 @@ const formatDateTime = (dateTimeString) => {
       margin-bottom: 16px;
       padding-bottom: 12px;
       border-bottom: 1px solid #f3f4f6;
-      
+
       .content-count {
         font-size: 12px;
         font-weight: 600;
         color: #3b82f6;
       }
-      
+
       .content-time {
         font-size: 12px;
         color: #9ca3af;
@@ -564,25 +590,25 @@ const formatDateTime = (dateTimeString) => {
     padding: 12px;
     border-radius: 8px;
     background: #f9fafb;
-    
+
     .message-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 8px;
-      
+
       .message-sender {
         font-size: 12px;
         font-weight: 600;
         color: #3b82f6;
       }
-      
+
       .message-time {
         font-size: 12px;
         color: #9ca3af;
       }
     }
-    
+
     .message-text {
       font-size: 14px;
       color: #374151;
@@ -595,126 +621,192 @@ const formatDateTime = (dateTimeString) => {
 .call-list {
   .call-item {
     margin-bottom: 16px;
-    padding: 16px;
-    border-radius: 8px;
-    background: #f9fafb;
-    border-left: 4px solid #3b82f6;
+    padding: 20px;
+    border-radius: 12px;
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    transition: all 0.3s ease;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
     
+    &:hover {
+        box-shadow: 0 6px 16px rgba(0,0,0,0.1);
+        transform: translateY(-2px);
+    }
+
     .call-header {
       display: flex;
       justify-content: space-between;
-      align-items: center;
-      margin-bottom: 8px;
-      
-      .call-type {
-        font-size: 12px;
-        font-weight: 600;
-        padding: 4px 8px;
-        border-radius: 4px;
-        background: #dbeafe;
-        color: #3b82f6;
+      align-items: flex-start;
+      .header-main {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        flex: 1;
+
+        .user-info {
+          display: flex;
+          gap: 12px;
+          flex-wrap: wrap;
+          
+          .call-type {
+            font-size: 13px;
+            font-weight: 600;
+            padding: 5px 10px;
+            border-radius: 20px;
+            background: #dbeafe;
+            color: #3b82f6;
+          }
+
+          .call-customer {
+            font-size: 13px;
+            font-weight: 500;
+            color: #6b7280;
+            align-self: center;
+          }
+        }
+
+        .header-tags {
+          display: flex;
+          gap: 8px;
+          align-items: center;
+          flex-wrap: wrap;
+
+          .call-tag {
+            font-size: 12px;
+            font-weight: 600;
+            padding: 4px 10px;
+            border-radius: 20px;
+
+            &.tag-20min {
+              background: #dcfce7;
+              color: #16a34a;
+              border: 1px solid #bbf7d0;
+            }
+            
+            &.tag-invalid {
+                background: #fee2e2;
+                color: #dc2626;
+                border: 1px solid #fecaca;
+            }
+
+            &.tag-other {
+              background: #fef3c7;
+              color: #d97706;
+              border: 1px solid #fed7aa;
+            }
+          }
+          
+          // 分数样式
+          .stat-value {
+            font-size: 14px;
+            font-weight: 700;
+            padding: 4px 10px;
+            border-radius: 20px;
+            
+            &.score-high {
+              color: #16a34a; // 绿色
+              background-color: #dcfce7;
+            }
+            &.score-medium {
+              color: #d97706; // 橙色
+              background-color: #fef3c7;
+            }
+            &.score-low {
+              color: #dc2626; // 红色
+              background-color: #fee2e2;
+            }
+          }
+        }
       }
-      
-      .call-duration {
-        font-size: 12px;
-        font-weight: 500;
-        color: #6b7280;
-      }
-      
+
       .call-time {
         font-size: 12px;
         color: #9ca3af;
-      }
-      
-      .call-tag {
-        font-size: 11px;
-        font-weight: 600;
-        padding: 3px 8px;
-        border-radius: 12px;
-        
-        &.tag-20min {
-          background: #dcfce7;
-          color: #16a34a;
-          border: 1px solid #bbf7d0;
-        }
-        
-        &.tag-other {
-          background: #fef3c7;
-          color: #d97706;
-          border: 1px solid #fed7aa;
-        }
+        font-weight: 500;
+        white-space: nowrap;
+        padding: 4px 8px;
+        background: #f9fafb;
+        border-radius: 4px;
+        align-self: flex-start;
       }
     }
-    
+
     .call-actions {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-top: 12px;
-      padding-top: 8px;
-      border-top: 1px solid #f3f4f6;
-      
+
       .action-buttons {
         display: flex;
-        gap: 8px;
-      }
-      
-      .action-btn {
-        display: flex;
+        gap: 12px;
         align-items: center;
-        gap: 6px;
-        padding: 6px 10px;
-        border: none;
-        border-radius: 6px;
-        font-size: 11px;
-        font-weight: 500;
-        cursor: pointer;
-        transition: all 0.2s ease;
         
-        &.download-btn {
-          background: #dbeafe;
-          color: #3b82f6;
-          
-          &:hover {
-            background: #bfdbfe;
-            transform: translateY(-1px);
-            box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
+        .action-btn {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          padding: 8px 14px;
+          border: none;
+          border-radius: 8px;
+          font-size: 13px;
+          font-weight: 500;
+          cursor: pointer;
+          transition: all 0.2s ease;
+          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+
+          &.download-btn {
+            background: #dbeafe;
+            color: #3b82f6;
+
+            &:hover {
+              background: #bfdbfe;
+              transform: translateY(-2px);
+              box-shadow: 0 4px 6px rgba(59, 130, 246, 0.2);
+            }
+            
+            &:active {
+              transform: translateY(0);
+            }
+          }
+
+          &.view-btn {
+            background: #d1fae5;
+            color: #059669;
+
+            &:hover {
+              background: #a7f3d0;
+              transform: translateY(-2px);
+              box-shadow: 0 4px 6px rgba(5, 150, 105, 0.2);
+            }
+            
+            &:active {
+              transform: translateY(0);
+            }
+          }
+
+          i {
+            font-style: normal;
+            font-size: 14px;
+            
+            &.icon-download::before {
+              content: '⬇';
+            }
+
+            &.icon-view::before {
+              content: '👁';
+            }
           }
         }
         
-        &.view-btn {
-          background: #d1fae5;
-          color: #059669;
-          
-          &:hover {
-            background: #a7f3d0;
-            transform: translateY(-1px);
-            box-shadow: 0 2px 4px rgba(5, 150, 105, 0.2);
-          }
-        }
-        
-        i {
-          width: 12px;
-          height: 12px;
-          
-          &.icon-download::before {
-            content: '⬇';
-          }
-          
-          &.icon-view::before {
-            content: '👁';
-          }
-        }
-      }
-      
-      .call-time-info {
+        // 通话时长样式
         .call-duration {
-          font-size: 11px;
+          font-size: 13px;
           color: #6b7280;
           font-weight: 500;
           background: #f9fafb;
-          padding: 4px 8px;
-          border-radius: 4px;
+          padding: 6px 12px;
+          border-radius: 20px;
           border: 1px solid #e5e7eb;
         }
       }
@@ -722,96 +814,25 @@ const formatDateTime = (dateTimeString) => {
   }
 }
 
-.card-content {
-  margin-bottom: 20px;
-}
-
-.card-description {
-  color: #6b7280;
-  font-size: 14px;
-  margin: 0 0 16px 0;
-  line-height: 1.5;
-}
-
-.card-stats {
-  display: flex;
-  gap: 20px;
-  
-  @media (max-width: 480px) {
-    flex-direction: column;
-    gap: 12px;
-  }
-}
-
-.stat-item {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.stat-label {
-  font-size: 12px;
-  color: #9ca3af;
-  font-weight: 500;
-}
-
-.stat-value {
-  font-size: 14px;
-  color: #111827;
-  font-weight: 600;
-}
-
-.card-action {
-  border-top: 1px solid #f3f4f6;
-  padding-top: 16px;
-  margin-top: 16px;
-}
-
-.view-btn {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  background: none;
-  border: none;
-  color: #6b7280;
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  padding: 8px 0;
-  transition: color 0.2s ease;
-  
-  &:hover {
-    color: #111827;
-  }
-  
-  svg {
-    transition: transform 0.2s ease;
-  }
-  
-  &:hover svg {
-    transform: translateX(2px);
-  }
-}
-
 @media (max-width: 768px) {
   .raw-data-cards {
     margin: 20px 0;
   }
-  
+
   .data-card {
     padding: 16px;
   }
-  
+
   .card-header {
     gap: 10px;
     margin-bottom: 14px;
   }
-  
+
   .card-icon {
     width: 36px;
     height: 36px;
   }
-  
+
   .card-title {
     font-size: 15px;
   }
@@ -821,30 +842,29 @@ const formatDateTime = (dateTimeString) => {
   .cards-container {
     gap: 12px;
   }
-  
+
   .data-card {
     padding: 14px;
   }
-  
+
   .card-header {
     gap: 8px;
     margin-bottom: 12px;
   }
-  
+
   .card-icon {
     width: 32px;
     height: 32px;
   }
-  
+
   .card-title {
     font-size: 14px;
   }
   
-  .card-description {
-    font-size: 13px;
+  .call-actions {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 10px;
   }
 }
-
-// 弹框样式
-
 </style>
\ No newline at end of file
diff --git a/my-vue-app/src/views/person/sale.vue b/my-vue-app/src/views/person/sale.vue
index 6831484..dd9efa9 100644
--- a/my-vue-app/src/views/person/sale.vue
+++ b/my-vue-app/src/views/person/sale.vue
@@ -624,8 +624,6 @@ async function getCustomerCall() {
     const res = await getCustomerCallInfo(params)
     if(res.code === 200) {
       callRecords.value = res.data
-      console.log('Call Records Data from API:', res.data)
-      console.log('callRecords.value after assignment:', callRecords.value)
     }
   } catch (error) {
     // 静默处理错误