feat：【mall 商城】交易订单（20% antd detail 优化代码风格）

apps/web-antd/src/api/mall/trade/order/index.ts

@@ -6,11 +6,11 @@ export namespace MallOrderApi {
   /** 商品属性 */
   export interface ProductProperty {
     /** 属性的编号 */
-    propertyId?: null | number;
+    propertyId?: number;
     /** 属性的名称 */
     propertyName?: string;
     /** 属性值的编号 */
-    valueId?: null | number;
+    valueId?: number;
     /** 属性值的名称 */
     valueName?: string;
   }
@@ -18,35 +18,35 @@ export namespace MallOrderApi {
   /** 订单项 */
   export interface OrderItem {
     /** 编号 */
-    id?: null | number;
+    id?: number;
     /** 用户编号 */
-    userId?: null | number;
+    userId?: number;
     /** 订单编号 */
-    orderId?: null | number;
+    orderId?: number;
     /** 商品 SPU 编号 */
-    spuId?: null | number;
+    spuId?: number;
     /** 商品 SPU 名称 */
     spuName?: string;
     /** 商品 SKU 编号 */
-    skuId?: null | number;
+    skuId?: number;
     /** 商品图片 */
     picUrl?: string;
     /** 购买数量 */
-    count?: null | number;
+    count?: number;
     /** 商品原价（总） */
-    originalPrice?: null | number;
+    originalPrice?: number;
     /** 商品原价（单） */
-    originalUnitPrice?: null | number;
+    originalUnitPrice?: number;
     /** 商品优惠（总） */
-    discountPrice?: null | number;
+    discountPrice?: number;
     /** 商品实付金额（总） */
-    payPrice?: null | number;
+    payPrice?: number;
     /** 子订单分摊金额（总） */
-    orderPartPrice?: null | number;
+    orderPartPrice?: number;
     /** 分摊后子订单实付金额（总） */
-    orderDividePrice?: null | number;
+    orderDividePrice?: number;
     /** 售后状态 */
-    afterSaleStatus?: null | number;
+    afterSaleStatus?: number;
     /** 属性数组 */
     properties?: ProductProperty[];
     price?: number;
@@ -67,91 +67,91 @@ export namespace MallOrderApi {
   /** 订单 */
   export interface Order {
     /** 订单编号 */
-    id?: null | number;
+    id?: number;
     /** 订单流水号 */
     no?: string;
     /** 下单时间 */
-    createTime?: Date | null;
+    createTime?: Date;
     /** 订单类型 */
-    type?: null | number;
+    type?: number;
     /** 订单来源 */
-    terminal?: null | number;
+    terminal?: number;
     /** 用户编号 */
-    userId?: null | number;
+    userId?: number;
     /** 用户 IP */
     userIp?: string;
     /** 用户备注 */
     userRemark?: string;
     /** 订单状态 */
-    status?: null | number;
+    status?: number;
     /** 购买的商品数量 */
-    productCount?: null | number;
+    productCount?: number;
     /** 订单完成时间 */
-    finishTime?: Date | null;
+    finishTime?: Date;
     /** 订单取消时间 */
-    cancelTime?: Date | null;
+    cancelTime?: Date;
     /** 取消类型 */
-    cancelType?: null | number;
+    cancelType?: number;
     /** 商家备注 */
     remark?: string;
     /** 支付订单编号 */
-    payOrderId?: null | number;
+    payOrderId?: number;
     /** 是否已支付 */
     payStatus?: boolean;
     /** 付款时间 */
-    payTime?: Date | null;
+    payTime?: Date;
     /** 支付渠道 */
     payChannelCode?: string;
     /** 商品原价（总） */
-    totalPrice?: null | number;
+    totalPrice?: number;
     /** 订单优惠（总） */
-    discountPrice?: null | number;
+    discountPrice?: number;
     /** 运费金额 */
-    deliveryPrice?: null | number;
+    deliveryPrice?: number;
     /** 订单调价（总） */
-    adjustPrice?: null | number;
+    adjustPrice?: number;
     /** 应付金额（总） */
-    payPrice?: null | number;
+    payPrice?: number;
     /** 发货方式 */
-    deliveryType?: null | number;
+    deliveryType?: number;
     /** 自提门店编号 */
     pickUpStoreId?: number;
     /** 自提核销码 */
     pickUpVerifyCode?: string;
     /** 配送模板编号 */
-    deliveryTemplateId?: null | number;
+    deliveryTemplateId?: number;
     /** 发货物流公司编号 */
-    logisticsId?: null | number;
+    logisticsId?: number;
     /** 发货物流单号 */
     logisticsNo?: string;
     /** 发货时间 */
-    deliveryTime?: Date | null;
+    deliveryTime?: Date;
     /** 收货时间 */
-    receiveTime?: Date | null;
+    receiveTime?: Date;
     /** 收件人名称 */
     receiverName?: string;
     /** 收件人手机 */
     receiverMobile?: string;
     /** 收件人邮编 */
-    receiverPostCode?: null | number;
+    receiverPostCode?: number;
     /** 收件人地区编号 */
-    receiverAreaId?: null | number;
+    receiverAreaId?: number;
     /** 收件人地区名字 */
     receiverAreaName?: string;
     /** 收件人详细地址 */
     receiverDetailAddress?: string;
     /** 售后状态 */
-    afterSaleStatus?: null | number;
+    afterSaleStatus?: number;
     /** 退款金额 */
-    refundPrice?: null | number;
+    refundPrice?: number;
     /** 优惠劵编号 */
-    couponId?: null | number;
+    couponId?: number;
     /** 优惠劵减免金额 */
-    couponPrice?: null | number;
+    couponPrice?: number;
     /** 积分抵扣的金额 */
-    pointPrice?: null | number;
+    pointPrice?: number;
     /** VIP 减免金额 */
-    vipPrice?: null | number;
+    vipPrice?: number;
     /** 订单项列表 */
     items?: OrderItem[];
     /** 下单用户信息 */
@@ -159,7 +159,7 @@ export namespace MallOrderApi {
       /** 用户头像 */
       avatar?: string;
       /** 用户编号 */
-      id?: null | number;
+      id?: number;
       /** 用户昵称 */
       nickname?: string;
     };
@@ -168,7 +168,7 @@ export namespace MallOrderApi {
       /** 用户头像 */
       avatar?: string;
       /** 用户编号 */
-      id?: null | number;
+      id?: number;
       /** 用户昵称 */
       nickname?: string;
     };
@@ -195,7 +195,7 @@ export namespace MallOrderApi {
     /** 发货方式 */
     expressType: string;
     /** 物流公司编号 */
-    logisticsId: null | number;
+    logisticsId: number;
     /** 物流编号 */
     logisticsNo: string;
   }

apps/web-antd/src/views/mall/trade/order/detail/data.ts

@@ -1,11 +1,11 @@
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MallOrderApi } from '#/api/mall/trade/order';
 import type { DescriptionItemSchema } from '#/components/description';
-import type { VxeGridPropTypes } from 'vxe-table';
 
 import { h } from 'vue';
 
 import { DICT_TYPE } from '@vben/constants';
-import { fenToYuan, formatDate } from '@vben/utils';
+import { fenToYuan, formatDateTime } from '@vben/utils';
 
 import { DictTag } from '#/components/dict-tag';
 
@@ -82,10 +82,13 @@ export function useOrderStatusSchema(): DescriptionItemSchema[] {
       field: 'reminder',
       label: '提醒',
       content: () =>
-        h('div', { class: 'text-red-500 space-y-1' }, [
+        h('div', { class: 'space-y-1' }, [
           h('div', '买家付款成功后，货款将直接进入您的商户号（微信、支付宝）'),
           h('div', '请及时关注你发出的包裹状态，确保可以配送至买家手中'),
-          h('div', '如果买家表示没收到货或货物有问题，请及时联系买家处理，友好协商'),
+          h(
+            'div',
+            '如果买家表示没收到货或货物有问题，请及时联系买家处理，友好协商',
+          ),
         ]),
     },
   ];
@@ -97,46 +100,66 @@ export function useOrderPriceSchema(): DescriptionItemSchema[] {
     {
       field: 'totalPrice',
       label: '商品总额',
-      content: (data: MallOrderApi.Order) => `${fenToYuan(data?.totalPrice ?? 0)} 元`,
+      content: (data: MallOrderApi.Order) =>
+        `${fenToYuan(data?.totalPrice ?? 0)} 元`,
     },
     {
       field: 'deliveryPrice',
       label: '运费金额',
-      content: (data: MallOrderApi.Order) => `${fenToYuan(data?.deliveryPrice ?? 0)} 元`,
+      content: (data: MallOrderApi.Order) =>
+        `${fenToYuan(data?.deliveryPrice ?? 0)} 元`,
     },
     {
       field: 'adjustPrice',
       label: '订单调价',
-      content: (data: MallOrderApi.Order) => `${fenToYuan(data?.adjustPrice ?? 0)} 元`,
+      content: (data: MallOrderApi.Order) =>
+        `${fenToYuan(data?.adjustPrice ?? 0)} 元`,
     },
     {
       field: 'couponPrice',
       label: '优惠劵优惠',
       content: (data: MallOrderApi.Order) =>
-        h('span', { class: 'text-red-500' }, `${fenToYuan(data?.couponPrice ?? 0)} 元`),
+        h(
+          'span',
+          { class: 'text-red-500' },
+          `${fenToYuan(data?.couponPrice ?? 0)} 元`,
+        ),
     },
     {
       field: 'vipPrice',
       label: 'VIP 优惠',
       content: (data: MallOrderApi.Order) =>
-        h('span', { class: 'text-red-500' }, `${fenToYuan(data?.vipPrice ?? 0)} 元`),
+        h(
+          'span',
+          { class: 'text-red-500' },
+          `${fenToYuan(data?.vipPrice ?? 0)} 元`,
+        ),
     },
     {
       field: 'discountPrice',
       label: '活动优惠',
       content: (data: MallOrderApi.Order) =>
-        h('span', { class: 'text-red-500' }, `${fenToYuan(data?.discountPrice ?? 0)} 元`),
+        h(
+          'span',
+          { class: 'text-red-500' },
+          `${fenToYuan(data?.discountPrice ?? 0)} 元`,
+        ),
     },
     {
       field: 'pointPrice',
       label: '积分抵扣',
       content: (data: MallOrderApi.Order) =>
-        h('span', { class: 'text-red-500' }, `${fenToYuan(data?.pointPrice ?? 0)} 元`),
+        h(
+          'span',
+          { class: 'text-red-500' },
+          `${fenToYuan(data?.pointPrice ?? 0)} 元`,
+        ),
     },
     {
       field: 'payPrice',
       label: '应付金额',
-      content: (data: MallOrderApi.Order) => `${fenToYuan(data?.payPrice ?? 0)} 元`,
+      content: (data: MallOrderApi.Order) =>
+        `${fenToYuan(data?.payPrice ?? 0)} 元`,
     },
   ];
 }
@@ -168,21 +191,17 @@ export function useDeliveryInfoSchema(): DescriptionItemSchema[] {
         `${data?.receiverAreaName} ${data?.receiverDetailAddress}`.trim(),
     },
     {
-      field: 'logisticsTime',
+      field: 'deliveryTime',
       label: '发货时间',
-      content: (data: MallOrderApi.Order) => formatDate(data?.deliveryTime) as string,
+      content: (data: MallOrderApi.Order) =>
+        formatDateTime(data?.deliveryTime) as string,
     },
   ];
 }
 
 /** 商品信息 columns */
-export function useProductColumns(): VxeGridPropTypes.Columns {
+export function useProductColumns(): VxeTableGridOptions['columns'] {
   return [
-    {
-      type: 'seq',
-      width: 60,
-      title: '序号',
-    },
     {
       field: 'spuName',
       title: '商品',
@@ -193,7 +212,7 @@ export function useProductColumns(): VxeGridPropTypes.Columns {
       field: 'price',
       title: '商品原价',
       width: 150,
-      formatter: ({ cellValue }: any) => `${fenToYuan(cellValue)} 元`,
+      formatter: 'formatFenToYuanAmount',
     },
     {
       field: 'count',
@@ -204,25 +223,45 @@ export function useProductColumns(): VxeGridPropTypes.Columns {
       field: 'payPrice',
       title: '合计',
       width: 150,
-      formatter: ({ cellValue }: any) => `${fenToYuan(cellValue)} 元`,
+      formatter: 'formatFenToYuanAmount',
     },
     {
       field: 'afterSaleStatus',
       title: '售后状态',
       width: 120,
-      slots: { default: 'afterSaleStatus' },
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS },
+      },
+    },
+  ];
+}
+
+/** 物流详情 columns */
+export function useExpressTrackColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'time',
+      title: '时间',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'content',
+      title: '物流状态',
+      minWidth: 300,
     },
   ];
 }
 
 /** 操作日志 columns */
-export function useOperateLogColumns(): VxeGridPropTypes.Columns {
+export function useOperateLogColumns(): VxeTableGridOptions['columns'] {
   return [
     {
       field: 'createTime',
       title: '操作时间',
       width: 180,
-      formatter: ({ cellValue }: any) => formatDate(cellValue) as string,
+      formatter: 'formatDateTime',
     },
     {
       field: 'userType',
@@ -236,4 +275,4 @@ export function useOperateLogColumns(): VxeGridPropTypes.Columns {
       minWidth: 200,
     },
   ];
-}
+}

apps/web-antd/src/views/mall/trade/order/detail/index.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MallDeliveryExpressApi } from '#/api/mall/trade/delivery/express';
 import type { MallDeliveryPickUpStoreApi } from '#/api/mall/trade/delivery/pickUpStore';
 import type { MallOrderApi } from '#/api/mall/trade/order';
@@ -12,12 +13,9 @@ import {
   DICT_TYPE,
   TradeOrderStatusEnum,
 } from '@vben/constants';
-import { getDictLabel, getDictObj } from '@vben/hooks';
-import { formatDate } from '@vben/utils';
 import { useTabs } from '@vben/hooks';
 
-import { Card, Tag, Timeline } from 'ant-design-vue';
-import { message } from 'ant-design-vue';
+import { Card, message, Tag } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import * as DeliveryExpressApi from '#/api/mall/trade/delivery/express';
@@ -33,6 +31,7 @@ import OrderUpdatePriceForm from '../modules/update-price-form.vue';
 import OrderUpdateRemarkForm from '../modules/update-remark-form.vue';
 import {
   useDeliveryInfoSchema,
+  useExpressTrackColumns,
   useOperateLogColumns,
   useOrderInfoSchema,
   useOrderPriceSchema,
@@ -46,31 +45,17 @@ const route = useRoute();
 const router = useRouter();
 const tabs = useTabs();
 
-// 查询参数
-const props = defineProps({
-  id: {
-    type: Number,
-    default: undefined,
-  }, // 订单ID
-  showPickUp: {
-    type: Boolean,
-    default: true,
-  }, // 显示核销按钮
-});
-
 const loading = ref(false);
 const orderId = ref(0);
-const formData = ref<MallOrderApi.Order>({
+const order = ref<MallOrderApi.Order>({
   logs: [],
 });
-
-const deliveryExpressList = ref<MallDeliveryExpressApi.SimpleDeliveryExpress[]>([]);
-const expressTrackList = ref<any[]>([]);
-const pickUpStore = ref<MallDeliveryPickUpStoreApi.PickUpStore>(
-  {} as MallDeliveryPickUpStoreApi.PickUpStore,
+const deliveryExpressList = ref<MallDeliveryExpressApi.SimpleDeliveryExpress[]>(
+  [],
 );
+const expressTrackList = ref<any[]>([]);
+const pickUpStore = ref<MallDeliveryPickUpStoreApi.PickUpStore | undefined>();
 
-// Description 组件
 const [OrderInfoDescriptions] = useDescription({
   componentProps: {
     title: '订单信息',
@@ -84,7 +69,7 @@ const [OrderStatusDescriptions] = useDescription({
   componentProps: {
     title: '订单状态',
     bordered: false,
-    column: 2,
+    column: 1,
   },
   schema: useOrderStatusSchema(),
 });
@@ -107,7 +92,6 @@ const [DeliveryInfoDescriptions] = useDescription({
   schema: useDeliveryInfoSchema(),
 });
 
-// Grid 组件
 const [ProductGrid, productGridApi] = useVbenVxeGrid({
   gridOptions: {
     cellConfig: {
@@ -124,7 +108,22 @@ const [ProductGrid, productGridApi] = useVbenVxeGrid({
       refresh: true,
       search: true,
     },
-  },
+  } as VxeTableGridOptions<MallOrderApi.OrderItem>,
+});
+
+const [ExpressTrackGrid, expressTrackGridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useExpressTrackColumns(),
+    data: [],
+    border: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions,
 });
 
 const [OperateLogGrid, operateLogGridApi] = useVbenVxeGrid({
@@ -139,10 +138,9 @@ const [OperateLogGrid, operateLogGridApi] = useVbenVxeGrid({
       refresh: true,
       search: true,
     },
-  },
+  } as VxeTableGridOptions,
 });
 
-// Modal 组件
 const [DeliveryFormModal, deliveryFormModalApi] = useVbenModal({
   connectedComponent: DeliveryForm,
   destroyOnClose: true,
@@ -163,78 +161,31 @@ const [OrderUpdatePriceFormModal, priceFormModalApi] = useVbenModal({
   destroyOnClose: true,
 });
 
-/** 获得 userType 颜色 */
-const getUserTypeColor = (type: number) => {
-  const dict = getDictObj(DICT_TYPE.USER_TYPE, type);
-  switch (dict?.colorType) {
-    case 'danger': {
-      return '#F56C6C';
-    }
-    case 'info': {
-      return '#909399';
-    }
-    case 'success': {
-      return '#67C23A';
-    }
-    case 'warning': {
-      return '#E6A23C';
-    }
-  }
-  return '#409EFF';
-};
-
-/** 各种操作 */
-const handleRemark = () => {
-  remarkFormModalApi.setData(formData.value).open();
-};
-
-const handleDelivery = () => {
-  deliveryFormModalApi.setData(formData.value).open();
-};
-
-const handleUpdateAddress = () => {
-  addressFormModalApi.setData(formData.value).open();
-};
-
-const handleUpdatePrice = () => {
-  priceFormModalApi.setData(formData.value).open();
-};
-
-/** 核销 */
-const handlePickUp = async () => {
-  await confirm('确认核销订单吗？');
-  const hideLoading = message.loading({
-    content: '正在处理中...',
-    duration: 0,
-  });
-  try {
-    await TradeOrderApi.pickUpOrder(formData.value.id!);
-    message.success('核销成功');
-    await getDetail();
-  } finally {
-    hideLoading();
-  }
-};
-
 /** 获得详情 */
-const getDetail = async () => {
+async function getDetail() {
   loading.value = true;
   try {
     const res = await TradeOrderApi.getOrder(orderId.value);
-    if (!res) {
+    if (res === null) {
       message.error('交易订单不存在');
       handleBack();
       return;
     }
-    formData.value = res;
+    order.value = res;
     productGridApi.setGridOptions({ data: res.items || [] });
     operateLogGridApi.setGridOptions({ data: res.logs || [] });
 
     // 如果配送方式为快递，则查询物流公司
     if (res.deliveryType === DeliveryTypeEnum.EXPRESS.type) {
-      deliveryExpressList.value = await DeliveryExpressApi.getSimpleDeliveryExpressList();
+      deliveryExpressList.value =
+        await DeliveryExpressApi.getSimpleDeliveryExpressList();
       if (res.logisticsId) {
-        expressTrackList.value = await TradeOrderApi.getExpressTrackList(res.id!);
+        expressTrackList.value = await TradeOrderApi.getExpressTrackList(
+          res.id!,
+        );
+        expressTrackGridApi.setGridOptions({
+          data: expressTrackList.value || [],
+        });
       }
     } else if (
       res.deliveryType === DeliveryTypeEnum.PICK_UP.type &&
@@ -247,6 +198,39 @@ const getDetail = async () => {
   } finally {
     loading.value = false;
   }
+}
+
+/** 各种操作 */
+const handleRemark = () => {
+  remarkFormModalApi.setData(order.value).open();
+};
+
+const handleDelivery = () => {
+  deliveryFormModalApi.setData(order.value).open();
+};
+
+const handleUpdateAddress = () => {
+  addressFormModalApi.setData(order.value).open();
+};
+
+const handleUpdatePrice = () => {
+  priceFormModalApi.setData(order.value).open();
+};
+
+/** 核销 */
+const handlePickUp = async () => {
+  await confirm('确认核销订单吗？');
+  const hideLoading = message.loading({
+    content: '正在处理中...',
+    duration: 0,
+  });
+  try {
+    await TradeOrderApi.pickUpOrder(order.value.id!);
+    message.success('核销成功');
+    await getDetail();
+  } finally {
+    hideLoading();
+  }
 };
 
 /** 返回列表页 */
@@ -255,18 +239,15 @@ function handleBack() {
   router.push('/mall/trade/order');
 }
 
-
 /** 初始化 */
 onMounted(async () => {
-  orderId.value = Number(route.params.id) || props.id || 0;
-  if (orderId.value) {
-    await getDetail();
-  }
+  orderId.value = Number(route.params.id);
+  await getDetail();
 });
 </script>
 
 <template>
-  <Page auto-content-height :title="formData.no" :loading="loading">
+  <Page auto-content-height :title="order.no" :loading="loading">
     <template #extra>
       <TableAction
         :actions="[
@@ -280,7 +261,7 @@ onMounted(async () => {
             label: '调整价格',
             type: 'primary',
             onClick: handleUpdatePrice,
-            ifShow: formData.status === TradeOrderStatusEnum.UNPAID.status,
+            ifShow: order.status === TradeOrderStatusEnum.UNPAID.status,
           },
           {
             label: '备注',
@@ -292,25 +273,24 @@ onMounted(async () => {
             type: 'primary',
             onClick: handleDelivery,
             ifShow:
-              formData.status === TradeOrderStatusEnum.UNDELIVERED.status &&
-              formData.deliveryType === DeliveryTypeEnum.EXPRESS.type,
+              order.status === TradeOrderStatusEnum.UNDELIVERED.status &&
+              order.deliveryType === DeliveryTypeEnum.EXPRESS.type,
           },
           {
             label: '修改地址',
             type: 'primary',
             onClick: handleUpdateAddress,
             ifShow:
-              formData.status === TradeOrderStatusEnum.UNDELIVERED.status &&
-              formData.deliveryType === DeliveryTypeEnum.EXPRESS.type,
+              order.status === TradeOrderStatusEnum.UNDELIVERED.status &&
+              order.deliveryType === DeliveryTypeEnum.EXPRESS.type,
           },
           {
             label: '核销',
             type: 'primary',
             onClick: handlePickUp,
             ifShow:
-              formData.status === TradeOrderStatusEnum.UNDELIVERED.status &&
-              formData.deliveryType === DeliveryTypeEnum.PICK_UP.type &&
-              showPickUp,
+              order.status === TradeOrderStatusEnum.UNDELIVERED.status &&
+              order.deliveryType === DeliveryTypeEnum.PICK_UP.type,
           },
         ]"
       />
@@ -324,14 +304,12 @@ onMounted(async () => {
 
     <!-- 订单信息 -->
     <Card class="mb-4">
-      <OrderInfoDescriptions :data="formData" />
+      <OrderInfoDescriptions :data="order" />
     </Card>
-
     <!-- 订单状态 -->
     <Card class="mb-4">
-      <OrderStatusDescriptions :data="formData" />
+      <OrderStatusDescriptions :data="order" />
     </Card>
-
     <!-- 商品信息 -->
     <div class="mb-4">
       <ProductGrid table-title="商品信息">
@@ -349,66 +327,28 @@ onMounted(async () => {
             </div>
           </div>
         </template>
-        <template #afterSaleStatus="{ row }">
-          <DictTag
-            :type="DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS"
-            :value="row.afterSaleStatus"
-          />
-        </template>
       </ProductGrid>
     </div>
-
     <!-- 费用信息 -->
     <Card class="mb-4">
-      <OrderPriceDescriptions :data="formData" />
+      <OrderPriceDescriptions :data="order" />
     </Card>
-
     <!-- 收货信息 -->
     <Card class="mb-4">
-      <DeliveryInfoDescriptions :data="formData" />
-      <!-- 物流详情 -->
-      <div v-if="expressTrackList.length > 0" class="mt-4">
-        <h4 class="mb-2 font-semibold">物流详情</h4>
-        <Timeline>
-          <Timeline.Item
-            v-for="(track, index) in expressTrackList"
-            :key="index"
-          >
-            <template #dot>
-              <div class="h-2 w-2 rounded-full bg-blue-500"></div>
-            </template>
-            <div>
-              <div class="text-sm text-gray-600">
-                {{ formatDate(track.time) }}
-              </div>
-              <div class="text-sm">{{ track.content }}</div>
-            </div>
-          </Timeline.Item>
-        </Timeline>
-      </div>
+      <DeliveryInfoDescriptions :data="order" />
     </Card>
-
+    <!-- 物流详情 -->
+    <div v-if="expressTrackList.length > 0" class="mt-4">
+      <ExpressTrackGrid table-title="物流详情" />
+    </div>
     <!-- 操作日志 -->
     <div>
       <OperateLogGrid table-title="操作日志">
         <template #userType="{ row }">
-          <Tag
-            v-if="row.userId === 0"
-            color="default"
-          >
-            系统
-          </Tag>
-          <div v-else class="flex items-center gap-2">
-            <span
-              :style="{ backgroundColor: getUserTypeColor(row.userType!) }"
-              class="inline-flex h-5 w-5 items-center justify-center rounded-full text-xs text-white"
-            >
-              {{ getDictLabel(DICT_TYPE.USER_TYPE, row.userType)[0] }}
-            </span>
-            <DictTag :type="DICT_TYPE.USER_TYPE" :value="row.userType" />
-          </div>
+          <Tag v-if="row.userId === 0" color="default"> 系统 </Tag>
+          <DictTag :type="DICT_TYPE.USER_TYPE" :value="row.userType" />
         </template>
       </OperateLogGrid>
     </div>
   </Page>
-</template>
+</template>