Some checks failed
Build docker and publish / linux (1.24.5) (push) Failing after 39s
refactor(service): 修改banner和guild删除逻辑为软删除 fix(service): 修复删除操作使用软删除而非物理删除 build: 添加SQLite测试仓库实现 docs: 新增奖励管理字段拆分和批量抽奖UI改造文档 ci: 更新CI忽略文件 style: 清理无用资源文件
3.8 KiB
3.8 KiB
奖励管理字段拆分设计方案
架构设计
整体架构图
graph TD
A[现有系统] --> B[字段拆分模块]
B --> C[订单详情页面]
B --> D[奖励管理页面]
C --> E[商品列]
C --> F[价格列]
D --> G[商品选择器]
D --> H[价格显示列]
E --> I[商品数据绑定]
F --> J[价格数据绑定]
G --> K[商品选择逻辑]
H --> L[价格计算逻辑]
模块设计
1. 订单详情模块
位置: /Users/win/code2025/bindbox_game/web/admin/src/views/orders/list/index.vue
修改点:
- 第97行:将
<el-table-column prop="title" label="商品" />拆分为两列 - 新增商品列:仅显示商品标题
- 新增单价列:显示商品单价(通过total_amount/quantity计算)
数据结构:
interface OrderItem {
title: string; // 商品标题
quantity: number; // 数量
total_amount: number; // 总金额(分)
unit_price: number; // 单价(计算字段)
}
2. 奖励管理模块
位置: /Users/win/code2025/bindbox_game/web/admin/src/views/activity/rewards/index.vue
修改点:
- 第37行:修改模板显示逻辑,分离商品和价格显示
- 第117-121行:修改商品选择器,分离商品名称和价格显示
- 第203行:修改表格列定义,添加独立价格列
组件结构:
<!-- 商品选择器 -->
<ElSelect v-model.number="row.product_id" filterable placeholder="选择商品">
<ElOption v-for="p in productOptions" :key="p.id" :value="p.id" :label="p.name">
<div class="flex justify-between">
<span>{{ p.name }}</span>
<span class="text-gray-500">¥{{ formatPrice(p.price) }}</span>
</div>
</ElOption>
</ElSelect>
<!-- 表格显示 -->
<el-table-column prop="product_name" label="商品" />
<el-table-column prop="product_price" label="单价" />
数据流向图
sequenceDiagram
participant UI as 前端界面
participant API as API接口
participant Cache as 价格缓存
participant DB as 数据库
UI->>API: 请求商品列表
API->>DB: 查询商品数据
DB-->>API: 返回商品信息
API-->>UI: 返回商品列表(含价格)
UI->>Cache: 缓存价格信息
UI->>UI: 渲染商品选择器
UI->>Cache: 获取商品价格
UI->>UI: 显示独立的价格列
接口契约定义
商品数据接口
interface Product {
id: number;
name: string;
price: number; // 价格(分)
// 其他商品属性...
}
interface Reward {
id: number;
name: string;
product_id: number;
product_name?: string; // 商品名称(计算字段)
product_price?: number; // 商品价格(计算字段)
// 其他奖励属性...
}
异常处理策略
- 价格计算异常: 使用默认值0,记录警告日志
- 商品数据缺失: 显示"商品已删除"提示
- 缓存失效: 重新请求商品数据,更新缓存
核心组件设计
1. 价格计算工具函数
// 价格格式化工具
export function formatPrice(price: number): string {
return `¥${(price / 100).toFixed(2)}`;
}
// 单价计算
export function calculateUnitPrice(totalAmount: number, quantity: number): number {
if (quantity <= 0) return 0;
return totalAmount / quantity;
}
2. 商品选择组件
interface ProductSelectProps {
modelValue: number;
products: Product[];
placeholder?: string;
}
interface ProductSelectEmits {
(e: 'update:modelValue', value: number): void;
}
3. 价格显示组件
interface PriceDisplayProps {
price: number; // 分
currency?: string;
precision?: number;
}
依赖关系
- Element Plus UI组件库
- 项目现有的价格格式化工具
- 商品数据缓存机制
- TypeScript类型系统