diff --git a/src/main/java/com/example/web/mapper/SupplyUsersMapper.java b/src/main/java/com/example/web/mapper/SupplyUsersMapper.java index 2680b61..c39ce85 100644 --- a/src/main/java/com/example/web/mapper/SupplyUsersMapper.java +++ b/src/main/java/com/example/web/mapper/SupplyUsersMapper.java @@ -265,6 +265,6 @@ public interface SupplyUsersMapper { 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); } \ No newline at end of file diff --git a/src/main/java/com/example/web/mapper/UsersMapper.java b/src/main/java/com/example/web/mapper/UsersMapper.java index 6924f2f..d22c6a2 100644 --- a/src/main/java/com/example/web/mapper/UsersMapper.java +++ b/src/main/java/com/example/web/mapper/UsersMapper.java @@ -271,6 +271,6 @@ public interface UsersMapper { List getUserBasicInfoByUserIds(@Param("userIds") List 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); } \ No newline at end of file diff --git a/src/main/resources/static/mainapp-sells.html b/src/main/resources/static/mainapp-sells.html index 53588f9..913271e 100644 --- a/src/main/resources/static/mainapp-sells.html +++ b/src/main/resources/static/mainapp-sells.html @@ -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 = '
'; banoldCustomers.forEach(customer => { const customerName = customer.company || customer.companyName || '未知'; + // 为banold状态（未读）添加new类 + const notificationClass = customer.notice === 'banold' ? 'notification-item new' : 'notification-item'; contentHTML += ` -
+
-
+
${customerName}
客户ID: ${customer.id} ${customer.phoneNumber || '无电话'}
-
- - 该客户已满足过期条件 -
${new Date().toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' })}
- +
未读
@@ -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 { diff --git a/src/main/resources/static/mainapp-supplys.html b/src/main/resources/static/mainapp-supplys.html index 8289f84..52bd4dd 100644 --- a/src/main/resources/static/mainapp-supplys.html +++ b/src/main/resources/static/mainapp-supplys.html @@ -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); // 保存所有公海客户数据到缓存中，用于通知弹窗 @@ -4439,7 +4462,7 @@ const data = result.data || {}; const customersArray = Array.isArray(data) ? data : Object.values(data); - // 统计notice为banold的客户数量并更新通知铃铛 + // 统计notice为old的客户数量并更新通知铃铛 this.updateNotificationStatus(customersArray); // 根据登录信息过滤公海池数据 @@ -4530,29 +4553,25 @@ let contentHTML = '
'; banoldCustomers.forEach(customer => { const customerName = customer.company || customer.companyName || '未知'; + // 为banold状态（未读）添加new类 + const notificationClass = customer.notice === 'banold' ? 'notification-item new' : 'notification-item'; contentHTML += ` -
+
-
+
${customerName}
客户ID: ${customer.id} ${customer.phoneNumber || '无电话'}
-
- - 该客户已满足过期条件 -
${new Date().toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' })}
- +
未读
@@ -4598,7 +4617,7 @@ const dataMap = result.data || {}; let allCustomers = Object.values(dataMap); - // 统计notice为banold的客户数量并更新通知铃铛 + // 统计notice为old的客户数量并更新通知铃铛 this.updateNotificationStatus(allCustomers); // 根据登录信息和等级过滤数据 @@ -11521,7 +11540,7 @@ if (fromNotification) { console.log('📋 从通知弹窗查看客户详情，更新notice状态为old'); // 发送请求更新notice状态 - fetch(`/pool/customers/${customerId}/notice`, { + fetch(`/DL/supply/pool/customers/${customerId}/notice`, { method: 'PUT', headers: { 'Content-Type': 'application/json', @@ -14238,19 +14257,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; @@ -14276,12 +14311,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 {