From 68fbd989910da981504783b97c8f3996be1b00c0 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 14 Oct 2025 13:02:27 +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=E5=94=AE=E5=90=8E=E9=80=80=E6=AC=BE=EF=BC=8810%=20ant?=
 =?UTF-8?q?d=20detail=20description=20=E7=9B=B8=E5=85=B3=E7=9A=84=E5=87=A0?=
 =?UTF-8?q?=E4=B8=AA=E6=8F=8F=E8=BF=B0=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/mall/trade/afterSale/detail/data.ts | 263 ++++++++++++++
 .../mall/trade/afterSale/detail/index.vue     | 334 ++++++++++++++++++
 2 files changed, 597 insertions(+)
 create mode 100644 apps/web-antd/src/views/mall/trade/afterSale/detail/data.ts
 create mode 100644 apps/web-antd/src/views/mall/trade/afterSale/detail/index.vue

diff --git a/apps/web-antd/src/views/mall/trade/afterSale/detail/data.ts b/apps/web-antd/src/views/mall/trade/afterSale/detail/data.ts
new file mode 100644
index 000000000..b54075232
--- /dev/null
+++ b/apps/web-antd/src/views/mall/trade/afterSale/detail/data.ts
@@ -0,0 +1,263 @@
+import type { MallAfterSaleApi } from '#/api/mall/trade/afterSale';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { fenToYuan, formatDate } from '@vben/utils';
+
+import { Image } from 'ant-design-vue';
+
+import { DictTag } from '#/components/dict-tag';
+
+/** 订单信息 schema */
+export function useOrderInfoSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'orderNo',
+      label: '订单号',
+    },
+    {
+      field: 'order.deliveryType',
+      label: '配送方式',
+      content: (data: MallAfterSaleApi.AfterSale) =>
+        h(DictTag, {
+          type: DICT_TYPE.TRADE_DELIVERY_TYPE,
+          value: data?.order?.deliveryType,
+        }),
+    },
+    {
+      field: 'order.type',
+      label: '订单类型',
+      content: (data: MallAfterSaleApi.AfterSale) =>
+        h(DictTag, {
+          type: DICT_TYPE.TRADE_ORDER_TYPE,
+          value: data?.order?.type,
+        }),
+    },
+    {
+      field: 'order.receiverName',
+      label: '收货人',
+    },
+    {
+      field: 'order.userRemark',
+      label: '买家留言',
+    },
+    {
+      field: 'order.terminal',
+      label: '订单来源',
+      content: (data: MallAfterSaleApi.AfterSale) =>
+        h(DictTag, {
+          type: DICT_TYPE.TERMINAL,
+          value: data?.order?.terminal,
+        }),
+    },
+    {
+      field: 'order.receiverMobile',
+      label: '联系电话',
+    },
+    {
+      field: 'order.remark',
+      label: '商家备注',
+    },
+    {
+      field: 'order.payOrderId',
+      label: '支付单号',
+    },
+    {
+      field: 'order.payChannelCode',
+      label: '付款方式',
+      content: (data: MallAfterSaleApi.AfterSale) =>
+        h(DictTag, {
+          type: DICT_TYPE.PAY_CHANNEL_CODE,
+          value: data?.order?.payChannelCode,
+        }),
+    },
+    {
+      field: 'user.nickname',
+      label: '买家',
+    },
+  ];
+}
+
+/** 售后信息 schema */
+export function useAfterSaleInfoSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'no',
+      label: '退款编号',
+    },
+    {
+      field: 'auditTime',
+      label: '申请时间',
+      content: (data: MallAfterSaleApi.AfterSale) =>
+        formatDate(data?.auditTime) as string,
+    },
+    {
+      field: 'type',
+      label: '售后类型',
+      content: (data: MallAfterSaleApi.AfterSale) =>
+        h(DictTag, {
+          type: DICT_TYPE.TRADE_AFTER_SALE_TYPE,
+          value: data?.type,
+        }),
+    },
+    {
+      field: 'way',
+      label: '售后方式',
+      content: (data: MallAfterSaleApi.AfterSale) =>
+        h(DictTag, {
+          type: DICT_TYPE.TRADE_AFTER_SALE_WAY,
+          value: data?.way,
+        }),
+    },
+    {
+      field: 'refundPrice',
+      label: '退款金额',
+      content: (data: MallAfterSaleApi.AfterSale) =>
+        fenToYuan(data?.refundPrice ?? 0),
+    },
+    {
+      field: 'applyReason',
+      label: '退款原因',
+    },
+    {
+      field: 'applyDescription',
+      label: '补充描述',
+    },
+    {
+      field: 'applyPicUrls',
+      label: '凭证图片',
+      content: (data) => {
+        const images = data?.applyPicUrls || [];
+        return h(
+          'div',
+          { class: 'flex gap-10px' },
+          images.map((url: string, index: number) =>
+            h(Image, {
+              key: index,
+              src: url,
+              width: 60,
+              height: 60,
+              class: 'object-cover',
+            }),
+          ),
+        );
+      },
+    },
+  ];
+}
+
+/** 退款状态 schema */
+export function useRefundStatusSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'status',
+      label: '退款状态',
+      content: (data) =>
+        h(DictTag, {
+          type: DICT_TYPE.TRADE_AFTER_SALE_STATUS,
+          value: data?.status,
+        }),
+    },
+    {
+      field: 'reminder',
+      label: '提醒',
+      content: () =>
+        h('div', { class: 'text-red-500 mb-10px' }, [
+          h('div', '如果未发货，请点击同意退款给买家。'),
+          h('div', '如果实际已发货，请主动与买家联系。'),
+          h('div', '如果订单整体退款后，优惠券和余额会退还给买家.'),
+        ]),
+    },
+  ];
+}
+
+/** 商品信息 schema */
+export function useProductInfoSchema() {
+  return {
+    columns: [
+      {
+        field: 'spuName',
+        title: '商品',
+        width: 'auto',
+        formatter: ({ row }) => {
+          const properties = (row.properties || [])
+            .map(
+              (property: any) =>
+                `${property.propertyName}: ${property.valueName}`,
+            )
+            .join(', ');
+          return `${row.spuName}${properties ? ` (${properties})` : ''}`;
+        },
+      },
+      {
+        field: 'price',
+        title: '商品原价',
+        width: 150,
+        formatter: ({ cellValue }) => `${fenToYuan(cellValue)} 元`,
+      },
+      {
+        field: 'count',
+        title: '数量',
+        width: 100,
+      },
+      {
+        field: 'payPrice',
+        title: '合计',
+        width: 150,
+        formatter: ({ cellValue }) => `${fenToYuan(cellValue)} 元`,
+      },
+    ],
+    data: [],
+    pagination: false,
+    border: true,
+    size: 'small',
+  };
+}
+
+/** 操作日志 schema */
+export function useOperateLogSchema() {
+  return {
+    columns: [
+      {
+        field: 'createTime',
+        title: '操作时间',
+        width: 180,
+        formatter: ({ cellValue }) => formatDate(cellValue),
+      },
+      {
+        field: 'content',
+        title: '操作内容',
+        width: 'auto',
+      },
+      {
+        field: 'userType',
+        title: '操作人',
+        width: 80,
+        formatter: ({ cellValue }) => {
+          const userTypeLabels: Record<number, string> = {
+            1: '管',
+            2: '商',
+            3: '买',
+          };
+          return userTypeLabels[cellValue || 0] || '系';
+        },
+      },
+    ],
+    data: [],
+    pagination: false,
+    border: true,
+    size: 'small',
+  };
+}
+
+/** 获得用户类型颜色 */
+export function getUserTypeColor(type: number): string {
+  const colorMap: Record<number, string> = {
+    1: '#1890ff', // 蓝色
+    2: '#52c41a', // 绿色
+    3: '#fa8c16', // 橙色
+  };
+  return colorMap[type] || '#1890ff';
+}
diff --git a/apps/web-antd/src/views/mall/trade/afterSale/detail/index.vue b/apps/web-antd/src/views/mall/trade/afterSale/detail/index.vue
new file mode 100644
index 000000000..b913dfb8a
--- /dev/null
+++ b/apps/web-antd/src/views/mall/trade/afterSale/detail/index.vue
@@ -0,0 +1,334 @@
+<script setup lang="ts">
+import type { MallAfterSaleApi } from '#/api/mall/trade/afterSale';
+import type { MallOrderApi } from '#/api/mall/trade/order';
+
+import { h, onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictLabel, useTabs } from '@vben/hooks';
+import { $t } from '@vben/locales';
+
+import { Card, message, Modal, Timeline } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import * as AfterSaleApi from '#/api/mall/trade/afterSale/index';
+import { useDescription } from '#/components/description';
+import { TableAction } from '#/components/table-action';
+
+import {
+  getUserTypeColor,
+  useAfterSaleInfoSchema,
+  useOperateLogSchema,
+  useOrderInfoSchema,
+  useProductInfoSchema,
+  useRefundStatusSchema,
+} from './data';
+
+defineOptions({ name: 'TradeAfterSaleDetail' });
+
+const route = useRoute();
+const router = useRouter();
+const tabs = useTabs();
+
+const loading = ref(false);
+const afterSaleId = ref(0);
+const afterSale = ref<MallAfterSaleApi.AfterSale>({
+  order: {} as MallOrderApi.Order,
+  orderItem: {} as MallOrderApi.OrderItem,
+  logs: [] as any[],
+});
+
+const [OrderDescriptions] = useDescription({
+  componentProps: {
+    title: '订单信息',
+    bordered: false,
+    column: 3,
+  },
+  schema: useOrderInfoSchema(),
+});
+
+const [AfterSaleDescriptions] = useDescription({
+  componentProps: {
+    title: '售后信息',
+    bordered: false,
+    column: 3,
+  },
+  schema: useAfterSaleInfoSchema(),
+});
+
+const [RefundStatusDescriptions] = useDescription({
+  componentProps: {
+    title: '退款状态',
+    bordered: false,
+    column: 1,
+  },
+  schema: useRefundStatusSchema(),
+});
+
+// TODO @AI：只把 columns 拿出去
+const [ProductGrid] = useVbenVxeGrid({
+  gridOptions: {
+    ...useProductInfoSchema(),
+    class: 'mt-4',
+  },
+});
+
+// TODO @AI：只把 columns 拿出去
+const [OperateLogGrid] = useVbenVxeGrid({
+  gridOptions: {
+    ...useOperateLogSchema(),
+    class: 'mt-4',
+  },
+});
+
+const [DisagreeModal, disagreeModalApi] = useVbenModal({
+  connectedComponent: () => import('./modules/disagree-form.vue'),
+  destroyOnClose: true,
+});
+
+/** 获得详情 */
+async function getDetail() {
+  loading.value = true;
+  try {
+    const res = await AfterSaleApi.getAfterSale(afterSaleId.value);
+    if (res === null) {
+      message.error('售后订单不存在');
+      handleBack();
+      return;
+    }
+    afterSale.value = res;
+
+    // 更新商品信息
+    if (res.orderItem) {
+      ProductGrid.api?.reload([res.orderItem]);
+    }
+    // 更新操作日志
+    if (res.logs) {
+      OperateLogGrid.api?.reload(res.logs);
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 同意售后 */
+// TODO @AI：需要 loading
+async function agree() {
+  Modal.confirm({
+    title: '确认操作',
+    content: '是否同意售后？',
+    onOk: async () => {
+      await AfterSaleApi.agree(afterSale.value.id!);
+      message.success($t('page.common.success'));
+      await getDetail();
+    },
+  });
+}
+
+/** 拒绝售后 */
+function disagree() {
+  disagreeModalApi.setData({ afterSale: afterSale.value }).open();
+}
+
+/** 确认收货 */
+// TODO @AI：需要 loading
+async function receive() {
+  Modal.confirm({
+    title: '确认操作',
+    content: '是否确认收货？',
+    onOk: async () => {
+      await AfterSaleApi.receive(afterSale.value.id!);
+      message.success($t('page.common.success'));
+      await getDetail();
+    },
+  });
+}
+
+/** 拒绝收货 */
+// TODO @AI：需要 loading
+async function refuse() {
+  Modal.confirm({
+    title: '确认操作',
+    content: '是否拒绝收货？',
+    onOk: async () => {
+      await AfterSaleApi.refuse(afterSale.value.id!);
+      message.success($t('page.common.success'));
+      await getDetail();
+    },
+  });
+}
+
+/** 确认退款 */
+// TODO @AI：需要 loading
+async function refund() {
+  Modal.confirm({
+    title: '确认操作',
+    content: '是否确认退款？',
+    onOk: async () => {
+      await AfterSaleApi.refund(afterSale.value.id!);
+      message.success($t('page.common.success'));
+      await getDetail();
+    },
+  });
+}
+
+/** 返回列表页 */
+function handleBack() {
+  tabs.closeCurrentTab();
+  router.push('/mall/trade/afterSale');
+}
+
+/** 获取操作按钮 */
+function getActionButtons() {
+  const buttons: any[] = [
+    {
+      label: '返回',
+      type: 'default',
+      icon: 'lucide:arrow-left',
+      onClick: handleBack,
+    },
+  ];
+
+  // 根据状态添加不同的操作按钮
+  switch (afterSale.value.status) {
+    case 10: {
+      buttons.push(
+        {
+          label: '同意售后',
+          type: 'primary',
+          onClick: agree,
+        },
+        {
+          label: '拒绝售后',
+          type: 'primary',
+          onClick: disagree,
+        },
+      );
+
+      break;
+    }
+    case 30: {
+      buttons.push(
+        {
+          label: '确认收货',
+          type: 'primary',
+          onClick: receive,
+        },
+        {
+          label: '拒绝收货',
+          type: 'primary',
+          onClick: refuse,
+        },
+      );
+
+      break;
+    }
+    case 40: {
+      buttons.push({
+        label: '确认退款',
+        type: 'primary',
+        onClick: refund,
+      });
+
+      break;
+    }
+    // No default
+  }
+
+  return buttons;
+}
+
+/** 渲染操作日志时间线 */
+function renderTimeline() {
+  return afterSale.value.logs?.map((log: any) => ({
+    key: log.id,
+    children: [
+      h(
+        'div',
+        {
+          style: {
+            backgroundColor: '#f5f5f5',
+            padding: '10px',
+            borderRadius: '4px',
+            position: 'relative',
+            marginLeft: '10px',
+          },
+        },
+        [
+          h('div', log.content),
+          h('div', {
+            style: {
+              position: 'absolute',
+              left: '-16px',
+              top: '10px',
+              width: 0,
+              height: 0,
+              borderTop: '8px solid transparent',
+              borderBottom: '8px solid transparent',
+              borderRight: '8px solid #f5f5f5',
+            },
+          }),
+        ],
+      ),
+    ],
+    dot: h(
+      'span',
+      {
+        style: {
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: '20px',
+          height: '20px',
+          fontSize: '10px',
+          color: '#fff',
+          borderRadius: '50%',
+          backgroundColor: getUserTypeColor(log.userType ?? 0),
+        },
+      },
+      getDictLabel(DICT_TYPE.USER_TYPE, log.userType)?.[0] || '系',
+    ),
+  }));
+}
+
+onMounted(() => {
+  afterSaleId.value = Number(route.params.id);
+  getDetail();
+});
+</script>
+
+<template>
+  <Page auto-content-height :title="afterSale.no" :loading="loading">
+    <DisagreeModal @success="getDetail" />
+
+    <!-- TODO @AI：直接写，不用 getActionButtons；按钮是否展示，使用 ifShow -->
+    <template #extra>
+      <TableAction :actions="getActionButtons()" />
+    </template>
+
+    <!-- 订单信息 -->
+    <Card class="mb-4">
+      <OrderDescriptions :data="afterSale" />
+    </Card>
+    <!-- 售后信息 -->
+    <Card class="mb-4">
+      <AfterSaleDescriptions :data="afterSale" />
+    </Card>
+    <!-- 退款状态 -->
+    <Card class="mb-4">
+      <RefundStatusDescriptions :data="afterSale" />
+    </Card>
+    <!-- 商品信息 -->
+    <Card class="mb-4" title="商品信息">
+      <ProductGrid />
+    </Card>
+    <!-- 操作日志 -->
+    <Card class="mb-4" title="售后日志">
+      <div style="margin-left: 160px">
+        <Timeline :items="renderTimeline()" />
+      </div>
+    </Card>
+  </Page>
+</template>