From 75c24789ff41ae2c205a8430a11b2e0b36a48780 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 13 Oct 2025 21:17:34 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E3=80=90mall=20=E5=95=86=E5=9F=8E?=
 =?UTF-8?q?=E3=80=91=E9=97=A8=E5=BA=97=E8=87=AA=E6=8F=90=E7=9A=84=E8=BF=81?=
 =?UTF-8?q?=E7=A7=BB=EF=BC=88antd=20100%=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/api/mall/trade/order/index.ts         |  1 +
 .../mall/trade/delivery/pickUpOrder/data.ts   | 15 +++----
 .../mall/trade/delivery/pickUpOrder/index.vue | 42 ++++++++++++++++++-
 3 files changed, 47 insertions(+), 11 deletions(-)

diff --git a/apps/web-antd/src/api/mall/trade/order/index.ts b/apps/web-antd/src/api/mall/trade/order/index.ts
index 617ea2b66..999a33f85 100644
--- a/apps/web-antd/src/api/mall/trade/order/index.ts
+++ b/apps/web-antd/src/api/mall/trade/order/index.ts
@@ -49,6 +49,7 @@ export namespace MallOrderApi {
     afterSaleStatus?: null | number;
     /** 属性数组 */
     properties?: ProductProperty[];
+    price?: number;
   }
 
   /** 订单日志 */
diff --git a/apps/web-antd/src/views/mall/trade/delivery/pickUpOrder/data.ts b/apps/web-antd/src/views/mall/trade/delivery/pickUpOrder/data.ts
index dcaf53899..cdcf071f4 100644
--- a/apps/web-antd/src/views/mall/trade/delivery/pickUpOrder/data.ts
+++ b/apps/web-antd/src/views/mall/trade/delivery/pickUpOrder/data.ts
@@ -111,12 +111,8 @@ export function useGridColumns(): VxeGridPropTypes.Columns {
     {
       field: 'spuName',
       title: '商品信息',
-      minWidth: 100,
-      formatter: ({ row }) => {
-        if (row.items.length > 1) {
-          return row.items.map((item: any) => item.spuName).join(',');
-        }
-      },
+      minWidth: 300,
+      slots: { default: 'spuName' },
     },
     {
       field: 'payPrice',
@@ -134,9 +130,10 @@ export function useGridColumns(): VxeGridPropTypes.Columns {
       title: '核销门店',
       minWidth: 160,
       formatter: ({ row }) => {
-        return pickUpStoreList.value.find(
-          (item) => item.id === row.pickUpStoreId,
-        )?.name;
+        return (
+          pickUpStoreList.value.find((item) => item.id === row.pickUpStoreId)
+            ?.name || ''
+        );
       },
     },
     {
diff --git a/apps/web-antd/src/views/mall/trade/delivery/pickUpOrder/index.vue b/apps/web-antd/src/views/mall/trade/delivery/pickUpOrder/index.vue
index d08771a0b..e679f20c1 100644
--- a/apps/web-antd/src/views/mall/trade/delivery/pickUpOrder/index.vue
+++ b/apps/web-antd/src/views/mall/trade/delivery/pickUpOrder/index.vue
@@ -9,7 +9,7 @@ import { DeliveryTypeEnum } from '@vben/constants';
 import { $t } from '@vben/locales';
 import { fenToYuan } from '@vben/utils';
 
-import { Card, Input, message } from 'ant-design-vue';
+import { Card, Image, Input, message, Tag } from 'ant-design-vue';
 
 import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -156,6 +156,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
     schema: useGridFormSchema(),
   },
   gridOptions: {
+    cellConfig: {
+      height: 100,
+    },
     columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
@@ -226,8 +229,43 @@ const [Grid, gridApi] = useVbenVxeGrid({
         />
       </div>
     </Card>
-    <!-- TODO @AI：商品信息的样式 -->
+
     <Grid class="h-4/5" table-title="核销订单">
+      <template #spuName="{ row }">
+        <div class="flex flex-col gap-2">
+          <div
+            v-for="item in row.items"
+            :key="item.id!"
+            class="flex items-start gap-2"
+          >
+            <Image
+              :src="item.picUrl"
+              :alt="item.spuName"
+              :width="30"
+              :height="30"
+              class="flex-shrink-0"
+              :preview="{
+                src: item.picUrl,
+              }"
+            />
+            <div class="flex flex-1 flex-col gap-1">
+              <span class="text-sm">{{ item.spuName }}</span>
+              <div class="flex flex-wrap gap-1">
+                <Tag
+                  v-for="property in item.properties"
+                  :key="property.propertyId!"
+                  size="small"
+                >
+                  {{ property.propertyName }}: {{ property.valueName }}
+                </Tag>
+              </div>
+              <span class="text-xs text-gray-500">
+                {{ fenToYuan(item.price!) }} 元 x {{ item.count }}
+              </span>
+            </div>
+          </div>
+        </div>
+      </template>
       <template #toolbar-tools>
         <TableAction
           :actions="[