hdApp 订单配送功能实现说明

功能概述

在 hdApp 项目中成功添加了同城配送功能，配送按钮与发货、打印按钮并列显示，点击后跳转到专门的配送信息页面，提供更好的表单展示和操作体验。

实现的功能特性

1. 配送按钮

位置: 与发货、打印按钮并列显示在订单列表的操作区域
样式: 使用项目统一的 .admin-button-com middle 样式
状态切换:
- 未配送时: 显示蓝色"配送"按钮
- 已配送时: 显示红色"取消配送"按钮

2. 配送信息页面

页面路径: /admin/express/create
导航方式: 从订单列表点击配送按钮跳转

表单字段:

{
packageNum: 1,        // 包裹数量
weight: '',           // 重量(kg) - 必填
length: 100,          // 长度(cm)
width: 70,            // 宽度(cm)  
height: 50,           // 高度(cm)
receiverName: '',     // 收货人姓名
receiverMobile: '',   // 收货人手机
receiverCity: '',     // 收货城市
receiverAddress: '',  // 收货地址
receiverFloor: '',    // 收货楼层/门牌号
note: ''              // 配送备注
}

3. 数据自动填充

从订单信息 info 对象中自动提取并填充以下字段：

info.receiveUserName → receiverName
info.receiveMobile → receiverMobile
info.receiveCity → receiverCity
info.receiveAddress → receiverAddress
info.receiveFloor → receiverFloor

4. API 接口集成

查询运费: getStoreFee(data) - 用于查询配送费用
创建配送订单: createExpressOrder(data) - 创建配送订单
取消配送订单: cancelExpressOrder(data) - 取消配送订单

5. 用户交互流程

用户在订单列表中点击"配送"按钮
跳转到配送信息页面，自动获取订单详情并填充收货信息
用户填写/确认包裹信息（重量必填）
点击"查询运费"按钮获取配送费用
确认信息后点击"提交配送"
成功后自动返回订单列表，按钮状态变为"取消配送"

6. 验证与错误处理

必填字段验证: 重量、收货人姓名、手机号、地址
数据格式验证: 重量必须大于0
流程验证: 必须先查询运费才能提交
确认操作: 提交和取消都需要用户确认
友好提示: 所有操作都有相应的成功/失败提示

文件修改清单

1. order.vue 订单列表页面

文件路径: hdApp/src/admin/home/order.vue

主要修改:

在订单操作按钮区域添加配送按钮
添加配送状态判断逻辑
集成配送相关API调用

新增方法:

hasExpressOrder(orderInfo) - 判断是否已有配送订单
openExpressPage(orderInfo) - 跳转到配送信息页面
cancelExpress(orderInfo) - 取消配送订单

2. order-item.vue 组件

文件路径: hdApp/src/admin/home/components/order-item.vue

主要修改:

简化组件，只保留订单信息展示功能
移除了配送相关的业务逻辑（已迁移到独立页面）

3. express/create.vue 配送信息页面

文件路径: hdApp/src/admin/express/create.vue

主要功能:

完整的配送信息表单
自动获取订单详情并填充收货信息
包裹信息、收货信息、配送备注的输入
运费查询和配送订单提交功能

核心方法:

getOrderDetail() - 获取订单详情
queryDeliveryFee() - 查询配送运费
submitExpress() - 提交配送订单

4. 路由配置

文件路径: hdApp/src/pages.json

新增配置:

{
  "root": "admin/express",
  "pages": [
    { "path": "create", "style": { "navigationBarTitleText": "配送信息" } }
  ]
}

5. API 接口文件

文件路径: hdApp/src/api/shop-express/index.js

功能验证: 确认以下API接口可用

getStoreFee - 查询运费
createExpressOrder - 创建配送订单
cancelExpressOrder - 取消配送订单

配置说明

默认包裹尺寸

长度: 100cm
宽度: 70cm
高度: 50cm
包裹数量: 1

页面样式特性

响应式设计: 适配不同尺寸的移动设备
表单布局: 清晰的分段式表单设计，包含订单信息、包裹信息、收货信息
视觉反馈: 运费查询结果突出显示，按钮状态清晰
用户体验: 大按钮设计，便于触控操作

状态判断逻辑

配送按钮的显示状态基于以下字段判断：

orderInfo.expressStatus === 1 || 
orderInfo.expressOrderId || 
orderInfo.hasExpress

注意事项

数据兼容性: 如果订单数据结构发生变化，需要相应调整字段映射
API 兼容性: 确保后端API接口参数格式与前端调用一致
权限控制: 可根据需要添加配送功能的权限验证
状态同步: 配送操作后会自动刷新订单列表以同步状态

测试建议

功能测试: 测试完整的配送流程
验证测试: 测试各种输入验证场景
异常测试: 测试网络异常、API失败等情况
兼容性测试: 在不同设备和环境下测试UI显示

主要改进点

与之前的弹窗方案相比，新的页面方案具有以下优势：

更好的表单展示: 独立页面提供更充足的空间展示完整表单
更清晰的操作流程: 按钮并列布局更符合用户操作习惯
更好的用户体验: 避免了弹窗在小屏设备上的显示问题
更好的维护性: 配送功能独立，便于后续扩展和维护

后续优化建议

性能优化: 可以添加配送状态缓存，减少API调用
用户体验: 可以添加配送进度查询功能
功能扩展: 可以集成多个配送平台供选择
数据分析: 可以添加配送数据统计功能

25-0812：配送功能说明.md 5.8 KB History Raw