From 95f2d1c9bbc8d4e84b750704e95a31d6aa9b100d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=83=E8=B4=A7?= <252048765@qq.com>
Date: Sat, 5 Jul 2025 07:10:58 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=94=AF=E4=BB=98?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E5=85=B6=E4=BB=96=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-ele/src/adapter/vxe-table.ts         |  32 +-
 .../components/description/description.vue    |  77 ++++
 .../src/components/description/index.ts       |   3 +
 .../src/components/description/typing.ts      |  27 ++
 .../components/description/use-description.ts |  71 ++++
 .../src/components/dict-tag/dict-tag.vue      |   2 +-
 apps/web-ele/src/views/pay/cashier/data.ts    |  81 ++++
 apps/web-ele/src/views/pay/cashier/index.vue  | 389 ++++++++++++++++++
 apps/web-ele/src/views/pay/demo/order/data.ts |  94 +++++
 .../src/views/pay/demo/order/index.vue        | 153 +++++++
 .../src/views/pay/demo/order/modules/form.vue |  55 +++
 .../src/views/pay/demo/withdraw/data.ts       | 124 ++++++
 .../src/views/pay/demo/withdraw/index.vue     | 144 +++++++
 .../views/pay/demo/withdraw/modules/form.vue  |  55 +++
 apps/web-ele/src/views/pay/notify/data.ts     | 168 ++++++++
 apps/web-ele/src/views/pay/notify/index.vue   |  81 ++++
 .../src/views/pay/notify/modules/detail.vue   | 101 +++++
 apps/web-ele/src/views/pay/order/data.ts      | 255 ++++++++++++
 apps/web-ele/src/views/pay/order/index.vue    | 115 ++++++
 .../src/views/pay/order/modules/detail.vue    |  56 +++
 apps/web-ele/src/views/pay/refund/data.ts     | 254 ++++++++++++
 apps/web-ele/src/views/pay/refund/index.vue   | 103 +++++
 .../src/views/pay/refund/modules/detail.vue   |  73 ++++
 apps/web-ele/src/views/pay/transfer/data.ts   | 274 ++++++++++++
 apps/web-ele/src/views/pay/transfer/index.vue | 103 +++++
 .../src/views/pay/transfer/modules/detail.vue |  57 +++
 .../src/views/pay/wallet/balance/data.ts      |  86 ++++
 .../src/views/pay/wallet/balance/index.vue    |  82 ++++
 .../pay/wallet/balance/modules/detail.vue     |  40 ++
 .../views/pay/wallet/rechargePackage/data.ts  | 119 ++++++
 .../pay/wallet/rechargePackage/index.vue      | 127 ++++++
 .../wallet/rechargePackage/modules/form.vue   |  98 +++++
 .../src/views/pay/wallet/transaction/data.ts  |  40 ++
 .../views/pay/wallet/transaction/index.vue    |  61 +++
 34 files changed, 3585 insertions(+), 15 deletions(-)
 create mode 100644 apps/web-ele/src/components/description/description.vue
 create mode 100644 apps/web-ele/src/components/description/index.ts
 create mode 100644 apps/web-ele/src/components/description/typing.ts
 create mode 100644 apps/web-ele/src/components/description/use-description.ts
 create mode 100644 apps/web-ele/src/views/pay/cashier/data.ts
 create mode 100644 apps/web-ele/src/views/pay/cashier/index.vue
 create mode 100644 apps/web-ele/src/views/pay/demo/order/data.ts
 create mode 100644 apps/web-ele/src/views/pay/demo/order/index.vue
 create mode 100644 apps/web-ele/src/views/pay/demo/order/modules/form.vue
 create mode 100644 apps/web-ele/src/views/pay/demo/withdraw/data.ts
 create mode 100644 apps/web-ele/src/views/pay/demo/withdraw/index.vue
 create mode 100644 apps/web-ele/src/views/pay/demo/withdraw/modules/form.vue
 create mode 100644 apps/web-ele/src/views/pay/notify/data.ts
 create mode 100644 apps/web-ele/src/views/pay/notify/index.vue
 create mode 100644 apps/web-ele/src/views/pay/notify/modules/detail.vue
 create mode 100644 apps/web-ele/src/views/pay/order/data.ts
 create mode 100644 apps/web-ele/src/views/pay/order/index.vue
 create mode 100644 apps/web-ele/src/views/pay/order/modules/detail.vue
 create mode 100644 apps/web-ele/src/views/pay/refund/data.ts
 create mode 100644 apps/web-ele/src/views/pay/refund/index.vue
 create mode 100644 apps/web-ele/src/views/pay/refund/modules/detail.vue
 create mode 100644 apps/web-ele/src/views/pay/transfer/data.ts
 create mode 100644 apps/web-ele/src/views/pay/transfer/index.vue
 create mode 100644 apps/web-ele/src/views/pay/transfer/modules/detail.vue
 create mode 100644 apps/web-ele/src/views/pay/wallet/balance/data.ts
 create mode 100644 apps/web-ele/src/views/pay/wallet/balance/index.vue
 create mode 100644 apps/web-ele/src/views/pay/wallet/balance/modules/detail.vue
 create mode 100644 apps/web-ele/src/views/pay/wallet/rechargePackage/data.ts
 create mode 100644 apps/web-ele/src/views/pay/wallet/rechargePackage/index.vue
 create mode 100644 apps/web-ele/src/views/pay/wallet/rechargePackage/modules/form.vue
 create mode 100644 apps/web-ele/src/views/pay/wallet/transaction/data.ts
 create mode 100644 apps/web-ele/src/views/pay/wallet/transaction/index.vue

diff --git a/apps/web-ele/src/adapter/vxe-table.ts b/apps/web-ele/src/adapter/vxe-table.ts
index d160c3c9b..1abd4e865 100644
--- a/apps/web-ele/src/adapter/vxe-table.ts
+++ b/apps/web-ele/src/adapter/vxe-table.ts
@@ -10,7 +10,7 @@ import {
   setupVbenVxeTable,
   useVbenVxeGrid,
 } from '@vben/plugins/vxe-table';
-import { isFunction, isString } from '@vben/utils';
+import { erpCountInputFormatter, erpNumberFormatter, formatPast2, isFunction, isString } from '@vben/utils';
 
 import { ElButton, ElImage, ElPopconfirm, ElSwitch } from 'element-plus';
 
@@ -267,21 +267,25 @@ setupVbenVxeTable({
 
     // 添加数量格式化，例如金额
     // TODO @xingyu：建议金额，和数量分开哈；原因是，有些团队希望金额，单独控制；
-    vxeUI.formats.add('formatNumber', {
-      cellFormatMethod({ cellValue }, digits = 2) {
-        if (cellValue === null || cellValue === undefined) {
-          return '';
-        }
-        if (isString(cellValue)) {
-          cellValue = Number.parseFloat(cellValue);
-        }
-        // 如果非 number，则直接返回空串
-        if (Number.isNaN(cellValue)) {
-          return '';
-        }
-        return cellValue.toFixed(digits);
+    vxeUI.formats.add('formatPast2', {
+      tableCellFormatMethod({ cellValue }) {
+        return formatPast2(cellValue);
       },
     });
+
+    // add by 星语：数量格式化，例如说：金额
+    vxeUI.formats.add('formatNumber', {
+      tableCellFormatMethod({ cellValue }) {
+        return erpCountInputFormatter(cellValue);
+      },
+    });
+
+    vxeUI.formats.add('formatAmount2', {
+      tableCellFormatMethod({ cellValue }, digits = 2) {
+        return `${erpNumberFormatter(cellValue, digits)}元`;
+      },
+    });
+    
   },
   useVbenForm,
 });
diff --git a/apps/web-ele/src/components/description/description.vue b/apps/web-ele/src/components/description/description.vue
new file mode 100644
index 000000000..78efe72d3
--- /dev/null
+++ b/apps/web-ele/src/components/description/description.vue
@@ -0,0 +1,77 @@
+<script lang="tsx">
+import type { DescriptionProps } from 'element-plus';
+
+import type { PropType } from 'vue';
+
+import type { DescriptionItemSchema, DescriptionsOptions } from './typing';
+
+import { defineComponent } from 'vue';
+
+import { ElDescriptions, ElDescriptionsItem } from 'element-plus';
+
+/** 对 Descriptions 进行二次封装 */
+const Description = defineComponent({
+  name: 'Descriptions',
+  props: {
+    data: {
+      type: Object as PropType<Record<string, any>>,
+      default: () => ({}),
+    },
+    schema: {
+      type: Array as PropType<DescriptionItemSchema[]>,
+      default: () => [],
+    },
+    // Descriptions 原生 props
+    componentProps: {
+      type: Object as PropType<DescriptionProps>,
+      default: () => ({}),
+    },
+  },
+
+  setup(props: DescriptionsOptions) {
+    // TODO @puhui999：每个 field 的 slot 的考虑
+    // TODO @puhui999：from 5.0：extra: () => getSlot(slots, 'extra')
+    /** 过滤掉不需要展示的 */
+    const shouldShowItem = (item: DescriptionItemSchema) => {
+      if (item.hidden === undefined) return true;
+      return typeof item.hidden === 'function'
+        ? !item.hidden(props.data)
+        : !item.hidden;
+    };
+    /** 渲染内容 */
+    const renderContent = (item: DescriptionItemSchema) => {
+      if (item.content) {
+        return typeof item.content === 'function'
+          ? item.content(props.data)
+          : item.content;
+      }
+      return item.field ? props.data?.[item.field] : null;
+    };
+
+    return () => (
+      <ElDescriptions
+        {...props}
+        border={props.componentProps?.border}
+        column={props.componentProps?.column}
+        extra={props.componentProps?.extra}
+        direction={props.componentProps?.direction}
+        size={props.componentProps?.size}
+        title={props.componentProps?.title}
+      >
+        {props.schema?.filter(shouldShowItem).map((item) => (
+          <ElDescriptionsItem
+            key={item.field || String(item.label)}
+            label={item.label as string}
+            span={item.span}
+          >
+            {renderContent(item)}
+          </ElDescriptionsItem>
+        ))}
+      </ElDescriptions>
+    );
+  },
+});
+
+// TODO @puhui999：from 5.0：emits: ['register'] 事件
+export default Description;
+</script>
diff --git a/apps/web-ele/src/components/description/index.ts b/apps/web-ele/src/components/description/index.ts
new file mode 100644
index 000000000..a707c4865
--- /dev/null
+++ b/apps/web-ele/src/components/description/index.ts
@@ -0,0 +1,3 @@
+export { default as Description } from './description.vue';
+export * from './typing';
+export { useDescription } from './use-description';
diff --git a/apps/web-ele/src/components/description/typing.ts b/apps/web-ele/src/components/description/typing.ts
new file mode 100644
index 000000000..5a6e64751
--- /dev/null
+++ b/apps/web-ele/src/components/description/typing.ts
@@ -0,0 +1,27 @@
+import type { DescriptionProps } from 'element-plus';
+
+import type { CSSProperties, VNode } from 'vue';
+
+// TODO @puhui999：【content】这个纠结下；1）vben2.0 是 render；https://doc.vvbin.cn/components/desc.html#usage 2）
+// TODO @puhui999：vben2.0 还有 sapn【done】、labelMinWidth、contentMinWidth
+// TODO @puhui999：【hidden】这个纠结下；1）vben2.0 是 show；
+export interface DescriptionItemSchema {
+  label: string | VNode; // 内容的描述
+  field?: string; // 对应 data 中的字段名
+  content?: ((data: any) => string | VNode) | string | VNode; // 自定义需要展示的内容，比如说 dict-tag
+  span?: number; // 包含列的数量
+  labelStyle?: CSSProperties; // 自定义标签样式
+  contentStyle?: CSSProperties; // 自定义内容样式
+  hidden?: ((data: any) => boolean) | boolean; // 是否显示
+}
+
+// TODO @puhui999：vben2.0 还有 title【done】、bordered【done】d、useCollapse、collapseOptions
+// TODO @puhui999：from 5.0：bordered 默认为 true
+// TODO @puhui999：from 5.0：column 默认为 lg: 3, md: 3, sm: 2, xl: 3, xs: 1, xxl: 4
+// TODO @puhui999：from 5.0：size 默认为 small；有 'default', 'middle', 'small', undefined
+// TODO @puhui999：from 5.0：useCollapse 默认为 true
+export interface DescriptionsOptions {
+  data?: Record<string, any>; // 数据
+  schema?: DescriptionItemSchema[]; // 描述项配置
+  componentProps?: DescriptionProps; // antd Descriptions 组件参数
+}
diff --git a/apps/web-ele/src/components/description/use-description.ts b/apps/web-ele/src/components/description/use-description.ts
new file mode 100644
index 000000000..5140a88c1
--- /dev/null
+++ b/apps/web-ele/src/components/description/use-description.ts
@@ -0,0 +1,71 @@
+import type { DescriptionsOptions } from './typing';
+
+import { defineComponent, h, isReactive, reactive, watch } from 'vue';
+
+import { Description } from './index';
+
+/** 描述列表 api 定义 */
+class DescriptionApi {
+  private state = reactive<Record<string, any>>({});
+
+  constructor(options: DescriptionsOptions) {
+    this.state = { ...options };
+  }
+
+  getState(): DescriptionsOptions {
+    return this.state as DescriptionsOptions;
+  }
+
+  // TODO @puhui999：【setState】纠结下：1）vben2.0 是 data https://doc.vvbin.cn/components/desc.html#usage；
+  setState(newState: Partial<DescriptionsOptions>) {
+    this.state = { ...this.state, ...newState };
+  }
+}
+
+export type ExtendedDescriptionApi = DescriptionApi;
+
+export function useDescription(options: DescriptionsOptions) {
+  const IS_REACTIVE = isReactive(options);
+  const api = new DescriptionApi(options);
+  // 扩展API
+  const extendedApi: ExtendedDescriptionApi = api as never;
+  const Desc = defineComponent({
+    name: 'UseDescription',
+    inheritAttrs: false,
+    setup(_, { attrs, slots }) {
+      // 合并props和attrs到state
+      api.setState({ ...attrs });
+
+      return () =>
+        h(
+          Description,
+          {
+            ...api.getState(),
+            ...attrs,
+          },
+          slots,
+        );
+    },
+  });
+
+  // 响应式支持
+  if (IS_REACTIVE) {
+    watch(
+      () => options.schema,
+      (newSchema) => {
+        api.setState({ schema: newSchema });
+      },
+      { immediate: true, deep: true },
+    );
+
+    watch(
+      () => options.data,
+      (newData) => {
+        api.setState({ data: newData });
+      },
+      { immediate: true, deep: true },
+    );
+  }
+
+  return [Desc, extendedApi] as const;
+}
diff --git a/apps/web-ele/src/components/dict-tag/dict-tag.vue b/apps/web-ele/src/components/dict-tag/dict-tag.vue
index ec1ac1364..358daf920 100644
--- a/apps/web-ele/src/components/dict-tag/dict-tag.vue
+++ b/apps/web-ele/src/components/dict-tag/dict-tag.vue
@@ -78,7 +78,7 @@ const dictTag = computed(() => {
 </script>
 
 <template>
-  <ElTag v-if="dictTag" :type="dictTag.colorType">
+  <ElTag v-if="dictTag.label" :type="dictTag.colorType as any">
     {{ dictTag.label }}
   </ElTag>
 </template>
diff --git a/apps/web-ele/src/views/pay/cashier/data.ts b/apps/web-ele/src/views/pay/cashier/data.ts
new file mode 100644
index 000000000..0918a6f10
--- /dev/null
+++ b/apps/web-ele/src/views/pay/cashier/data.ts
@@ -0,0 +1,81 @@
+import {
+  SvgAlipayAppIcon,
+  SvgAlipayBarIcon,
+  SvgAlipayPcIcon,
+  SvgAlipayQrIcon,
+  SvgAlipayWapIcon,
+  SvgMockIcon,
+  SvgWalletIcon,
+  SvgWxAppIcon,
+  SvgWxBarIcon,
+  SvgWxLiteIcon,
+  SvgWxNativeIcon,
+  SvgWxPubIcon,
+} from '@vben/icons';
+
+export const channelsAlipay = [
+  {
+    name: '支付宝 PC 网站支付',
+    icon: SvgAlipayPcIcon,
+    code: 'alipay_pc',
+  },
+  {
+    name: '支付宝 Wap 网站支付',
+    icon: SvgAlipayWapIcon,
+    code: 'alipay_wap',
+  },
+  {
+    name: '支付宝 App 网站支付',
+    icon: SvgAlipayAppIcon,
+    code: 'alipay_app',
+  },
+  {
+    name: '支付宝扫码支付',
+    icon: SvgAlipayQrIcon,
+    code: 'alipay_qr',
+  },
+  {
+    name: '支付宝条码支付',
+    icon: SvgAlipayBarIcon,
+    code: 'alipay_bar',
+  },
+];
+export const channelsWechat = [
+  {
+    name: '微信公众号支付',
+    icon: SvgWxPubIcon,
+    code: 'wx_pub',
+  },
+  {
+    name: '微信小程序支付',
+    icon: SvgWxLiteIcon,
+    code: 'wx_lite',
+  },
+  {
+    name: '微信 App 支付',
+    icon: SvgWxAppIcon,
+    code: 'wx_app',
+  },
+  {
+    name: '微信扫码支付',
+    icon: SvgWxNativeIcon,
+    code: 'wx_native',
+  },
+  {
+    name: '微信条码支付',
+    icon: SvgWxBarIcon,
+    code: 'wx_bar',
+  },
+];
+export const channelsMock = [
+  {
+    name: '钱包支付',
+    icon: SvgWalletIcon,
+    code: 'wallet',
+  },
+  {
+    name: '模拟支付',
+    icon: SvgMockIcon,
+    code: 'mock',
+  },
+];
diff --git a/apps/web-ele/src/views/pay/cashier/index.vue b/apps/web-ele/src/views/pay/cashier/index.vue
new file mode 100644
index 000000000..e00b58037
--- /dev/null
+++ b/apps/web-ele/src/views/pay/cashier/index.vue
@@ -0,0 +1,389 @@
+<script setup lang="ts">
+import type { PayOrderApi } from '#/api/pay/order';
+
+import { onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { useTabs } from '@vben/hooks';
+import { fenToYuan, formatDate } from '@vben/utils';
+
+import {
+  ElButton,
+  ElCard,
+  ElDescriptions,
+  ElInput,
+  ElMessage,
+  ElImage,
+} from 'element-plus';
+
+import { getOrder, submitOrder } from '#/api/pay/order';
+import {
+  PayChannelEnum,
+  PayDisplayModeEnum,
+  PayOrderStatusEnum,
+} from '#/utils';
+
+import { channelsAlipay, channelsMock, channelsWechat } from './data';
+
+defineOptions({ name: 'PayCashier' });
+
+const [Modal, modalApi] = useVbenModal({
+  showConfirmButton: false,
+  destroyOnClose: true,
+});
+
+const route = useRoute();
+const { push } = useRouter(); // 路由
+const { closeCurrentTab } = useTabs();
+
+const id = ref(); // 支付单号
+const title = ref('支付订单');
+const returnUrl = ref<string>(); // 支付完的回调地址
+
+const payOrder = ref<PayOrderApi.Order>();
+const interval = ref<any>(undefined); // 定时任务，轮询是否完成支付
+
+/** 展示形式：二维码 */
+const qrCode = ref({
+  url: '',
+  visible: false,
+});
+
+/** 展示形式：条形码 */
+const barCode = ref({
+  channelCode: '',
+  value: '',
+  visible: false,
+});
+
+/** 获得支付信息 */
+async function getDetail() {
+  // 1. 获取路由参数
+  id.value = route.query.id;
+  if (route.query.returnUrl) {
+    returnUrl.value = decodeURIComponent(route.query.returnUrl as string);
+  }
+  // 1.1 未传递订单编号
+  if (!id.value) {
+    ElMessage.error('未传递支付单号，无法查看对应的支付信息');
+    goReturnUrl('cancel');
+    return;
+  }
+  const res = await getOrder(id.value);
+  // 1.2 无法查询到支付信息
+  if (!res) {
+    ElMessage.error('支付订单不存在，请检查！');
+    goReturnUrl('cancel');
+    return;
+  }
+  // 1.3 如果已支付、或者已关闭，则直接跳转
+  if (res.status === PayOrderStatusEnum.SUCCESS.status) {
+    ElMessage.success('支付成功');
+    goReturnUrl('success');
+    return;
+  } else if (res.status === PayOrderStatusEnum.CLOSED.status) {
+    ElMessage.error('无法支付，原因：订单已关闭');
+    goReturnUrl('close');
+    return;
+  }
+  payOrder.value = res;
+}
+
+function handlePay(channelCode: string) {
+  switch (channelCode) {
+    // 条形码支付，需要特殊处理
+    case PayChannelEnum.ALIPAY_BAR.code: {
+      title.value = '“支付宝”条码支付';
+      barCode.value = {
+        channelCode,
+        value: '',
+        visible: true,
+      };
+      modalApi.open();
+      break;
+    }
+    case PayChannelEnum.WX_BAR.code: {
+      title.value = '“微信”条码支付';
+      barCode.value = {
+        channelCode,
+        value: '',
+        visible: true,
+      };
+      modalApi.open();
+      break;
+    }
+    // 微信公众号、小程序支付，无法在 PC 网页中进行
+    case PayChannelEnum.WX_LITE.code: {
+      ElMessage.error('微信小程序：不支持 PC 网站');
+      break;
+    }
+    case PayChannelEnum.WX_PUB.code: {
+      ElMessage.error('微信公众号支付：不支持 PC 网站');
+      break;
+    }
+    default: {
+      submit(channelCode);
+      break;
+    }
+  }
+}
+
+async function submit(channelCode: string) {
+  try {
+    const submitParam = {
+      id: id.value,
+      channelCode,
+      returnUrl: location.href, // 支付成功后，支付渠道跳转回当前页；再由当前页，跳转回 {@link returnUrl} 对应的地址
+      ...buildSubmitParam(channelCode),
+    };
+    const data = await submitOrder(submitParam);
+    // 直接返回已支付的情况，例如说扫码支付
+    if (data.status === PayOrderStatusEnum.SUCCESS.status) {
+      clearQueryInterval();
+      ElMessage.success('支付成功！');
+      goReturnUrl('success');
+      return;
+    }
+
+    // 展示对应的界面
+    switch (data.displayMode) {
+      case PayDisplayModeEnum.APP.mode: {
+        displayApp(channelCode);
+        break;
+      }
+      case PayDisplayModeEnum.QR_CODE.mode: {
+        displayQrCode(channelCode, data);
+        break;
+      }
+      case PayDisplayModeEnum.URL.mode: {
+        displayUrl(data);
+        break;
+      }
+      // No default
+    }
+
+    // 打开轮询任务
+    createQueryInterval();
+  } finally {
+    // message.success('支付成功！')
+  }
+}
+
+/** 构建提交支付的额外参数 */
+function buildSubmitParam(channelCode: string) {
+  // ① 支付宝 BarCode 支付时，需要传递 authCode 条形码
+  if (channelCode === PayChannelEnum.ALIPAY_BAR.code) {
+    return {
+      channelExtras: {
+        auth_code: barCode.value.value,
+      },
+    };
+  }
+  // ② 微信 BarCode 支付时，需要传递 authCode 条形码
+  if (channelCode === PayChannelEnum.WX_BAR.code) {
+    return {
+      channelExtras: {
+        authCode: barCode.value.value,
+      },
+    };
+  }
+  return {};
+}
+
+/** 提交支付后，URL 的展示形式 */
+function displayUrl(data: any) {
+  location.href = data.displayContent;
+}
+
+/** 提交支付后（扫码支付） */
+function displayQrCode(channelCode: string, data: any) {
+  title.value = '请使用手机浏览器“扫一扫”';
+  if (channelCode === PayChannelEnum.ALIPAY_WAP.code) {
+    // 考虑到 WAP 测试，所以引导手机浏览器搞
+  } else if (channelCode.indexOf('alipay_') === 0) {
+    title.value = '请使用支付宝“扫一扫”扫码支付';
+  } else if (channelCode.indexOf('wx_') === 0) {
+    title.value = '请使用微信“扫一扫”扫码支付';
+  }
+  qrCode.value = {
+    url: data.displayContent,
+    visible: true,
+  };
+}
+
+/** 提交支付后（App） */
+function displayApp(channelCode: string) {
+  if (channelCode === PayChannelEnum.ALIPAY_APP.code) {
+    ElMessage.error('支付宝 App 支付：无法在网页支付！');
+  }
+  if (channelCode === PayChannelEnum.WX_APP.code) {
+    ElMessage.error('微信 App 支付：无法在网页支付！');
+  }
+}
+
+/** 轮询查询任务 */
+function createQueryInterval() {
+  if (interval.value) {
+    return;
+  }
+  interval.value = setInterval(async () => {
+    const data = await getOrder(id.value);
+    // 已支付
+    if (data.status === PayOrderStatusEnum.SUCCESS.status) {
+      clearQueryInterval();
+      ElMessage.success('支付成功！');
+      goReturnUrl('success');
+    }
+    // 已取消
+    if (data.status === PayOrderStatusEnum.CLOSED.status) {
+      clearQueryInterval();
+      ElMessage.error('支付已关闭！');
+      goReturnUrl('close');
+    }
+  }, 1000 * 2);
+}
+
+/** 清空查询任务 */
+function clearQueryInterval() {
+  // 清空数据
+  qrCode.value = {
+    url: '',
+    visible: false,
+  };
+  barCode.value = {
+    channelCode: '',
+    value: '',
+    visible: false,
+  };
+  // 清空任务
+  clearInterval(interval.value);
+  interval.value = undefined;
+}
+
+/**
+ * 回到业务的 URL
+ *
+ * @param payResult 支付结果
+ *  ① success：支付成功
+ *  ② cancel：取消支付
+ *  ③ close：支付已关闭
+ */
+function goReturnUrl(payResult: string) {
+  // 清理任务
+  clearQueryInterval();
+
+  // 未配置的情况下，只能关闭
+  if (!returnUrl.value) {
+    closeCurrentTab();
+    return;
+  }
+
+  const url = returnUrl.value.includes('?')
+    ? `${returnUrl.value}&payResult=${payResult}`
+    : `${returnUrl.value}?payResult=${payResult}`;
+  // 如果有配置，且是 http 开头，则浏览器跳转
+  if (returnUrl.value.indexOf('http') === 0) {
+    location.href = url;
+  } else {
+    closeCurrentTab();
+    push({ path: url });
+  }
+}
+
+onMounted(async () => {
+  await getDetail();
+});
+</script>
+<template>
+  <Page auto-content-height>
+    <ElCard class="mt-4">
+      <ElDescriptions :column="3" :title="payOrder?.subject ?? '商品详情'">
+        <ElDescriptions.Item label="支付单号">
+          {{ payOrder?.id }}
+        </ElDescriptions.Item>
+        <ElDescriptions.Item label="商品标题">
+          {{ payOrder?.subject }}
+        </ElDescriptions.Item>
+        <ElDescriptions.Item label="商品内容">
+          {{ payOrder?.body }}
+        </ElDescriptions.Item>
+        <ElDescriptions.Item label="支付金额">
+          {{ `￥${fenToYuan(payOrder?.price || 0)}` }}
+        </ElDescriptions.Item>
+        <ElDescriptions.Item label="创建时间">
+          {{ formatDate(payOrder?.createTime) }}
+        </ElDescriptions.Item>
+        <ElDescriptions.Item label="过期时间">
+          {{ formatDate(payOrder?.expireTime) }}
+        </ElDescriptions.Item>
+      </ElDescriptions>
+    </ElCard>
+    <ElCard title="选择支付宝支付" class="mt-4">
+      <div class="flex">
+        <div
+          class="mr-4 w-40 cursor-pointer items-center border-2 border-gray-200 pb-1 pt-4 text-center hover:border-blue-500"
+          v-for="channel in channelsAlipay"
+          :key="channel.code"
+          @click="handlePay(channel.code)"
+        >
+          <div class="flex items-center justify-center">
+            <component :is="channel.icon" class="h-10 w-10" />
+          </div>
+          <div class="mt-2 pt-1 text-center">{{ channel.name }}</div>
+        </div>
+      </div>
+    </ElCard>
+    <ElCard title="选择微信支付" class="mt-4">
+      <div class="flex">
+        <div
+          class="mr-4 w-40 cursor-pointer items-center border-2 border-gray-200 pb-1 pt-4 text-center hover:border-blue-500"
+          v-for="channel in channelsWechat"
+          :key="channel.code"
+          @click="handlePay(channel.code)"
+        >
+          <div class="flex items-center justify-center">
+            <component :is="channel.icon" class="h-10 w-10" />
+          </div>
+          <div class="mt-2 pt-1 text-center">{{ channel.name }}</div>
+        </div>
+      </div>
+    </ElCard>
+    <ElCard title="选择其它支付" class="mt-4">
+      <div class="flex">
+        <div
+          class="mr-4 w-40 cursor-pointer items-center border-2 border-gray-200 pb-1 pt-4 text-center hover:border-blue-500"
+          v-for="channel in channelsMock"
+          :key="channel.code"
+          @click="handlePay(channel.code)"
+        >
+          <div class="flex items-center justify-center">
+            <component :is="channel.icon" class="h-10 w-10" />
+          </div>
+          <div class="mt-2 pt-1 text-center">{{ channel.name }}</div>
+        </div>
+      </div>
+    </ElCard>
+    <Modal class="w-2/5" :title="title">
+      <ElImage v-if="qrCode.visible" :src="qrCode.url" />
+      <ElInput
+        v-if="barCode.visible"
+        v-model:value="barCode.value"
+        placeholder="请输入条形码"
+        required
+      />
+      <div class="text-right" v-if="barCode.visible">
+        或使用
+        <ElButton
+          type="danger"
+          link
+          target="_blank"
+          href="https://baike.baidu.com/item/条码支付/10711903"
+        >
+          (扫码枪/扫码盒)
+        </ElButton>
+        扫码
+      </div>
+    </Modal>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/pay/demo/order/data.ts b/apps/web-ele/src/views/pay/demo/order/data.ts
new file mode 100644
index 000000000..9dde3e144
--- /dev/null
+++ b/apps/web-ele/src/views/pay/demo/order/data.ts
@@ -0,0 +1,94 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      component: 'Select',
+      fieldName: 'spuId',
+      label: '商品',
+      rules: 'required',
+      componentProps: {
+        options: [
+          { label: '华为手机 --- 1.00元', value: 1, price: 1 },
+          { label: '小米电视 --- 10.00元', value: 2, price: 10 },
+          { label: '苹果手表 --- 100.00元', value: 3, price: 100 },
+          { label: '华硕笔记本 --- 1000.00元', value: 4, price: 1000 },
+          { label: '蔚来汽车 --- 200000.00元', value: 5, price: 200_000 },
+        ],
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '订单编号',
+    },
+    {
+      field: 'userId',
+      title: '用户编号',
+    },
+    {
+      field: 'spuName',
+      title: '商品名字',
+    },
+    {
+      field: 'price',
+      title: '支付价格',
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'refundPrice',
+      title: '退款金额',
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'payOrderId',
+      title: '支付单号',
+    },
+    {
+      field: 'payStatus',
+      title: '是否支付',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
+      },
+    },
+    {
+      field: 'payTime',
+      title: '支付时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'refundTime',
+      title: '退款时间',
+      slots: { default: 'refundTime' },
+    },
+    {
+      title: '操作',
+      width: 200,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/pay/demo/order/index.vue b/apps/web-ele/src/views/pay/demo/order/index.vue
new file mode 100644
index 000000000..28c196f2d
--- /dev/null
+++ b/apps/web-ele/src/views/pay/demo/order/index.vue
@@ -0,0 +1,153 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DemoOrderApi } from '#/api/pay/demo/order';
+
+import { useRouter } from 'vue-router';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { formatDateTime } from '@vben/utils';
+
+import { ElMessage, ElLoading } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getDemoOrderPage, refundDemoOrder } from '#/api/pay/demo/order';
+import { $t } from '#/locales';
+
+import { useGridColumns } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const router = useRouter();
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建订单 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 支付按钮操作 */
+function handlePay(row: DemoOrderApi.Order) {
+  router.push({
+    name: 'PayCashier',
+    query: {
+      id: row.payOrderId,
+      returnUrl: encodeURIComponent(`/pay/demo/order?id=${row.id}`),
+    },
+  });
+}
+
+/** 退款按钮操作 */
+async function handleRefund(row: DemoOrderApi.Order) {
+  const loadingInstance = ElLoading.service({
+    text: '退款中，请稍后...',
+    fullscreen: true,
+  });
+  try {
+    await refundDemoOrder(row.id as number);
+    ElMessage.success('退款成功');
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getDemoOrderPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<DemoOrderApi.Order>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="支付宝支付接入"
+        url="https://doc.iocoder.cn/pay/alipay-pay-demo/"
+      />
+      <DocAlert
+        title="支付宝、微信退款接入"
+        url="https://doc.iocoder.cn/pay/refund-demo/"
+      />
+      <DocAlert
+        title="微信公众号支付接入"
+        url="https://doc.iocoder.cn/pay/wx-pub-pay-demo/"
+      />
+      <DocAlert
+        title="微信小程序支付接入"
+        url="https://doc.iocoder.cn/pay/wx-lite-pay-demo/"
+      />
+    </template>
+
+    <FormModal @success="onRefresh" />
+    <Grid table-title="示例订单列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['示例订单']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #refundTime="{ row }">
+        <span v-if="row.refundTime">{{ formatDateTime(row.refundTime) }}</span>
+        <span v-else-if="row.payRefundId">退款中，等待退款结果</span>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '前往支付',
+              type: 'primary',
+              link: true,
+              ifShow: !row.payStatus,
+              onClick: handlePay.bind(null, row),
+            },
+            {
+              label: '发起退款',
+              type: 'danger',
+              link: true,
+              ifShow: row.payStatus && !row.payRefundId,
+              popConfirm: {
+                title: '确定发起退款吗？',
+                confirm: handleRefund.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/pay/demo/order/modules/form.vue b/apps/web-ele/src/views/pay/demo/order/modules/form.vue
new file mode 100644
index 000000000..9820b2988
--- /dev/null
+++ b/apps/web-ele/src/views/pay/demo/order/modules/form.vue
@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import type { DemoOrderApi } from '#/api/pay/demo/order';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { createDemoOrder } from '#/api/pay/demo/order';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as DemoOrderApi.Order;
+    try {
+      await createDemoOrder(data);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-2/5" :title="$t('ui.actionTitle.create', ['退款订单'])">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/pay/demo/withdraw/data.ts b/apps/web-ele/src/views/pay/demo/withdraw/data.ts
new file mode 100644
index 000000000..bd2ee6169
--- /dev/null
+++ b/apps/web-ele/src/views/pay/demo/withdraw/data.ts
@@ -0,0 +1,124 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'subject',
+      label: '提现标题',
+      rules: 'required',
+    },
+    {
+      component: 'InputNumber',
+      fieldName: 'price',
+      label: '提现金额',
+      rules: 'required',
+      componentProps: {
+        min: 1,
+        precision: 2,
+        step: 0.01,
+      },
+    },
+    {
+      component: 'Select',
+      fieldName: 'type',
+      label: '提现类型',
+      rules: 'required',
+      componentProps: {
+        options: [
+          { label: '支付宝', value: 1 },
+          { label: '微信余额', value: 2 },
+          { label: '钱包余额', value: 3 },
+        ],
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'userName',
+      label: '收款人姓名',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      fieldName: 'userAccount',
+      label: '收款人账号',
+      rules: 'required',
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '提现单编号',
+    },
+    {
+      field: 'subject',
+      title: '提现标题',
+    },
+    {
+      field: 'type',
+      title: '提现类型',
+      slots: { default: 'type' },
+    },
+    {
+      field: 'price',
+      title: '提现金额',
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'userName',
+      title: '收款人姓名',
+    },
+    {
+      field: 'userAccount',
+      title: '收款人账号',
+    },
+    {
+      field: 'status',
+      title: '提现状态',
+      slots: { default: 'status' },
+    },
+    {
+      field: 'payTransferId',
+      title: '转账单号',
+    },
+    {
+      field: 'transferChannelCode',
+      title: '转账渠道',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PAY_CHANNEL_CODE },
+      },
+    },
+    {
+      field: 'transferTime',
+      title: '转账时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'transferErrorMsg',
+      title: '转账失败原因',
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/pay/demo/withdraw/index.vue b/apps/web-ele/src/views/pay/demo/withdraw/index.vue
new file mode 100644
index 000000000..d52834026
--- /dev/null
+++ b/apps/web-ele/src/views/pay/demo/withdraw/index.vue
@@ -0,0 +1,144 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DemoWithdrawApi } from '#/api/pay/demo/withdraw';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { erpPriceInputFormatter } from '@vben/utils';
+
+import { ElMessage, ElLoading, ElTag } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  getDemoWithdrawPage,
+  transferDemoWithdraw,
+} from '#/api/pay/demo/withdraw';
+import { $t } from '#/locales';
+
+import { useGridColumns } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建提现单 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 处理转账操作 */
+async function handleTransfer(row: DemoWithdrawApi.Withdraw) {
+  const loadingInstance = ElLoading.service({
+    text: '转账中，请稍后...',
+    fullscreen: true,
+  });
+  try {
+    const payTransferId = await transferDemoWithdraw(row.id as number);
+    ElMessage.success(`转账提交成功，转账单号：${payTransferId}`);
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getDemoWithdrawPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<DemoWithdrawApi.Withdraw>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="支付宝转账接入"
+        url="https://doc.iocoder.cn/pay/alipay-transfer-demo/"
+      />
+      <DocAlert
+        title="微信转账接入"
+        url="https://doc.iocoder.cn/pay/wx-transfer-demo/"
+      />
+    </template>
+
+    <FormModal @success="onRefresh" />
+    <Grid table-title="示例提现单列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['示例提现单']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #type="{ row }">
+        <ElTag v-if="row.type === 1">支付宝</ElTag>
+        <ElTag v-else-if="row.type === 2">微信余额</ElTag>
+        <ElTag v-else-if="row.type === 3">钱包余额</ElTag>
+      </template>
+      <template #price="{ row }">
+        <span>￥{{ erpPriceInputFormatter(row.price) }}</span>
+      </template>
+      <template #status="{ row }">
+        <ElTag v-if="row.status === 0 && !row.payTransferId" type="warning">
+          等待转账
+        </ElTag>
+        <ElTag v-else-if="row.status === 0 && row.payTransferId" type="info">
+          转账中
+        </ElTag>
+        <ElTag v-else-if="row.status === 10" type="success"> 转账成功 </ElTag>
+        <ElTag v-else-if="row.status === 20" type="danger"> 转账失败 </ElTag>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '发起转账',
+              type: 'primary',
+              link: true,
+              ifShow: row.status === 0 && !row.payTransferId,
+              onClick: handleTransfer.bind(null, row),
+            },
+            {
+              label: '重新转账',
+              type: 'primary',
+              link: true,
+              ifShow: row.status === 20,
+              onClick: handleTransfer.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/pay/demo/withdraw/modules/form.vue b/apps/web-ele/src/views/pay/demo/withdraw/modules/form.vue
new file mode 100644
index 000000000..dae1422c2
--- /dev/null
+++ b/apps/web-ele/src/views/pay/demo/withdraw/modules/form.vue
@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import type { DemoWithdrawApi } from '#/api/pay/demo/withdraw';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { createDemoWithdraw } from '#/api/pay/demo/withdraw';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as DemoWithdrawApi.Withdraw;
+    try {
+      await createDemoWithdraw(data);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-2/5" :title="$t('ui.actionTitle.create', ['示例提现单'])">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/pay/notify/data.ts b/apps/web-ele/src/views/pay/notify/data.ts
new file mode 100644
index 000000000..4d28b5217
--- /dev/null
+++ b/apps/web-ele/src/views/pay/notify/data.ts
@@ -0,0 +1,168 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { getAppList } from '#/api/pay/app';
+import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'appId',
+      label: '应用编号',
+      component: 'ApiSelect',
+      componentProps: {
+        api: async () => {
+          const data = await getAppList();
+          return data.map((item) => ({
+            label: item.name,
+            value: item.id,
+          }));
+        },
+        autoSelect: 'first',
+        placeholder: '请选择数据源',
+      },
+    },
+    {
+      fieldName: 'type',
+      label: '通知类型',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.PAY_NOTIFY_TYPE, 'number'),
+      },
+    },
+    {
+      fieldName: 'dataId',
+      label: '关联编号',
+      component: 'Input',
+    },
+    {
+      fieldName: 'status',
+      label: '通知状态',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.PAY_NOTIFY_STATUS, 'number'),
+      },
+    },
+    {
+      fieldName: 'merchantOrderId',
+      label: '商户订单编号',
+      component: 'Input',
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '任务编号',
+    },
+    {
+      field: 'appName',
+      title: '应用编号',
+    },
+    {
+      field: 'merchantOrderId',
+      title: '商户订单编号',
+    },
+    {
+      field: 'type',
+      title: '通知类型',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PAY_NOTIFY_TYPE },
+      },
+    },
+    {
+      field: 'dataId',
+      title: '关联编号',
+    },
+    {
+      field: 'status',
+      title: '通知状态',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PAY_NOTIFY_STATUS },
+      },
+    },
+    {
+      field: 'lastExecuteTime',
+      title: '最后通知时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'nextNotifyTime',
+      title: '下次通知时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'notifyTimes',
+      title: '通知次数',
+      cellRender: {
+        name: 'CellTag',
+        props: {
+          type: 'success',
+          content: '{notifyTimes} / {maxNotifyTimes}',
+        },
+      },
+    },
+    {
+      title: '操作',
+      width: 80,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 详情列表的字段 */
+export const detailColumns = [
+  {
+    title: '日志编号',
+    dataIndex: 'id',
+    key: 'id',
+    width: 120,
+    ellipsis: false,
+  },
+  {
+    title: '通知状态',
+    dataIndex: 'status',
+    key: 'status',
+    width: 120,
+    ellipsis: false,
+  },
+  {
+    title: '通知次数',
+    dataIndex: 'notifyTimes',
+    key: 'notifyTimes',
+    width: 120,
+    ellipsis: false,
+  },
+  {
+    title: '通知时间',
+    dataIndex: 'lastExecuteTime',
+    key: 'lastExecuteTime',
+    width: 120,
+    ellipsis: false,
+  },
+  {
+    title: '响应结果',
+    dataIndex: 'response',
+    key: 'response',
+    width: 120,
+    ellipsis: false,
+  },
+];
diff --git a/apps/web-ele/src/views/pay/notify/index.vue b/apps/web-ele/src/views/pay/notify/index.vue
new file mode 100644
index 000000000..c84082453
--- /dev/null
+++ b/apps/web-ele/src/views/pay/notify/index.vue
@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getNotifyTaskPage } from '#/api/pay/notify';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Detail from './modules/detail.vue';
+
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: Detail,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 查看详情 */
+function handleDetail(row: any) {
+  detailModalApi.setData(row).open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getNotifyTaskPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<any>,
+});
+</script>
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="支付功能开启" url="https://doc.iocoder.cn/pay/build/" />
+    </template>
+
+    <DetailModal @success="onRefresh" />
+    <Grid table-title="支付通知列表">
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              auth: ['pay:notify:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/pay/notify/modules/detail.vue b/apps/web-ele/src/views/pay/notify/modules/detail.vue
new file mode 100644
index 000000000..ff73f2139
--- /dev/null
+++ b/apps/web-ele/src/views/pay/notify/modules/detail.vue
@@ -0,0 +1,101 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { formatDateTime } from '@vben/utils';
+
+import { ElDescriptions, ElDescriptionsItem, ElDivider, ElTable, ElTag } from 'element-plus';
+
+import { getNotifyTaskDetail } from '#/api/pay/notify';
+import { DictTag } from '#/components/dict-tag';
+import { DICT_TYPE } from '#/utils';
+
+import { detailColumns } from '../data';
+
+const formData = ref();
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getNotifyTaskDetail(data.id);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    title="通知详情"
+    class="w-1/2"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <ElDescriptions border :column="2" class="mx-4">
+      <ElDescriptionsItem label="商户订单编号">
+        <ElTag>{{ formData?.merchantOrderId }}</ElTag>
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="通知状态">
+        <DictTag
+          :type="DICT_TYPE.PAY_NOTIFY_STATUS"
+          :value="formData?.status"
+        />
+      </ElDescriptionsItem>
+
+      <ElDescriptionsItem label="应用编号">
+        {{ formData?.appId }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="应用名称">
+        {{ formData?.appName }}
+      </ElDescriptionsItem>
+
+      <ElDescriptionsItem label="关联编号">
+        {{ formData?.dataId }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="通知类型">
+        <DictTag :type="DICT_TYPE.PAY_NOTIFY_TYPE" :value="formData?.type" />
+      </ElDescriptionsItem>
+
+      <ElDescriptionsItem label="通知次数">
+        {{ formData?.notifyTimes }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="最大通知次数">
+        {{ formData?.maxNotifyTimes }}
+      </ElDescriptionsItem>
+
+      <ElDescriptionsItem label="最后通知时间">
+        {{ formatDateTime(formData?.lastExecuteTime || '') }}
+      </ElDescriptionsItem>
+
+      <ElDescriptionsItem label="创建时间">
+        {{ formatDateTime(formData?.createTime || '') }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="更新时间">
+        {{ formatDateTime(formData?.updateTime || '') }}
+      </ElDescriptionsItem>
+    </ElDescriptions>
+
+    <ElDivider />
+
+    <ElDescriptions border :column="1" class="mx-4">
+      <ElDescriptionsItem label="回调日志">
+        <ElTable
+          v-if="formData"
+          :data-source="formData.logs"
+          :columns="detailColumns"
+        />
+      </ElDescriptionsItem>
+    </ElDescriptions>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/pay/order/data.ts b/apps/web-ele/src/views/pay/order/data.ts
new file mode 100644
index 000000000..4638f161d
--- /dev/null
+++ b/apps/web-ele/src/views/pay/order/data.ts
@@ -0,0 +1,255 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
+import type { PayOrderApi } from '#/api/pay/order';
+
+import { h } from 'vue';
+
+import { erpPriceInputFormatter, formatDateTime } from '@vben/utils';
+
+import { ElTag } from 'element-plus';
+
+import { DictTag } from '#/components/dict-tag';
+import { DICT_TYPE, getDictOptions } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'appId',
+      label: '应用编号',
+      componentProps: {
+        placeholder: '请输入应用编号',
+      },
+    },
+    {
+      component: 'Select',
+      fieldName: 'channelCode',
+      label: '支付渠道',
+      componentProps: {
+        placeholder: '请选择开启状态',
+        options: getDictOptions(DICT_TYPE.PAY_CHANNEL_CODE, 'string'),
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'merchantOrderId',
+      label: '商户单号',
+      componentProps: {
+        placeholder: '请输入商户单号',
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'no',
+      label: '支付单号',
+      componentProps: {
+        placeholder: '请输入支付单号',
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'channelOrderNo',
+      label: '渠道单号',
+      componentProps: {
+        placeholder: '请输入渠道单号',
+      },
+    },
+    {
+      component: 'Select',
+      fieldName: 'status',
+      label: '支付状态',
+      componentProps: {
+        placeholder: '请选择支付状态',
+        options: getDictOptions(DICT_TYPE.PAY_ORDER_STATUS, 'number'),
+      },
+    },
+    {
+      component: 'RangePicker',
+      fieldName: 'createTime',
+      label: '创建时间',
+      componentProps: {
+        placeholder: ['开始日期', '结束日期'],
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 60 },
+    {
+      title: '编号',
+      field: 'id',
+    },
+    {
+      title: '支付金额',
+      field: 'price',
+      formatter: 'formatAmount2',
+    },
+    {
+      title: '退款金额',
+      field: 'refundPrice',
+      formatter: 'formatAmount2',
+    },
+    {
+      title: '手续金额',
+      field: 'channelFeePrice',
+      formatter: 'formatAmount2',
+    },
+    {
+      title: '订单号',
+      field: 'no',
+      slots: {
+        default: 'no',
+      },
+    },
+    {
+      title: '支付状态',
+      field: 'status',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PAY_ORDER_STATUS },
+      },
+    },
+    {
+      title: '支付渠道',
+      field: 'channelCode',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PAY_CHANNEL_CODE },
+      },
+    },
+    {
+      title: '支付时间',
+      field: 'successTime',
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '支付应用',
+      field: 'appName',
+    },
+    {
+      title: '商品标题',
+      field: 'subject',
+    },
+    {
+      title: '操作',
+      width: 100,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 详情的字段 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'merchantOrderId',
+      label: '商户单号',
+    },
+    {
+      field: 'no',
+      label: '支付单号',
+    },
+    {
+      field: 'appId',
+      label: '应用编号',
+    },
+    {
+      field: 'appName',
+      label: '应用名称',
+    },
+    {
+      field: 'status',
+      label: '支付状态',
+      content: (data: PayOrderApi.Order) =>
+        h(DictTag, {
+          type: DICT_TYPE.PAY_ORDER_STATUS,
+          value: data?.status,
+        }),
+    },
+    {
+      field: 'price',
+      label: '支付金额',
+      content: (data: PayOrderApi.Order) => `￥${erpPriceInputFormatter(data?.price)}`,
+    },
+    {
+      field: 'channelFeePrice',
+      label: '手续费',
+      content: (data: PayOrderApi.Order) => `￥${erpPriceInputFormatter(data?.channelFeePrice)}`,
+    },
+    {
+      field: 'channelFeeRate',
+      label: '手续费比例',
+      content: (data: PayOrderApi.Order) => `${erpPriceInputFormatter(data?.channelFeeRate)}%`,
+    },
+    {
+      field: 'successTime',
+      label: '支付时间',
+      content: (data: PayOrderApi.Order) => formatDateTime(data?.successTime) as string,
+    },
+    {
+      field: 'expireTime',
+      label: '失效时间',
+      content: (data: PayOrderApi.Order) => formatDateTime(data?.expireTime) as string,
+    },
+    {
+      field: 'createTime',
+      label: '创建时间',
+      content: (data: PayOrderApi.Order) => formatDateTime(data?.createTime) as string,
+    },
+    {
+      field: 'updateTime',
+      label: '更新时间',
+      content: (data: PayOrderApi.Order) => formatDateTime(data?.updateTime) as string,
+    },
+    {
+      field: 'subject',
+      label: '商品标题',
+    },
+    {
+      field: 'body',
+      label: '商品描述',
+    },
+    {
+      field: 'channelCode',
+      label: '支付渠道',
+      content: (data: PayOrderApi.Order) =>
+        h(DictTag, {
+          type: DICT_TYPE.PAY_CHANNEL_CODE,
+          value: data?.channelCode,
+        }),
+    },
+    {
+      field: 'userIp',
+      label: '支付 IP',
+    },
+    {
+      field: 'channelOrderNo',
+      label: '渠道单号',
+      content: (data: PayOrderApi.Order) =>
+        h(ElTag, { color: 'green' }, () => data?.channelOrderNo || ''),
+    },
+    {
+      field: 'channelUserId',
+      label: '渠道用户',
+    },
+    {
+      field: 'refundPrice',
+      label: '退款金额',
+      content: (data: PayOrderApi.Order) => `￥${erpPriceInputFormatter(data?.refundPrice)}`,
+    },
+    {
+      field: 'notifyUrl',
+      label: '通知 URL',
+    },
+    {
+      field: 'channelNotifyData',
+      label: '支付通道异步回调内容',
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/pay/order/index.vue b/apps/web-ele/src/views/pay/order/index.vue
new file mode 100644
index 000000000..73d543e2d
--- /dev/null
+++ b/apps/web-ele/src/views/pay/order/index.vue
@@ -0,0 +1,115 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { PayOrderApi } from '#/api/pay/order';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import { ElTag } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getOrderPage } from '#/api/pay/order';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Detail from './modules/detail.vue';
+
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: Detail,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 查看详情 */
+function handleDetail(row: PayOrderApi.Order) {
+  detailModalApi.setData(row).open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+    collapsed: false,
+  },
+  gridOptions: {
+    cellConfig: {
+      height: 80,
+    },
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getOrderPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isCurrent: true,
+      isHover: true,
+      resizable: true,
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<PayOrderApi.Order>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="支付宝支付接入"
+        url="https://doc.iocoder.cn/pay/alipay-pay-demo/"
+      />
+      <DocAlert
+        title="微信公众号支付接入"
+        url="https://doc.iocoder.cn/pay/wx-pub-pay-demo/"
+      />
+      <DocAlert
+        title="微信小程序支付接入"
+        url="https://doc.iocoder.cn/pay/wx-lite-pay-demo/"
+      />
+    </template>
+    <DetailModal @success="onRefresh" />
+    <Grid table-title="支付订单列表">
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              auth: ['pay:order:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+      <template #no="{ row }">
+        <div class="flex flex-col gap-1 text-left">
+          <p class="text-sm">
+            <ElTag size="small" type="primary"> 商户</ElTag> {{ row.merchantOrderId }}
+          </p>
+          <p class="text-sm" v-if="row.no">
+            <ElTag size="small" type="warning">支付</ElTag> {{ row.no }}
+          </p>
+          <p class="text-sm" v-if="row.channelOrderNo">
+            <ElTag size="small" type="success">渠道</ElTag>
+            {{ row.channelOrderNo }}
+          </p>
+        </div>
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/pay/order/modules/detail.vue b/apps/web-ele/src/views/pay/order/modules/detail.vue
new file mode 100644
index 000000000..1ea6f89b1
--- /dev/null
+++ b/apps/web-ele/src/views/pay/order/modules/detail.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type { PayOrderApi } from '#/api/pay/order';
+
+import { ref, } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { getOrder } from '#/api/pay/order';
+import { useDescription } from '#/components/description';
+
+import { useDetailSchema } from '../data';
+
+const detailData = ref<PayOrderApi.Order>();
+
+const [Description] = useDescription({
+  componentProps: {
+    border: false,
+    column: 2,
+    direction: 'horizontal',
+    title: '',
+    labelWidth: 200,
+    extra: '',
+  },
+  schema: useDetailSchema(),
+});
+
+const [Modal, modalApi] = useVbenModal({
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      detailData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<PayOrderApi.Order>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      detailData.value = await getOrder(data.id);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+<template>
+  <Modal
+    title="订单详情"
+    class="w-1/2"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <Description :data="detailData" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/pay/refund/data.ts b/apps/web-ele/src/views/pay/refund/data.ts
new file mode 100644
index 000000000..fdf384a95
--- /dev/null
+++ b/apps/web-ele/src/views/pay/refund/data.ts
@@ -0,0 +1,254 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h } from 'vue';
+
+import { fenToYuan, formatDateTime } from '@vben/utils';
+
+import { ElTag } from 'element-plus';
+
+import { getAppList } from '#/api/pay/app';
+import { DictTag } from '#/components/dict-tag';
+import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'appId',
+      label: '应用编号',
+      component: 'ApiSelect',
+      componentProps: {
+        api: async () => {
+          const data = await getAppList();
+          return data.map((item) => ({
+            label: item.name,
+            value: item.id,
+          }));
+        },
+        autoSelect: 'first',
+        placeholder: '请选择数据源',
+      },
+    },
+    {
+      fieldName: 'channelCode',
+      label: '退款渠道',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.PAY_CHANNEL_CODE, 'string'),
+      },
+    },
+    {
+      fieldName: 'merchantOrderId',
+      label: '商户支付单号',
+      component: 'Input',
+    },
+    {
+      fieldName: 'merchantRefundId',
+      label: '商户退款单号',
+      component: 'Input',
+    },
+    {
+      fieldName: 'channelOrderNo',
+      label: '渠道支付单号',
+      component: 'Input',
+    },
+    {
+      fieldName: 'channelRefundNo',
+      label: '渠道退款单号',
+      component: 'Input',
+    },
+    {
+      fieldName: 'status',
+      label: '退款状态',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.PAY_REFUND_STATUS, 'number'),
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+    },
+    {
+      field: 'merchantRefundId',
+      title: '退款订单号',
+    },
+    {
+      field: 'channelRefundNo',
+      title: '渠道退款单号',
+    },
+    {
+      field: 'payPrice',
+      title: '支付金额',
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'refundPrice',
+      title: '退款金额',
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'status',
+      title: '退款状态',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PAY_REFUND_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 100,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 详情页的字段 */
+export function useBaseDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'merchantRefundId',
+      label: '商户退款单号',
+      content: (data) =>
+        h(ElTag, {}, () => {
+          return data?.merchantRefundId || '-';
+        }),
+    },
+    {
+      field: 'channelRefundNo',
+      label: '渠道退款单号',
+      content: (data) =>
+        h(ElTag, {}, () => {
+          return data?.channelRefundNo || '-';
+        }),
+    },
+    {
+      field: 'merchantOrderId',
+      label: '商户支付单号',
+      content: (data) =>
+        h(ElTag, {}, () => {
+          return data?.merchantOrderId || '-';
+        }),
+    },
+    {
+      field: 'channelOrderNo',
+      label: '渠道支付单号',
+      content: (data) =>
+        h(ElTag, {}, () => {
+          return data?.channelOrderNo || '-';
+        }),
+    },
+    {
+      field: 'appId',
+      label: '应用编号',
+    },
+    {
+      field: 'appName',
+      label: '应用名称',
+    },
+    {
+      field: 'payPrice',
+      label: '支付金额',
+      content: (data) =>
+        h(ElTag, { color: 'success' }, () => {
+          return fenToYuan(data.payPrice || 0);
+        }),
+    },
+    {
+      field: 'refundPrice',
+      label: '退款金额',
+      content: (data) =>
+        h(ElTag, { color: 'red' }, () => {
+          return fenToYuan(data.refundPrice || 0);
+        }),
+    },
+    {
+      field: 'status',
+      label: '退款状态',
+      content: (data) =>
+        h(DictTag, {
+          type: DICT_TYPE.PAY_REFUND_STATUS,
+          value: data?.status,
+        }),
+    },
+    {
+      field: 'successTime',
+      label: '退款时间',
+      content: (data) => formatDateTime(data.successTime) as string,
+    },
+    {
+      field: 'createTime',
+      label: '创建时间',
+      content: (data) => formatDateTime(data.createTime) as string,
+    },
+    {
+      field: 'updateTime',
+      label: '更新时间',
+      content: (data) => formatDateTime(data.updateTime) as string,
+    },
+  ];
+}
+
+/** 详情页的字段 */
+export function useChannelDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'channelCode',
+      label: '退款渠道',
+      content: (data) =>
+        h(DictTag, {
+          type: DICT_TYPE.PAY_CHANNEL_CODE,
+          value: data?.channelCode,
+        }),
+    },
+    {
+      field: 'reason',
+      label: '退款原因',
+    },
+    {
+      field: 'userIp',
+      label: '退款 IP',
+    },
+    {
+      field: 'notifyUrl',
+      label: '通知 URL',
+    },
+    {
+      field: 'channelErrorCode',
+      label: '渠道错误码',
+    },
+    {
+      field: 'channelErrorMsg',
+      label: '渠道错误码描述',
+    },
+    {
+      field: 'channelNotifyData',
+      label: '支付通道异步回调内容',
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/pay/refund/index.vue b/apps/web-ele/src/views/pay/refund/index.vue
new file mode 100644
index 000000000..6ad912e85
--- /dev/null
+++ b/apps/web-ele/src/views/pay/refund/index.vue
@@ -0,0 +1,103 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import * as RefundApi from '#/api/pay/refund';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Detail from './modules/detail.vue';
+
+const [RefundDetailModal, refundDetailModalApi] = useVbenModal({
+  connectedComponent: Detail,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await RefundApi.exportRefund(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '支付退款.xls', source: data });
+}
+
+/** 查看详情 */
+function handleDetail(row: any) {
+  refundDetailModalApi.setData(row).open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await RefundApi.getRefundPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<any>,
+});
+</script>
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="支付宝、微信退款接入"
+        url="https://doc.iocoder.cn/pay/refund-demo/"
+      />
+    </template>
+    <RefundDetailModal @success="onRefresh" />
+    <Grid table-title="支付退款列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['pay:refund:query'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              auth: ['pay:refund:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/pay/refund/modules/detail.vue b/apps/web-ele/src/views/pay/refund/modules/detail.vue
new file mode 100644
index 000000000..226d7bf3b
--- /dev/null
+++ b/apps/web-ele/src/views/pay/refund/modules/detail.vue
@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+import type { PayRefundApi } from '#/api/pay/refund';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElDivider } from 'element-plus';
+
+import { getRefund } from '#/api/pay/refund';
+import { useDescription } from '#/components/description';
+
+import { useBaseDetailSchema, useChannelDetailSchema } from '../data';
+
+const formData = ref<PayRefundApi.Refund>();
+
+const [BaseDescription] = useDescription({
+  componentProps: {
+    border: false,
+    column: 2,
+    direction: 'horizontal',
+    title: '',
+    labelWidth: 200,
+    extra: '',
+  },
+  schema: useBaseDetailSchema(),
+});
+
+const [ChannelDescription] = useDescription({
+  componentProps: {
+    border: false,
+    column: 2,
+    direction: 'horizontal',
+    title: '',
+    labelWidth: 200,
+    extra: '',
+  },
+  schema: useChannelDetailSchema(),
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<PayRefundApi.Refund>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getRefund(data.id);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    title="退款详情"
+    class="w-1/2"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <BaseDescription :data="formData" />
+    <ElDivider />
+    <ChannelDescription :data="formData" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/pay/transfer/data.ts b/apps/web-ele/src/views/pay/transfer/data.ts
new file mode 100644
index 000000000..b59ae2f12
--- /dev/null
+++ b/apps/web-ele/src/views/pay/transfer/data.ts
@@ -0,0 +1,274 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h } from 'vue';
+
+import { erpPriceInputFormatter, formatDateTime } from '@vben/utils';
+
+import { ElTag } from 'element-plus';
+
+import { DictTag } from '#/components/dict-tag';
+import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'no',
+      label: '转账单号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入转账单号',
+      },
+    },
+    {
+      fieldName: 'channelCode',
+      label: '转账渠道',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.PAY_CHANNEL_CODE),
+        allowClear: true,
+        placeholder: '请选择支付渠道',
+      },
+    },
+    {
+      fieldName: 'merchantTransferId',
+      label: '商户单号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入商户单号',
+      },
+    },
+    {
+      fieldName: 'type',
+      label: '类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.PAY_TRANSFER_TYPE),
+        allowClear: true,
+        placeholder: '请选择类型',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '转账状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.PAY_TRANSFER_STATUS),
+        allowClear: true,
+        placeholder: '请选择转账状态',
+      },
+    },
+    {
+      fieldName: 'userName',
+      label: '收款人姓名',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入收款人姓名',
+      },
+    },
+    {
+      fieldName: 'accountNo',
+      label: '收款人账号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入收款人账号',
+      },
+    },
+    {
+      fieldName: 'channelTransferNo',
+      label: '渠道单号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入渠道单号',
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'appName',
+      title: '支付应用',
+    },
+    {
+      field: 'price',
+      title: '转账金额',
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'status',
+      title: '转账状态',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PAY_TRANSFER_STATUS },
+      },
+    },
+    {
+      field: 'type',
+      title: '类型',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PAY_TRANSFER_TYPE },
+      },
+    },
+    {
+      field: 'channelCode',
+      title: '支付渠道',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PAY_CHANNEL_CODE },
+      },
+    },
+    {
+      field: 'merchantTransferId',
+      title: '商户单号',
+    },
+    {
+      field: 'channelTransferNo',
+      title: '渠道单号',
+    },
+    {
+      field: 'userName',
+      title: '收款人姓名',
+    },
+    {
+      field: 'accountNo',
+      title: '收款人账号',
+    },
+    {
+      title: '操作',
+      width: 120,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 详情的配置 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'id',
+      label: '编号',
+    },
+    {
+      field: 'merchantTransferId',
+      label: '商户单号',
+      content: (data) => {
+        return h(ElTag, {
+          color: 'blue',
+          content: data?.merchantTransferId,
+        });
+      },
+    },
+    {
+      field: 'no',
+      label: '转账单号',
+      content: (data) => {
+        return h(ElTag, {
+          color: 'blue',
+          content: data?.no,
+        });
+      },
+    },
+    {
+      field: 'appId',
+      label: '应用编号',
+    },
+    {
+      field: 'status',
+      label: '转账状态',
+      content: (data) =>
+        h(DictTag, {
+          type: DICT_TYPE.PAY_TRANSFER_STATUS,
+          value: data?.status,
+        }),
+    },
+    {
+      field: 'price',
+      label: '转账金额',
+      content: (data) => {
+        return h(ElTag, {
+          color: 'blue',
+          content: `￥${erpPriceInputFormatter(data?.price)}`,
+        });
+      },
+    },
+    {
+      field: 'successTime',
+      label: '转账时间',
+      content: (data) => formatDateTime(data?.successTime) as string,
+    },
+    {
+      field: 'createTime',
+      label: '创建时间',
+      content: (data) => formatDateTime(data?.createTime) as string,
+    },
+    {
+      field: 'userName',
+      label: '收款人姓名',
+    },
+    {
+      field: 'userAccount',
+      label: '收款人账号',
+    },
+    {
+      field: 'channelCode',
+      label: '支付渠道',
+      content: (data) =>
+        h(DictTag, {
+          type: DICT_TYPE.PAY_CHANNEL_CODE,
+          value: data?.channelCode,
+        }),
+    },
+    {
+      field: 'channelCode',
+      label: '支付 IP',
+    },
+    {
+      field: 'channelTransferNo',
+      label: '渠道单号',
+      content: (data) => {
+        return h(ElTag, {
+          color: 'blue',
+          content: data?.channelTransferNo,
+        });
+      },
+    },
+    {
+      field: 'notifyUrl',
+      label: '通知 URL',
+    },
+    {
+      field: 'channelNotifyData',
+      label: '转账渠道通知内容',
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/pay/transfer/index.vue b/apps/web-ele/src/views/pay/transfer/index.vue
new file mode 100644
index 000000000..10b540c64
--- /dev/null
+++ b/apps/web-ele/src/views/pay/transfer/index.vue
@@ -0,0 +1,103 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { PayTransferApi } from '#/api/pay/transfer';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { exportTransfer, getTransferPage } from '#/api/pay/transfer';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Detail from './modules/detail.vue';
+
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: Detail,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportTransfer(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '转账单.xls', source: data });
+}
+
+/** 查看转账详情 */
+function handleDetail(row: PayTransferApi.Transfer) {
+  detailModalApi.setData(row).open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getTransferPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<PayTransferApi.Transfer>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="转账管理" url="https://doc.iocoder.cn/pay/transfer/" />
+    </template>
+
+    <DetailModal @success="onRefresh" />
+    <Grid table-title="转账单列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['pay:transfer:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              auth: ['pay:transfer:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/pay/transfer/modules/detail.vue b/apps/web-ele/src/views/pay/transfer/modules/detail.vue
new file mode 100644
index 000000000..79868c194
--- /dev/null
+++ b/apps/web-ele/src/views/pay/transfer/modules/detail.vue
@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+import type { PayTransferApi } from '#/api/pay/transfer';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { getTransfer } from '#/api/pay/transfer';
+import { useDescription } from '#/components/description';
+
+import { useDetailSchema } from '../data';
+
+const formData = ref<PayTransferApi.Transfer>();
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<PayTransferApi.Transfer>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getTransfer(data.id);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+
+const [Description] = useDescription({
+  componentProps: {
+    title: '基本信息',
+    border: false,
+    column: 2,
+    direction: 'horizontal',
+    labelWidth: 200,
+    extra: '',
+  },
+  schema: useDetailSchema(),
+});
+</script>
+
+<template>
+  <Modal
+    title="转账单详情"
+    class="w-1/2"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <Description :data="formData" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/pay/wallet/balance/data.ts b/apps/web-ele/src/views/pay/wallet/balance/data.ts
new file mode 100644
index 000000000..59d064c5e
--- /dev/null
+++ b/apps/web-ele/src/views/pay/wallet/balance/data.ts
@@ -0,0 +1,86 @@
+import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
+
+import type { VbenFormSchema } from '#/adapter/form';
+
+import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'userId',
+      label: '用户编号',
+      component: 'Input',
+    },
+    {
+      fieldName: 'userType',
+      label: '用户类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.USER_TYPE, 'number'),
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        allowClear: true,
+        ...getRangePickerDefaultProps(),
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      title: '编号',
+      field: 'id',
+    },
+    {
+      title: '用户编号',
+      field: 'userId',
+    },
+    {
+      title: '用户类型',
+      field: 'userType',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.USER_TYPE },
+      },
+    },
+    {
+      title: '余额',
+      field: 'balance',
+      formatter: 'formatAmount2',
+    },
+    {
+      title: '累计支出',
+      field: 'totalExpense',
+      formatter: 'formatAmount2',
+    },
+    {
+      title: '累计充值',
+      field: 'totalRecharge',
+      formatter: 'formatAmount2',
+    },
+    {
+      title: '冻结金额',
+      field: 'freezePrice',
+      formatter: 'formatAmount2',
+    },
+    {
+      title: '创建时间',
+      field: 'createTime',
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      field: 'actions',
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/pay/wallet/balance/index.vue b/apps/web-ele/src/views/pay/wallet/balance/index.vue
new file mode 100644
index 000000000..ea38835b9
--- /dev/null
+++ b/apps/web-ele/src/views/pay/wallet/balance/index.vue
@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { PayWalletApi } from '#/api/pay/wallet/balance';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getWalletPage } from '#/api/pay/wallet/balance';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import WalletDetail from './modules/detail.vue';
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+const [WalletModal, walletModalApi] = useVbenModal({
+  connectedComponent: WalletDetail,
+  destroyOnClose: true,
+});
+
+function handleDetail(row: Required<PayWalletApi.Wallet>) {
+  walletModalApi.setData(row).open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getWalletPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<PayWalletApi.Wallet>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="钱包余额" url="https://doc.iocoder.cn/pay/build/" />
+    </template>
+
+    <WalletModal @reload="onRefresh" />
+
+    <Grid>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              onClick: handleDetail.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/pay/wallet/balance/modules/detail.vue b/apps/web-ele/src/views/pay/wallet/balance/modules/detail.vue
new file mode 100644
index 000000000..1fa710207
--- /dev/null
+++ b/apps/web-ele/src/views/pay/wallet/balance/modules/detail.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { PayWalletApi } from '#/api/pay/wallet/balance';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import WalletTransactionList from '../../transaction/index.vue';
+
+const walletId = ref(0);
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<PayWalletApi.Wallet>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      walletId.value = data.id;
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+<template>
+  <Modal
+    title="消息详情"
+    class="w-2/5"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <WalletTransactionList :wallet-id="walletId" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/pay/wallet/rechargePackage/data.ts b/apps/web-ele/src/views/pay/wallet/rechargePackage/data.ts
new file mode 100644
index 000000000..d365a6f73
--- /dev/null
+++ b/apps/web-ele/src/views/pay/wallet/rechargePackage/data.ts
@@ -0,0 +1,119 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '套餐名',
+      component: 'Input',
+      rules: 'required',
+    },
+    {
+      fieldName: 'payPrice',
+      label: '支付金额(元)',
+      component: 'InputNumber',
+      rules: 'required',
+      componentProps: {
+        min: 0,
+        precision: 2,
+        step: 0.01,
+      },
+    },
+    {
+      fieldName: 'bonusPrice',
+      label: '赠送金额(元)',
+      component: 'InputNumber',
+      rules: 'required',
+      componentProps: {
+        min: 0,
+        precision: 2,
+        step: 0.01,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '开启状态',
+      component: 'RadioGroup',
+      rules: 'required',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '套餐名称',
+      component: 'Input',
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        allowClear: true,
+        ...getRangePickerDefaultProps(),
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+    },
+    {
+      field: 'name',
+      title: '套餐名称',
+    },
+    {
+      field: 'payPrice',
+      title: '支付金额',
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'bonusPrice',
+      title: '赠送金额',
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'status',
+      title: '状态',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/pay/wallet/rechargePackage/index.vue b/apps/web-ele/src/views/pay/wallet/rechargePackage/index.vue
new file mode 100644
index 000000000..8a1513f35
--- /dev/null
+++ b/apps/web-ele/src/views/pay/wallet/rechargePackage/index.vue
@@ -0,0 +1,127 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deletePackage,
+  getPackagePage,
+} from '#/api/pay/wallet/rechargePackage';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建套餐 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑套餐 */
+function handleEdit(row: any) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除套餐 */
+async function handleDelete(row: any) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+    fullscreen: true,
+  });
+  try {
+    await deletePackage(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    onRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getPackagePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<any>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="onRefresh" />
+    <Grid table-title="充值套餐列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['充值套餐']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['pay:wallet-recharge-package:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['pay:wallet-recharge-package:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['pay:wallet-recharge-package:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/pay/wallet/rechargePackage/modules/form.vue b/apps/web-ele/src/views/pay/wallet/rechargePackage/modules/form.vue
new file mode 100644
index 000000000..7c594595e
--- /dev/null
+++ b/apps/web-ele/src/views/pay/wallet/rechargePackage/modules/form.vue
@@ -0,0 +1,98 @@
+<script lang="ts" setup>
+import type { WalletRechargePackageApi } from '#/api/pay/wallet/rechargePackage';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { fenToYuan, yuanToFen } from '@vben/utils';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createPackage,
+  getPackage,
+  updatePackage,
+} from '#/api/pay/wallet/rechargePackage';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<WalletRechargePackageApi.Package>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['充值套餐'])
+    : $t('ui.actionTitle.create', ['充值套餐']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as WalletRechargePackageApi.Package;
+    try {
+      // 转换金额单位
+      data.payPrice = yuanToFen(data.payPrice);
+      data.bonusPrice = yuanToFen(data.bonusPrice);
+      await (formData.value?.id ? updatePackage(data) : createPackage(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<WalletRechargePackageApi.Package>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getPackage(data.id as number);
+      // 转换金额单位
+      formData.value.payPrice = Number.parseFloat(
+        fenToYuan(formData.value.payPrice),
+      );
+      formData.value.bonusPrice = Number.parseFloat(
+        fenToYuan(formData.value.bonusPrice),
+      );
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-2/5" :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/pay/wallet/transaction/data.ts b/apps/web-ele/src/views/pay/wallet/transaction/data.ts
new file mode 100644
index 000000000..2fe7a7279
--- /dev/null
+++ b/apps/web-ele/src/views/pay/wallet/transaction/data.ts
@@ -0,0 +1,40 @@
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      width: 80,
+    },
+    {
+      field: 'walletId',
+      title: '钱包编号',
+      width: 100,
+    },
+    {
+      field: 'title',
+      title: '关联业务标题',
+      width: 200,
+    },
+    {
+      field: 'price',
+      title: '交易金额',
+      width: 120,
+      formatter: ({ cellValue }) => `${cellValue / 100} 元`,
+    },
+    {
+      field: 'balance',
+      title: '钱包余额',
+      width: 120,
+      formatter: ({ cellValue }) => `${cellValue / 100} 元`,
+    },
+    {
+      field: 'createTime',
+      title: '交易时间',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/pay/wallet/transaction/index.vue b/apps/web-ele/src/views/pay/wallet/transaction/index.vue
new file mode 100644
index 000000000..dafb495cd
--- /dev/null
+++ b/apps/web-ele/src/views/pay/wallet/transaction/index.vue
@@ -0,0 +1,61 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { Page } from '@vben/common-ui';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getWallet } from '#/api/pay/wallet/balance';
+import { getTransactionPage } from '#/api/pay/wallet/transaction';
+
+import { useGridColumns } from './data';
+
+const props = defineProps({
+  walletId: {
+    type: Number,
+    required: false,
+    default: undefined,
+  },
+  userId: {
+    type: Number,
+    required: false,
+    default: undefined,
+  },
+});
+
+const [Grid] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          let walletId = props.walletId;
+          if (props.userId) {
+            const wallet = await getWallet({ userId: props.userId });
+            walletId = wallet.id;
+          }
+          return await getTransactionPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            walletId,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+    },
+  } as VxeTableGridOptions<any>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid table-title="钱包交易记录" />
+  </Page>
+</template>