From e6627161fbe97fbb20acdded9d0a2a7d5dc82aa1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com>
Date: Sun, 10 Aug 2025 23:34:10 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=EF=BC=9A=E5=8F=91=E8=B4=A7?=
 =?UTF-8?q?=E5=BC=B9=E7=AA=97=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/DELIVERY_FEATURE_DESIGN.md               | 287 ++++++++++++++
 .../shopOrder/components/deliveryModal.vue    | 311 +++++++++++++++
 .../components/expressSettingModal.vue        | 369 ++++++++++++++++++
 src/views/shop/shopOrder/index.vue            |  30 +-
 4 files changed, 976 insertions(+), 21 deletions(-)
 create mode 100644 docs/DELIVERY_FEATURE_DESIGN.md
 create mode 100644 src/views/shop/shopOrder/components/deliveryModal.vue
 create mode 100644 src/views/shop/shopOrder/components/expressSettingModal.vue

diff --git a/docs/DELIVERY_FEATURE_DESIGN.md b/docs/DELIVERY_FEATURE_DESIGN.md
new file mode 100644
index 0000000..fc0219a
--- /dev/null
+++ b/docs/DELIVERY_FEATURE_DESIGN.md
@@ -0,0 +1,287 @@
+# 订单发货功能设计
+
+## 功能概述
+
+参考提供的设计图，为订单管理系统设计了一个完整的发货功能，包括发货弹窗、快递公司管理等功能。
+
+## 设计特点
+
+### 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. **用户体验好**：智能表单验证和条件显示
+
+这个设计将显著提升订单发货的效率和准确性。
diff --git a/src/views/shop/shopOrder/components/deliveryModal.vue b/src/views/shop/shopOrder/components/deliveryModal.vue
new file mode 100644
index 0000000..8b8a290
--- /dev/null
+++ b/src/views/shop/shopOrder/components/deliveryModal.vue
@@ -0,0 +1,311 @@
+<!-- 订单发货弹窗 -->
+<template>
+  <a-modal
+    :visible="visible"
+    title="订单发送货"
+    width="600px"
+    :confirm-loading="loading"
+    @update:visible="updateVisible"
+    @ok="handleSubmit"
+    @cancel="handleCancel"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="{ span: 4 }"
+      :wrapper-col="{ span: 20 }"
+    >
+      <!-- 配送方式 -->
+      <a-form-item label="配送方式" name="deliveryType">
+        <a-radio-group v-model:value="form.deliveryType">
+          <a-radio :value="0">
+            <span style="color: #1890ff;">快递配送</span>
+          </a-radio>
+          <a-radio :value="1">无需发货</a-radio>
+          <a-radio :value="2">商家送货</a-radio>
+        </a-radio-group>
+      </a-form-item>
+
+      <!-- 发货类型 -->
+      <a-form-item label="发货类型" name="deliveryMethod">
+        <a-radio-group v-model:value="form.deliveryMethod">
+          <a-radio value="manual">
+            <span style="color: #1890ff;">手动填写</span>
+          </a-radio>
+          <a-radio value="print">电子面单打印</a-radio>
+        </a-radio-group>
+      </a-form-item>
+
+      <!-- 快递公司 -->
+      <a-form-item
+        label="快递公司"
+        name="expressId"
+        v-if="form.deliveryType === 0"
+      >
+        <a-row :gutter="8">
+          <a-col :span="18">
+            <a-select
+              v-model:value="form.expressId"
+              placeholder="请选择"
+              show-search
+              :filter-option="filterExpressOption"
+              @change="onExpressChange"
+            >
+              <a-select-option
+                v-for="express in expressList"
+                :key="express.expressId"
+                :value="express.expressId"
+              >
+                {{ express.expressName }}
+              </a-select-option>
+            </a-select>
+          </a-col>
+          <a-col :span="6">
+            <a-button type="primary" @click="openExpressModal">
+              设置物流公司
+            </a-button>
+          </a-col>
+        </a-row>
+      </a-form-item>
+
+      <!-- 快递单号 -->
+      <a-form-item
+        label="快递单号"
+        name="trackingNumber"
+        v-if="form.deliveryType === 0"
+      >
+        <a-input
+          v-model:value="form.trackingNumber"
+          placeholder="请输入快递单号"
+          :maxlength="50"
+        />
+      </a-form-item>
+
+      <!-- 分单发货 -->
+      <a-form-item label="分单发货" v-if="form.deliveryType === 0">
+        <a-switch
+          v-model:checked="form.partialDelivery"
+          checked-children="支持"
+          un-checked-children="不支持"
+        />
+      </a-form-item>
+
+      <!-- 发货备注 -->
+      <a-form-item label="发货备注" name="deliveryNote">
+        <a-textarea
+          v-model:value="form.deliveryNote"
+          placeholder="请输入发货备注（可选）"
+          :rows="3"
+          :maxlength="200"
+          show-count
+        />
+      </a-form-item>
+
+      <!-- 发货时间 -->
+      <a-form-item label="发货时间" name="deliveryTime">
+        <a-date-picker
+          v-model:value="form.deliveryTime"
+          show-time
+          format="YYYY-MM-DD HH:mm:ss"
+          placeholder="请选择发货时间"
+          style="width: 100%"
+        />
+      </a-form-item>
+    </a-form>
+
+    <!-- 快递公司设置弹窗 -->
+    <express-setting-modal
+      v-model:visible="expressModalVisible"
+      @done="loadExpressList"
+    />
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, watch } from 'vue';
+import { Form, message } from 'ant-design-vue';
+import { ShopOrder } from '@/api/shop/shopOrder/model';
+import { updateShopOrder } from '@/api/shop/shopOrder';
+import { listShopExpress } from '@/api/shop/shopExpress';
+import { ShopExpress } from '@/api/shop/shopExpress/model';
+import { toDateString } from 'ele-admin-pro';
+import dayjs, { Dayjs } from 'dayjs';
+import ExpressSettingModal from './expressSettingModal.vue';
+
+const useForm = Form.useForm;
+
+const props = defineProps<{
+  visible: boolean;
+  data?: ShopOrder | null;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:visible', visible: boolean): void;
+  (e: 'done'): void;
+}>();
+
+// 表单数据
+const form = reactive({
+  deliveryType: 0, // 0快递配送 1无需发货 2商家送货
+  deliveryMethod: 'manual', // manual手动填写 print电子面单打印
+  expressId: undefined as number | undefined,
+  expressName: '',
+  trackingNumber: '',
+  partialDelivery: false,
+  deliveryNote: '',
+  deliveryTime: dayjs() as Dayjs
+});
+
+// 表单验证规则
+const rules = {
+  deliveryType: [
+    { required: true, message: '请选择配送方式' }
+  ],
+  deliveryMethod: [
+    { required: true, message: '请选择发货类型' }
+  ],
+  expressId: [
+    {
+      required: true,
+      message: '请选择快递公司',
+      validator: (_: any, value: any) => {
+        if (form.deliveryType === 0 && !value) {
+          return Promise.reject('请选择快递公司');
+        }
+        return Promise.resolve();
+      }
+    }
+  ],
+  trackingNumber: [
+    {
+      required: true,
+      message: '请输入快递单号',
+      validator: (_: any, value: any) => {
+        if (form.deliveryType === 0 && !value) {
+          return Promise.reject('请输入快递单号');
+        }
+        return Promise.resolve();
+      }
+    }
+  ],
+  deliveryTime: [
+    { required: true, message: '请选择发货时间' }
+  ]
+};
+
+const formRef = ref();
+const { resetFields, validate } = useForm(form, rules);
+
+// 状态
+const loading = ref(false);
+const expressList = ref<ShopExpress[]>([]);
+const expressModalVisible = ref(false);
+
+// 加载快递公司列表
+const loadExpressList = async () => {
+  try {
+    const data = await listShopExpress({});
+    expressList.value = data || [];
+  } catch (error) {
+    console.error('加载快递公司失败:', error);
+  }
+};
+
+// 快递公司筛选
+const filterExpressOption = (input: string, option: any) => {
+  return option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+};
+
+// 快递公司选择变化
+const onExpressChange = (value: number) => {
+  const express = expressList.value.find(item => item.expressId === value);
+  if (express) {
+    form.expressName = express.expressName || '';
+  }
+};
+
+// 打开快递公司设置
+const openExpressModal = () => {
+  expressModalVisible.value = true;
+};
+
+// 更新弹窗显示状态
+const updateVisible = (visible: boolean) => {
+  emit('update:visible', visible);
+};
+
+// 取消
+const handleCancel = () => {
+  updateVisible(false);
+};
+
+// 提交发货
+const handleSubmit = async () => {
+  try {
+    await validate();
+    loading.value = true;
+
+    const deliveryTime = toDateString(form.deliveryTime.toDate(), 'yyyy-MM-dd HH:mm:ss');
+
+    const updateData = {
+      ...props.data,
+      deliveryStatus: 20, // 已发货
+      deliveryType: form.deliveryType,
+      deliveryTime: deliveryTime,
+      deliveryNote: form.deliveryNote
+    };
+
+    // 如果是快递配送，添加快递信息
+    if (form.deliveryType === 0) {
+      updateData.expressId = form.expressId;
+      updateData.expressName = form.expressName;
+      updateData.trackingNumber = form.trackingNumber;
+    }
+
+    // 分单发货
+    if(form.partialDelivery){
+      updateData.deliveryStatus = 30;
+    }
+
+    await updateShopOrder(updateData);
+
+    message.success('发货成功');
+    emit('done');
+    updateVisible(false);
+  } catch (error: any) {
+    message.error(error.message || '发货失败');
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 监听弹窗显示状态
+watch(
+  () => props.visible,
+  (visible) => {
+    if (visible) {
+      // 重置表单
+      form.deliveryType = 0;
+      form.deliveryMethod = 'manual';
+      form.expressId = undefined;
+      form.expressName = '';
+      form.trackingNumber = '';
+      form.partialDelivery = false;
+      form.deliveryNote = '';
+      form.deliveryTime = dayjs();
+
+      // 加载快递公司列表
+      loadExpressList();
+    } else {
+      resetFields();
+    }
+  }
+);
+</script>
+
+<style scoped>
+.ant-radio-wrapper {
+  margin-right: 16px;
+}
+</style>
diff --git a/src/views/shop/shopOrder/components/expressSettingModal.vue b/src/views/shop/shopOrder/components/expressSettingModal.vue
new file mode 100644
index 0000000..007c1ca
--- /dev/null
+++ b/src/views/shop/shopOrder/components/expressSettingModal.vue
@@ -0,0 +1,369 @@
+<!-- 快递公司设置弹窗 -->
+<template>
+  <a-modal
+    :visible="visible"
+    title="设置物流公司"
+    width="900px"
+    :confirm-loading="loading"
+    @update:visible="updateVisible"
+    @ok="handleSubmit"
+    @cancel="handleCancel"
+  >
+    <div class="express-setting">
+      <!-- 搜索栏 -->
+      <div class="search-bar" style="margin-bottom: 16px;">
+        <a-input-search
+          v-model:value="searchKeyword"
+          placeholder="搜索快递公司名称"
+          style="width: 300px;"
+          @search="handleSearch"
+        />
+        <a-button
+          type="primary"
+          style="margin-left: 8px;"
+          @click="openAddModal"
+        >
+          添加快递公司
+        </a-button>
+      </div>
+
+      <!-- 快递公司列表 -->
+      <a-table
+        :data-source="filteredExpressList"
+        :columns="columns"
+        :pagination="false"
+        :scroll="{ y: 400 }"
+        row-key="expressId"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'status'">
+            <a-switch
+              v-model:checked="record.enabled"
+              checked-children="启用"
+              un-checked-children="禁用"
+              @change="handleStatusChange(record)"
+            />
+          </template>
+          <template v-if="column.key === 'action'">
+            <a-space>
+              <a @click="editExpress(record)">编辑</a>
+              <a-divider type="vertical" />
+              <a-popconfirm
+                title="确定要删除此快递公司吗？"
+                @confirm="deleteExpress(record)"
+              >
+                <a class="text-red-500">删除</a>
+              </a-popconfirm>
+            </a-space>
+          </template>
+        </template>
+      </a-table>
+    </div>
+
+    <!-- 添加/编辑快递公司弹窗 -->
+    <a-modal
+      v-model:visible="addModalVisible"
+      :title="editingExpress ? '编辑快递公司' : '添加快递公司'"
+      width="500px"
+      :confirm-loading="addLoading"
+      @ok="handleAddSubmit"
+      @cancel="handleAddCancel"
+    >
+      <a-form
+        ref="addFormRef"
+        :model="addForm"
+        :rules="addRules"
+        :label-col="{ span: 6 }"
+        :wrapper-col="{ span: 18 }"
+      >
+        <a-form-item label="快递公司名称" name="expressName">
+          <a-input
+            v-model:value="addForm.expressName"
+            placeholder="请输入快递公司名称"
+            :maxlength="50"
+          />
+        </a-form-item>
+
+        <a-form-item label="微信编码" name="wxCode">
+          <a-input
+            v-model:value="addForm.wxCode"
+            placeholder="请输入微信快递编码（可选）"
+            :maxlength="20"
+          />
+        </a-form-item>
+
+        <a-form-item label="快递100编码" name="kuaidi100Code">
+          <a-input
+            v-model:value="addForm.kuaidi100Code"
+            placeholder="请输入快递100编码（可选）"
+            :maxlength="20"
+          />
+        </a-form-item>
+
+        <a-form-item label="快递鸟编码" name="kdniaoCode">
+          <a-input
+            v-model:value="addForm.kdniaoCode"
+            placeholder="请输入快递鸟编码（可选）"
+            :maxlength="20"
+          />
+        </a-form-item>
+
+        <a-form-item label="排序号" name="sortNumber">
+          <a-input-number
+            v-model:value="addForm.sortNumber"
+            placeholder="数字越小越靠前"
+            :min="0"
+            :max="9999"
+            style="width: 100%"
+          />
+        </a-form-item>
+      </a-form>
+    </a-modal>
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, computed, watch } from 'vue';
+import { Form, message } from 'ant-design-vue';
+import { ShopExpress } from '@/api/shop/shopExpress/model';
+import {
+  listShopExpress,
+  addShopExpress,
+  updateShopExpress,
+  removeShopExpress
+} from '@/api/shop/shopExpress';
+
+const useForm = Form.useForm;
+
+const props = defineProps<{
+  visible: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:visible', visible: boolean): void;
+  (e: 'done'): void;
+}>();
+
+// 状态
+const loading = ref(false);
+const searchKeyword = ref('');
+const expressList = ref<ShopExpress[]>([]);
+const addModalVisible = ref(false);
+const addLoading = ref(false);
+const editingExpress = ref<ShopExpress | null>(null);
+
+// 添加表单
+const addForm = reactive({
+  expressName: '',
+  wxCode: '',
+  kuaidi100Code: '',
+  kdniaoCode: '',
+  sortNumber: 0
+});
+
+const addRules = {
+  expressName: [
+    { required: true, message: '请输入快递公司名称' },
+    { min: 2, max: 50, message: '快递公司名称长度为2-50个字符' }
+  ]
+};
+
+const addFormRef = ref();
+const { resetFields: resetAddFields, validate: validateAdd } = useForm(addForm, addRules);
+
+// 表格列定义
+const columns = [
+  {
+    title: '快递公司名称',
+    dataIndex: 'expressName',
+    key: 'expressName',
+    width: 150
+  },
+  {
+    title: '微信编码',
+    dataIndex: 'wxCode',
+    key: 'wxCode',
+    width: 100
+  },
+  {
+    title: '快递100编码',
+    dataIndex: 'kuaidi100Code',
+    key: 'kuaidi100Code',
+    width: 120
+  },
+  {
+    title: '快递鸟编码',
+    dataIndex: 'kdniaoCode',
+    key: 'kdniaoCode',
+    width: 120
+  },
+  {
+    title: '排序号',
+    dataIndex: 'sortNumber',
+    key: 'sortNumber',
+    width: 80,
+    align: 'center'
+  },
+  {
+    title: '状态',
+    key: 'status',
+    width: 100,
+    align: 'center'
+  },
+  {
+    title: '操作',
+    key: 'action',
+    width: 120,
+    align: 'center'
+  }
+];
+
+// 过滤后的快递公司列表
+const filteredExpressList = computed(() => {
+  if (!searchKeyword.value) {
+    return expressList.value;
+  }
+  return expressList.value.filter(item =>
+    item.expressName?.toLowerCase().includes(searchKeyword.value.toLowerCase())
+  );
+});
+
+// 加载快递公司列表
+const loadExpressList = async () => {
+  try {
+    loading.value = true;
+    const data = await listShopExpress({});
+    expressList.value = (data || []).map(item => ({
+      ...item,
+      enabled: item.deleted === 0 // 假设deleted=0表示启用
+    }));
+  } catch (error) {
+    console.error('加载快递公司失败:', error);
+    message.error('加载快递公司失败');
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 搜索
+const handleSearch = () => {
+  // 搜索逻辑已在computed中处理
+};
+
+// 状态变化
+const handleStatusChange = async (record: ShopExpress & { enabled: boolean }) => {
+  try {
+    await updateShopExpress({
+      ...record,
+      deleted: record.enabled ? 0 : 1
+    });
+    message.success(record.enabled ? '已启用' : '已禁用');
+  } catch (error: any) {
+    message.error(error.message || '操作失败');
+    // 恢复状态
+    record.enabled = !record.enabled;
+  }
+};
+
+// 打开添加弹窗
+const openAddModal = () => {
+  editingExpress.value = null;
+  resetAddFields();
+  addModalVisible.value = true;
+};
+
+// 编辑快递公司
+const editExpress = (record: ShopExpress) => {
+  editingExpress.value = record;
+  addForm.expressName = record.expressName || '';
+  addForm.wxCode = record.wxCode || '';
+  addForm.kuaidi100Code = record.kuaidi100Code || '';
+  addForm.kdniaoCode = record.kdniaoCode || '';
+  addForm.sortNumber = record.sortNumber || 0;
+  addModalVisible.value = true;
+};
+
+// 删除快递公司
+const deleteExpress = async (record: ShopExpress) => {
+  try {
+    if (record.expressId) {
+      await removeShopExpress(record.expressId);
+      message.success('删除成功');
+      loadExpressList();
+    }
+  } catch (error: any) {
+    message.error(error.message || '删除失败');
+  }
+};
+
+// 添加/编辑提交
+const handleAddSubmit = async () => {
+  try {
+    await validateAdd();
+    addLoading.value = true;
+
+    if (editingExpress.value) {
+      // 编辑
+      await updateShopExpress({
+        ...editingExpress.value,
+        ...addForm
+      });
+      message.success('编辑成功');
+    } else {
+      // 添加
+      await addShopExpress(addForm);
+      message.success('添加成功');
+    }
+
+    addModalVisible.value = false;
+    loadExpressList();
+  } catch (error: any) {
+    message.error(error.message || '操作失败');
+  } finally {
+    addLoading.value = false;
+  }
+};
+
+// 取消添加/编辑
+const handleAddCancel = () => {
+  addModalVisible.value = false;
+  resetAddFields();
+};
+
+// 更新弹窗显示状态
+const updateVisible = (visible: boolean) => {
+  emit('update:visible', visible);
+};
+
+// 取消
+const handleCancel = () => {
+  updateVisible(false);
+};
+
+// 确定
+const handleSubmit = () => {
+  emit('done');
+  updateVisible(false);
+};
+
+// 监听弹窗显示状态
+watch(
+  () => props.visible,
+  (visible) => {
+    if (visible) {
+      loadExpressList();
+    }
+  }
+);
+</script>
+
+<style scoped>
+.express-setting {
+  min-height: 400px;
+}
+
+.search-bar {
+  display: flex;
+  align-items: center;
+}
+</style>
diff --git a/src/views/shop/shopOrder/index.vue b/src/views/shop/shopOrder/index.vue
index bb15c67..e528133 100644
--- a/src/views/shop/shopOrder/index.vue
+++ b/src/views/shop/shopOrder/index.vue
@@ -80,7 +80,7 @@
           <template v-if="column.key === 'deliveryStatus'">
             <a-tag v-if="record.deliveryStatus == 10">未发货</a-tag>
             <a-tag v-if="record.deliveryStatus == 20" color="green">已发货</a-tag>
-            <a-tag v-if="record.deliveryStatus == 30" color="bule">部分发货</a-tag>
+            <a-tag v-if="record.deliveryStatus == 30" color="blue">部分发货</a-tag>
           </template>
           <template v-if="column.key === 'orderStatus'">
             <a-tag v-if="record.orderStatus === 0">未完成</a-tag>
@@ -195,6 +195,9 @@
 
     <!-- 编辑弹窗 -->
     <OrderInfo v-model:visible="showEdit" :data="current" @done="reload"/>
+
+    <!-- 发货弹窗 -->
+    <DeliveryModal v-model:visible="showDelivery" :data="current" @done="reload"/>
   </a-page-header>
 </template>
 
@@ -222,6 +225,7 @@ import Search from './components/search.vue';
 import {getPageTitle} from "@/utils/common";
 import {toDateString} from 'ele-admin-pro';
 import OrderInfo from './components/orderInfo.vue';
+import DeliveryModal from './components/deliveryModal.vue';
 import {ShopOrder, ShopOrderParam} from "@/api/shop/shopOrder/model";
 import {pageShopOrder, repairOrder, removeShopOrder, removeBatchShopOrder, updateShopOrder} from "@/api/shop/shopOrder";
 import {updateUser} from "@/api/system/user";
@@ -239,6 +243,8 @@ const current = ref<ShopOrder | null>(null);
 const showEdit = ref(false);
 // 是否显示批量移动弹窗
 const showMove = ref(false);
+// 是否显示发货弹窗
+const showDelivery = ref(false);
 // 加载状态
 const loading = ref(true);
 // 激活的标签
@@ -493,26 +499,8 @@ const handleCancelOrder = (record: ShopOrder) => {
 
 // 发货处理
 const handleDelivery = (record: ShopOrder) => {
-  Modal.confirm({
-    title: '确认发货',
-    content: '确定要将此订单标记为已发货吗？',
-    onOk: async () => {
-      try {
-        const now = new Date();
-        const deliveryTime = toDateString(now, 'yyyy-MM-dd HH:mm:ss');
-
-        await updateShopOrder({
-          ...record,
-          deliveryStatus: 20, // 已发货
-          deliveryTime: deliveryTime
-        });
-        message.success('发货成功');
-        reload();
-      } catch (error: any) {
-        message.error(error.message || '发货失败');
-      }
-    }
-  });
+  current.value = record;
+  showDelivery.value = true;
 };
 
 // 确认收货