175 lines
5.8 KiB
Markdown
175 lines
5.8 KiB
Markdown
# GoodsOrder新增订单功能完善说明
|
||
|
||
## 功能概述
|
||
|
||
本次更新完善了GoodsOrder页面的新增订单功能，实现了基于用户选择、服务商品选择、用户地址选择和预约时间设置的订单创建流程。新增订单功能现在更加符合实际业务需求，支持服务类订单的创建。
|
||
|
||
## 主要改进内容
|
||
|
||
### 1. 新增订单对话框重构
|
||
|
||
#### 1.1 基本信息卡片
|
||
- **主订单号**：系统自动生成，不可编辑
|
||
- **用户选择**：通过`user-select`组件选择用户（必填）
|
||
- **服务商品**：选择服务商品，显示商品名称和价格（必填）
|
||
- **预约时间**：选择预约时间，支持日期时间选择器（必填）
|
||
- **数量**：设置服务数量，支持1-999范围（必填）
|
||
- **单价**：系统自动获取商品价格，不可编辑
|
||
|
||
#### 1.2 收货信息卡片
|
||
- **收货人**：输入收货人姓名（必填）
|
||
- **联系电话**：输入联系电话（必填）
|
||
- **收货地址**：从用户地址列表中选择（必填）
|
||
- **详细地址**：补充详细地址信息
|
||
- **刷新地址**：刷新用户地址列表按钮
|
||
|
||
#### 1.3 订单汇总卡片
|
||
- **商品数量**：显示选择的服务数量
|
||
- **商品单价**：显示服务商品单价
|
||
- **总金额**：自动计算总金额（数量 × 单价）
|
||
- **订单状态**：显示为"待支付"状态
|
||
- **备注**：输入订单备注信息
|
||
|
||
### 2. 表单验证规则完善
|
||
|
||
#### 2.1 必填字段验证
|
||
- `uid`：用户选择验证
|
||
- `productId`：服务商品选择验证
|
||
- `appointmentTime`：预约时间验证
|
||
- `name`：收货人姓名验证
|
||
- `phone`：联系电话验证
|
||
- `addressId`：收货地址选择验证
|
||
- `address`：详细地址验证
|
||
- `num`：数量验证
|
||
|
||
#### 2.2 验证触发方式
|
||
- 选择类字段：`change`事件触发
|
||
- 输入类字段：`blur`事件触发
|
||
|
||
### 3. 数据处理逻辑优化
|
||
|
||
#### 3.1 商品选择处理
|
||
- `handleProductSelectChange()`：处理商品选择变化
|
||
- 自动设置商品价格和名称
|
||
- 实时计算总金额
|
||
|
||
#### 3.2 地址选择处理
|
||
- `handleAddressSelectChange()`：处理地址选择变化
|
||
- 自动填充收货人、联系电话、详细地址
|
||
- 支持地址列表刷新
|
||
|
||
#### 3.3 价格计算
|
||
- `calculateTotalPrice()`：自动计算总金额
|
||
- 数量变化时实时更新总金额
|
||
|
||
### 4. 新增订单提交逻辑
|
||
|
||
#### 4.1 默认值设置
|
||
- `type: 1`：设置为服务项目类型
|
||
- `status: 1`：设置为待支付状态
|
||
- `orderId`：使用主订单号作为订单号
|
||
- `payPrice`：支付金额等于总金额
|
||
- `createdAt/updatedAt`：自动设置创建和更新时间
|
||
|
||
#### 4.2 错误处理
|
||
- 完善的错误提示和日志记录
|
||
- 提交状态管理（loading状态）
|
||
- 异常情况的用户友好提示
|
||
|
||
### 5. 用户体验优化
|
||
|
||
#### 5.1 界面布局
|
||
- 卡片式布局，信息层次清晰
|
||
- 必填字段标识（红色星号）
|
||
- 响应式设计，支持不同屏幕尺寸
|
||
|
||
#### 5.2 交互优化
|
||
- 选择用户后自动加载地址列表
|
||
- 选择商品后自动设置价格
|
||
- 选择地址后自动填充收货信息
|
||
- 数量变化实时计算总金额
|
||
|
||
#### 5.3 状态管理
|
||
- 提交按钮loading状态
|
||
- 表单验证实时反馈
|
||
- 成功/失败消息提示
|
||
|
||
## 技术实现特点
|
||
|
||
### 1. 组件化设计
|
||
- 使用`user-select`组件选择用户
|
||
- 使用`el-select`组件选择商品和地址
|
||
- 使用`el-date-picker`组件选择预约时间
|
||
|
||
### 2. 数据绑定
|
||
- 双向数据绑定（v-model）
|
||
- 计算属性自动更新
|
||
- 事件驱动数据变化
|
||
|
||
### 3. 表单验证
|
||
- Element UI表单验证规则
|
||
- 自定义验证器
|
||
- 实时验证反馈
|
||
|
||
### 4. 状态管理
|
||
- 组件内部状态管理
|
||
- 异步操作状态控制
|
||
- 错误状态处理
|
||
|
||
## 使用方法
|
||
|
||
### 1. 新增订单流程
|
||
1. 点击"新增"按钮
|
||
2. 选择用户（必填）
|
||
3. 选择服务商品（必填）
|
||
4. 设置预约时间（必填）
|
||
5. 设置服务数量（必填）
|
||
6. 选择收货地址（必填）
|
||
7. 填写收货人信息（必填）
|
||
8. 填写联系电话（必填）
|
||
9. 补充详细地址（必填）
|
||
10. 添加备注信息（可选）
|
||
11. 点击"提交订单"按钮
|
||
|
||
### 2. 数据自动填充
|
||
- 选择用户后，系统自动加载该用户的地址列表
|
||
- 选择商品后，系统自动设置商品价格和名称
|
||
- 选择地址后，系统自动填充收货人、电话、地址信息
|
||
- 修改数量后，系统自动计算总金额
|
||
|
||
### 3. 表单验证
|
||
- 所有必填字段都有红色星号标识
|
||
- 提交时自动验证所有必填字段
|
||
- 验证失败时显示具体错误信息
|
||
|
||
## 注意事项
|
||
|
||
1. **用户选择**：必须先选择用户才能加载地址列表
|
||
2. **商品选择**：选择商品后会自动设置价格，不可手动修改
|
||
3. **预约时间**：不能选择过去的日期时间
|
||
4. **数量限制**：数量范围限制在1-999之间
|
||
5. **地址关联**：地址必须与选择的用户关联
|
||
6. **订单状态**：新增订单默认为"待支付"状态
|
||
|
||
## 后续优化建议
|
||
|
||
1. **商品库存**：添加商品库存检查
|
||
2. **价格计算**：支持优惠券、会员折扣等价格计算
|
||
3. **时间冲突**：检查预约时间是否与其他订单冲突
|
||
4. **地址验证**：添加地址格式验证
|
||
5. **批量创建**：支持批量创建多个订单
|
||
6. **草稿保存**：支持保存订单草稿
|
||
7. **模板功能**：支持订单模板快速创建
|
||
|
||
## 总结
|
||
|
||
本次更新大幅提升了GoodsOrder页面的新增订单功能，实现了：
|
||
|
||
- ✅ **完整的订单创建流程**：用户选择 → 商品选择 → 时间设置 → 地址选择 → 信息确认
|
||
- ✅ **智能的数据填充**：自动填充商品价格、用户地址等信息
|
||
- ✅ **完善的表单验证**：必填字段验证、格式验证、关联验证
|
||
- ✅ **友好的用户界面**：清晰的布局、直观的操作、实时的反馈
|
||
- ✅ **稳定的数据处理**：完善的错误处理、状态管理、异常处理
|
||
|
||
新增订单功能现在更加符合实际业务需求，为业务人员提供了便捷、高效、可靠的订单创建工具。
|