修复：订单详情、及发货功能

src/views/shop/shopOrder/components/orderInfo.vue

@@ -13,13 +13,40 @@
   >
     <template #extra>
       <a-space>
+        <!-- 发货按钮：已付款且未发货时显示 -->
         <a-button
+          v-if="form.payStatus === 1 && form.deliveryStatus === 10"
           type="primary"
-          @click="save"
+          @click="handleDelivery"
           :loading="loading"
-        >发货
+        >
+          发货
+        </a-button>
+
+        <!-- 取消订单按钮：未完成且未取消时显示 -->
+        <a-button
+          v-if="form.orderStatus === 0"
+          @click="handleCancelOrder"
+          danger
+          :loading="loading"
+        >
+          取消订单
+        </a-button>
+
+        <!-- 删除订单按钮：已取消或已完成时显示 -->
+        <a-button
+          v-if="form.orderStatus === 1 || form.orderStatus === 2"
+          @click="handleDeleteOrder"
+          danger
+          :loading="loading"
+        >
+          删除订单
+        </a-button>
+
+        <!-- 关闭按钮 -->
+        <a-button @click="updateVisible(false)">
+          关闭
         </a-button>
-        <a-button @click="updateVisible(false)" danger>取消订单</a-button>
       </a-space>
     </template>
     <a-card title="基本信息" style="margin-bottom: 20px" :bordered="false">
@@ -27,7 +54,7 @@
         <!-- 第一排-->
         <a-descriptions-item
           label="订单编号"
-          span="3"
+          :span="3"
           :labelStyle="{ width: '90px', color: '#808080' }"
         >
           <span @click="copyText(form.orderNo)">{{ form.orderNo }}</span>
@@ -233,22 +260,103 @@
 
       </a-descriptions>
     </a-card>
+
+    <!-- 订单流程步骤条 -->
+    <a-card title="订单流程" style="margin-bottom: 20px" :bordered="false">
+      <a-steps :current="active" :items="steps" />
+    </a-card>
     <a-card title="商品信息" style="margin-bottom: 20px" :bordered="false">
       <a-spin :spinning="loading">
         <a-table
           :data-source="orderGoods"
           :columns="columns"
           :pagination="false"
-        />
+        >
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'goodsName'">
+              <div style="display: flex; align-items: center; gap: 12px;">
+                <a-avatar
+                  :src="record.image || record.goodsImage"
+                  shape="square"
+                  :size="50"
+                  style="flex-shrink: 0;"
+                >
+                  <template #icon>
+                    <img src="/default-goods.png" alt="默认商品图片" style="width: 100%; height: 100%; object-fit: cover;" />
+                  </template>
+                </a-avatar>
+                <span style="flex: 1;">{{ record.goodsName || '未知商品' }}</span>
+              </div>
+            </template>
+          </template>
+        </a-table>
       </a-spin>
     </a-card>
     <a-card title="收货信息" style="margin-bottom: 20px" :bordered="false">
       <a-spin :spinning="loading">
-        <a-table
-          :data-source="orderGoods"
-          :columns="columns"
-          :pagination="false"
-        />
+        <a-descriptions :column="2">
+          <a-descriptions-item
+            label="收货人"
+            :labelStyle="{ width: '90px', color: '#808080' }"
+          >
+            {{ form.realName || '未填写' }}
+          </a-descriptions-item>
+          <a-descriptions-item
+            label="联系电话"
+            :labelStyle="{ width: '90px', color: '#808080' }"
+          >
+            {{ form.phone || form.mobile || '未填写' }}
+          </a-descriptions-item>
+          <a-descriptions-item
+            label="收货地址"
+            :labelStyle="{ width: '90px', color: '#808080' }"
+            :span="2"
+          >
+            {{ form.address || '未填写' }}
+          </a-descriptions-item>
+          <a-descriptions-item
+            label="配送方式"
+            :labelStyle="{ width: '90px', color: '#808080' }"
+          >
+            <a-tag v-if="form.deliveryType === 0">快递配送</a-tag>
+            <a-tag v-else-if="form.deliveryType === 1" color="blue">自提</a-tag>
+            <a-tag v-else>未设置</a-tag>
+          </a-descriptions-item>
+          <a-descriptions-item
+            label="配送时间"
+            :labelStyle="{ width: '90px', color: '#808080' }"
+          >
+            <div v-if="form.sendStartTime && form.sendEndTime">
+              {{ form.sendStartTime }} - {{ form.sendEndTime }}
+            </div>
+            <span v-else class="text-gray-400">未设置</span>
+          </a-descriptions-item>
+          <a-descriptions-item
+            v-if="form.deliveryType === 1"
+            label="自提店铺"
+            :labelStyle="{ width: '90px', color: '#808080' }"
+            :span="2"
+          >
+            {{ form.selfTakeMerchantName || '未设置' }}
+          </a-descriptions-item>
+          <a-descriptions-item
+            v-if="form.deliveryType === 0"
+            label="发货店铺"
+            :labelStyle="{ width: '90px', color: '#808080' }"
+            :span="2"
+          >
+            {{ form.expressMerchantName || '未设置' }}
+          </a-descriptions-item>
+          <a-descriptions-item
+            v-if="form.selfTakeCode"
+            label="自提码"
+            :labelStyle="{ width: '90px', color: '#808080' }"
+          >
+            <a-tag color="orange" @click="copyText(form.selfTakeCode)" class="cursor-pointer">
+              {{ form.selfTakeCode }}
+            </a-tag>
+          </a-descriptions-item>
+        </a-descriptions>
       </a-spin>
     </a-card>
   </a-drawer>
@@ -258,11 +366,8 @@
 import {ref, reactive, watch} from 'vue';
 import {Form} from 'ant-design-vue';
 import {assignObject} from 'ele-admin-pro';
-import {ColumnItem} from 'ele-admin-pro/es/ele-pro-table/types';
+
 import {
-  CheckOutlined,
-  CloseOutlined,
-  CoffeeOutlined,
   WechatOutlined,
   AlipayCircleOutlined,
   IdcardOutlined
@@ -272,6 +377,8 @@ import {BszxPay} from '@/api/bszx/bszxPay/model';
 import {toDateString} from 'ele-admin-pro';
 import {copyText} from "@/utils/common";
 import {listShopOrderGoods} from "@/api/shop/shopOrderGoods";
+import {updateShopOrder, removeShopOrder} from '@/api/shop/shopOrder';
+import {message, Modal} from 'ant-design-vue';
 
 const useForm = Form.useForm;
 
@@ -282,10 +389,10 @@ const props = defineProps<{
   data?: ShopOrder | null;
 }>();
 
-export interface step {
-  title?: String | undefined;
-  subTitle?: String | undefined;
-  description?: String | undefined;
+interface Step {
+  title?: string | undefined;
+  subTitle?: string | undefined;
+  description?: string | undefined;
 }
 
 // 是否是修改
@@ -296,7 +403,7 @@ const maxAble = ref(true);
 const orderGoods = ref<BszxPay[]>([]);
 
 // 步骤条
-const steps = ref<step[]>([
+const steps = ref<Step[]>([
   {
     title: '报餐',
     description: undefined
@@ -473,27 +580,26 @@ const updateVisible = (value: boolean) => {
   emit('update:visible', value);
 };
 
-const columns = ref<ColumnItem[]>([
+const columns = ref([
   {
     title: '商品名称',
     dataIndex: 'goodsName',
     key: 'goodsName',
-    align: 'center',
     width: 280
   },
   {
     title: '金额',
     dataIndex: 'price',
-    align: 'center',
-    customRender: ({record}) => {
+    align: 'center' as const,
+    customRender: ({record}: {record: any}) => {
       return `￥${record.price || 0}`;
     }
   },
   {
     title: '数量',
     dataIndex: 'quantity',
-    align: 'center',
-    customRender: ({record}) => {
+    align: 'center' as const,
+    customRender: ({record}: {record: any}) => {
       return record.quantity || 1;
     }
   },
@@ -501,74 +607,77 @@ const columns = ref<ColumnItem[]>([
     title: '备注',
     dataIndex: 'comments',
     key: 'comments',
-    align: 'center'
+    align: 'center' as const
   },
   {
     title: '是否免费',
     dataIndex: 'isFree',
-    align: 'center',
-    customRender: ({record}) => {
+    align: 'center' as const,
+    customRender: ({record}: {record: any}) => {
       return record.isFree ? '是' : '否';
     }
   }
 ]);
 
 /* 制作步骤条 */
-const loadSteps = (order) => {
-  steps.value = [];
-  steps.value.push({
-    title: '下单'
-  });
-  steps.value.push({
-    title: '付款'
-  });
-  steps.value.push({
-    title: '发货'
-  });
-  steps.value.push({
-    title: '收货'
-  });
-  steps.value.push({
-    title: '完成'
-  });
+const loadSteps = (order: ShopOrder) => {
+  steps.value = [
+    {
+      title: '下单',
+      description: order.createTime ? toDateString(order.createTime, 'MM-dd HH:mm') : undefined
+    },
+    {
+      title: '付款',
+      description: undefined
+    },
+    {
+      title: '发货',
+      description: undefined
+    },
+    {
+      title: '收货',
+      description: undefined
+    },
+    {
+      title: '完成',
+      description: undefined
+    }
+  ];
 
-  // 下单
-  if (order.payStatus == 10) {
+  // 根据订单状态设置当前步骤
+  if (order.orderStatus === 2) {
+    // 已取消
+    active.value = -1;
+    steps.value = [
+      {
+        title: '下单',
+        description: order.createTime ? toDateString(order.createTime, 'MM-dd HH:mm') : undefined
+      },
+      {
+        title: '已取消',
+        description: '订单已取消'
+      }
+    ];
+  } else if (order.payStatus === 0) {
+    // 未付款
     active.value = 0;
-    steps.value[0].description = order.createTime;
-  }
-  // 付款
-  if (order.payStatus == 20) {
+  } else if (order.payStatus === 1) {
+    // 已付款
     active.value = 1;
-    steps.value[0].description = order.createTime;
-    steps.value[1].description = order.payTime;
-  }
-  // 发货
-  if (order.payStatus == 20 && order.deliveryStatus == 20) {
-    active.value = 2;
-    steps.value[0].description = order.createTime;
-    steps.value[1].description = order.payTime;
-    steps.value[2].description = order.deliveryTime;
-  }
-  // 收货
-  if (order.payStatus == 20 && order.receiptStatus == 20) {
-    active.value = 3;
-    steps.value[0].description = order.createTime;
-    steps.value[1].description = order.payTime;
-    steps.value[2].description = order.deliveryTime;
-    steps.value[3].description = order.receiptTime;
-  }
-  // 完成
-  if (order.payStatus == 20 && order.orderStatus == 30) {
-    active.value = 4;
-    steps.value[0].description = order.createTime;
-    steps.value[1].description = order.payTime;
-    steps.value[2].description = order.deliveryTime;
-    steps.value[3].description = order.receiptTime;
-  }
-  // 已取消
-  if (order.orderStatus == 20) {
-    active.value = 4;
+    steps.value[1].description = order.payTime ? toDateString(order.payTime, 'MM-dd HH:mm') : '已付款';
+
+    if (order.deliveryStatus === 20) {
+      // 已发货
+      active.value = 2;
+      steps.value[2].description = order.deliveryTime ? toDateString(order.deliveryTime, 'MM-dd HH:mm') : '已发货';
+
+      if (order.orderStatus === 1) {
+        // 已完成
+        active.value = 4;
+        steps.value[3].description = '已收货';
+        steps.value[4].description = '订单完成';
+      }
+    }
   }
 };
 
@@ -579,8 +688,81 @@ const loadSteps = (order) => {
 //   });
 // };
 
+/* 发货处理 */
+const handleDelivery = () => {
+  Modal.confirm({
+    title: '确认发货',
+    content: '确定要将此订单标记为已发货吗？',
+    onOk: async () => {
+      try {
+        loading.value = true;
+        await updateShopOrder({
+          ...form,
+          deliveryStatus: 20, // 已发货
+          deliveryTime: new Date().toISOString()
+        });
+        message.success('发货成功');
+        emit('done');
+        updateVisible(false);
+      } catch (error: any) {
+        message.error(error.message || '发货失败');
+      } finally {
+        loading.value = false;
+      }
+    }
+  });
+};
+
+/* 取消订单 */
+const handleCancelOrder = () => {
+  Modal.confirm({
+    title: '确认取消订单',
+    content: '确定要取消此订单吗？取消后无法恢复。',
+    onOk: async () => {
+      try {
+        loading.value = true;
+        await updateShopOrder({
+          ...form,
+          orderStatus: 2 // 已取消
+        });
+        message.success('订单已取消');
+        emit('done');
+        updateVisible(false);
+      } catch (error: any) {
+        message.error(error.message || '取消订单失败');
+      } finally {
+        loading.value = false;
+      }
+    }
+  });
+};
+
+/* 删除订单 */
+const handleDeleteOrder = () => {
+  Modal.confirm({
+    title: '确认删除订单',
+    content: '确定要删除此订单吗？删除后无法恢复。',
+    onOk: async () => {
+      try {
+        loading.value = true;
+        if (form.orderId) {
+          await removeShopOrder(form.orderId);
+          message.success('订单已删除');
+          emit('done');
+          updateVisible(false);
+        }
+      } catch (error: any) {
+        message.error(error.message || '删除订单失败');
+      } finally {
+        loading.value = false;
+      }
+    }
+  });
+};
+
 /* 保存编辑 */
 const save = () => {
+  // 保留原有的保存功能
 };
 
 watch(