品项字段优化说明

概述

已成功按照提供的字段规范优化了品项相关的数据结构和方法，支持更完善的品项管理功能。

字段结构

新的品项字段

{
    px: '', // 品项id
    pxmc: '', // 品项名称
    pxjg: 0, // 单价通过总价除以数量自动计算
    actualPrice: 0, // 总价
    projectNumber: 1, // 数量
    sourceType: '', // 类型选择（购买，体验，赠送）
    jksList: [], // 健康师列表
    kjbList: [] // 科技部人员列表
}

功能特性

1. 自动计算功能

• 单价计算: 总价 ÷ 数量 = 单价
• 总价计算: 单价 × 数量 = 总价
• 实时更新: 修改总价或数量时自动重新计算单价

2. 类型选择

• 购买: 正常购买类型
• 体验: 体验类型
• 赠送: 赠送类型

3. 界面布局

• 第一行: 品项选择 + 总价输入 + 删除按钮
• 第二行: 数量输入 + 类型选择
• 第三行: 单价显示
• 第四行: 健康师和科技部人员选择
• 第五行: 已选择的人员列表

方法说明

数据更新方法

// 更新品项总价
updatePxActualPrice(index, value)

// 更新品项数量
updatePxProjectNumber(index, value)

// 计算品项单价（总价除以数量）
calculatePxUnitPrice(index)

// 计算品项总价（单价乘以数量）
calculatePxTotalPrice(index)

类型选择方法

// 打开类型选择器
openSourceTypePicker(index)

// 关闭类型选择器
closeSourceTypePicker()

// 确认类型选择
onSourceTypeConfirm(e)

样式优化

新增样式类

• .px-type-select: 类型选择器样式
• .px-unit-price: 单价显示区域样式
• .price-label: 价格标签样式
• .price-value: 价格数值样式
• .px-row-fifth: 第五行布局样式

响应式支持

• 在小屏幕设备上，所有行都会垂直排列
• 保持良好的移动端体验

使用示例

添加品项

// 添加新的品项行
this.addPxRow();

选择品项

// 选择品项后会自动设置ID、名称和单价
// 并自动计算总价

修改价格

// 修改总价会自动计算单价
this.updatePxActualPrice(0, '1000');

// 修改数量会自动计算单价
this.updatePxProjectNumber(0, '5');

注意事项

1. 数据验证: 数量必须大于0，否则默认为1
2. 价格计算: 所有价格计算都保留2位小数
3. 类型必选: 建议用户选择品项类型
4. 实时更新: 价格和数量修改会实时触发计算
5. 兼容性: 保持了原有的健康师和科技部人员选择功能