综述: 更新公告管理、商品管理和订单分析页面
- 公告管理页面: - 移除启用时间字段和相关功能 - 添加序号字段,支持公告排序显示 - 更新公告表格数据展示 - 修改添加公告表单验证逻辑 - 商品管理页面: - 移除商品状态选择功能 - 订单分析页面: - 为统计数据添加可点击样式 - 增加主要统计指标的交互能力
This commit is contained in:
		
							parent
							
								
									ce63b00522
								
							
						
					
					
						commit
						2c51b65796
					
				|  | @ -503,17 +503,15 @@ | ||||||
|                         <th>序号</th> |                         <th>序号</th> | ||||||
|                         <th>公告通知</th> |                         <th>公告通知</th> | ||||||
|                         <th>位置</th> |                         <th>位置</th> | ||||||
|                         <th>启用时间</th> |  | ||||||
|                         <th>状态</th> |                         <th>状态</th> | ||||||
|                         <th>操作</th> |                         <th>操作</th> | ||||||
|                     </tr> |                     </tr> | ||||||
|                 </thead> |                 </thead> | ||||||
|                 <tbody> |                 <tbody> | ||||||
|                     <tr> |                     <tr> | ||||||
|                         <td>1</td> |                         <td>50</td> | ||||||
|                         <td>2312312</td> |                         <td>春节菜市场关闭您</td> | ||||||
|                         <td>菜市场详情页</td> |                         <td>菜市场详情页</td> | ||||||
|                         <td>2024-03-20 09:00</td> |  | ||||||
|                         <td><span class="status-badge status-enabled">已启用</span></td> |                         <td><span class="status-badge status-enabled">已启用</span></td> | ||||||
|                         <td> |                         <td> | ||||||
|                             <button class="btn btn-primary" style="margin-right: 5px;">编辑</button> |                             <button class="btn btn-primary" style="margin-right: 5px;">编辑</button> | ||||||
|  | @ -521,10 +519,9 @@ | ||||||
|                         </td> |                         </td> | ||||||
|                     </tr> |                     </tr> | ||||||
|                     <tr> |                     <tr> | ||||||
|                         <td>2</td> |                         <td>10</td> | ||||||
|                         <td>春节菜市场关闭您</td> |                         <td>2312312</td> | ||||||
|                         <td>菜市场详情页</td> |                         <td>菜市场详情页</td> | ||||||
|                         <td>2024-03-25 08:00</td> |  | ||||||
|                         <td><span class="status-badge status-enabled">已启用</span></td> |                         <td><span class="status-badge status-enabled">已启用</span></td> | ||||||
|                         <td> |                         <td> | ||||||
|                             <button class="btn btn-primary" style="margin-right: 5px;">编辑</button> |                             <button class="btn btn-primary" style="margin-right: 5px;">编辑</button> | ||||||
|  | @ -558,6 +555,25 @@ | ||||||
|             </div> |             </div> | ||||||
|             <div class="modal-body"> |             <div class="modal-body"> | ||||||
|                 <form id="announcement-form"> |                 <form id="announcement-form"> | ||||||
|  |                     <div class="modal-form-group"> | ||||||
|  |                         <label> | ||||||
|  |                             <span class="required">*</span>序号 | ||||||
|  |                         </label> | ||||||
|  |                         <input | ||||||
|  |                             type="number" | ||||||
|  |                             class="form-control" | ||||||
|  |                             id="announcement-order" | ||||||
|  |                             placeholder="请输入序号" | ||||||
|  |                             min="0" | ||||||
|  |                             step="1" | ||||||
|  |                             style="width: 100%;" | ||||||
|  |                             required | ||||||
|  |                         /> | ||||||
|  |                         <small style="color: #666; font-size: 12px; margin-top: 5px; display: block;"> | ||||||
|  |                             序号越大越靠前显示,建议设置为10、20、30等便于后续插入 | ||||||
|  |                         </small> | ||||||
|  |                     </div> | ||||||
|  | 
 | ||||||
|                     <div class="modal-form-group"> |                     <div class="modal-form-group"> | ||||||
|                         <label> |                         <label> | ||||||
|                             <span class="required">*</span>公告内容 |                             <span class="required">*</span>公告内容 | ||||||
|  | @ -582,18 +598,6 @@ | ||||||
|                         </div> |                         </div> | ||||||
|                     </div> |                     </div> | ||||||
| 
 | 
 | ||||||
|                     <div class="modal-form-group"> |  | ||||||
|                         <label> |  | ||||||
|                             <span class="required">*</span>启用时间 |  | ||||||
|                         </label> |  | ||||||
|                         <input |  | ||||||
|                             type="datetime-local" |  | ||||||
|                             class="form-control" |  | ||||||
|                             id="enable-time" |  | ||||||
|                             style="width: 100%;" |  | ||||||
|                             required |  | ||||||
|                         /> |  | ||||||
|                     </div> |  | ||||||
| 
 | 
 | ||||||
|                     <div class="modal-form-group"> |                     <div class="modal-form-group"> | ||||||
|                         <label> |                         <label> | ||||||
|  | @ -628,10 +632,6 @@ | ||||||
|             document.getElementById('announcement-form').reset(); |             document.getElementById('announcement-form').reset(); | ||||||
|             document.getElementById('selected-app').textContent = '用户'; |             document.getElementById('selected-app').textContent = '用户'; | ||||||
|             updateDropdownSelection('用户'); |             updateDropdownSelection('用户'); | ||||||
|             // 设置默认启用时间为当前时间 |  | ||||||
|             const now = new Date(); |  | ||||||
|             const offsetTime = new Date(now.getTime() - now.getTimezoneOffset() * 60000); |  | ||||||
|             document.getElementById('enable-time').value = offsetTime.toISOString().slice(0, 16); |  | ||||||
|         } |         } | ||||||
| 
 | 
 | ||||||
|         function closeModal() { |         function closeModal() { | ||||||
|  | @ -656,32 +656,30 @@ | ||||||
| 
 | 
 | ||||||
|         // 确认添加 |         // 确认添加 | ||||||
|         function confirmAdd() { |         function confirmAdd() { | ||||||
|  |             const order = document.getElementById('announcement-order').value.trim(); | ||||||
|             const content = document.getElementById('announcement-content').value.trim(); |             const content = document.getElementById('announcement-content').value.trim(); | ||||||
|             const isEnabled = document.getElementById('status-switch').checked; |             const isEnabled = document.getElementById('status-switch').checked; | ||||||
|             const app = document.getElementById('selected-app').textContent; |             const app = document.getElementById('selected-app').textContent; | ||||||
|             const enableTime = document.getElementById('enable-time').value; | 
 | ||||||
|  |             if (!order) { | ||||||
|  |                 alert('请输入序号'); | ||||||
|  |                 return; | ||||||
|  |             } | ||||||
| 
 | 
 | ||||||
|             if (!content) { |             if (!content) { | ||||||
|                 alert('请输入公告内容'); |                 alert('请输入公告内容'); | ||||||
|                 return; |                 return; | ||||||
|             } |             } | ||||||
| 
 | 
 | ||||||
|             if (!enableTime) { |             // 验证序号是否为非负整数 | ||||||
|                 alert('请选择启用时间'); |             const orderNum = parseInt(order); | ||||||
|  |             if (isNaN(orderNum) || orderNum < 0) { | ||||||
|  |                 alert('序号必须是非负整数'); | ||||||
|                 return; |                 return; | ||||||
|             } |             } | ||||||
| 
 | 
 | ||||||
|             // 格式化显示启用时间 |  | ||||||
|             const formattedTime = new Date(enableTime).toLocaleString('zh-CN', { |  | ||||||
|                 year: 'numeric', |  | ||||||
|                 month: '2-digit', |  | ||||||
|                 day: '2-digit', |  | ||||||
|                 hour: '2-digit', |  | ||||||
|                 minute: '2-digit' |  | ||||||
|             }); |  | ||||||
| 
 |  | ||||||
|             // 模拟添加成功 |             // 模拟添加成功 | ||||||
|             alert(`公告添加成功!\n内容:${content}\n状态:${isEnabled ? '启用' : '禁用'}\n应用:${app}\n启用时间:${formattedTime}`); |             alert(`公告添加成功!\n序号:${order}\n内容:${content}\n状态:${isEnabled ? '启用' : '禁用'}\n应用:${app}`); | ||||||
|             closeModal(); |             closeModal(); | ||||||
|         } |         } | ||||||
| 
 | 
 | ||||||
|  |  | ||||||
|  | @ -801,15 +801,6 @@ | ||||||
|                             <input type="file" id="productIntroFileInput" accept="video/*,image/*" multiple style="display: none;"> |                             <input type="file" id="productIntroFileInput" accept="video/*,image/*" multiple style="display: none;"> | ||||||
|                         </div> |                         </div> | ||||||
| 
 | 
 | ||||||
|                         <div class="form-group"> |  | ||||||
|                             <label class="form-label">商品状态</label> |  | ||||||
|                             <div class="select-wrapper"> |  | ||||||
|                                 <select class="form-select" id="status"> |  | ||||||
|                                     <option value="warehouse">仓库中</option> |  | ||||||
|                                     <option value="online">立即上架</option> |  | ||||||
|                                 </select> |  | ||||||
|                             </div> |  | ||||||
|                         </div> |  | ||||||
| 
 | 
 | ||||||
| 
 | 
 | ||||||
|                         <div class="form-group"> |                         <div class="form-group"> | ||||||
|  |  | ||||||
|  | @ -159,6 +159,17 @@ | ||||||
|             line-height: 1.2; |             line-height: 1.2; | ||||||
|         } |         } | ||||||
| 
 | 
 | ||||||
|  |         .stat-value.clickable { | ||||||
|  |             color: #1890ff; | ||||||
|  |             text-decoration: underline; | ||||||
|  |             cursor: pointer; | ||||||
|  |             transition: color 0.3s ease; | ||||||
|  |         } | ||||||
|  | 
 | ||||||
|  |         .stat-value.clickable:hover { | ||||||
|  |             color: #40a9ff; | ||||||
|  |         } | ||||||
|  | 
 | ||||||
|         .stat-percentage { |         .stat-percentage { | ||||||
|             color: #666; |             color: #666; | ||||||
|             font-size: 16px; |             font-size: 16px; | ||||||
|  | @ -240,15 +251,15 @@ | ||||||
|             <div class="stats-grid"> |             <div class="stats-grid"> | ||||||
|                 <div class="stat-card"> |                 <div class="stat-card"> | ||||||
|                     <div class="stat-label">下单订单数量</div> |                     <div class="stat-label">下单订单数量</div> | ||||||
|                     <div class="stat-value" id="totalOrders">0</div> |                     <div class="stat-value clickable" id="totalOrders">0</div> | ||||||
|                 </div> |                 </div> | ||||||
|                 <div class="stat-card"> |                 <div class="stat-card"> | ||||||
|                     <div class="stat-label">支付订单数量</div> |                     <div class="stat-label">支付订单数量</div> | ||||||
|                     <div class="stat-value" id="paidOrders">0</div> |                     <div class="stat-value clickable" id="paidOrders">0</div> | ||||||
|                 </div> |                 </div> | ||||||
|                 <div class="stat-card"> |                 <div class="stat-card"> | ||||||
|                     <div class="stat-label">有效订单数量</div> |                     <div class="stat-label">有效订单数量</div> | ||||||
|                     <div class="stat-value" id="validOrders">0</div> |                     <div class="stat-value clickable" id="validOrders">0</div> | ||||||
|                 </div> |                 </div> | ||||||
|                 <div class="stat-card"> |                 <div class="stat-card"> | ||||||
|                     <div class="stat-label">有效订单率</div> |                     <div class="stat-label">有效订单率</div> | ||||||
|  | @ -268,7 +279,7 @@ | ||||||
|                 </div> |                 </div> | ||||||
|                 <div class="stat-card"> |                 <div class="stat-card"> | ||||||
|                     <div class="stat-label">售后订单数量</div> |                     <div class="stat-label">售后订单数量</div> | ||||||
|                     <div class="stat-value" id="afterSalesOrders">0</div> |                     <div class="stat-value clickable" id="afterSalesOrders">0</div> | ||||||
|                 </div> |                 </div> | ||||||
|                 <div class="stat-card"> |                 <div class="stat-card"> | ||||||
|                     <div class="stat-label">售后订单率(%)</div> |                     <div class="stat-label">售后订单率(%)</div> | ||||||
|  |  | ||||||
		Loading…
	
		Reference in New Issue