diff --git a/apps/web-antd/src/api/mall/trade/config/index.ts b/apps/web-antd/src/api/mall/trade/config/index.ts
index f72eeab47..de419d290 100644
--- a/apps/web-antd/src/api/mall/trade/config/index.ts
+++ b/apps/web-antd/src/api/mall/trade/config/index.ts
@@ -3,24 +3,22 @@ import { requestClient } from '#/api/request';
 export namespace MallTradeConfigApi {
   /** 交易中心配置 */
   export interface Config {
-    /** 是否启用分销 */
-    brokerageEnabled: boolean;
-    /** 分销资格条件 */
-    brokerageEnabledCondition: number;
-    /** 分销绑定模式 */
-    brokerageBindMode: number;
-    /** 分销海报图 */
-    brokeragePosterUrls: string;
-    /** 一级分销比例 */
-    brokerageFirstPercent: number;
-    /** 二级分销比例 */
-    brokerageSecondPercent: number;
-    /** 最小提现金额，单位：分 */
-    brokerageWithdrawMinPrice: number;
-    /** 冻结天数 */
-    brokerageFrozenDays: number;
-    /** 提现类型 */
-    brokerageWithdrawTypes: string;
+    id?: number;
+    afterSaleRefundReasons?: string[];
+    afterSaleReturnReasons?: string[];
+    deliveryExpressFreeEnabled?: boolean;
+    deliveryExpressFreePrice?: number;
+    deliveryPickUpEnabled?: boolean;
+    brokerageEnabled?: boolean;
+    brokerageEnabledCondition?: number;
+    brokerageBindMode?: number;
+    brokeragePosterUrls?: string;
+    brokerageFirstPercent?: number;
+    brokerageSecondPercent?: number;
+    brokerageWithdrawMinPrice?: number;
+    brokerageFrozenDays?: number;
+    brokerageWithdrawTypes?: string;
+    tencentLbsKey?: string;
   }
 }
 
diff --git a/apps/web-antd/src/views/mall/trade/config/data.ts b/apps/web-antd/src/views/mall/trade/config/data.ts
new file mode 100644
index 000000000..a66e44959
--- /dev/null
+++ b/apps/web-antd/src/views/mall/trade/config/data.ts
@@ -0,0 +1,246 @@
+import type { VbenFormSchema } from '#/adapter/form';
+
+import { DICT_TYPE, getDictOptions } from '#/utils';
+
+/** 售后表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'type',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'afterSaleRefundReasons',
+      label: '退款理由',
+      component: 'Select',
+      componentProps: {
+        mode: 'tags',
+        placeholder: '请直接输入退款理由',
+        class: 'w-full',
+      },
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => values.type === 'afterSale',
+      },
+    },
+    {
+      fieldName: 'afterSaleReturnReasons',
+      label: '退货理由',
+      component: 'Select',
+      componentProps: {
+        mode: 'tags',
+        placeholder: '请直接输入退货理由',
+        class: 'w-full',
+      },
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => values.type === 'afterSale',
+      },
+    },
+    {
+      fieldName: 'deliveryExpressFreeEnabled',
+      label: '启用包邮',
+      component: 'Switch',
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => values.type === 'delivery',
+      },
+      description: '商城是否启用全场包邮',
+    },
+    {
+      fieldName: 'deliveryExpressFreePrice',
+      label: '满额包邮',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        precision: 2,
+        class: 'w-full',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => values.type === 'delivery',
+      },
+      description: '商城商品满多少金额即可包邮，单位：元',
+    },
+    {
+      fieldName: 'deliveryPickUpEnabled',
+      label: '启用门店自提',
+      component: 'Switch',
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => values.type === 'delivery',
+      },
+    },
+    {
+      fieldName: 'brokerageEnabled',
+      label: '启用分佣',
+      component: 'Switch',
+      description: '商城是否开启分销模式',
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => values.type === 'brokerage',
+      },
+    },
+    {
+      fieldName: 'brokerageEnabledCondition',
+      label: '分佣模式',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(
+          DICT_TYPE.BROKERAGE_ENABLED_CONDITION,
+          'number',
+        ),
+        buttonStyle: 'solid',
+        optionType: 'button',
+        class: 'w-full',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => values.type === 'brokerage',
+      },
+      description:
+        '人人分销：每个用户都可以成为推广员 \n 单级分销：每个用户只能有一个上级推广员',
+    },
+    {
+      fieldName: 'brokerageBindMode',
+      label: '分销关系绑定',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.BROKERAGE_BIND_MODE, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+        class: 'w-full',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => values.type === 'brokerage',
+      },
+      description:
+        '首次绑定：只要用户没有推广人，随时都可以绑定推广关系 \n 注册绑定：只有新用户注册时或首次进入系统时才可以绑定推广关系',
+    },
+    {
+      fieldName: 'brokeragePosterUrls',
+      label: '分销海报图',
+      component: 'ImageUpload',
+      componentProps: {
+        maxSize: 1,
+      },
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => values.type === 'brokerage',
+      },
+      description: '个人中心分销海报图片，建议尺寸 600x1000',
+    },
+    {
+      fieldName: 'brokerageFirstPercent',
+      label: '一级返佣比例',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        max: 100,
+        class: 'w-full',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => values.type === 'brokerage',
+      },
+      description: '订单交易成功后给推广人返佣的百分比',
+    },
+    {
+      fieldName: 'brokerageSecondPercent',
+      label: '二级返佣比例',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        max: 100,
+        class: 'w-full',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => values.type === 'brokerage',
+      },
+      description: '订单交易成功后给推广人的推荐人返佣的百分比',
+    },
+    {
+      fieldName: 'brokerageFrozenDays',
+      label: '佣金冻结天数',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        class: 'w-full',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => values.type === 'brokerage',
+      },
+      description:
+        '防止用户退款，佣金被提现了，所以需要设置佣金冻结时间，单位：天',
+    },
+    {
+      fieldName: 'brokerageWithdrawMinPrice',
+      label: '提现最低金额',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        precision: 2,
+        class: 'w-full',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => values.type === 'brokerage',
+      },
+      description: '用户提现最低金额限制，单位：元',
+    },
+    {
+      fieldName: 'brokerageWithdrawFeePercent',
+      label: '提现手续费',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        max: 100,
+        class: 'w-full',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => values.type === 'brokerage',
+      },
+      description:
+        '提现手续费百分比，范围 0-100，0 为无提现手续费。例：设置 10，即收取 10% 手续费，提现10 元，到账 9 元，1 元手续费',
+    },
+    {
+      fieldName: 'brokerageWithdrawTypes',
+      label: '提现方式',
+      component: 'CheckboxGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.BROKERAGE_WITHDRAW_TYPE, 'number'),
+        class: 'w-full',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => values.type === 'brokerage',
+      },
+      description: '商城开通提现的付款方式',
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/mall/trade/config/index.vue b/apps/web-antd/src/views/mall/trade/config/index.vue
index f33c73328..6ca832a66 100644
--- a/apps/web-antd/src/views/mall/trade/config/index.vue
+++ b/apps/web-antd/src/views/mall/trade/config/index.vue
@@ -1,38 +1,99 @@
 <script lang="ts" setup>
+import type { MallTradeConfigApi } from '#/api/mall/trade/config';
+
+import { onMounted, ref } from 'vue';
+
 import { Page } from '@vben/common-ui';
 
-import { Button } from 'ant-design-vue';
+import { Card, message, Tabs } from 'ant-design-vue';
 
+import { useVbenForm } from '#/adapter/form';
+import { getTradeConfig, saveTradeConfig } from '#/api/mall/trade/config';
 import { DocAlert } from '#/components/doc-alert';
+import { $t } from '#/locales';
+
+import { useFormSchema } from './data';
+
+const activeKey = ref('afterSale');
+const formData = ref<MallTradeConfigApi.Config & { type?: string }>();
+
+function handleTabChange(key: any) {
+  activeKey.value = key;
+  formData.value!.type = activeKey.value;
+  formApi.setValues(formData.value!);
+  formApi.updateSchema(useFormSchema());
+}
+
+async function loadConfig() {
+  const res = await getTradeConfig();
+  if (res) {
+    formData.value = res;
+    // 金额缩小
+    formData.value.deliveryExpressFreePrice =
+      formData.value.deliveryExpressFreePrice! / 100 || 0;
+    formData.value.brokerageWithdrawMinPrice =
+      formData.value.brokerageWithdrawMinPrice! / 100 || 0;
+    formData.value!.type = activeKey.value;
+    formApi.updateSchema(useFormSchema());
+    await formApi.setValues(formData.value);
+  }
+}
+
+async function onSubmit() {
+  const { valid } = await formApi.validate();
+  if (!valid) {
+    return;
+  }
+  // 提交表单
+  const data = (await formApi.getValues()) as MallTradeConfigApi.Config;
+  formApi.setState({ commonConfig: { disabled: true } });
+  try {
+    await saveTradeConfig(data);
+    message.success($t('ui.actionMessage.operationSuccess'));
+  } finally {
+    formApi.setState({ commonConfig: { disabled: false } });
+  }
+}
+
+onMounted(() => {
+  loadConfig();
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    // 所有表单项
+    labelClass: 'w-2/6',
+  },
+  wrapperClass: 'grid-cols-1',
+  actionWrapperClass: 'text-center',
+  handleSubmit: onSubmit,
+  layout: 'horizontal',
+  resetButtonOptions: {
+    show: false,
+  },
+  schema: useFormSchema(),
+});
 </script>
 
 <template>
   <Page>
-    <DocAlert
-      title="【交易】交易订单"
-      url="https://doc.iocoder.cn/mall/trade-order/"
-    />
-    <DocAlert
-      title="【交易】购物车"
-      url="https://doc.iocoder.cn/mall/trade-cart/"
-    />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mall/trade/config/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mall/trade/config/index
-      代码，pull request 贡献给我们！
-    </Button>
+    <template #doc>
+      <DocAlert
+        title="【交易】交易订单"
+        url="https://doc.iocoder.cn/mall/trade-order/"
+      />
+      <DocAlert
+        title="【交易】购物车"
+        url="https://doc.iocoder.cn/mall/trade-cart/"
+      />
+    </template>
+    <Card>
+      <Tabs :active-key="activeKey" @change="handleTabChange">
+        <Tabs.TabPane tab="售后" key="afterSale" :force-render="true" />
+        <Tabs.TabPane tab="配送" key="delivery" :force-render="true" />
+        <Tabs.TabPane tab="分销" key="brokerage" :force-render="true" />
+      </Tabs>
+      <Form class="w-3/5" />
+    </Card>
   </Page>
 </template>