SwtTt29
/
Page--user
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Update notification popup styles for mainapp-sells and mainapp-supplys

master
hzjcd 3 months ago
parent
2fbe14b811
commit
12f811a27d
4 changed files with 144 additions and 87 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/main/java/com/example/web/mapper/SupplyUsersMapper.java
  2. 2
      src/main/java/com/example/web/mapper/UsersMapper.java
  3. 115
      src/main/resources/static/mainapp-sells.html
  4. 112
      src/main/resources/static/mainapp-supplys.html

2
src/main/java/com/example/web/mapper/SupplyUsersMapper.java
View File

@ -265,6 +265,6 @@ public interface SupplyUsersMapper {
int updateFollowUpByPhone(@Param("phoneNumber") String phoneNumber, @Param("followup") String followup); int updateFollowUpByPhone(@Param("phoneNumber") String phoneNumber, @Param("followup") String followup);
// 🔥 新增：更新用户通知状态 // 🔥 新增：更新用户通知状态
@Update("UPDATE users SET notice = #{notice} WHERE user_id = #{userId}") @Update("UPDATE users SET notice = #{notice} WHERE userId = #{userId}")
int updateNotice(@Param("userId") String userId, @Param("notice") String notice); int updateNotice(@Param("userId") String userId, @Param("notice") String notice);
} }

2
src/main/java/com/example/web/mapper/UsersMapper.java
View File

@ -271,6 +271,6 @@ public interface UsersMapper {
List<UserProductCartDTO> getUserBasicInfoByUserIds(@Param("userIds") List<String> userIds); List<UserProductCartDTO> getUserBasicInfoByUserIds(@Param("userIds") List<String> userIds);
// 🔥 新增：更新用户通知状态 // 🔥 新增：更新用户通知状态
@Update("UPDATE users SET notice = #{notice} WHERE user_id = #{userId}") @Update("UPDATE users SET notice = #{notice} WHERE userId = #{userId}")
int updateNotice(@Param("userId") String userId, @Param("notice") String notice); int updateNotice(@Param("userId") String userId, @Param("notice") String notice);
} }

115
src/main/resources/static/mainapp-sells.html
View File

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

112
src/main/resources/static/mainapp-supplys.html
View File

@ -1251,7 +1251,8 @@
.customer-details { .customer-details {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 20px; gap: 25px;
padding: 10px;
} }
/* 新增：信息区域容器，用于平衡布局 */ /* 新增：信息区域容器，用于平衡布局 */
@ -1265,39 +1266,61 @@
.detail-section { .detail-section {
margin-bottom: 25px; margin-bottom: 25px;
padding: 15px; padding: 20px;
border-radius: 12px; border-radius: 16px;
background: rgba(255, 255, 255, 0.4); 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 { .detail-section-title {
font-size: 18px; font-size: 20px;
margin-bottom: 15px; margin-bottom: 20px;
color: #e86a92; color: #4f46e5;
font-weight: 600; font-weight: 600;
padding-bottom: 8px; padding-bottom: 12px;
border-bottom: 1px solid rgba(232, 106, 146, 0.2); 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 { .detail-item {
margin-bottom: 12px; margin-bottom: 16px;
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap;
} }
.detail-label { .detail-label {
font-weight: 500; font-weight: 600;
color: #666; color: #555;
min-width: 120px; min-width: 130px;
flex-shrink: 0; flex-shrink: 0;
display: flex; font-size: 14px;
align-items: center;
margin-right: 10px;
} }
.detail-value { .detail-value {
color: #333; color: #333;
flex-grow: 1; flex-grow: 1;
font-size: 14px;
line-height: 1.5;
} }
/* 确保输入框与标签垂直居中对齐 */ /* 确保输入框与标签垂直居中对齐 */
@ -4154,7 +4177,7 @@
const data = result.data || {}; const data = result.data || {};
const allPublicSeaCustomers = Array.isArray(data) ? data : Object.values(data); const allPublicSeaCustomers = Array.isArray(data) ? data : Object.values(data);
// 统计notice为banold的客户数量并更新通知铃铛 // 统计notice为old的客户数量并更新通知铃铛
this.updateNotificationStatus(allPublicSeaCustomers); this.updateNotificationStatus(allPublicSeaCustomers);
// 保存所有公海客户数据到缓存中，用于通知弹窗 // 保存所有公海客户数据到缓存中，用于通知弹窗
@ -4439,7 +4462,7 @@
const data = result.data || {}; const data = result.data || {};
const customersArray = Array.isArray(data) ? data : Object.values(data); const customersArray = Array.isArray(data) ? data : Object.values(data);
// 统计notice为banold的客户数量并更新通知铃铛 // 统计notice为old的客户数量并更新通知铃铛
this.updateNotificationStatus(customersArray); this.updateNotificationStatus(customersArray);
// 根据登录信息过滤公海池数据 // 根据登录信息过滤公海池数据
@ -4530,29 +4553,25 @@
let contentHTML = '<div class="notification-list">'; let contentHTML = '<div class="notification-list">';
banoldCustomers.forEach(customer => { banoldCustomers.forEach(customer => {
const customerName = customer.company || customer.companyName || '未知'; const customerName = customer.company || customer.companyName || '未知';
// 为banold状态（未读）添加new类
const notificationClass = customer.notice === 'banold' ? 'notification-item new' : 'notification-item';
contentHTML += ` contentHTML += `
<div class="notification-item"> <div class="${notificationClass}" onclick="viewCustomerDetails('${customer.id}', '${customer.phoneNumber || ''}', null, true)">
<div class="notification-header"> <div class="notification-header">
<div class="notification-icon"> <div class="notification-icon">
<i class="fas fa-user-clock" style="color: #ff9800;"></i> <i class="fas fa-user-clock" style="color: #ff9800;"></i>
</div> </div>
<div class="notification-content"> <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} ${customerName}
</div> </div>
<div class="notification-meta"> <div class="notification-meta">
<span class="customer-id">客户ID: ${customer.id}</span> <span class="customer-id">客户ID: ${customer.id}</span>
<span class="customer-phone">${customer.phoneNumber || '无电话'}</span> <span class="customer-phone">${customer.phoneNumber || '无电话'}</span>
</div> </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-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> <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'))"> <div class="notification-status">未读</div>
标记已处理
</button>
</div> </div>
</div> </div>
</div> </div>
@ -4598,7 +4617,7 @@
const dataMap = result.data || {}; const dataMap = result.data || {};
let allCustomers = Object.values(dataMap); let allCustomers = Object.values(dataMap);
// 统计notice为banold的客户数量并更新通知铃铛 // 统计notice为old的客户数量并更新通知铃铛
this.updateNotificationStatus(allCustomers); this.updateNotificationStatus(allCustomers);
// 根据登录信息和等级过滤数据 // 根据登录信息和等级过滤数据
@ -11521,7 +11540,7 @@
if (fromNotification) { if (fromNotification) {
console.log('📋 从通知弹窗查看客户详情，更新notice状态为old'); console.log('📋 从通知弹窗查看客户详情，更新notice状态为old');
// 发送请求更新notice状态 // 发送请求更新notice状态
fetch(`/pool/customers/${customerId}/notice`, { fetch(`/DL/supply/pool/customers/${customerId}/notice`, {
method: 'PUT', method: 'PUT',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
@ -14238,19 +14257,35 @@
} }
.notification-item { .notification-item {
background: #ffffff; background: linear-gradient(135deg, #fff5f7 0%, #ffffff 100%);
border: 1px solid #e8e8e8; border: 2px solid #f8bbd0;
border-radius: 8px; border-radius: 10px;
padding: 16px; padding: 15px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 8px rgba(232, 106, 146, 0.1);
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.notification-item:hover { .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); 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 { .notification-header {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
@ -14276,12 +14311,7 @@
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
margin-bottom: 8px; margin-bottom: 8px;
transition: color 0.3s ease; color: #e86a92;
}
.notification-title:hover {
color: #40a9ff !important;
text-decoration: underline;
} }
.notification-meta { .notification-meta {

Write Preview
Loading…
Cancel
Save