7.8 KiB
7.8 KiB
后台订单显示优化说明
📋 优化内容
新增显示字段
- ✅ 购买者昵称
- ✅ 购买的书名(《一场Soul的创业实验》)
- ✅ 购买的章节(第X章 第X节)
- ✅ 商品类型标签
🔧 修改的文件
1. /app/api/orders/route.ts - 订单API
修改内容:
- JOIN
users表获取购买者信息 - 返回
userNickname和userAvatar字段
新增字段:
{
userNickname: string | null, // 购买者昵称
userAvatar: string | null // 购买者头像
}
SQL 查询:
SELECT o.*, u.nickname as user_nickname, u.avatar as user_avatar
FROM orders o
LEFT JOIN users u ON o.user_id = u.id
ORDER BY o.created_at DESC
2. /app/admin/page.tsx - 管理后台首页
优化内容:
- 最近订单卡片显示购买者昵称
- 显示完整的书名和章节信息
- 优化UI布局,增加头像展示
- 改进时间显示格式
显示效果:
┌─────────────────────────────────────────────┐
│ [头像] 张三 · 《一场Soul的创业实验》 │
│ 章节购买 | 02-04 14:30 +¥0.95 │
│ 推荐: ABC123 │
└─────────────────────────────────────────────┘
核心函数:
// 格式化商品信息
const formatOrderProduct = (p: any) => {
// 解析 description 字段,返回:
// { title: "第1章 第2节", subtitle: "《一场Soul的创业实验》" }
}
3. /app/admin/orders/page.tsx - 订单管理页面
优化内容:
- 从API读取订单(包含购买者昵称)
- 显示完整的书名和章节
- 改进搜索功能(支持昵称、手机号、商品名搜索)
- 支持订单号搜索
- 优化状态筛选(兼容 'paid' 和 'completed' 状态)
表格列:
| 订单号 | 用户 | 商品 | 金额 | 支付方式 | 状态 | 分销佣金 | 下单时间 |
|---|---|---|---|---|---|---|---|
| MP20260204... | 张三 138xxxx |
第1章 第2节 《一场Soul...》 |
¥0.95 | 微信支付 | 已完成 | ¥0.86 | 2026-02-04 14:30 |
核心函数:
// 格式化商品信息
const formatProduct = (order: any) => {
return {
name: "第1章 第2节",
type: "《一场Soul的创业实验》"
}
}
📊 商品信息解析逻辑
输入数据(orders 表)
{
productType: "section", // 商品类型
productId: "1-2", // 章节ID
description: "章节购买-1-2", // 商品描述
amount: 0.95 // 金额
}
解析规则
1. 章节购买
输入:
{
productType: "section",
productId: "1-2",
description: "章节购买-1-2"
}
输出:
{
title: "第1章 第2节",
subtitle: "《一场Soul的创业实验》"
}
2. 整本购买
输入:
{
productType: "fullbook",
description: "《一场Soul的创业实验》全书"
}
输出:
{
title: "《一场Soul的创业实验》",
subtitle: "全书购买"
}
3. 找伙伴
输入:
{
productType: "match",
description: "找伙伴匹配"
}
输出:
{
title: "找伙伴匹配",
subtitle: "功能服务"
}
🎨 UI 改进
主仪表盘 - 最近订单
旧版:
单章 1-2
2026-02-04 14:30:15
邀请码: ABC123
+¥0.95
微信支付
新版:
[头像] 张三 · 《一场Soul的创业实验》
章节购买 | 02-04 14:30 +¥0.95
推荐: ABC123 微信
优势:
- ✅ 一目了然看到购买者
- ✅ 清晰显示书名和章节
- ✅ 更紧凑的布局
- ✅ 支持hover高亮
订单管理页面
改进点:
- 用户列 - 显示昵称和手机号
- 商品列 - 显示书名和章节,带类型标签
- 搜索 - 支持昵称、手机号、商品名、订单号搜索
- 筛选 - 支持多种订单状态筛选
- 兼容性 - 兼容 'paid' 和 'completed' 两种状态
🔍 搜索功能增强
支持的搜索维度
-
用户维度
- 购买者昵称
- 购买者手机号
-
订单维度
- 订单号(orderSn)
- 订单ID
-
商品维度
- 商品名称(书名、章节)
- 商品描述
示例
// 搜索 "张三" → 匹配用户昵称
// 搜索 "138" → 匹配手机号
// 搜索 "第1章" → 匹配商品名称
// 搜索 "MP20260204" → 匹配订单号
✅ 测试验证
测试场景
1. 主仪表盘 - 最近订单
- 显示购买者昵称
- 显示完整书名
- 显示章节信息
- 显示推荐人
- 头像正常显示
2. 订单管理页面
- 用户列显示昵称和手机号
- 商品列显示书名和章节
- 搜索功能正常
- 筛选功能正常
- 订单状态正确
3. API 测试
# 测试订单API
curl http://localhost:3000/api/orders | jq '.orders[0] | {userNickname, description, productType}'
# 预期输出:
{
"userNickname": "张三",
"description": "章节购买-1-2",
"productType": "section"
}
📝 数据库查询说明
原查询(无购买者信息)
SELECT * FROM orders ORDER BY created_at DESC
新查询(JOIN 用户信息)
SELECT
o.*,
u.nickname as user_nickname,
u.avatar as user_avatar
FROM orders o
LEFT JOIN users u ON o.user_id = u.id
ORDER BY o.created_at DESC
优势:
- 一次查询获取所有必要信息
- 避免前端多次查询
- 提升页面加载速度
🚀 部署说明
无需数据库迁移
- ✅ 只是修改查询逻辑,不改表结构
- ✅ 使用 LEFT JOIN,兼容旧数据
部署步骤
# 1. 构建
pnpm build
# 2. 部署
python devlop.py
# 3. 重启服务
# 在宝塔面板重启 PM2
📌 注意事项
1. 数据兼容性
- 如果
user_id对应的用户不存在,显示"匿名用户" - 如果
description为空,使用 fallback 显示
2. 性能考虑
- LEFT JOIN 不会影响性能(users 表很小)
- 前端只展示最近 5 条订单,查询很快
3. 未来扩展
- 可以添加更多商品类型
- 可以添加订单详情弹窗
- 可以支持导出带购买者信息的Excel
✅ 完成清单
- ✅ 修改
/api/ordersAPI(JOIN users) - ✅ 优化主仪表盘"最近订单"卡片
- ✅ 优化订单管理页面表格
- ✅ 增强搜索功能
- ✅ 改进UI布局
- ✅ 创建文档
📸 效果预览
主仪表盘
┌─ 最近订单 ──────────────────────────────┐
│ │
│ [Z] 张三 · 《一场Soul的创业实验》 │
│ 章节购买 | 02-04 14:30 +¥0.95 │
│ 推荐: ABC123 │
│ │
│ [L] 李四 · 找伙伴匹配 +¥1.00 │
│ 功能服务 | 02-04 13:15 │
│ │
└──────────────────────────────────────────┘
订单管理页面
订单号 | 用户 | 商品 | 金额 | 状态
----------------|---------------|---------------------|--------|------
MP20260204... | 张三 | 第1章 第2节 | ¥0.95 | 已完成
| 138xxxx | 《一场Soul...》 | |
优化完成!后台管理端现在可以清晰显示购买者、书名和章节信息了。