|
|
|
@ -1251,7 +1251,8 @@ |
|
|
|
.customer-details { |
|
|
|
display: grid; |
|
|
|
grid-template-columns: 1fr 1fr; |
|
|
|
gap: 20px; |
|
|
|
gap: 25px; |
|
|
|
padding: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
/* 新增：信息区域容器，用于平衡布局 */ |
|
|
|
@ -1265,39 +1266,61 @@ |
|
|
|
|
|
|
|
.detail-section { |
|
|
|
margin-bottom: 25px; |
|
|
|
padding: 15px; |
|
|
|
border-radius: 12px; |
|
|
|
background: rgba(255, 255, 255, 0.4); |
|
|
|
padding: 20px; |
|
|
|
border-radius: 16px; |
|
|
|
background: rgba(255, 255, 255, 0.5); |
|
|
|
backdrop-filter: blur(10px); |
|
|
|
border: 1px solid rgba(255, 255, 255, 0.6); |
|
|
|
transition: all 0.3s ease; |
|
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); |
|
|
|
} |
|
|
|
|
|
|
|
.detail-section:hover { |
|
|
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); |
|
|
|
transform: translateY(-2px); |
|
|
|
} |
|
|
|
|
|
|
|
.detail-section-title { |
|
|
|
font-size: 18px; |
|
|
|
margin-bottom: 15px; |
|
|
|
color: #e86a92; |
|
|
|
font-size: 20px; |
|
|
|
margin-bottom: 20px; |
|
|
|
color: #4f46e5; |
|
|
|
font-weight: 600; |
|
|
|
padding-bottom: 8px; |
|
|
|
border-bottom: 1px solid rgba(232, 106, 146, 0.2); |
|
|
|
padding-bottom: 12px; |
|
|
|
border-bottom: 2px solid rgba(79, 70, 229, 0.2); |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
|
|
|
|
.detail-section-title::after { |
|
|
|
content: ''; |
|
|
|
position: absolute; |
|
|
|
bottom: -2px; |
|
|
|
left: 0; |
|
|
|
width: 60px; |
|
|
|
height: 2px; |
|
|
|
background-color: #4f46e5; |
|
|
|
border-radius: 1px; |
|
|
|
} |
|
|
|
|
|
|
|
.detail-item { |
|
|
|
margin-bottom: 12px; |
|
|
|
margin-bottom: 16px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
flex-wrap: wrap; |
|
|
|
} |
|
|
|
|
|
|
|
.detail-label { |
|
|
|
font-weight: 500; |
|
|
|
color: #666; |
|
|
|
min-width: 120px; |
|
|
|
font-weight: 600; |
|
|
|
color: #555; |
|
|
|
min-width: 130px; |
|
|
|
flex-shrink: 0; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
margin-right: 10px; |
|
|
|
font-size: 14px; |
|
|
|
} |
|
|
|
|
|
|
|
.detail-value { |
|
|
|
color: #333; |
|
|
|
flex-grow: 1; |
|
|
|
font-size: 14px; |
|
|
|
line-height: 1.5; |
|
|
|
} |
|
|
|
|
|
|
|
/* 确保输入框与标签垂直居中对齐 */ |
|
|
|
@ -4154,7 +4177,7 @@ |
|
|
|
const data = result.data || {}; |
|
|
|
const allPublicSeaCustomers = Array.isArray(data) ? data : Object.values(data); |
|
|
|
|
|
|
|
// 统计notice为banold的客户数量并更新通知铃铛 |
|
|
|
// 统计notice为old的客户数量并更新通知铃铛 |
|
|
|
this.updateNotificationStatus(allPublicSeaCustomers); |
|
|
|
|
|
|
|
// 保存所有公海客户数据到缓存中，用于通知弹窗 |
|
|
|
@ -4451,7 +4474,7 @@ |
|
|
|
const data = result.data || {}; |
|
|
|
const customersArray = Array.isArray(data) ? data : Object.values(data); |
|
|
|
|
|
|
|
// 统计notice为banold的客户数量并更新通知铃铛 |
|
|
|
// 统计notice为old的客户数量并更新通知铃铛 |
|
|
|
this.updateNotificationStatus(customersArray); |
|
|
|
|
|
|
|
// 根据登录信息过滤公海池数据 |
|
|
|
@ -4542,29 +4565,25 @@ |
|
|
|
let contentHTML = '<div class="notification-list">'; |
|
|
|
banoldCustomers.forEach(customer => { |
|
|
|
const customerName = customer.company || customer.companyName || '未知'; |
|
|
|
// 为banold状态（未读）添加new类 |
|
|
|
const notificationClass = customer.notice === 'banold' ? 'notification-item new' : 'notification-item'; |
|
|
|
contentHTML += ` |
|
|
|
<div class="notification-item"> |
|
|
|
<div class="${notificationClass}" onclick="viewCustomerDetails('${customer.id}', '${customer.phoneNumber || ''}', null, true)"> |
|
|
|
<div class="notification-header"> |
|
|
|
<div class="notification-icon"> |
|
|
|
<i class="fas fa-user-clock" style="color: #ff9800;"></i> |
|
|
|
</div> |
|
|
|
<div class="notification-content"> |
|
|
|
<div class="notification-title" style="cursor: pointer; color: #1890ff; font-weight: 600;" onclick="viewCustomerDetails('${customer.id}', '${customer.phoneNumber || ''}', null, true)"> |
|
|
|
<div class="notification-title"> |
|
|
|
${customerName} |
|
|
|
</div> |
|
|
|
<div class="notification-meta"> |
|
|
|
<span class="customer-id">客户ID: ${customer.id}</span> |
|
|
|
<span class="customer-phone">${customer.phoneNumber || '无电话'}</span> |
|
|
|
</div> |
|
|
|
<div class="notification-message"> |
|
|
|
<i class="fas fa-exclamation-circle" style="color: #ff9800; margin-right: 6px;"></i> |
|
|
|
该客户已满足过期条件 |
|
|
|
</div> |
|
|
|
<div class="notification-footer"> |
|
|
|
<div class="notification-time">${new Date().toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' })}</div> |
|
|
|
<button class="notification-action-btn" onclick="updateCustomerNotice('${customer.id}', this.closest('.notification-item'))"> |
|
|
|
标记已处理 |
|
|
|
</button> |
|
|
|
<div class="notification-status">未读</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -4585,9 +4604,6 @@ |
|
|
|
hideNotificationModal() { |
|
|
|
const notificationModal = document.getElementById('notificationModal'); |
|
|
|
notificationModal.classList.remove('active'); |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 恢复背景滚动 |
|
|
|
document.body.style.overflow = 'auto'; |
|
|
|
@ -4611,7 +4627,7 @@ |
|
|
|
const dataMap = result.data || {}; |
|
|
|
let allCustomers = Object.values(dataMap); |
|
|
|
|
|
|
|
// 统计notice为banold的客户数量并更新通知铃铛 |
|
|
|
// 统计notice为old的客户数量并更新通知铃铛 |
|
|
|
this.updateNotificationStatus(allCustomers); |
|
|
|
|
|
|
|
// 根据登录信息和等级过滤数据 |
|
|
|
@ -11693,7 +11709,7 @@ |
|
|
|
if (fromNotification) { |
|
|
|
console.log('📋 从通知弹窗查看客户详情，更新notice状态为old'); |
|
|
|
// 发送请求更新notice状态 |
|
|
|
fetch(`/pool/customers/${customerId}/notice`, { |
|
|
|
fetch(`/DL/pool/customers/${customerId}/notice`, { |
|
|
|
method: 'PUT', |
|
|
|
headers: { |
|
|
|
'Content-Type': 'application/json', |
|
|
|
@ -14381,19 +14397,35 @@ |
|
|
|
} |
|
|
|
|
|
|
|
.notification-item { |
|
|
|
background: #ffffff; |
|
|
|
border: 1px solid #e8e8e8; |
|
|
|
border-radius: 8px; |
|
|
|
padding: 16px; |
|
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); |
|
|
|
background: linear-gradient(135deg, #fff5f7 0%, #ffffff 100%); |
|
|
|
border: 2px solid #f8bbd0; |
|
|
|
border-radius: 10px; |
|
|
|
padding: 15px; |
|
|
|
box-shadow: 0 2px 8px rgba(232, 106, 146, 0.1); |
|
|
|
transition: all 0.3s ease; |
|
|
|
} |
|
|
|
|
|
|
|
.notification-item:hover { |
|
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); |
|
|
|
border-color: #e86a92; |
|
|
|
box-shadow: 0 4px 15px rgba(232, 106, 146, 0.2); |
|
|
|
transform: translateY(-2px); |
|
|
|
} |
|
|
|
|
|
|
|
/* 未读通知样式 */ |
|
|
|
.notification-item.new .notification-title { |
|
|
|
color: #ff4d4f; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
|
|
|
|
.notification-item.new .notification-status { |
|
|
|
background-color: #ff4d4f; |
|
|
|
color: white; |
|
|
|
padding: 2px 8px; |
|
|
|
border-radius: 10px; |
|
|
|
font-size: 12px; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
|
|
|
|
.notification-header { |
|
|
|
display: flex; |
|
|
|
align-items: flex-start; |
|
|
|
@ -14419,12 +14451,7 @@ |
|
|
|
font-size: 16px; |
|
|
|
font-weight: 600; |
|
|
|
margin-bottom: 8px; |
|
|
|
transition: color 0.3s ease; |
|
|
|
} |
|
|
|
|
|
|
|
.notification-title:hover { |
|
|
|
color: #40a9ff !important; |
|
|
|
text-decoration: underline; |
|
|
|
color: #e86a92; |
|
|
|
} |
|
|
|
|
|
|
|
.notification-meta { |
|
|
|
|
