bindbox-game/docs/奖励管理字段拆分/DESIGN_奖励管理字段拆分.md
邹方成 2a89a1ab9d
Some checks failed
Build docker and publish / linux (1.24.5) (push) Failing after 39s
feat(admin): 更新前端资源文件及修复相关功能
refactor(service): 修改banner和guild删除逻辑为软删除
fix(service): 修复删除操作使用软删除而非物理删除

build: 添加SQLite测试仓库实现
docs: 新增奖励管理字段拆分和批量抽奖UI改造文档

ci: 更新CI忽略文件
style: 清理无用资源文件
2025-11-19 01:35:55 +08:00

3.8 KiB
Raw Blame History

奖励管理字段拆分设计方案

架构设计

整体架构图

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; // 商品价格(计算字段)
  // 其他奖励属性...
}

异常处理策略

  1. 价格计算异常: 使用默认值0记录警告日志
  2. 商品数据缺失: 显示"商品已删除"提示
  3. 缓存失效: 重新请求商品数据,更新缓存

核心组件设计

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类型系统