LiuRui/DJKB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(components): 重构通话记录卡片布局和样式

Browse Source 
- 移除调试用的console.log语句
- 重新组织通话记录卡片的结构，将用户信息、标签和分数整合到更清晰的布局中
- 新增通话时长格式化方法和分数样式分类方法
- 优化移动端布局和交互效果
- 改进标签和按钮的视觉样式，增加悬停效果
This commit is contained in:
lbw_9527443
2025-10-16 11:44:33 +08:00
parent ea32a16e5d
commit 10c8c7b796
2 changed files with 253 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

264
my-vue-app/src/views/person/components/RawDataCards.vue
View File

@@ -89,13 +89,23 @@
<div class="call-list">
<div v-for="(call, index) in callRecords" :key="index" class="call-item">
<div class="call-header">
<div class="header-main" style="display: flex; flex-direction: row;">
<div class="user-info">
<span class="call-type">用户: {{ call.user_name }}</span>
<span class="call-duration">客户: {{ call.customer_name }}</span>
</div>
<div class="header-tags">
<span class="call-tag" :class="{
'tag-20min': call.record_tag === '20分钟通话',
'tag-other': call.record_tag === '其他'
'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 || []
@@ -232,7 +237,6 @@ const callData = computed(() => ({
// 通话记录列表
const callRecords = computed(() => {
// 从 props.callInfo 中获取真实的通话记录数据
if (props.callInfo && Array.isArray(props.callInfo)) {
console.log('通话记录:', 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)
@@ -595,42 +621,61 @@ 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;
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: 12px;
font-size: 13px;
font-weight: 600;
padding: 4px 8px;
border-radius: 4px;
padding: 5px 10px;
border-radius: 20px;
background: #dbeafe;
color: #3b82f6;
}
.call-duration {
font-size: 12px;
.call-customer {
font-size: 13px;
font-weight: 500;
color: #6b7280;
align-self: center;
}
}
.call-time {
font-size: 12px;
color: #9ca3af;
}
.header-tags {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
.call-tag {
font-size: 11px;
font-size: 12px;
font-weight: 600;
padding: 3px 8px;
border-radius: 12px;
padding: 4px 10px;
border-radius: 20px;
&.tag-20min {
background: #dcfce7;
@@ -638,12 +683,52 @@ const formatDateTime = (dateTimeString) => {
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-time {
font-size: 12px;
color: #9ca3af;
font-weight: 500;
white-space: nowrap;
padding: 4px 8px;
background: #f9fafb;
border-radius: 4px;
align-self: flex-start;
}
}
.call-actions {
@@ -651,25 +736,24 @@ const formatDateTime = (dateTimeString) => {
justify-content: space-between;
align-items: center;
margin-top: 12px;
padding-top: 8px;
border-top: 1px solid #f3f4f6;
.action-buttons {
display: flex;
gap: 8px;
}
gap: 12px;
align-items: center;
.action-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
padding: 8px 14px;
border: none;
border-radius: 6px;
font-size: 11px;
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;
@@ -677,8 +761,12 @@ const formatDateTime = (dateTimeString) => {
&:hover {
background: #bfdbfe;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
transform: translateY(-2px);
box-shadow: 0 4px 6px rgba(59, 130, 246, 0.2);
}
&:active {
transform: translateY(0);
}
}
@@ -688,14 +776,18 @@ const formatDateTime = (dateTimeString) => {
&:hover {
background: #a7f3d0;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(5, 150, 105, 0.2);
transform: translateY(-2px);
box-shadow: 0 4px 6px rgba(5, 150, 105, 0.2);
}
&:active {
transform: translateY(0);
}
}
i {
width: 12px;
height: 12px;
font-style: normal;
font-size: 14px;
&.icon-download::before {
content: '⬇';
@@ -707,14 +799,14 @@ const formatDateTime = (dateTimeString) => {
}
}
.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,77 +814,6 @@ 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;
@@ -840,11 +861,10 @@ const formatDateTime = (dateTimeString) => {
font-size: 14px;
}
.card-description {
font-size: 13px;
.call-actions {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
}
// 弹框样式
</style>

2
my-vue-app/src/views/person/sale.vue
View File

@@ -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) {
// 静默处理错误