shizhongqi/huahuibao_document @ 478b66f625fd85b8a1480d94bd2381367ec3d758

以下是我想实现功能的描述，请你查看需求与相关代码，重新生成一份优化的功能描述说明。

请在 @order-item.vue  页面中每项订单添加“配送”按钮功能：
1. 点击“配送“按钮后，弹窗展示发货表单信息
     * ”配送“按钮样式参照同页面中的”发货“按钮
     * 发货表单信息样式参照 @OrderItem.vue  里的新增物流下单弹窗，其中要把 ”修改地址“改为”查询运费“
     * 已发起配送的，把”配送“按钮变更为 ”取消配送“

2. 发货表单的数据如果能从 info 中获取，就直接使用 info 中数据

3. 对应的接口在 @index.js 里。查询运费按钮对应getStoreFee接口，弹窗展示发货表单提交按钮对应 createExpressOrder 接口

4. 原始的同城配送接口文档是：@https://developers.weixin.qq.com/miniprogram/dev/platform-capabilities/industry/express/business/intracity_service.html ，可以从中查询到对应接口需要什么参数

我来帮你分析需求和相关代码，并生成一份优化的功能描述说明。 Ran tool Ran tool Ran tool 基于我对代码的分析和需求理解，以下是优化后的功能描述说明：

hdApp项目中 order-item.vue 添加"配送"功能优化方案

功能概述

在 hdApp/src/admin/home/components/order-item.vue 页面的每个订单项中添加同城配送功能，实现快捷的同城配送下单流程。

详细功能要求

1. "配送"按钮添加与样式

位置：在订单项的底部按钮区域（.list-button）添加"配送"按钮
样式：参照现有的"发货"和"打印"按钮样式（.admin-button-com middle）
状态切换：
- 未发起配送时：显示"配送"按钮
- 已发起配送时：按钮文本变更为"取消配送"
- 按钮状态判断逻辑：基于订单信息中的配送状态字段

2. 配送表单弹窗设计

弹窗样式：参考 ghsApp/src/admin/home/components/OrderItem.vue 中的 expressAddressRef 弹窗样式

表单字段（基于微信同城配送接口要求）：

{
// 包裹信息
picture: "http://xxxxx", // 商品图片（从订单中找。要隐藏此项，但后端需要的）
packageNum: 1,           // 包裹数量
weight: '',              // 重量(kg)
length: 100,             // 长度(cm)
width: 70,               // 宽度(cm)  
height: 50,              // 高度(cm)
    
// 收货信息（从info中获取）
receiverName: '',        // 收货人姓名 -- 来自订单，下同
receiverMobile: '',      // 收货人手机
receiverCity: '',        // 收货城市
receiverAddress: '',     // 收货地址
receiverFloor: '',       // 收货楼层/门牌号
    
// 配送信息
deliveryFee: '',         // 配送费用（查询运费后显示）
note: ''                 // 配送备注
}

3. 数据获取策略

优先使用info数据：从订单信息 info 对象中提取以下字段：
- info.receiveUserName → receiverName
- info.receiveMobile → receiverMobile
- info.receiveCity → receiverCity
- info.receiveAddress → receiverAddress
- info.receiveFloor → receiverFloor
默认值设置：包裹尺寸使用默认值（长100cm、宽70cm、高50cm）
重量必填：用户必须输入包裹重量

4. 接口调用流程

查询运费接口：getStoreFee(data)
- 调用时机：用户点击"查询运费"按钮
- 传参：收货地址信息 + 包裹信息
- 返回：配送费用信息
创建配送订单接口：createExpressOrder(data)
- 调用时机：用户点击表单"提交"按钮
- 传参：完整的配送订单信息
- 返回：配送订单创建结果
取消配送订单接口：cancelExpressOrder(data)
- 调用时机：用户点击"取消配送"按钮
- 传参：订单ID
- 返回：取消结果

5. 用户交互流程

用户点击"配送"按钮
弹出配送表单，自动填充订单中的收货信息
用户填写/确认包裹信息（重量、尺寸等）
点击"查询运费"按钮，显示配送费用
确认信息无误后点击"提交"按钮
创建配送订单成功后，"配送"按钮变为"取消配送"

6. 错误处理与验证

必填字段验证：重量字段必须大于0
地址信息验证：确保收货地址完整
网络错误处理：接口调用失败时给出友好提示
确认操作：取消配送时需要用户二次确认

7. 界面优化建议

按钮状态提示：已配送订单的按钮使用不同颜色区分
加载状态：接口调用时显示loading状态
费用显示：查询运费后在表单中醒目显示配送费用
操作反馈：操作成功/失败后给出明确的用户反馈

技术实现要点

复用现有的弹窗组件结构（uni-popup）
遵循项目中的样式规范（.admin-button-com等）
使用项目中统一的请求处理方式（this.$util.confirmModal、this.$msg等）
确保代码与现有项目结构保持一致

这个优化方案既保持了与现有界面的一致性，又充分利用了订单数据，提供了完整的同城配送功能流程。

25-0811：同城配送-AI重新生成的功能描述.md 5.2 KB History Raw