refactor(components): 重构通话记录卡片布局和样式
- 移除调试用的console.log语句 - 重新组织通话记录卡片的结构，将用户信息、标签和分数整合到更清晰的布局中 - 新增通话时长格式化方法和分数样式分类方法 - 优化移动端布局和交互效果 - 改进标签和按钮的视觉样式，增加悬停效果
This commit is contained in:
@@ -39,8 +39,8 @@
|
|||||||
<!-- Tab 切换 -->
|
<!-- Tab 切换 -->
|
||||||
<div class="tab-container">
|
<div class="tab-container">
|
||||||
<div class="tab-buttons">
|
<div class="tab-buttons">
|
||||||
<button
|
<button
|
||||||
class="tab-btn"
|
class="tab-btn"
|
||||||
:class="{ active: activeTab === 'chat' }"
|
:class="{ active: activeTab === 'chat' }"
|
||||||
@click="activeTab = 'chat'"
|
@click="activeTab = 'chat'"
|
||||||
>
|
>
|
||||||
@@ -49,8 +49,8 @@
|
|||||||
</svg>
|
</svg>
|
||||||
聊天记录
|
聊天记录
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="tab-btn"
|
class="tab-btn"
|
||||||
:class="{ active: activeTab === 'call' }"
|
:class="{ active: activeTab === 'call' }"
|
||||||
@click="activeTab = 'call'"
|
@click="activeTab = 'call'"
|
||||||
>
|
>
|
||||||
@@ -60,7 +60,7 @@
|
|||||||
通话录音
|
通话录音
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Tab 内容 -->
|
<!-- Tab 内容 -->
|
||||||
<div class="tab-content">
|
<div class="tab-content">
|
||||||
<!-- 聊天记录内容 -->
|
<!-- 聊天记录内容 -->
|
||||||
@@ -79,7 +79,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 通话录音内容 -->
|
<!-- 通话录音内容 -->
|
||||||
<div v-if="activeTab === 'call'" class="call-content">
|
<div v-if="activeTab === 'call'" class="call-content">
|
||||||
<div class="content-header">
|
<div class="content-header">
|
||||||
@@ -89,13 +89,23 @@
|
|||||||
<div class="call-list">
|
<div class="call-list">
|
||||||
<div v-for="(call, index) in callRecords" :key="index" class="call-item">
|
<div v-for="(call, index) in callRecords" :key="index" class="call-item">
|
||||||
<div class="call-header">
|
<div class="call-header">
|
||||||
<span class="call-type">用户: {{ call.user_name }}</span>
|
<div class="header-main" style="display: flex; flex-direction: row;">
|
||||||
<span class="call-duration">客户: {{ call.customer_name }}</span>
|
<div class="user-info">
|
||||||
<span class="call-tag" :class="{
|
<span class="call-type">用户: {{ call.user_name }}</span>
|
||||||
'tag-20min': call.record_tag === '20分钟通话',
|
</div>
|
||||||
'tag-other': call.record_tag === '其他'
|
<div class="header-tags">
|
||||||
}" v-if="call.record_tag">{{ call.record_tag }}</span>
|
<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>
|
||||||
|
|
||||||
<div class="call-actions">
|
<div class="call-actions">
|
||||||
<div class="action-buttons">
|
<div class="action-buttons">
|
||||||
<button class="action-btn download-btn" @click="downloadRecording(call)">
|
<button class="action-btn download-btn" @click="downloadRecording(call)">
|
||||||
@@ -106,9 +116,8 @@
|
|||||||
<i class="icon-view"></i>
|
<i class="icon-view"></i>
|
||||||
查看原文
|
查看原文
|
||||||
</button>
|
</button>
|
||||||
</div>
|
<!-- 时长移到操作按钮后面 -->
|
||||||
<div class="call-time-info">
|
<span class="call-duration">{{ formatCallDuration(call.call_duration) }}</span>
|
||||||
<span class="call-duration">{{ formatDateTime(call.record_create_time) }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -120,8 +129,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
@@ -149,13 +156,11 @@ const props = defineProps({
|
|||||||
})
|
})
|
||||||
|
|
||||||
// Emits
|
// Emits
|
||||||
const emit = defineEmits(['analyze-sop', 'show-modal'])
|
const emit = defineEmits(['analyze-sop', 'show-modal', 'show-download-modal'])
|
||||||
|
|
||||||
// 当前激活的tab
|
// 当前激活的tab
|
||||||
const activeTab = ref('chat')
|
const activeTab = ref('chat')
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// 聊天消息列表
|
// 聊天消息列表
|
||||||
const chatMessages = computed(() => {
|
const chatMessages = computed(() => {
|
||||||
return props.chatInfo?.messages || []
|
return props.chatInfo?.messages || []
|
||||||
@@ -172,20 +177,20 @@ const formFields = computed(() => {
|
|||||||
{ label: '地区', value: '暂无数据' }
|
{ label: '地区', value: '暂无数据' }
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
||||||
let fields = []
|
let fields = []
|
||||||
|
|
||||||
// 检查是否为第一种格式（包含name, mobile等字段）
|
// 检查是否为第一种格式（包含name, mobile等字段）
|
||||||
if (formData.name || formData.mobile || formData.child_name) {
|
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 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(' | ')
|
const childInfo = [formData.child_name, formData.child_gender, formData.child_education].filter(item => item && item !== '暂无').join(' | ')
|
||||||
|
|
||||||
fields = [
|
fields = [
|
||||||
{ label: '客户信息', value: customerInfo || '暂无' },
|
{ label: '客户信息', value: customerInfo || '暂无' },
|
||||||
{ label: '孩子信息', value: childInfo || '暂无' },
|
{ label: '孩子信息', value: childInfo || '暂无' },
|
||||||
{ label: '地区', value: formData.territory || '暂无' }
|
{ label: '地区', value: formData.territory || '暂无' }
|
||||||
]
|
]
|
||||||
|
|
||||||
// 如果有additional_info，添加所有问题
|
// 如果有additional_info，添加所有问题
|
||||||
if (formData.additional_info && Array.isArray(formData.additional_info)) {
|
if (formData.additional_info && Array.isArray(formData.additional_info)) {
|
||||||
formData.additional_info.forEach((item) => {
|
formData.additional_info.forEach((item) => {
|
||||||
@@ -199,7 +204,7 @@ const formFields = computed(() => {
|
|||||||
// 第二种格式（expandXXX字段）
|
// 第二种格式（expandXXX字段）
|
||||||
const customerInfo = [formData.expandTwentyOne, formData.expandOne].filter(item => item && item !== '暂无').join(' | ')
|
const customerInfo = [formData.expandTwentyOne, formData.expandOne].filter(item => item && item !== '暂无').join(' | ')
|
||||||
const childInfo = [formData.expandTwentyNine, formData.expandTwentyFive, formData.expandTwo].filter(item => item && item !== '暂无').join(' | ')
|
const childInfo = [formData.expandTwentyNine, formData.expandTwentyFive, formData.expandTwo].filter(item => item && item !== '暂无').join(' | ')
|
||||||
|
|
||||||
fields = [
|
fields = [
|
||||||
{ label: '客户信息', value: customerInfo || '暂无' },
|
{ label: '客户信息', value: customerInfo || '暂无' },
|
||||||
{ label: '孩子信息', value: childInfo || '暂无' },
|
{ label: '孩子信息', value: childInfo || '暂无' },
|
||||||
@@ -211,10 +216,10 @@ const formFields = computed(() => {
|
|||||||
{ label: '孩子数量', value: formData.expandTwenty || '暂无' },
|
{ label: '孩子数量', value: formData.expandTwenty || '暂无' },
|
||||||
{ label: '预期时间', value: formData.expandThirty || '暂无' }
|
{ label: '预期时间', value: formData.expandThirty || '暂无' }
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
// 合并表单数据和聊天数据
|
// 合并表单数据和聊天数据
|
||||||
const allFields = [...fields]
|
const allFields = [...fields]
|
||||||
|
|
||||||
return allFields
|
return allFields
|
||||||
})
|
})
|
||||||
|
|
||||||
@@ -232,18 +237,17 @@ const callData = computed(() => ({
|
|||||||
|
|
||||||
// 通话记录列表
|
// 通话记录列表
|
||||||
const callRecords = computed(() => {
|
const callRecords = computed(() => {
|
||||||
|
|
||||||
// 从 props.callInfo 中获取真实的通话记录数据
|
// 从 props.callInfo 中获取真实的通话记录数据
|
||||||
if (props.callInfo && Array.isArray(props.callInfo)) {
|
if (props.callInfo && Array.isArray(props.callInfo)) {
|
||||||
console.log('通话记录:', props.callInfo)
|
console.log('通话记录:', props.callInfo)
|
||||||
return props.callInfo
|
return props.callInfo
|
||||||
}
|
}
|
||||||
|
|
||||||
// 如果 callInfo 是单个对象（API返回的数据格式）
|
// 如果 callInfo 是单个对象（API返回的数据格式）
|
||||||
if (props.callInfo && typeof props.callInfo === 'object' && props.callInfo.user_name) {
|
if (props.callInfo && typeof props.callInfo === 'object' && props.callInfo.user_name) {
|
||||||
return [props.callInfo] // 将单个对象包装成数组
|
return [props.callInfo] // 将单个对象包装成数组
|
||||||
}
|
}
|
||||||
|
|
||||||
// 如果 callInfo 是对象且包含数据数组
|
// 如果 callInfo 是对象且包含数据数组
|
||||||
if (props.callInfo && props.callInfo && Array.isArray(props.callInfo)) {
|
if (props.callInfo && props.callInfo && Array.isArray(props.callInfo)) {
|
||||||
return props.callInfo
|
return props.callInfo
|
||||||
@@ -252,6 +256,28 @@ const callRecords = computed(() => {
|
|||||||
return []
|
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) => {
|
const downloadRecording = async (call) => {
|
||||||
console.log('下载录音:', call)
|
console.log('下载录音:', call)
|
||||||
@@ -353,14 +379,14 @@ const downloadRecording = async (call) => {
|
|||||||
const viewTranscript = async (call) => {
|
const viewTranscript = async (call) => {
|
||||||
const title = '通话原文内容'
|
const title = '通话原文内容'
|
||||||
const content = call.record_context || '该通话记录暂无原文内容'
|
const content = call.record_context || '该通话记录暂无原文内容'
|
||||||
|
|
||||||
emit('show-modal', { title, content })
|
emit('show-modal', { title, content })
|
||||||
}
|
}
|
||||||
|
|
||||||
// 时间格式化方法
|
// 时间格式化方法
|
||||||
const formatDateTime = (dateTimeString) => {
|
const formatDateTime = (dateTimeString) => {
|
||||||
if (!dateTimeString) return '暂无时间'
|
if (!dateTimeString) return '暂无时间'
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const date = new Date(dateTimeString)
|
const date = new Date(dateTimeString)
|
||||||
const year = date.getFullYear()
|
const year = date.getFullYear()
|
||||||
@@ -369,7 +395,7 @@ const formatDateTime = (dateTimeString) => {
|
|||||||
const hours = String(date.getHours()).padStart(2, '0')
|
const hours = String(date.getHours()).padStart(2, '0')
|
||||||
const minutes = String(date.getMinutes()).padStart(2, '0')
|
const minutes = String(date.getMinutes()).padStart(2, '0')
|
||||||
const seconds = String(date.getSeconds()).padStart(2, '0')
|
const seconds = String(date.getSeconds()).padStart(2, '0')
|
||||||
|
|
||||||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('时间格式化错误:', error)
|
console.error('时间格式化错误:', error)
|
||||||
@@ -387,7 +413,7 @@ const formatDateTime = (dateTimeString) => {
|
|||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 1fr;
|
grid-template-columns: 1fr 1fr;
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
@@ -402,13 +428,13 @@ const formatDateTime = (dateTimeString) => {
|
|||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
transform: translateY(-2px);
|
transform: translateY(-2px);
|
||||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
|
||||||
border-color: #d1d5db;
|
border-color: #d1d5db;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -418,11 +444,11 @@ const formatDateTime = (dateTimeString) => {
|
|||||||
height: 4px;
|
height: 4px;
|
||||||
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
|
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.form-card::before {
|
&.form-card::before {
|
||||||
background: linear-gradient(90deg, #10b981, #059669);
|
background: linear-gradient(90deg, #10b981, #059669);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.communication-card::before {
|
&.communication-card::before {
|
||||||
background: linear-gradient(90deg, #3b82f6, #1d4ed8);
|
background: linear-gradient(90deg, #3b82f6, #1d4ed8);
|
||||||
}
|
}
|
||||||
@@ -444,12 +470,12 @@ const formatDateTime = (dateTimeString) => {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
background: #f3f4f6;
|
background: #f3f4f6;
|
||||||
color: #6b7280;
|
color: #6b7280;
|
||||||
|
|
||||||
.form-card & {
|
.form-card & {
|
||||||
background: #ecfdf5;
|
background: #ecfdf5;
|
||||||
color: #059669;
|
color: #059669;
|
||||||
}
|
}
|
||||||
|
|
||||||
.communication-card & {
|
.communication-card & {
|
||||||
background: #eff6ff;
|
background: #eff6ff;
|
||||||
color: #1d4ed8;
|
color: #1d4ed8;
|
||||||
@@ -472,17 +498,17 @@ const formatDateTime = (dateTimeString) => {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 12px 0;
|
padding: 12px 0;
|
||||||
border-bottom: 1px solid #f3f4f6;
|
border-bottom: 1px solid #f3f4f6;
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.field-label {
|
.field-label {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #6b7280;
|
color: #6b7280;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.field-value {
|
.field-value {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #1f2937;
|
color: #1f2937;
|
||||||
@@ -497,7 +523,7 @@ const formatDateTime = (dateTimeString) => {
|
|||||||
display: flex;
|
display: flex;
|
||||||
border-bottom: 1px solid #e5e7eb;
|
border-bottom: 1px solid #e5e7eb;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
|
|
||||||
.tab-btn {
|
.tab-btn {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -513,28 +539,28 @@ const formatDateTime = (dateTimeString) => {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-bottom: 2px solid transparent;
|
border-bottom: 2px solid transparent;
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
color: #3b82f6;
|
color: #3b82f6;
|
||||||
border-bottom-color: #3b82f6;
|
border-bottom-color: #3b82f6;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: #3b82f6;
|
color: #3b82f6;
|
||||||
}
|
}
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-content {
|
.tab-content {
|
||||||
min-height: 300px;
|
min-height: 300px;
|
||||||
max-height: 450px;
|
max-height: 450px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
|
||||||
.content-header {
|
.content-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
@@ -542,13 +568,13 @@ const formatDateTime = (dateTimeString) => {
|
|||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
padding-bottom: 12px;
|
padding-bottom: 12px;
|
||||||
border-bottom: 1px solid #f3f4f6;
|
border-bottom: 1px solid #f3f4f6;
|
||||||
|
|
||||||
.content-count {
|
.content-count {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #3b82f6;
|
color: #3b82f6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-time {
|
.content-time {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #9ca3af;
|
color: #9ca3af;
|
||||||
@@ -564,25 +590,25 @@ const formatDateTime = (dateTimeString) => {
|
|||||||
padding: 12px;
|
padding: 12px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
background: #f9fafb;
|
background: #f9fafb;
|
||||||
|
|
||||||
.message-header {
|
.message-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
|
|
||||||
.message-sender {
|
.message-sender {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #3b82f6;
|
color: #3b82f6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-time {
|
.message-time {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #9ca3af;
|
color: #9ca3af;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-text {
|
.message-text {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #374151;
|
color: #374151;
|
||||||
@@ -595,126 +621,192 @@ const formatDateTime = (dateTimeString) => {
|
|||||||
.call-list {
|
.call-list {
|
||||||
.call-item {
|
.call-item {
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
padding: 16px;
|
padding: 20px;
|
||||||
border-radius: 8px;
|
border-radius: 12px;
|
||||||
background: #f9fafb;
|
background: #ffffff;
|
||||||
border-left: 4px solid #3b82f6;
|
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 {
|
.call-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: flex-start;
|
||||||
margin-bottom: 8px;
|
.header-main {
|
||||||
|
display: flex;
|
||||||
.call-type {
|
flex-direction: column;
|
||||||
font-size: 12px;
|
gap: 8px;
|
||||||
font-weight: 600;
|
flex: 1;
|
||||||
padding: 4px 8px;
|
|
||||||
border-radius: 4px;
|
.user-info {
|
||||||
background: #dbeafe;
|
display: flex;
|
||||||
color: #3b82f6;
|
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 {
|
.call-time {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #9ca3af;
|
color: #9ca3af;
|
||||||
}
|
font-weight: 500;
|
||||||
|
white-space: nowrap;
|
||||||
.call-tag {
|
padding: 4px 8px;
|
||||||
font-size: 11px;
|
background: #f9fafb;
|
||||||
font-weight: 600;
|
border-radius: 4px;
|
||||||
padding: 3px 8px;
|
align-self: flex-start;
|
||||||
border-radius: 12px;
|
|
||||||
|
|
||||||
&.tag-20min {
|
|
||||||
background: #dcfce7;
|
|
||||||
color: #16a34a;
|
|
||||||
border: 1px solid #bbf7d0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.tag-other {
|
|
||||||
background: #fef3c7;
|
|
||||||
color: #d97706;
|
|
||||||
border: 1px solid #fed7aa;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.call-actions {
|
.call-actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-top: 12px;
|
margin-top: 12px;
|
||||||
padding-top: 8px;
|
|
||||||
border-top: 1px solid #f3f4f6;
|
|
||||||
|
|
||||||
.action-buttons {
|
.action-buttons {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 8px;
|
gap: 12px;
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
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 {
|
.action-btn {
|
||||||
background: #dbeafe;
|
display: flex;
|
||||||
color: #3b82f6;
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
&:hover {
|
padding: 8px 14px;
|
||||||
background: #bfdbfe;
|
border: none;
|
||||||
transform: translateY(-1px);
|
border-radius: 8px;
|
||||||
box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
|
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 {
|
.call-duration {
|
||||||
font-size: 11px;
|
font-size: 13px;
|
||||||
color: #6b7280;
|
color: #6b7280;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
background: #f9fafb;
|
background: #f9fafb;
|
||||||
padding: 4px 8px;
|
padding: 6px 12px;
|
||||||
border-radius: 4px;
|
border-radius: 20px;
|
||||||
border: 1px solid #e5e7eb;
|
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) {
|
@media (max-width: 768px) {
|
||||||
.raw-data-cards {
|
.raw-data-cards {
|
||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.data-card {
|
.data-card {
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-header {
|
.card-header {
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
margin-bottom: 14px;
|
margin-bottom: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-icon {
|
.card-icon {
|
||||||
width: 36px;
|
width: 36px;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-title {
|
.card-title {
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
}
|
}
|
||||||
@@ -821,30 +842,29 @@ const formatDateTime = (dateTimeString) => {
|
|||||||
.cards-container {
|
.cards-container {
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.data-card {
|
.data-card {
|
||||||
padding: 14px;
|
padding: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-header {
|
.card-header {
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-icon {
|
.card-icon {
|
||||||
width: 32px;
|
width: 32px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-title {
|
.card-title {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-description {
|
.call-actions {
|
||||||
font-size: 13px;
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 弹框样式
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
@@ -624,8 +624,6 @@ async function getCustomerCall() {
|
|||||||
const res = await getCustomerCallInfo(params)
|
const res = await getCustomerCallInfo(params)
|
||||||
if(res.code === 200) {
|
if(res.code === 200) {
|
||||||
callRecords.value = res.data
|
callRecords.value = res.data
|
||||||
console.log('Call Records Data from API:', res.data)
|
|
||||||
console.log('callRecords.value after assignment:', callRecords.value)
|
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
// 静默处理错误
|
// 静默处理错误
|
||||||
|
|||||||
Reference in New Issue
Block a user