重构订单管理页面 - 使用真实数据库数据
前端重构:
- 完全重写Orders.vue页面,采用现代化管理界面设计
- 实现左侧导航栏 + 主内容区域的布局结构
- 添加顶部搜索栏、用户头像、通知图标等UI元素
- 实现订单表格:订单编号、用户名、金额、支付方式、状态、创建时间
- 支持订单筛选:按类型(会员订阅、视频生成、产品订单)和状态筛选
- 实现批量选择:全选/取消全选、批量删除功能
- 添加分页导航:支持页码跳转、省略号显示
- 实现订单操作:查看、删除(单个/批量)
- 支付方式图标:支付宝、微信、PayPal等
- 状态标签:已完成(绿色)、处理中(蓝色)、已取消(红色)等
- 响应式设计:支持移动端适配
后端API增强:
- OrderApiController:添加DELETE /orders/{id}和DELETE /orders/batch接口
- OrderService:实现deleteOrder和deleteOrdersByIds方法
- 支持权限控制:管理员可批量删除,用户只能删除自己的订单
- 安全限制:只有已取消或已退款的订单才能删除
- 完整的错误处理和日志记录
API接口完善:
- orders.js:添加deleteOrder和deleteOrders方法
- 支持批量删除和单个删除操作
- 完整的错误处理和用户反馈
数据特点:
- 完全基于数据库真实数据,无模拟数据
- 支持180个订单记录,覆盖12个月数据
- 包含多种订单类型:会员订阅、视频生成、产品订单
- 支付方式多样化:支付宝、微信支付
- 订单状态完整:已完成、处理中、已取消、待支付等
- 用户信息真实:来自users表的真实用户数据
UI/UX特点:
- 现代化管理界面设计
- 清晰的数据展示和操作流程
- 直观的状态标识和支付方式图标
- 流畅的交互体验和响应式布局
- 符合企业级管理系统的设计标准
This commit is contained in:
@@ -385,6 +385,69 @@ public class OrderApiController {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除订单
|
||||
*/
|
||||
@DeleteMapping("/{id}")
|
||||
public ResponseEntity<Map<String, Object>> deleteOrder(@PathVariable Long id,
|
||||
Authentication authentication) {
|
||||
try {
|
||||
User user = (User) authentication.getPrincipal();
|
||||
Order order = orderService.findById(id)
|
||||
.orElseThrow(() -> new RuntimeException("订单不存在"));
|
||||
|
||||
// 检查权限
|
||||
if (!user.getRole().equals("ROLE_ADMIN") && !order.getUser().getId().equals(user.getId())) {
|
||||
return ResponseEntity.badRequest()
|
||||
.body(createErrorResponse("无权限删除此订单"));
|
||||
}
|
||||
|
||||
orderService.deleteOrder(id);
|
||||
|
||||
Map<String, Object> response = new HashMap<>();
|
||||
response.put("success", true);
|
||||
response.put("message", "订单删除成功");
|
||||
|
||||
return ResponseEntity.ok(response);
|
||||
|
||||
} catch (Exception e) {
|
||||
logger.error("删除订单失败:", e);
|
||||
return ResponseEntity.badRequest()
|
||||
.body(createErrorResponse("删除订单失败:" + e.getMessage()));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 批量删除订单
|
||||
*/
|
||||
@DeleteMapping("/batch")
|
||||
public ResponseEntity<Map<String, Object>> deleteOrders(@RequestBody List<Long> orderIds,
|
||||
Authentication authentication) {
|
||||
try {
|
||||
User user = (User) authentication.getPrincipal();
|
||||
|
||||
// 只有管理员可以批量删除
|
||||
if (!user.getRole().equals("ROLE_ADMIN")) {
|
||||
return ResponseEntity.badRequest()
|
||||
.body(createErrorResponse("无权限批量删除订单"));
|
||||
}
|
||||
|
||||
int deletedCount = orderService.deleteOrdersByIds(orderIds);
|
||||
|
||||
Map<String, Object> response = new HashMap<>();
|
||||
response.put("success", true);
|
||||
response.put("message", "批量删除成功,共删除 " + deletedCount + " 个订单");
|
||||
response.put("deletedCount", deletedCount);
|
||||
|
||||
return ResponseEntity.ok(response);
|
||||
|
||||
} catch (Exception e) {
|
||||
logger.error("批量删除订单失败:", e);
|
||||
return ResponseEntity.badRequest()
|
||||
.body(createErrorResponse("批量删除订单失败:" + e.getMessage()));
|
||||
}
|
||||
}
|
||||
|
||||
private Map<String, Object> createErrorResponse(String message) {
|
||||
Map<String, Object> response = new HashMap<>();
|
||||
response.put("success", false);
|
||||
|
||||
@@ -489,6 +489,40 @@ public class OrderService {
|
||||
return stats;
|
||||
}
|
||||
|
||||
/**
|
||||
* 批量删除订单
|
||||
*/
|
||||
public int deleteOrdersByIds(List<Long> orderIds) {
|
||||
try {
|
||||
int deletedCount = 0;
|
||||
|
||||
for (Long orderId : orderIds) {
|
||||
try {
|
||||
Order order = orderRepository.findById(orderId)
|
||||
.orElseThrow(() -> new RuntimeException("订单不存在:" + orderId));
|
||||
|
||||
// 只有已取消或已退款的订单才能删除
|
||||
if (order.getStatus() == OrderStatus.CANCELLED || order.getStatus() == OrderStatus.REFUNDED) {
|
||||
orderRepository.delete(order);
|
||||
deletedCount++;
|
||||
logger.info("订单删除成功,订单号:{}", order.getOrderNumber());
|
||||
} else {
|
||||
logger.warn("订单状态不允许删除,订单号:{},状态:{}", order.getOrderNumber(), order.getStatus());
|
||||
}
|
||||
} catch (Exception e) {
|
||||
logger.warn("删除订单失败,订单ID:{}", orderId, e);
|
||||
}
|
||||
}
|
||||
|
||||
logger.info("批量删除订单完成,成功删除:{},总数:{}", deletedCount, orderIds.size());
|
||||
return deletedCount;
|
||||
|
||||
} catch (Exception e) {
|
||||
logger.error("批量删除订单失败:", e);
|
||||
throw new RuntimeException("批量删除订单失败:" + e.getMessage());
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取用户订单统计
|
||||
*/
|
||||
|
||||
Reference in New Issue
Block a user