fix(CustomerDetail): 移除SOP分析按钮的加载状态限制并更新API地址

refactor(RawDataCards): 重构通话记录卡片布局并添加时间格式化功能

- 在CustomerDetail组件中,简化SOP分析按钮的状态逻辑并更新API地址
- 在RawDataCards组件中,重新设计操作按钮布局,添加时间显示功能并优化样式
This commit is contained in:
2025-09-12 17:19:41 +08:00
parent 87c926ebb1
commit 1d63829ed6
2 changed files with 63 additions and 16 deletions

View File

@@ -93,14 +93,19 @@
<span class="call-duration">客户: {{ call.customer_name }}</span>
</div>
<div class="call-actions">
<button class="action-btn download-btn" @click="downloadRecording(call)">
<i class="icon-download"></i>
录音下载
</button>
<button class="action-btn view-btn" @click="viewTranscript(call)">
<i class="icon-view"></i>
查看原文
</button>
<div class="action-buttons">
<button class="action-btn download-btn" @click="downloadRecording(call)">
<i class="icon-download"></i>
录音下载
</button>
<button class="action-btn view-btn" @click="viewTranscript(call)">
<i class="icon-view"></i>
查看原文
</button>
</div>
<div class="call-time-info">
<span class="call-duration">{{ formatDateTime(call.record_create_time) }}</span>
</div>
</div>
</div>
</div>
@@ -278,6 +283,26 @@ const viewTranscript = async (call) => {
alert('该通话记录暂无原文内容')
}
}
// 时间格式化方法
const formatDateTime = (dateTimeString) => {
if (!dateTimeString) return '暂无时间'
try {
const date = new Date(dateTimeString)
const year = date.getFullYear()
const month = String(date.getMonth() + 1).padStart(2, '0')
const day = String(date.getDate()).padStart(2, '0')
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)
return dateTimeString
}
}
</script>
<style lang="scss" scoped>
@@ -531,17 +556,25 @@ const viewTranscript = async (call) => {
.call-actions {
display: flex;
gap: 12px;
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;
align-items: center;
gap: 6px;
padding: 8px 12px;
padding: 6px 10px;
border: none;
border-radius: 6px;
font-size: 12px;
font-size: 11px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
@@ -553,6 +586,7 @@ const viewTranscript = async (call) => {
&:hover {
background: #bfdbfe;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}
}
@@ -563,12 +597,13 @@ const viewTranscript = async (call) => {
&:hover {
background: #a7f3d0;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(5, 150, 105, 0.2);
}
}
i {
width: 14px;
height: 14px;
width: 12px;
height: 12px;
&.icon-download::before {
content: '⬇';
@@ -579,6 +614,18 @@ const viewTranscript = async (call) => {
}
}
}
.call-time-info {
.call-duration {
font-size: 11px;
color: #6b7280;
font-weight: 500;
background: #f9fafb;
padding: 4px 8px;
border-radius: 4px;
border: 1px solid #e5e7eb;
}
}
}
}
}