mp-vue/docs/DELIVERY_FEATURE_DESIGN.md

# 订单发货功能设计

## 功能概述

参考提供的设计图，为订单管理系统设计了一个完整的发货功能，包括发货弹窗、快递公司管理等功能。

## 设计特点

### 1. 🚚 **发货弹窗设计**

参考原图设计，包含以下功能模块：

#### 配送方式选择
- **快递配送**：使用第三方快递公司配送
- **无需发货**：虚拟商品或服务类订单
- **商家送货**：商家自行配送

#### 发货类型选择
- **手动填写**：手动输入快递信息
- **电子面单打印**：集成快递公司API自动生成面单

#### 快递信息填写
- **快递公司选择**：从预设的快递公司列表中选择
- **快递单号输入**：手动输入或自动生成
- **分单发货支持**：支持订单分批发货

### 2. 🏢 **快递公司管理**

#### 快递公司设置弹窗
- 快递公司列表管理
- 支持添加、编辑、删除快递公司
- 快递公司状态启用/禁用
- 搜索和筛选功能

#### 快递公司信息
- 快递公司名称
- 微信快递编码
- 快递100编码
- 快递鸟编码
- 排序号设置

## 组件结构

### 1. DeliveryModal.vue - 发货弹窗

```vue
<template>
  <a-modal title="订单发送货" width="600px">
    <!-- 配送方式选择 -->
    <a-radio-group v-model:value="form.deliveryType">
      <a-radio :value="0">快递配送</a-radio>
      <a-radio :value="1">无需发货</a-radio>
      <a-radio :value="2">商家送货</a-radio>
    </a-radio-group>

    <!-- 发货类型选择 -->
    <a-radio-group v-model:value="form.deliveryMethod">
      <a-radio value="manual">手动填写</a-radio>
      <a-radio value="print">电子面单打印</a-radio>
    </a-radio-group>

    <!-- 快递公司选择 -->
    <a-select v-model:value="form.expressId">
      <!-- 快递公司选项 -->
    </a-select>

    <!-- 快递单号输入 -->
    <a-input v-model:value="form.trackingNumber" />

    <!-- 其他配置项 -->
  </a-modal>
</template>
```

### 2. ExpressSettingModal.vue - 快递公司设置

```vue
<template>
  <a-modal title="设置物流公司" width="800px">
    <!-- 搜索栏 -->
    <a-input-search placeholder="搜索快递公司名称" />
    
    <!-- 快递公司列表 -->
    <a-table :data-source="expressList">
      <!-- 表格列定义 -->
    </a-table>

    <!-- 添加/编辑快递公司弹窗 -->
    <a-modal title="添加快递公司">
      <!-- 快递公司表单 -->
    </a-modal>
  </a-modal>
</template>
```

## 功能流程

### 1. 发货流程

```mermaid
graph TD
    A[点击发货按钮] --> B[打开发货弹窗]
    B --> C{选择配送方式}
    
    C -->|快递配送| D[选择快递公司]
    C -->|无需发货| E[直接完成发货]
    C -->|商家送货| F[填写配送信息]
    
    D --> G[输入快递单号]
    G --> H[填写发货备注]
    H --> I[选择发货时间]
    I --> J[提交发货]
    
    E --> J
    F --> J
    
    J --> K[更新订单状态]
    K --> L[发货完成]
```

### 2. 快递公司管理流程

```mermaid
graph TD
    A[设置物流公司] --> B[打开快递公司管理]
    B --> C{操作类型}
    
    C -->|添加| D[填写快递公司信息]
    C -->|编辑| E[修改快递公司信息]
    C -->|删除| F[确认删除]
    C -->|启用/禁用| G[切换状态]
    
    D --> H[保存快递公司]
    E --> H
    F --> I[删除快递公司]
    G --> J[更新状态]
    
    H --> K[刷新列表]
    I --> K
    J --> K
```

## 数据结构

### 1. 发货表单数据

```typescript
interface DeliveryForm {
  deliveryType: number;        // 配送方式：0快递 1无需发货 2商家送货
  deliveryMethod: string;      // 发货类型：manual手动 print电子面单
  expressId?: number;          // 快递公司ID
  expressName?: string;        // 快递公司名称
  trackingNumber?: string;     // 快递单号
  partialDelivery: boolean;    // 是否支持分单发货
  deliveryNote?: string;       // 发货备注
  deliveryTime: Dayjs;         // 发货时间
}
```

### 2. 快递公司数据

```typescript
interface ShopExpress {
  expressId?: number;          // 快递公司ID
  expressName?: string;        // 快递公司名称
  wxCode?: string;            // 微信快递编码
  kuaidi100Code?: string;     // 快递100编码
  kdniaoCode?: string;        // 快递鸟编码
  sortNumber?: number;        // 排序号
  deleted?: number;           // 是否删除
}
```

## 界面设计要点

### 1. 视觉层次

- **主要选项突出显示**：快递配送选项使用蓝色高亮
- **分组清晰**：配送方式、发货类型、快递信息分组显示
- **操作按钮明确**：确认发货使用主色调按钮

### 2. 交互体验

- **条件显示**：根据配送方式动态显示相关字段
- **智能默认值**：发货时间默认为当前时间
- **表单验证**：必填字段验证和格式检查

### 3. 响应式设计

- **弹窗宽度适配**：发货弹窗600px，设置弹窗800px
- **表单布局**：使用Ant Design的栅格系统
- **移动端适配**：考虑小屏幕设备的显示效果

## 集成方式

### 1. 在订单列表中集成

```typescript
// 发货处理
const handleDelivery = (record: ShopOrder) => {
  current.value = record;
  showDelivery.value = true;
};
```

### 2. 在订单详情中集成

```vue
<template #extra>
  <a-button 
    v-if="canDelivery(form)" 
    type="primary" 
    @click="handleDelivery"
  >
    发货
  </a-button>
</template>
```

## 扩展功能

### 1. 电子面单集成

- 集成快递公司API
- 自动生成快递单号
- 打印面单功能

### 2. 物流跟踪

- 集成物流查询API
- 实时更新物流状态
- 物流轨迹展示

### 3. 批量发货

- 支持批量选择订单
- 批量设置快递信息
- 批量打印面单

## 技术实现

### 1. 表单验证

```typescript
const rules = {
  deliveryType: [{ required: true, message: '请选择配送方式' }],
  expressId: [{ 
    validator: (_, value) => {
      if (form.deliveryType === 0 && !value) {
        return Promise.reject('请选择快递公司');
      }
      return Promise.resolve();
    }
  }]
};
```

### 2. 日期处理

```typescript
const deliveryTime = toDateString(form.deliveryTime.toDate(), 'yyyy-MM-dd HH:mm:ss');
```

### 3. 状态管理

```typescript
const updateData = {
  ...props.data,
  deliveryStatus: 20,      // 已发货
  deliveryType: form.deliveryType,
  deliveryTime: deliveryTime,
  expressId: form.expressId,
  trackingNumber: form.trackingNumber
};
```

## 总结

这个发货功能设计具有以下优势：

1. **界面友好**：参考原设计图，界面清晰直观
2. **功能完整**：支持多种配送方式和发货类型
3. **扩展性强**：预留了电子面单和物流跟踪的接口
4. **易于维护**：组件化设计，代码结构清晰
5. **用户体验好**：智能表单验证和条件显示

这个设计将显著提升订单发货的效率和准确性。