# 品项字段优化说明

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

## 字段结构

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

## 功能特性

### 1. 自动计算功能
- **单价计算**: 总价 ÷ 数量 = 单价
- **总价计算**: 单价 × 数量 = 总价
- **实时更新**: 修改总价或数量时自动重新计算单价

### 2. 类型选择
- **购买**: 正常购买类型
- **体验**: 体验类型
- **赠送**: 赠送类型

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

## 方法说明

### 数据更新方法
```javascript
// 更新品项总价
updatePxActualPrice(index, value)

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

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

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

### 类型选择方法
```javascript
// 打开类型选择器
openSourceTypePicker(index)

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

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

## 样式优化

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

### 响应式支持
- 在小屏幕设备上，所有行都会垂直排列
- 保持良好的移动端体验

## 使用示例

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

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

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

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

## 注意事项

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