fix: 代理

2026-09-12 11:27:50 +08:00
parent d3d257cdf8
commit 2308d82d0f
44 changed files with 5470 additions and 200 deletions
--- a/src/api/modules/agentRecharge.ts
+++ b/src/api/modules/agentRecharge.ts
@@ -9,6 +9,8 @@ import type {
  AgentRechargeListResponse,
  CreateAgentRechargeRequest,
  AgentRechargePaymentMethods,
+  AgentRechargePaymentVoucherOcrRequest,
+  AgentRechargePaymentVoucherOcrResponse,
  AgentRechargePaymentStatusResponse,
  ConfirmOfflinePaymentRequest,
  RejectAgentRechargeRequest,
@@ -25,6 +27,30 @@ export class AgentRechargeService extends BaseService {
    )
  }

+  /**
+   * 获取代理自充可用支付方式和金额限制
+   * 仅代理与平台账号可用，超级管理员调用返回 403
+   */
+  static getSelfRechargePaymentMethods(): Promise<BaseResponse<AgentRechargePaymentMethods>> {
+    return this.get<BaseResponse<AgentRechargePaymentMethods>>(
+      '/api/admin/agent-self-recharge-payment-methods'
+    )
+  }
+
+  /**
+   * 识别付款凭证中的交易流水号
+   * 只返回预填值，识别较慢且失败不阻断人工填写
+   */
+  static recognizePaymentVoucher(
+    data: AgentRechargePaymentVoucherOcrRequest
+  ): Promise<BaseResponse<AgentRechargePaymentVoucherOcrResponse>> {
+    return this.post<BaseResponse<AgentRechargePaymentVoucherOcrResponse>>(
+      '/api/admin/agent-recharges/payment-voucher-ocr',
+      data,
+      { timeout: 30000 }
+    )
+  }
+
  /**
   * 获取代理充值订单列表
   * @param params 查询参数
--- a/src/api/modules/employeeCollection.ts
+++ b/src/api/modules/employeeCollection.ts
@@ -0,0 +1,149 @@
+/**
+ * 员工代收款相关 API
+ */
+
+import { BaseService } from '../BaseService'
+import type {
+  CloseEmployeeCollectionBillRequest,
+  CloseEmployeeCollectionBillResponse,
+  CreateEmployeeCollectionPaymentMethodRequest,
+  DeleteEmployeeCollectionPaymentMethodResponse,
+  EmployeeCollectionApplicationListResponse,
+  EmployeeCollectionApplicationQueryParams,
+  EmployeeCollectionApplicationRequest,
+  EmployeeCollectionApplicationResponse,
+  EmployeeCollectionApplicationSubmitResponse,
+  EmployeeCollectionBillListResponse,
+  EmployeeCollectionBillQueryParams,
+  EmployeeCollectionBillResponse,
+  EmployeeCollectionBillStatisticsResponse,
+  EmployeeCollectionPaymentMethodListResponse,
+  EmployeeCollectionPaymentMethodQueryParams,
+  EmployeeCollectionPaymentMethodResponse,
+  UpdateEmployeeCollectionPaymentMethodRequest
+} from '@/types/api'
+
+const PAYMENT_METHODS_BASE_URL = '/api/admin/employee-collection-payment-methods'
+const BILLS_BASE_URL = '/api/admin/employee-collection-bills'
+const APPLICATIONS_BASE_URL = '/api/admin/employee-collection-applications'
+
+export class EmployeeCollectionService extends BaseService {
+  /**
+   * 获取收款方式列表
+   * 超级管理员返回全部，普通员工仅返回启用项
+   */
+  static getPaymentMethods(
+    params?: EmployeeCollectionPaymentMethodQueryParams
+  ): Promise<EmployeeCollectionPaymentMethodListResponse> {
+    return this.get<EmployeeCollectionPaymentMethodListResponse>(PAYMENT_METHODS_BASE_URL, params)
+  }
+
+  /**
+   * 新增收款方式
+   */
+  static createPaymentMethod(
+    data: CreateEmployeeCollectionPaymentMethodRequest
+  ): Promise<EmployeeCollectionPaymentMethodResponse> {
+    return this.post<EmployeeCollectionPaymentMethodResponse>(PAYMENT_METHODS_BASE_URL, data)
+  }
+
+  /**
+   * 修改收款方式（已被引用时不可修改 code）
+   */
+  static updatePaymentMethod(
+    id: number,
+    data: UpdateEmployeeCollectionPaymentMethodRequest
+  ): Promise<EmployeeCollectionPaymentMethodResponse> {
+    return this.put<EmployeeCollectionPaymentMethodResponse>(
+      `${PAYMENT_METHODS_BASE_URL}/${id}`,
+      data
+    )
+  }
+
+  /**
+   * 删除收款方式（已被引用时不可删除，只能停用）
+   */
+  static deletePaymentMethod(id: number): Promise<DeleteEmployeeCollectionPaymentMethodResponse> {
+    return this.delete<DeleteEmployeeCollectionPaymentMethodResponse>(
+      `${PAYMENT_METHODS_BASE_URL}/${id}`
+    )
+  }
+
+  /**
+   * 获取员工代收款账单列表
+   */
+  static getBills(
+    params?: EmployeeCollectionBillQueryParams
+  ): Promise<EmployeeCollectionBillListResponse> {
+    return this.get<EmployeeCollectionBillListResponse>(BILLS_BASE_URL, params)
+  }
+
+  /**
+   * 获取账单统计（应收/已核销/未核销/待处理数量）
+   */
+  static getBillStatistics(
+    params?: EmployeeCollectionBillQueryParams
+  ): Promise<EmployeeCollectionBillStatisticsResponse> {
+    return this.get<EmployeeCollectionBillStatisticsResponse>(
+      `${BILLS_BASE_URL}/statistics`,
+      params
+    )
+  }
+
+  /**
+   * 获取账单详情（含退款冲销、核销分摊、关联申请、企微审批历史）
+   */
+  static getBillById(id: number): Promise<EmployeeCollectionBillResponse> {
+    return this.getOne<EmployeeCollectionBillResponse['data']>(`${BILLS_BASE_URL}/${id}`)
+  }
+
+  /**
+   * 关闭账单（仅超级管理员，必须填写原因）
+   */
+  static closeBill(
+    id: number,
+    data: CloseEmployeeCollectionBillRequest
+  ): Promise<CloseEmployeeCollectionBillResponse> {
+    return this.post<CloseEmployeeCollectionBillResponse>(`${BILLS_BASE_URL}/${id}/close`, data)
+  }
+
+  /**
+   * 创建核销申请（提交后自动发起企微审批）
+   */
+  static createApplication(
+    data: EmployeeCollectionApplicationRequest
+  ): Promise<EmployeeCollectionApplicationSubmitResponse> {
+    return this.post<EmployeeCollectionApplicationSubmitResponse>(APPLICATIONS_BASE_URL, data)
+  }
+
+  /**
+   * 获取核销申请列表
+   */
+  static getApplications(
+    params?: EmployeeCollectionApplicationQueryParams
+  ): Promise<EmployeeCollectionApplicationListResponse> {
+    return this.get<EmployeeCollectionApplicationListResponse>(APPLICATIONS_BASE_URL, params)
+  }
+
+  /**
+   * 获取核销申请详情（含分摊账单、付款凭证、审批意见与提交历史）
+   */
+  static getApplicationById(id: number): Promise<EmployeeCollectionApplicationResponse> {
+    return this.getOne<EmployeeCollectionApplicationResponse['data']>(
+      `${APPLICATIONS_BASE_URL}/${id}`
+    )
+  }
+
+  /**
+   * 驳回后修改并重新提交（生成新的企微审批实例）
+   */
+  static updateApplication(
+    id: number,
+    data: EmployeeCollectionApplicationRequest
+  ): Promise<EmployeeCollectionApplicationSubmitResponse> {
+    return this.put<EmployeeCollectionApplicationSubmitResponse>(
+      `${APPLICATIONS_BASE_URL}/${id}`,
+      data
+    )
+  }
+}
--- a/src/api/modules/index.ts
+++ b/src/api/modules/index.ts
@@ -40,7 +40,7 @@ export { BulkPurchaseService } from './bulkPurchase'
 export { NotificationService } from './notification'
 export { AuditService } from './audit'
 export { WecomService } from './wecom'
+export { EmployeeCollectionService } from './employeeCollection'

 // TODO: 按需添加其他业务模块
 // export { SettingService } from './setting'
-
--- a/src/api/modules/paymentMerchantPools.ts
+++ b/src/api/modules/paymentMerchantPools.ts
@@ -7,8 +7,13 @@ import type { BaseResponse } from '@/types/api'
 import type {
  CreatePaymentMerchantRequest,
  PaymentMerchant,
+  PaymentCredentialValue,
+  PaymentCredentials,
+  PaymentMerchantDetail,
+  PaymentMerchantDetailResponse,
  PaymentMerchantPageResponse,
  PaymentMerchantPageResult,
+  PaymentMerchantProviderType,
  PaymentMerchantPool,
  PaymentMerchantPoolPageResponse,
  PaymentMerchantPoolPayload,
@@ -27,6 +32,28 @@ const WECHAT_AUTHORIZATIONS_BASE_URL = '/api/admin/wechat-authorizations'

 type RawPaymentMerchant = PaymentMerchant & { credentials?: unknown }

+type RawPaymentMerchantDetail = PaymentMerchant & { credentials?: Record<string, unknown> }
+
+const MERCHANT_CREDENTIAL_DISPLAY_KEYS: Record<PaymentMerchantProviderType, string[]> = {
+  wechat: ['wx_mch_id', 'wx_serial_no', 'wx_notify_url'],
+  wechat_v2: ['wx_mch_id', 'wx_serial_no', 'wx_notify_url'],
+  fuiou: ['fy_api_url', 'fy_ins_cd', 'fy_mchnt_cd', 'fy_term_id', 'fy_notify_url'],
+  alipay: [
+    'ali_app_id',
+    'ali_notify_url',
+    'ali_return_url',
+    'ali_pay_expire_minutes',
+    'ali_production'
+  ]
+}
+
+const MERCHANT_CREDENTIAL_STATUS_KEYS: Record<PaymentMerchantProviderType, string[]> = {
+  wechat: ['wx_api_v2_key', 'wx_api_v3_key', 'wx_cert_content', 'wx_key_content'],
+  wechat_v2: ['wx_api_v2_key', 'wx_api_v3_key', 'wx_cert_content', 'wx_key_content'],
+  fuiou: ['fy_private_key', 'fy_public_key'],
+  alipay: ['ali_private_key', 'ali_public_key']
+}
+
 const sanitizeMerchant = (merchant: RawPaymentMerchant): PaymentMerchant => {
  // 仅通过解构丢弃 credentials 字段，避免在前端页面/状态中保留支付凭证明文
  const { credentials: _ignoredCredentials, ...safeMerchant } = merchant
@@ -34,6 +61,30 @@ const sanitizeMerchant = (merchant: RawPaymentMerchant): PaymentMerchant => {
  return safeMerchant
 }

+const sanitizeMerchantDetail = (merchant: RawPaymentMerchantDetail): PaymentMerchantDetail => {
+  const { credentials: rawCredentials, ...baseMerchant } = merchant
+  const credentials: PaymentCredentials = {}
+  const provider = merchant.provider_type
+  const source = rawCredentials || {}
+
+  for (const key of MERCHANT_CREDENTIAL_DISPLAY_KEYS[provider] || []) {
+    const value = source[key]
+    if (value !== undefined && value !== null) {
+      credentials[key] = value as PaymentCredentialValue
+    }
+  }
+
+  for (const key of MERCHANT_CREDENTIAL_STATUS_KEYS[provider] || []) {
+    const value = source[key]
+    credentials[key] = value ? '已配置' : '未配置'
+  }
+
+  return {
+    ...baseMerchant,
+    credentials
+  }
+}
+
 const sanitizeMerchantPage = (page: PaymentMerchantPageResult): PaymentMerchantPageResult => ({
  ...page,
  items: (page.items || []).map((item) => sanitizeMerchant(item as RawPaymentMerchant))
@@ -77,6 +128,15 @@ export class PaymentMerchantPoolsService extends BaseService {
    )
  }

+  static getPaymentMerchantDetailById(id: number): Promise<PaymentMerchantDetailResponse> {
+    return this.get<PaymentMerchantDetailResponse>(`${PAYMENT_MERCHANTS_BASE_URL}/${id}`).then(
+      (response) => ({
+        ...response,
+        data: sanitizeMerchantDetail(response.data as unknown as RawPaymentMerchantDetail)
+      })
+    )
+  }
+
  static createPaymentMerchant(
    data: CreatePaymentMerchantRequest
  ): Promise<PaymentMerchantResponse> {
--- a/src/components/business/VoucherUpload.vue
+++ b/src/components/business/VoucherUpload.vue
@@ -68,6 +68,7 @@
    tip?: string
    purpose?: FilePurpose
    maxSizeMb?: number
+    contentType?: string
    singleColumnCsv?: boolean
    maxCsvRows?: number
  }
@@ -79,6 +80,7 @@
    tip: '',
    purpose: 'attachment',
    maxSizeMb: 0,
+    contentType: '',
    singleColumnCsv: false,
    maxCsvRows: 0
  })
@@ -190,6 +192,35 @@
    uploadRef.value?.handleRemove(uploadFile)
  }

+  // accept 支持扩展名（.csv）、精确 MIME（image/jpeg）与通配 MIME（image/*）
+  const isAcceptMatched = (file: File) => {
+    if (!props.accept) return true
+
+    const fileName = file.name.toLowerCase()
+    const fileType = (file.type || '').toLowerCase()
+
+    return props.accept.split(',').some((type) => {
+      const value = type.trim().toLowerCase()
+      if (!value) return false
+      if (value.startsWith('.')) return fileName.endsWith(value)
+      if (value.endsWith('/*')) return fileType.startsWith(value.slice(0, -1))
+      return fileType === value
+    })
+  }
+
+  const getAcceptWarning = () => {
+    const values = props.accept
+      .split(',')
+      .map((type) => type.trim().toLowerCase())
+      .filter(Boolean)
+
+    if (values.length > 0 && values.every((value) => value.startsWith('image/'))) {
+      return '只能上传图片格式的文件'
+    }
+
+    return `只能上传 ${props.accept} 格式的文件`
+  }
+
  const handleFileChange = async (uploadFile: UploadFile) => {
    const file = uploadFile.raw
    if (!file) return
@@ -219,14 +250,8 @@
    }

    if (props.accept) {
-      const accepted = props.accept.split(',').some((type) => {
-        const value = type.trim().toLowerCase()
-        return value.startsWith('.')
-          ? file.name.toLowerCase().endsWith(value)
-          : file.type.toLowerCase() === value
-      })
-      if (!accepted) {
-        ElMessage.warning(`只能上传 ${props.accept} 格式的文件`)
+      if (!isAcceptMatched(file)) {
+        ElMessage.warning(getAcceptWarning())
        removeUploadFile(uploadFile)
        return
      }
@@ -249,10 +274,10 @@
    try {
      ElMessage.info(`正在上传${props.voucherName}...`)

-      const contentType = file.type || 'application/octet-stream'
+      const uploadContentType = props.contentType || file.type || 'application/octet-stream'
      const uploadUrlRes = await StorageService.getUploadUrl({
        file_name: file.name,
-        content_type: contentType,
+        content_type: uploadContentType,
        purpose: props.purpose
      })

@@ -263,7 +288,7 @@
      }

      const { upload_url, file_key } = uploadUrlRes.data
-      await StorageService.uploadFile(upload_url, file, contentType)
+      await StorageService.uploadFile(upload_url, file, uploadContentType)

      if (uploadBatch !== activeUploadBatch || removedUploadUids.has(uploadFile.uid)) {
        return
--- a/src/config/constants/augustIteration.ts
+++ b/src/config/constants/augustIteration.ts
@@ -0,0 +1,21 @@
+/**
+ * 八月迭代新增后台权限编码。
+ * 页面和按钮统一引用这里的常量，后端菜单权限可直接复用同名编码。
+ */
+export const AUGUST_PERMISSIONS = {
+  employeeCollection: {
+    billPage: 'employee_collection:bill_view',
+    billDetail: 'employee_collection:bill_detail',
+    billClose: 'employee_collection:bill_close',
+    applicationPage: 'employee_collection:application_view',
+    applicationCreate: 'employee_collection:application_create',
+    applicationDetail: 'employee_collection:application_detail',
+    applicationUpdate: 'employee_collection:application_update',
+    paymentMethodPage: 'employee_collection:payment_method_view',
+    paymentMethodCreate: 'employee_collection:payment_method_create',
+    paymentMethodEdit: 'employee_collection:payment_method_edit',
+    paymentMethodDelete: 'employee_collection:payment_method_delete'
+  }
+} as const
+
+export type AugustPermission = string
--- a/src/locales/langs/en.json
+++ b/src/locales/langs/en.json
@@ -433,7 +433,12 @@
      "agentRechargeDetail": "Agent Recharge Details",
      "refundManagement": "Refund Management",
      "refundDetail": "Refund Details",
-      "agentFundOverview": "Agent Fund Overview"
+      "agentFundOverview": "Agent Fund Overview",
+      "employeeCollectionBills": "Employee Collection Bills",
+      "employeeCollectionBillDetail": "Bill Details",
+      "employeeCollectionApplications": "Reconciliation Applications",
+      "employeeCollectionApplicationDetail": "Application Details",
+      "employeeCollectionPaymentMethods": "Payment Methods"
    },
    "deviceManagement": {
      "title": "Device Management",
@@ -496,6 +501,7 @@
    "settings": {
      "title": "Settings Management",
      "paymentSettings": "Payment Settings",
+      "agentSelfRecharge": "Agent Self-Recharge Settings",
      "detailsOfPaymentConfiguration": "Payment Configuration Details",
      "paymentMerchant": "Payment Merchant",
      "developerApi": "Developer API",
--- a/src/locales/langs/zh.json
+++ b/src/locales/langs/zh.json
@@ -438,7 +438,12 @@
      "agentRechargeDetail": "代理充值详情",
      "refundManagement": "退款管理",
      "refundDetail": "退款详情",
-      "agentFundOverview": "代理商资金概况"
+      "agentFundOverview": "代理商资金概况",
+      "employeeCollectionBills": "员工代收款账单",
+      "employeeCollectionBillDetail": "账单详情",
+      "employeeCollectionApplications": "核销申请",
+      "employeeCollectionApplicationDetail": "核销申请详情",
+      "employeeCollectionPaymentMethods": "收款方式管理"
    },
    "commission": {
      "title": "佣金管理",
@@ -448,6 +453,7 @@
    "settings": {
      "title": "设置管理",
      "paymentSettings": "支付设置",
+      "agentSelfRecharge": "代理自充设置",
      "detailsOfPaymentConfiguration": "支付配置详情",
      "withdrawalSettings": "提现配置",
      "passwordSettings": "密码设置",
--- a/src/router/routes/asyncRoutes.ts
+++ b/src/router/routes/asyncRoutes.ts
@@ -3,6 +3,7 @@ import { AppRouteRecord } from '@/types/router'
 import { BULK_PURCHASE_PERMISSIONS } from '@/config/constants/bulkPurchase'
 import { JULY_PERMISSIONS } from '@/config/constants/julyIteration'
 import { AUDIT_PERMISSIONS } from '@/config/constants/audit'
+import { AUGUST_PERMISSIONS } from '@/config/constants/augustIteration'

 /**
 * 菜单列表、异步路由
@@ -690,6 +691,64 @@ export const asyncRoutes: AppRouteRecord[] = [
          keepAlive: false
        }
      },
+      // 员工代收款账单
+      {
+        path: 'employee-collection/bills',
+        name: 'EmployeeCollectionBills',
+        component: RoutesAlias.EmployeeCollectionBills,
+        meta: {
+          title: 'menus.financialManagement.employeeCollectionBills',
+          keepAlive: true,
+          permissions: [AUGUST_PERMISSIONS.employeeCollection.billPage]
+        }
+      },
+      // 员工代收款账单详情
+      {
+        path: 'employee-collection/bills/detail/:id',
+        name: 'EmployeeCollectionBillDetailRoute',
+        component: RoutesAlias.EmployeeCollectionBillDetail,
+        meta: {
+          title: 'menus.financialManagement.employeeCollectionBillDetail',
+          isHide: true,
+          keepAlive: false,
+          permissions: [AUGUST_PERMISSIONS.employeeCollection.billDetail]
+        }
+      },
+      // 核销申请
+      {
+        path: 'employee-collection/applications',
+        name: 'EmployeeCollectionApplications',
+        component: RoutesAlias.EmployeeCollectionApplications,
+        meta: {
+          title: 'menus.financialManagement.employeeCollectionApplications',
+          keepAlive: true,
+          permissions: [AUGUST_PERMISSIONS.employeeCollection.applicationPage]
+        }
+      },
+      // 核销申请详情
+      {
+        path: 'employee-collection/applications/detail/:id',
+        name: 'EmployeeCollectionApplicationDetailRoute',
+        component: RoutesAlias.EmployeeCollectionApplicationDetail,
+        meta: {
+          title: 'menus.financialManagement.employeeCollectionApplicationDetail',
+          isHide: true,
+          keepAlive: false,
+          permissions: [AUGUST_PERMISSIONS.employeeCollection.applicationDetail]
+        }
+      },
+      // 收款方式管理（仅超级管理员）
+      {
+        path: 'employee-collection/payment-methods',
+        name: 'EmployeeCollectionPaymentMethods',
+        component: RoutesAlias.EmployeeCollectionPaymentMethods,
+        meta: {
+          title: 'menus.financialManagement.employeeCollectionPaymentMethods',
+          keepAlive: true,
+          roles: ['R_SUPER'],
+          permissions: [AUGUST_PERMISSIONS.employeeCollection.paymentMethodPage]
+        }
+      },
      // 代理商资金概况
      {
        path: 'agent-fund-overview',
@@ -847,6 +906,30 @@ export const asyncRoutes: AppRouteRecord[] = [
          allowedUserTypes: [1, 2]
        }
      },
+      // 支付商户详情
+      {
+        path: 'payment-merchant-pools/detail/:id',
+        name: 'PaymentMerchantPoolsDetailRoute',
+        component: RoutesAlias.PaymentMerchantPoolsDetail,
+        meta: {
+          title: 'menus.settings.detailsOfPaymentMerchant',
+          isHide: true,
+          keepAlive: false,
+          allowedUserTypes: [1, 2]
+        }
+      },
+      // 商户池详情
+      {
+        path: 'payment-merchant-pools/pool-detail/:id',
+        name: 'PaymentMerchantPoolDetailRoute',
+        component: RoutesAlias.PaymentMerchantPoolDetail,
+        meta: {
+          title: 'menus.settings.detailsOfPaymentMerchantPool',
+          isHide: true,
+          keepAlive: false,
+          allowedUserTypes: [1, 2]
+        }
+      },
      // 支付设置详情
      {
        path: 'payment-settings/detail/:id',
@@ -880,6 +963,17 @@ export const asyncRoutes: AppRouteRecord[] = [
          roles: ['R_SUPER', 'R_ADMIN']
        }
      },
+      // 代理自充设置（跳转系统配置并带上模块筛选）
+      {
+        path: 'agent-self-recharge',
+        name: 'AgentSelfRechargeSettings',
+        redirect: { path: RoutesAlias.SystemConfigs, query: { module: 'c2b.payment' } },
+        meta: {
+          title: 'menus.settings.agentSelfRecharge',
+          keepAlive: false,
+          roles: ['R_SUPER']
+        }
+      },
      {
        path: 'wecom',
        name: 'WecomSettings',
@@ -1107,5 +1201,3 @@ export const asyncRoutes: AppRouteRecord[] = [
  //   ]
  // },
 ]
-
-
--- a/src/router/routesAlias.ts
+++ b/src/router/routesAlias.ts
@@ -90,6 +90,11 @@ export enum RoutesAlias {
  RefundManagement = '/finance/refund', // 退款管理
  RefundDetail = '/finance/refund/detail', // 退款详情
  AgentFundOverview = '/finance/agent-fund-overview', // 代理商资金概况
+  EmployeeCollectionBills = '/finance/employee-collection/bills', // 员工代收款账单
+  EmployeeCollectionBillDetail = '/finance/employee-collection/bills/detail', // 员工代收款账单详情
+  EmployeeCollectionApplications = '/finance/employee-collection/applications', // 核销申请
+  EmployeeCollectionApplicationDetail = '/finance/employee-collection/applications/detail', // 核销申请详情
+  EmployeeCollectionPaymentMethods = '/finance/employee-collection/payment-methods', // 收款方式管理

  ExpiringAssets = '/asset-management/expiring-assets', // 临期资产

@@ -103,8 +108,11 @@ export enum RoutesAlias {
  PaymentSettings = '/settings/payment-settings', // 支付设置
  PaymentSettingsDetail = '/settings/payment-settings/detail', // 支付设置详情
  PaymentMerchantPools = '/settings/payment-merchant-pools', // 支付商户与商户池管理
+  PaymentMerchantPoolsDetail = '/settings/payment-merchant-pools/detail', // 支付商户详情
+  PaymentMerchantPoolDetail = '/settings/payment-merchant-pools/pool-detail', // 商户池详情
  OperationPasswordSettings = '/settings/operation-password', // 操作密码设置
  SystemConfigs = '/settings/system-configs', // 系统配置
+  AgentSelfRechargeSettings = '/settings/agent-self-recharge', // 代理自充设置
  WecomSettings = '/settings/wecom', // 企业微信配置兼容入口
  WecomApplications = '/settings/wecom/applications', // 企业微信应用
  WecomMembers = '/settings/wecom/members', // 企业微信成员
@@ -134,4 +142,3 @@ export enum RoutesAlias {

 // 主页路由 - 修改为资产信息页面
 export const HOME_PAGE = RoutesAlias.AssetInformation
-
--- a/src/types/api/agentRecharge.ts
+++ b/src/types/api/agentRecharge.ts
@@ -47,6 +47,11 @@ export interface AgentRecharge {
  recharge_source?: AgentRechargeSource | null
  recharge_source_name?: string | null
  payment_voucher_key?: string[] | string // 凭证附件列表；历史数据可能为单字符串或逗号字符串
+  external_transaction_no?: string | null // 线下人工申报的交易流水号，与在线 payment_transaction_id 互不覆盖
+  offline_payment_method_id?: number | null // 线下收款方式字典ID，仅线下充值有值
+  offline_payment_method_code?: string | null // 线下收款方式稳定编码快照
+  offline_payment_method_name?: string | null // 线下收款方式名称快照
+  other_voucher_key?: string[] | null // 其他凭证对象存储Key列表，仅线下充值有值
  rejection_reason?: string | null // 拒绝原因
  remark?: string // 运营备注
  submitter_name?: string | null // 提交人名称
@@ -98,6 +103,9 @@ export interface CreateAgentRechargeOfflineRequest {
  payment_method: 'offline'
  shop_id: number
  payment_voucher_key: string[] // 线下支付凭证附件列表（payment_method=offline 时必填）
+  offline_payment_method_id: number // 线下收款方式字典ID，取自收款方式字典启用项
+  external_transaction_no: string // 线下交易流水号，OCR 预填后人工确认
+  other_voucher_key?: string[] // 其他凭证对象存储Key列表，最多 5 个
  remark?: string // 运营备注，最多 1000 字
 }

@@ -112,6 +120,19 @@ export interface AgentRechargePaymentMethods {
  max_amount: number
 }

+// 代理自充可用支付方式和金额范围（GET /api/admin/agent-self-recharge-payment-methods）
+export type AgentSelfRechargePaymentMethods = AgentRechargePaymentMethods
+
+// 识别付款凭证中的交易流水号请求
+export interface AgentRechargePaymentVoucherOcrRequest {
+  payment_voucher_key: string // 付款凭证对象存储Key，必须指向已上传的图片类型附件
+}
+
+// 识别付款凭证中的交易流水号响应（只返回交易流水号预填值）
+export interface AgentRechargePaymentVoucherOcrResponse {
+  external_transaction_no: string
+}
+
 // 在线充值支付及钱包到账状态
 export interface AgentRechargePaymentStatusResponse {
  recharge_id: number
--- a/src/types/api/employeeCollection.ts
+++ b/src/types/api/employeeCollection.ts
@@ -0,0 +1,302 @@
+/**
+ * 员工代收款相关类型定义
+ *
+ * 依据后端 OpenAPI（员工代收款分组）：
+ * - 列表响应为 { items, page, size, total }
+ * - 账单状态与申请状态均为数字枚举
+ * - 金额单位为「分」，附件字段为对象存储 Key 数组
+ */
+
+import type { BaseResponse, PaginationParams } from './common'
+
+// ========== 收款方式字典 ==========
+
+export interface EmployeeCollectionPaymentMethod {
+  id: number
+  code: string
+  name: string
+  sort: number
+  enabled: boolean
+  remark?: string | null
+  created_at?: string | null
+  updated_at?: string | null
+}
+
+/** 收款方式列表查询参数，后端返回 { items, page, size, total } */
+export interface EmployeeCollectionPaymentMethodQueryParams {
+  page?: number
+  page_size?: number
+  enabled?: boolean
+  keyword?: string
+}
+
+export interface CreateEmployeeCollectionPaymentMethodRequest {
+  code: string
+  name: string
+  sort?: number
+  enabled?: boolean
+  remark?: string
+}
+
+export interface UpdateEmployeeCollectionPaymentMethodRequest {
+  code?: string
+  name?: string
+  sort?: number
+  enabled?: boolean
+  remark?: string
+}
+
+// ========== 通用列表结构 ==========
+
+/** 后端列表统一返回 { items, page, size, total } */
+export interface EmployeeCollectionListData<T> {
+  items?: T[] | null
+  list?: T[] | null
+  total?: number
+  page?: number
+  size?: number
+  page_size?: number
+}
+
+// ========== 员工代收款账单 ==========
+
+/** 账单状态：0 待核销 / 1 部分核销 / 2 已核销 / 3 已关闭 */
+export type EmployeeCollectionBillStatus = number
+
+/** 账单责任人（员工）快照 */
+export interface EmployeeCollectionDebtorSnapshot {
+  account_id?: number | null
+  account_name?: string | null
+  account_type?: string | null
+  [key: string]: unknown
+}
+
+/** 账单客户 / 店铺快照 */
+export interface EmployeeCollectionCustomerSnapshot {
+  shop_id?: number | null
+  seller_shop_id?: number | null
+  buyer_id?: number | null
+  buyer_type?: string | null
+  buyer_nickname?: string | null
+  asset_identifier?: string | null
+  [key: string]: unknown
+}
+
+export interface EmployeeCollectionBill {
+  id: number
+  source_type?: string | null
+  source_type_name?: string | null
+  source_id?: number | null
+  source_no?: string | null
+  debtor_account_id?: number | null
+  debtor_snapshot?: EmployeeCollectionDebtorSnapshot | null
+  customer_snapshot?: EmployeeCollectionCustomerSnapshot | null
+  receivable_amount?: number | null // 应收金额（分）
+  received_amount?: number | null // 已核销金额（分）
+  reserved_amount?: number | null // 审批中预占金额（分）
+  remaining_amount?: number | null // 未核销金额（分）
+  status: EmployeeCollectionBillStatus
+  status_name?: string | null
+  approval_pending?: boolean // 是否存在审批中的核销申请
+  closed_reason?: string | null
+  closed_at?: string | null
+  created_at?: string | null
+  updated_at?: string | null
+}
+
+/** 核销申请详情中的账单分摊 */
+export interface EmployeeCollectionAllocation {
+  id?: number
+  bill_id: number
+  amount: number // 本次分摊金额（分）
+  status?: number | null // 0 审批中预占 / 1 已通过 / 2 已驳回或已释放
+  status_name?: string | null
+  bill_status?: number | null
+  bill_status_name?: string | null
+  bill_source_type?: string | null
+  bill_source_no?: string | null
+  bill_receivable_amount?: number | null
+  bill_received_amount?: number | null
+  bill_reserved_amount?: number | null
+  created_at?: string | null
+  released_at?: string | null
+}
+
+/** 账单详情中的核销分摊（含所属核销申请信息） */
+export interface EmployeeCollectionBillAllocation {
+  id?: number
+  amount: number
+  application_id?: number | null
+  application_status?: number | null
+  application_status_name?: string | null
+  attempt_id?: number | null
+  status?: number | null
+  status_name?: string | null
+  created_at?: string | null
+  released_at?: string | null
+}
+
+/** 来源订单退款冲销关联（账单详情 refunds） */
+export interface EmployeeCollectionBillRefund {
+  id?: number
+  refund_id?: number
+  source_order_id?: number
+  refund_amount?: number | null // 本次退款成功金额（分）
+  reduced_amount?: number | null // 实际冲减应收金额（分）
+  bill_receivable_amount?: number | null // 冲销前账单应收金额快照（分）
+  outcome?: string | null // closed_full / reduced / hint_only
+  outcome_name?: string | null
+  created_at?: string | null
+}
+
+/** 账单详情（接口返回 { bill, refunds, allocations, applications }） */
+export interface EmployeeCollectionBillDetailData {
+  bill: EmployeeCollectionBill
+  refunds?: EmployeeCollectionBillRefund[] | null
+  allocations?: EmployeeCollectionBillAllocation[] | null
+  applications?: EmployeeCollectionBillApplication[] | null
+}
+
+/** 账单统计 */
+export interface EmployeeCollectionBillStatistics {
+  receivable_total: number // 应收总金额（分）
+  received_total: number // 已收款（已核销）总金额（分）
+  unsettled_total: number // 未结（未核销）总金额（分）
+  pending_bill_count: number // 待处理账单数量
+}
+
+export interface EmployeeCollectionBillQueryParams extends PaginationParams {
+  source_type?: string
+  source_no?: string
+  status?: EmployeeCollectionBillStatus
+  debtor_account_id?: number
+  customer_id?: number
+  created_from?: string
+  created_to?: string
+}
+
+export interface CloseEmployeeCollectionBillRequest {
+  reason: string
+}
+
+export type CloseEmployeeCollectionBillResult = EmployeeCollectionBill
+
+// ========== 核销申请 ==========
+
+/** 申请状态：0 审批中 / 1 已通过 / 2 已驳回 / 3 已撤销或已关闭 */
+export type EmployeeCollectionApplicationStatus = number
+
+/** 审批尝试记录（历史材料不被覆盖） */
+export interface EmployeeCollectionApplicationAttempt {
+  id?: number
+  attempt_no?: number
+  approval_instance_id?: number | null
+  approval_status?: number | null // 通用审批实例状态
+  approval_status_name?: string | null
+  approval_opinion?: string | null
+  acting_reason?: string | null
+  external_transaction_no?: string | null
+  paid_amount?: number | null
+  paid_at?: string | null
+  payer_name?: string | null
+  payment_method_id?: number | null
+  payment_method_code?: string | null
+  payment_method_name?: string | null
+  payment_voucher_keys?: string[] | null
+  remark?: string | null
+  submitted_by_account_id?: number | null
+  allocation_snapshot?: Array<Record<string, string>> | null
+  created_at?: string | null
+}
+
+export interface EmployeeCollectionApplication {
+  id: number
+  applicant_account_id?: number | null
+  acting_operator_id?: number | null // 0 表示本人办理
+  acting_reason?: string | null
+  payment_method_id?: number | null
+  payment_method_code?: string | null
+  payment_method_name?: string | null
+  paid_amount?: number | null // 人工确认的付款金额（分）
+  paid_at?: string | null
+  payer_name?: string | null
+  external_transaction_no?: string | null
+  payment_voucher_keys?: string[] | null
+  remark?: string | null
+  status: EmployeeCollectionApplicationStatus
+  status_name?: string | null
+  terminal_reason?: string | null
+  decided_at?: string | null
+  latest_approval_instance_id?: number | null
+  latest_attempt_id?: number | null
+  created_at?: string | null
+  updated_at?: string | null
+}
+
+/** 账单详情中的核销申请（含该申请的审批尝试记录） */
+export interface EmployeeCollectionBillApplication extends EmployeeCollectionApplication {
+  attempts?: EmployeeCollectionApplicationAttempt[] | null
+}
+
+/** 申请详情（接口返回 { application, allocations, attempts }） */
+export interface EmployeeCollectionApplicationDetailData {
+  application: EmployeeCollectionApplication
+  allocations?: EmployeeCollectionAllocation[] | null
+  attempts?: EmployeeCollectionApplicationAttempt[] | null
+}
+
+export interface EmployeeCollectionApplicationQueryParams extends PaginationParams {
+  status?: EmployeeCollectionApplicationStatus
+  applicant_account_id?: number
+  payment_method_id?: number
+  created_from?: string
+  created_to?: string
+}
+
+export interface EmployeeCollectionAllocationRequest {
+  bill_id: number
+  amount: number
+}
+
+export interface EmployeeCollectionApplicationRequest {
+  payment_method_id: number
+  paid_amount: number
+  paid_at: string
+  payer_name: string
+  external_transaction_no: string
+  payment_voucher_keys: string[]
+  remark?: string
+  allocations: EmployeeCollectionAllocationRequest[]
+  acting_reason?: string
+}
+
+export interface EmployeeCollectionApplicationSubmitResult {
+  allocations?: EmployeeCollectionAllocation[] | null
+  application?: EmployeeCollectionApplication | null
+  approval_instance_id?: number | null
+  approval_status?: number | null
+  approval_status_name?: string | null
+  attempt?: EmployeeCollectionApplicationAttempt | null
+}
+
+// ========== 响应类型 ==========
+
+export type EmployeeCollectionPaymentMethodListResponse = BaseResponse<
+  EmployeeCollectionPaymentMethod[] | EmployeeCollectionListData<EmployeeCollectionPaymentMethod>
+>
+export type EmployeeCollectionPaymentMethodResponse = BaseResponse<EmployeeCollectionPaymentMethod>
+export type DeleteEmployeeCollectionPaymentMethodResponse = BaseResponse<null>
+export type EmployeeCollectionBillListResponse = BaseResponse<
+  EmployeeCollectionListData<EmployeeCollectionBill>
+>
+export type EmployeeCollectionBillResponse = BaseResponse<EmployeeCollectionBillDetailData>
+export type EmployeeCollectionBillStatisticsResponse =
+  BaseResponse<EmployeeCollectionBillStatistics>
+export type CloseEmployeeCollectionBillResponse = BaseResponse<CloseEmployeeCollectionBillResult>
+export type EmployeeCollectionApplicationListResponse = BaseResponse<
+  EmployeeCollectionListData<EmployeeCollectionApplication>
+>
+export type EmployeeCollectionApplicationResponse =
+  BaseResponse<EmployeeCollectionApplicationDetailData>
+export type EmployeeCollectionApplicationSubmitResponse =
+  BaseResponse<EmployeeCollectionApplicationSubmitResult>
--- a/src/types/api/index.ts
+++ b/src/types/api/index.ts
@@ -135,4 +135,5 @@ export * from './audit'
 // 企业微信审批配置相关
 export * from './wecom'

-
+// 员工代收款相关
+export * from './employeeCollection'
--- a/src/types/api/paymentMerchantPools.ts
+++ b/src/types/api/paymentMerchantPools.ts
@@ -45,6 +45,14 @@ export interface PaymentMerchant {
  updated_at: string
 }

+/**
+ * 支付商户详情：仅在详情页短暂使用，凭证字段经过脱敏/白名单处理，
+ * 不用于列表、编辑表单或持久化状态。
+ */
+export interface PaymentMerchantDetail extends PaymentMerchant {
+  credentials: PaymentCredentials
+}
+
 export interface PaymentMerchantQueryParams extends PaginationParams {
  /** 可选：按名称模糊筛选 */
  name?: string
@@ -132,6 +140,7 @@ export interface UpdateWechatAuthorizationRequest {

 export type PaymentMerchantResponse = BaseResponse<PaymentMerchant>
 export type PaymentMerchantPageResponse = BaseResponse<PaymentMerchantPageResult>
+export type PaymentMerchantDetailResponse = BaseResponse<PaymentMerchantDetail>
 export type PaymentMerchantPoolResponse = BaseResponse<PaymentMerchantPool>
 export type PaymentMerchantPoolPageResponse = BaseResponse<PaymentMerchantPoolPageResult>
 export type WechatAuthorizationResponse = BaseResponse<WechatAuthorizationConfig>
@@ -205,3 +214,146 @@ export interface PaymentMerchantPoolMemberOption {
  payment_method: PaymentMerchantMethod
  enabled: boolean
 }
+
+/**
+ * 商户凭证字段枚举：必填键由 `payment_method` 与 `provider_type` 组合决定，
+ * 可选键为允许附带但非必须的字段，键名与渠道配置字段一致。
+ */
+export interface PaymentCredentialFieldSpec {
+  required: string[]
+  optional: string[]
+}
+
+export const PAYMENT_CREDENTIAL_FIELD_SPECS: Record<
+  PaymentMerchantProviderType,
+  PaymentCredentialFieldSpec
+> = {
+  wechat: {
+    required: [
+      'wx_mch_id',
+      'wx_api_v3_key',
+      'wx_cert_content',
+      'wx_key_content',
+      'wx_serial_no',
+      'wx_notify_url'
+    ],
+    optional: ['wx_api_v2_key']
+  },
+  wechat_v2: {
+    required: ['wx_mch_id', 'wx_api_v2_key', 'wx_notify_url'],
+    optional: []
+  },
+  fuiou: {
+    required: [
+      'fy_mchnt_cd',
+      'fy_ins_cd',
+      'fy_term_id',
+      'fy_private_key',
+      'fy_public_key',
+      'fy_api_url',
+      'fy_notify_url'
+    ],
+    optional: []
+  },
+  alipay: {
+    required: [
+      'ali_app_id',
+      'ali_private_key',
+      'ali_public_key',
+      'ali_notify_url',
+      'ali_return_url'
+    ],
+    optional: ['ali_production', 'ali_pay_expire_minutes']
+  }
+}
+
+export function getPaymentCredentialFieldSpec(
+  providerType: PaymentMerchantProviderType
+): PaymentCredentialFieldSpec {
+  return PAYMENT_CREDENTIAL_FIELD_SPECS[providerType] || { required: [], optional: [] }
+}
+
+/** 凭证字段中的布尔字段：值必须为布尔值 */
+export const PAYMENT_CREDENTIAL_BOOLEAN_KEYS: string[] = ['ali_production']
+
+/** 凭证字段中的整数字段：值必须为正整数 */
+export const PAYMENT_CREDENTIAL_INTEGER_KEYS: string[] = ['ali_pay_expire_minutes']
+
+/** `merchant_identity` 必须与其值保持一致的凭证字段 */
+export const PAYMENT_MERCHANT_IDENTITY_KEYS: Record<PaymentMerchantProviderType, string> = {
+  wechat: 'wx_mch_id',
+  wechat_v2: 'wx_mch_id',
+  fuiou: 'fy_mchnt_cd',
+  alipay: 'ali_app_id'
+}
+
+export interface PaymentCredentialEntryInput {
+  key: string
+  value: string
+}
+
+export interface PaymentCredentialValidationResult {
+  credentials: PaymentCredentials | null
+  error: string
+}
+
+/**
+ * 校验并转换商户凭证输入：字段枚举、必填键、值类型与商户标识一致性。
+ */
+export function buildPaymentCredentials(
+  providerType: PaymentMerchantProviderType,
+  merchantIdentity: string,
+  entries: PaymentCredentialEntryInput[]
+): PaymentCredentialValidationResult {
+  const spec = getPaymentCredentialFieldSpec(providerType)
+  const allowedKeys = [...spec.required, ...spec.optional]
+  const credentials: Record<string, PaymentCredentialValue> = {}
+
+  for (const entry of entries) {
+    const key = entry.key.trim()
+    if (!key) {
+      return { credentials: null, error: '请填写凭证字段名' }
+    }
+    if (!allowedKeys.includes(key)) {
+      return { credentials: null, error: `凭证字段 ${key} 不属于当前服务商支持的字段` }
+    }
+    if (!entry.value) {
+      return { credentials: null, error: `请填写凭证字段 ${key} 的值` }
+    }
+    if (Object.prototype.hasOwnProperty.call(credentials, key)) {
+      return { credentials: null, error: `凭证字段 ${key} 重复` }
+    }
+
+    if (PAYMENT_CREDENTIAL_BOOLEAN_KEYS.includes(key)) {
+      if (entry.value !== 'true' && entry.value !== 'false') {
+        return { credentials: null, error: `凭证字段 ${key} 必须为布尔值 true 或 false` }
+      }
+      credentials[key] = entry.value === 'true'
+      continue
+    }
+
+    if (PAYMENT_CREDENTIAL_INTEGER_KEYS.includes(key)) {
+      const numberValue = Number(entry.value)
+      if (!Number.isInteger(numberValue) || numberValue <= 0) {
+        return { credentials: null, error: `凭证字段 ${key} 必须为正整数` }
+      }
+      credentials[key] = numberValue
+      continue
+    }
+
+    credentials[key] = entry.value
+  }
+
+  for (const key of spec.required) {
+    if (!Object.prototype.hasOwnProperty.call(credentials, key)) {
+      return { credentials: null, error: `缺少必填凭证字段 ${key}` }
+    }
+  }
+
+  const identityKey = PAYMENT_MERCHANT_IDENTITY_KEYS[providerType]
+  if (identityKey && credentials[identityKey] !== merchantIdentity.trim()) {
+    return { credentials: null, error: `商户标识必须与凭证字段 ${identityKey} 的值一致` }
+  }
+
+  return { credentials, error: '' }
+}
--- a/src/types/api/wecom.ts
+++ b/src/types/api/wecom.ts
@@ -1,6 +1,9 @@
 import type { BaseResponse, PaginationData, PaginationParams } from './common'

-export type WecomBusinessType = 'refund_approval' | 'offline_recharge_approval'
+export type WecomBusinessType =
+  | 'refund_approval'
+  | 'offline_recharge_approval'
+  | 'employee_collection_approval'

 export interface WecomApplication {
  id: number
--- a/src/views/finance/agent-recharge/detail.vue
+++ b/src/views/finance/agent-recharge/detail.vue
@@ -193,12 +193,28 @@
            prop: 'payment_channel',
            formatter: (value) => value || '-'
          },
-          {
-            label: '第三方支付流水号',
-            prop: 'payment_transaction_id',
-            formatter: (value) => value || '-',
-            fullWidth: true
-          },
+          ...(isOfflineRecharge
+            ? [
+                {
+                  label: '交易流水号',
+                  prop: 'external_transaction_no',
+                  formatter: (value: string | null | undefined) => value || '-',
+                  fullWidth: true
+                },
+                {
+                  label: '收款方式',
+                  formatter: (_: unknown, data: AgentRecharge) =>
+                    data.offline_payment_method_name || data.offline_payment_method_code || '-'
+                }
+              ]
+            : [
+                {
+                  label: '第三方支付流水号',
+                  prop: 'payment_transaction_id',
+                  formatter: (value: string | null | undefined) => value || '-',
+                  fullWidth: true
+                }
+              ]),
          {
            label: '支付单号',
            prop: 'payment_no',
@@ -226,6 +242,26 @@
                          () => '查看支付凭证'
                        )
                      : h('span', '-')
+                },
+                {
+                  label: '其他凭证',
+                  fullWidth: true,
+                  render: (data: AgentRecharge) =>
+                    hasVoucherKeys(data.other_voucher_key ?? undefined)
+                      ? h(
+                          ElButton,
+                          {
+                            type: 'primary',
+                            link: true,
+                            onClick: () => {
+                              paymentVoucherFileKeys.value = toVoucherKeyList(
+                                data.other_voucher_key ?? undefined
+                              )
+                            }
+                          },
+                          () => '查看其他凭证'
+                        )
+                      : h('span', '-')
                }
              ]
            : []),
--- a/src/views/finance/agent-recharge/index.vue
+++ b/src/views/finance/agent-recharge/index.vue
@@ -121,10 +121,66 @@
                ref="uploadRef"
                v-model="createForm.payment_voucher_key"
                voucher-name="支付凭证"
+                accept="image/*"
+                content-type="image/jpeg"
                @uploading-change="voucherUploading = $event"
                @change="createFormRef?.validateField('payment_voucher_key')"
              />
            </ElFormItem>
+            <ElFormItem
+              v-if="createMode === 'offline'"
+              label="收款方式"
+              prop="offline_payment_method_id"
+            >
+              <ElSelect
+                v-model="createForm.offline_payment_method_id"
+                placeholder="请选择收款方式"
+                style="width: 100%"
+                filterable
+                :loading="paymentMethodOptionsLoading"
+              >
+                <ElOption
+                  v-for="item in offlinePaymentMethodOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </ElSelect>
+            </ElFormItem>
+            <ElFormItem
+              v-if="createForm.payment_method === 'offline'"
+              label="交易流水号"
+              prop="external_transaction_no"
+            >
+              <div class="external-transaction-row">
+                <ElInput
+                  v-model="createForm.external_transaction_no"
+                  placeholder="请输入交易流水号，或点击右侧识别凭证预填"
+                  :disabled="ocrLoading"
+                />
+                <ElButton
+                  :loading="ocrLoading"
+                  :disabled="!offlineVoucherKeys.length"
+                  @click="handleRecognizeVoucher"
+                >
+                  识别凭证
+                </ElButton>
+              </div>
+              <div class="external-transaction-tip">
+                识别结果仅供参考，请对照凭证核对后再提交。
+              </div>
+            </ElFormItem>
+            <ElFormItem v-if="createMode === 'offline'" label="其他凭证">
+              <VoucherUpload
+                ref="otherUploadRef"
+                v-model="createForm.other_voucher_key"
+                voucher-name="其他凭证"
+                :max-count="5"
+                accept="image/*"
+                content-type="image/jpeg"
+                @uploading-change="otherVoucherUploading = $event"
+              />
+            </ElFormItem>
            <ElFormItem v-if="createMode === 'offline'" label="运营备注" prop="remark">
              <ElInput
                v-model="createForm.remark"
@@ -297,7 +353,12 @@
  import { h } from 'vue'
  import { useRouter } from 'vue-router'
  import QrcodeVue from 'qrcode.vue'
-  import { AgentRechargeService, CommissionService, ShopService } from '@/api/modules'
+  import {
+    AgentRechargeService,
+    CommissionService,
+    EmployeeCollectionService,
+    ShopService
+  } from '@/api/modules'
  import {
    ElMessage,
    ElMessageBox,
@@ -319,6 +380,7 @@
    AgentRechargePaymentStatusResponse,
    CreateAgentRechargeRequest,
    ConfirmOfflinePaymentRequest,
+    EmployeeCollectionPaymentMethod,
    RejectAgentRechargeRequest
  } from '@/types/api'
  import type { SearchFormItem } from '@/types'
@@ -343,6 +405,7 @@
  import ExportTaskCreateDialog from '@/components/business/ExportTaskCreateDialog.vue'
  import { buildAgentRechargeActions } from './agentRechargeActions'
  import { formatRejectionReason } from './agentRechargeDisplay'
+  import { normalizeCollectionList } from '@/views/finance/employee-collection/employeeCollectionDisplay'
  import {
    amountYuanToFen,
    createOnlineRechargeRequestId,
@@ -406,6 +469,10 @@
    max_amount: ONLINE_MAX_RECHARGE_AMOUNT_FEN
  })
  const paymentVoucherFileKeys = ref<string[]>([])
+  const offlinePaymentMethodOptions = ref<EmployeeCollectionPaymentMethod[]>([])
+  const paymentMethodOptionsLoading = ref(false)
+  const otherVoucherUploading = ref(false)
+  const ocrLoading = ref(false)

  // 搜索表单初始值
  const initialSearchState: AgentRechargeQueryParams = {
@@ -542,6 +609,8 @@
    { label: '业务处理状态', prop: 'processing_status_name' },
    { label: '支付方式', prop: 'payment_method' },
    { label: '支付通道', prop: 'payment_channel' },
+    { label: '交易流水号', prop: 'external_transaction_no' },
+    { label: '收款方式', prop: 'offline_payment_method_name' },
    { label: '运营备注', prop: 'remark' },
    { label: '驳回原因', prop: 'rejection_reason' },
    { label: '创建时间', prop: 'created_at' },
@@ -554,6 +623,7 @@
  const confirmPayFormRef = ref<FormInstance>()
  const rejectFormRef = ref<FormInstance>()
  const uploadRef = ref<InstanceType<typeof VoucherUpload>>()
+  const otherUploadRef = ref<InstanceType<typeof VoucherUpload>>()
  const OFFLINE_MIN_RECHARGE_AMOUNT = 0.01
  const OFFLINE_MAX_RECHARGE_AMOUNT = 1_000_000

@@ -579,6 +649,8 @@
    () =>
      createLoading.value ||
      voucherUploading.value ||
+      otherVoucherUploading.value ||
+      ocrLoading.value ||
      paymentMethodsLoading.value ||
      (createMode.value === 'online' && onlinePaymentMethods.value.length === 0)
  )
@@ -631,6 +703,12 @@
    }
    if (createMode.value === 'offline') {
      rules.payment_voucher_key = [{ required: true, message: '请上传支付凭证', trigger: 'change' }]
+      rules.offline_payment_method_id = [
+        { required: true, message: '请选择收款方式', trigger: 'change' }
+      ]
+      rules.external_transaction_no = [
+        { required: true, message: '请输入交易流水号', trigger: 'blur' }
+      ]
    }
    if (createMode.value === 'online') delete rules.shop_id
    return rules
@@ -651,12 +729,18 @@
    payment_method: AgentRechargePaymentMethod | ''
    shop_id: number | null
    payment_voucher_key: string[]
+    offline_payment_method_id: number | null
+    external_transaction_no: string
+    other_voucher_key: string[]
    remark: string
  }>({
    amount: OFFLINE_MIN_RECHARGE_AMOUNT,
    payment_method: '',
    shop_id: null,
    payment_voucher_key: [],
+    offline_payment_method_id: null,
+    external_transaction_no: '',
+    other_voucher_key: [],
    remark: ''
  })

@@ -803,6 +887,21 @@
        width: 120,
        formatter: (row: AgentRecharge) => row.payment_channel || '-'
      },
+      {
+        prop: 'external_transaction_no',
+        label: '交易流水号',
+        minWidth: 180,
+        showOverflowTooltip: true,
+        formatter: (row: AgentRecharge) => row.external_transaction_no || '-'
+      },
+      {
+        prop: 'offline_payment_method_name',
+        label: '收款方式',
+        width: 140,
+        showOverflowTooltip: true,
+        formatter: (row: AgentRecharge) =>
+          row.payment_method === 'offline' ? row.offline_payment_method_name || '-' : '-'
+      },
      {
        prop: 'remark',
        label: '运营备注',
@@ -1000,8 +1099,9 @@
    if (createMode.value === 'online') {
      await loadPaymentMethods()
    } else {
-      // 重新加载店铺列表，确保获取最新数据
+      // 重新加载店铺列表与收款方式字典，确保获取最新数据
      await loadShops()
+      await loadPaymentMethodOptions()
    }

    createDialogVisible.value = true
@@ -1012,10 +1112,16 @@
    createForm.payment_method = ''
    createForm.shop_id = null
    createForm.payment_voucher_key = []
+    createForm.offline_payment_method_id = null
+    createForm.external_transaction_no = ''
+    createForm.other_voucher_key = []
    createForm.remark = ''
    onlineRequestId.value = null
    voucherUploading.value = false
+    otherVoucherUploading.value = false
+    ocrLoading.value = false
    uploadRef.value?.clearFiles(false)
+    otherUploadRef.value?.clearFiles(false)
  }

  // 对话框关闭后的清理
@@ -1024,12 +1130,12 @@
    resetCreateForm()
  }

-  // 加载代理在线充值可用支付方式
+  // 加载代理在线充值可用支付方式（超管调用该接口返回 403，仅通过系统配置查看允许范围）
  const loadPaymentMethods = async () => {
    paymentMethodsLoading.value = true
    onlinePaymentMethods.value = []
    try {
-      const res = await AgentRechargeService.getPaymentMethods()
+      const res = await AgentRechargeService.getSelfRechargePaymentMethods()
      if (res.code === 0) {
        onlinePaymentMethods.value = Array.isArray(res.data?.methods) ? res.data.methods : []
        paymentMethodsBounds.min_amount = ONLINE_MIN_RECHARGE_AMOUNT_FEN
@@ -1037,15 +1143,75 @@
          Number(res.data?.max_amount) || ONLINE_MAX_RECHARGE_AMOUNT_FEN
        createForm.amount = minimumAmountYuan.value
      } else {
-        ElMessage.warning(res.msg || '当前暂无可用在线支付方式')
+        ElMessage.warning(res.msg || '当前暂无可用的在线支付方式')
      }
    } catch (error) {
      console.error('加载在线支付方式失败:', error)
+      ElMessage.warning('当前暂无可用的在线支付方式')
    } finally {
      paymentMethodsLoading.value = false
    }
  }

+  // 加载线下收款方式字典启用项
+  const loadPaymentMethodOptions = async () => {
+    paymentMethodOptionsLoading.value = true
+    offlinePaymentMethodOptions.value = []
+    try {
+      const res = await EmployeeCollectionService.getPaymentMethods({
+        page: 1,
+        page_size: 100,
+        enabled: true
+      })
+      if (res.code === 0) {
+        offlinePaymentMethodOptions.value =
+          normalizeCollectionList<EmployeeCollectionPaymentMethod>(res.data)
+      }
+    } catch (error) {
+      console.error('加载线下收款方式失败:', error)
+    } finally {
+      paymentMethodOptionsLoading.value = false
+    }
+  }
+
+  // 已上传的支付凭证对象键（OCR 识别取第一个）
+  const offlineVoucherKeys = computed(() => toVoucherKeyList(createForm.payment_voucher_key))
+
+  // 识别付款凭证中的交易流水号：只做预填，失败不阻断人工填写
+  const handleRecognizeVoucher = async () => {
+    if (ocrLoading.value) return
+
+    const voucherKeys = offlineVoucherKeys.value
+    if (!voucherKeys.length) {
+      ElMessage.warning('请先上传支付凭证')
+      return
+    }
+
+    ocrLoading.value = true
+    try {
+      const res = await AgentRechargeService.recognizePaymentVoucher({
+        payment_voucher_key: voucherKeys[0]
+      })
+      if (res.code !== 0) {
+        ElMessage.warning(res.msg || '识别失败，请手动填写交易流水号')
+        return
+      }
+      const transactionNo = res.data?.external_transaction_no
+      if (!transactionNo) {
+        ElMessage.warning('未识别到交易流水号，请手动填写')
+        return
+      }
+      createForm.external_transaction_no = transactionNo
+      createFormRef.value?.validateField('external_transaction_no')
+      ElMessage.success('已识别交易流水号，请对照凭证核对')
+    } catch (error) {
+      console.error('识别付款凭证失败:', error)
+      ElMessage.warning('识别失败，请手动填写交易流水号')
+    } finally {
+      ocrLoading.value = false
+    }
+  }
+
  // 创建充值订单
  const handleCreateRecharge = async () => {
    if (createLoading.value) return
@@ -1056,6 +1222,10 @@
      ElMessage.warning('支付凭证上传中，请稍候')
      return
    }
+    if (otherVoucherUploading.value) {
+      ElMessage.warning('其他凭证上传中，请稍候')
+      return
+    }

    createLoading.value = true
    try {
@@ -1071,6 +1241,10 @@
        ElMessage.warning('请选择目标店铺')
        return
      }
+      if (!createForm.offline_payment_method_id) {
+        ElMessage.warning('请选择收款方式')
+        return
+      }

      const voucherKeys = toVoucherKeyList(createForm.payment_voucher_key)
      if (!hasVoucherKeys(voucherKeys)) {
@@ -1078,11 +1252,15 @@
        return
      }

+      const otherVoucherKeys = toVoucherKeyList(createForm.other_voucher_key)
      const data: CreateAgentRechargeRequest = {
        amount: amountYuanToFen(createForm.amount),
        payment_method: 'offline',
        shop_id: createForm.shop_id,
+        offline_payment_method_id: createForm.offline_payment_method_id,
+        external_transaction_no: createForm.external_transaction_no.trim(),
        payment_voucher_key: voucherKeys,
+        other_voucher_key: otherVoucherKeys.length ? otherVoucherKeys : undefined,
        remark: createForm.remark || undefined
      }

@@ -1430,6 +1608,18 @@
    color: var(--el-color-danger);
  }

+  .external-transaction-row {
+    display: flex;
+    gap: 8px;
+    width: 100%;
+  }
+
+  .external-transaction-tip {
+    margin-top: 4px;
+    font-size: 12px;
+    color: var(--el-text-color-secondary);
+  }
+
  .online-recharge-qr-dialog {
    display: flex;
    flex-direction: column;
--- a/src/views/finance/employee-collection/applications/components/ApplicationFormDialog.vue
+++ b/src/views/finance/employee-collection/applications/components/ApplicationFormDialog.vue
@@ -0,0 +1,574 @@
+<template>
+  <ElDialog
+    :model-value="modelValue"
+    :title="dialogTitle"
+    width="760px"
+    destroy-on-close
+    @update:model-value="emit('update:modelValue', $event)"
+    @closed="handleClosed"
+  >
+    <ElForm ref="formRef" :model="form" :rules="rules" label-width="140px">
+      <ElFormItem label="收款方式" prop="payment_method_id">
+        <ElSelect
+          v-model="form.payment_method_id"
+          placeholder="请选择收款方式"
+          style="width: 100%"
+          :loading="paymentMethodsLoading"
+        >
+          <ElOption
+            v-for="item in enabledPaymentMethods"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </ElSelect>
+        <div v-if="!paymentMethodsLoading && !enabledPaymentMethodCount" class="form-tip">
+          暂无可用的收款方式，请联系管理员
+        </div>
+      </ElFormItem>
+
+      <ElFormItem label="核销账单" required>
+        <div class="bill-selector">
+          <div v-if="billsLoading" class="bill-selector__empty">加载中...</div>
+          <ElEmpty
+            v-else-if="!candidateBills.length"
+            description="暂无可核销账单"
+            :image-size="60"
+          />
+          <div v-else class="bill-selector__list">
+            <div v-for="bill in candidateBills" :key="bill.id" class="bill-row">
+              <ElCheckbox
+                :model-value="selectedBillIds.includes(bill.id)"
+                @change="toggleBill(bill)"
+              />
+              <div class="bill-row__main">
+                <div class="bill-row__title">账单 #{{ bill.id }}</div>
+                <div class="bill-row__meta">
+                  单号：{{ bill.source_no || '-' }} · 未核销
+                  {{ formatCollectionCurrency(bill.remaining_amount) }}
+                </div>
+              </div>
+              <ElInputNumber
+                v-if="selectedBillIds.includes(bill.id)"
+                v-model="amountMap[bill.id]"
+                :min="0"
+                :max="fenToYuan(bill.remaining_amount)"
+                :precision="2"
+                :step="1"
+                size="small"
+                style="width: 160px"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="bill-selector__total">
+          已选 {{ selectedBillIds.length }} 张账单，核销合计
+          {{ formatCollectionCurrency(totalAmountFen) }}
+        </div>
+      </ElFormItem>
+
+      <ElFormItem label="付款金额" prop="paid_amount">
+        <ElInputNumber
+          v-model="form.paid_amount"
+          :min="0"
+          :precision="2"
+          :step="1"
+          style="width: 220px"
+        />
+        <span class="amount-tip">本次线下收款金额（元），不得小于核销合计</span>
+      </ElFormItem>
+
+      <ElFormItem label="付款方名称" prop="payer_name">
+        <ElInput
+          v-model="form.payer_name"
+          maxlength="100"
+          show-word-limit
+          placeholder="请输入付款方名称"
+        />
+      </ElFormItem>
+
+      <ElFormItem label="付款时间" prop="paid_at">
+        <ElDatePicker
+          v-model="form.paid_at"
+          type="datetime"
+          placeholder="请选择付款时间"
+          value-format="YYYY-MM-DDTHH:mm:ssZ"
+          style="width: 100%"
+        />
+      </ElFormItem>
+
+      <ElFormItem label="外部交易流水号" prop="external_transaction_no">
+        <ElInput
+          v-model="form.external_transaction_no"
+          maxlength="128"
+          show-word-limit
+          placeholder="请输入经人工核对的外部交易流水号"
+        />
+      </ElFormItem>
+
+      <ElFormItem label="付款凭证" prop="payment_voucher_keys">
+        <VoucherUpload
+          ref="uploadRef"
+          v-model="form.payment_voucher_keys"
+          voucher-name="付款凭证"
+          :max-count="5"
+          @uploading-change="voucherUploading = $event"
+          @change="formRef?.validateField('payment_voucher_keys')"
+        />
+      </ElFormItem>
+
+      <ElFormItem label="备注" prop="remark">
+        <ElInput
+          v-model="form.remark"
+          type="textarea"
+          :rows="2"
+          maxlength="500"
+          show-word-limit
+          placeholder="选填"
+        />
+      </ElFormItem>
+
+      <ElFormItem v-if="isActing" label="代办原因" prop="acting_reason">
+        <ElInput
+          v-model="form.acting_reason"
+          type="textarea"
+          :rows="2"
+          maxlength="500"
+          show-word-limit
+          placeholder="超级管理员代办必须填写原因"
+        />
+      </ElFormItem>
+    </ElForm>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <ElButton @click="emit('update:modelValue', false)">取消</ElButton>
+        <ElButton
+          type="primary"
+          :loading="submitting || voucherUploading"
+          :disabled="voucherUploading || !enabledPaymentMethodCount"
+          @click="handleSubmit"
+        >
+          {{ voucherUploading ? '凭证上传中...' : '提交' }}
+        </ElButton>
+      </div>
+    </template>
+  </ElDialog>
+</template>
+
+<script setup lang="ts">
+  import { computed, reactive, ref, watch } from 'vue'
+  import { ElMessage } from 'element-plus'
+  import type { FormInstance, FormRules } from 'element-plus'
+  import { EmployeeCollectionService } from '@/api/modules'
+  import type {
+    EmployeeCollectionAllocation,
+    EmployeeCollectionAllocationRequest,
+    EmployeeCollectionApplication,
+    EmployeeCollectionApplicationRequest,
+    EmployeeCollectionBill,
+    EmployeeCollectionPaymentMethod
+  } from '@/types/api'
+  import { fenToYuan, yuanToFen } from '@/utils/business/format'
+  import { getErrorMessage, toVoucherKeyList } from '@/utils/business'
+  import { useUserStore } from '@/store/modules/user'
+  import VoucherUpload from '@/components/business/VoucherUpload.vue'
+  import {
+    canCreateApplication,
+    formatCollectionCurrency,
+    normalizeCollectionList
+  } from '../../employeeCollectionDisplay'
+
+  interface Props {
+    modelValue: boolean
+    application?: EmployeeCollectionApplication | null
+    presetBill?: EmployeeCollectionBill | null
+  }
+
+  interface BillOption {
+    id: number
+    source_no?: string | null
+    remaining_amount: number
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    application: null,
+    presetBill: null
+  })
+
+  const emit = defineEmits<{
+    'update:modelValue': [value: boolean]
+    success: []
+  }>()
+
+  const userStore = useUserStore()
+  const formRef = ref<FormInstance>()
+  const uploadRef = ref<InstanceType<typeof VoucherUpload>>()
+
+  const paymentMethodsLoading = ref(false)
+  const billsLoading = ref(false)
+  const submitting = ref(false)
+  const voucherUploading = ref(false)
+  const paymentMethods = ref<EmployeeCollectionPaymentMethod[]>([])
+  const candidateBills = ref<BillOption[]>([])
+  const selectedBillIds = ref<number[]>([])
+  const amountMap = reactive<Record<number, number>>({})
+
+  const form = reactive({
+    payment_method_id: undefined as number | undefined,
+    paid_amount: 0,
+    payer_name: '',
+    paid_at: '',
+    external_transaction_no: '',
+    payment_voucher_keys: [] as string[],
+    remark: '',
+    acting_reason: ''
+  })
+
+  const isActing = computed(() => userStore.isSuperAdmin)
+  const isResubmit = computed(() => !!props.application)
+  const dialogTitle = computed(() => (isResubmit.value ? '修改并重新提交核销申请' : '创建核销申请'))
+  const enabledPaymentMethods = computed(() => paymentMethods.value.filter((item) => item.enabled))
+  const enabledPaymentMethodCount = computed(() => enabledPaymentMethods.value.length)
+
+  const paidAmountFen = computed(() => yuanToFen(form.paid_amount) || 0)
+  const totalAmountFen = computed(() =>
+    selectedBillIds.value.reduce((total, billId) => total + (yuanToFen(amountMap[billId]) || 0), 0)
+  )
+
+  const rules = computed<FormRules>(() => {
+    const base: FormRules = {
+      payment_method_id: [{ required: true, message: '请选择收款方式', trigger: 'change' }],
+      paid_amount: [
+        { required: true, message: '请输入付款金额', trigger: 'blur' },
+        {
+          validator: (_rule, _value, callback) => {
+            if (paidAmountFen.value <= 0) {
+              callback(new Error('付款金额必须大于 0'))
+              return
+            }
+            if (paidAmountFen.value < totalAmountFen.value) {
+              callback(new Error('付款金额不能小于核销合计'))
+              return
+            }
+            callback()
+          },
+          trigger: 'change'
+        }
+      ],
+      payer_name: [{ required: true, message: '请输入付款方名称', trigger: 'blur' }],
+      paid_at: [{ required: true, message: '请选择付款时间', trigger: 'change' }],
+      external_transaction_no: [
+        { required: true, message: '请输入外部交易流水号', trigger: 'blur' }
+      ],
+      payment_voucher_keys: [
+        {
+          required: true,
+          validator: (_rule, value, callback) => {
+            if (Array.isArray(value) && value.length) callback()
+            else callback(new Error('请上传付款凭证（1-5 个）'))
+          },
+          trigger: 'change'
+        }
+      ]
+    }
+    if (isActing.value) {
+      base.acting_reason = [{ required: true, message: '请填写代办原因', trigger: 'blur' }]
+    }
+    return base
+  })
+
+  watch(totalAmountFen, (total) => {
+    if (paidAmountFen.value < total) {
+      form.paid_amount = fenToYuan(total)
+    }
+  })
+
+  const loadPaymentMethods = async () => {
+    paymentMethodsLoading.value = true
+    try {
+      const res = await EmployeeCollectionService.getPaymentMethods({ page: 1, page_size: 100 })
+      if (res.code === 0) {
+        paymentMethods.value = normalizeCollectionList<EmployeeCollectionPaymentMethod>(res.data)
+      }
+    } catch (error) {
+      ElMessage.error(getErrorMessage(error, '获取收款方式失败'))
+    } finally {
+      paymentMethodsLoading.value = false
+    }
+  }
+
+  const toBillOption = (bill: {
+    id: number
+    source_no?: string | null
+    remaining_amount?: number | null
+  }): BillOption => ({
+    id: bill.id,
+    source_no: bill.source_no,
+    remaining_amount: bill.remaining_amount ?? 0
+  })
+
+  const loadCandidateBills = async () => {
+    billsLoading.value = true
+    try {
+      const res = await EmployeeCollectionService.getBills({ page: 1, page_size: 100 })
+      const list: BillOption[] =
+        res.code === 0
+          ? normalizeCollectionList<EmployeeCollectionBill>(res.data)
+              .filter((bill) => canCreateApplication(bill))
+              .map((bill) => toBillOption(bill))
+          : []
+
+      if (props.presetBill && !list.some((bill) => bill.id === props.presetBill?.id)) {
+        list.unshift(toBillOption(props.presetBill))
+      }
+
+      candidateBills.value = list
+    } catch (error) {
+      ElMessage.error(getErrorMessage(error, '获取可核销账单失败'))
+    } finally {
+      billsLoading.value = false
+    }
+  }
+
+  const normalizePaidAtForPicker = (value?: string | null): string => {
+    if (!value) return ''
+    const match = value
+      .trim()
+      .match(/^(\d{4}-\d{2}-\d{2})[T ](\d{2}:\d{2}:\d{2})(?:\.\d+)?\s*(Z|[+-]\d{2}:?\d{2})?$/)
+    if (!match) return value
+    const base = `${match[1]}T${match[2]}`
+    const zone = match[3]
+    if (!zone) return base
+    if (zone === 'Z') return `${base}+00:00`
+    return `${base}${zone.includes(':') ? zone : `${zone.slice(0, 3)}:${zone.slice(3)}`}`
+  }
+
+  const fetchApplicationAllocations = async (
+    applicationId: number
+  ): Promise<EmployeeCollectionAllocation[]> => {
+    const res = await EmployeeCollectionService.getApplicationById(applicationId)
+    if (res.code === 0 && res.data) {
+      return res.data.allocations || []
+    }
+    return []
+  }
+
+  const toggleBill = (bill: BillOption) => {
+    const index = selectedBillIds.value.indexOf(bill.id)
+    if (index >= 0) {
+      selectedBillIds.value.splice(index, 1)
+      delete amountMap[bill.id]
+    } else {
+      selectedBillIds.value.push(bill.id)
+      amountMap[bill.id] = fenToYuan(bill.remaining_amount)
+    }
+  }
+
+  const resetState = () => {
+    form.payment_method_id = undefined
+    form.paid_amount = 0
+    form.payer_name = ''
+    form.paid_at = ''
+    form.external_transaction_no = ''
+    form.payment_voucher_keys = []
+    form.remark = ''
+    form.acting_reason = ''
+    selectedBillIds.value = []
+    Object.keys(amountMap).forEach((key) => delete amountMap[Number(key)])
+    uploadRef.value?.clearFiles()
+  }
+
+  const initialize = async (): Promise<void> => {
+    resetState()
+    await Promise.all([loadPaymentMethods(), loadCandidateBills()])
+
+    if (props.application) {
+      const application = props.application
+      form.payment_method_id = application.payment_method_id ?? undefined
+      form.paid_amount = fenToYuan(application.paid_amount)
+      form.payer_name = application.payer_name || ''
+      form.paid_at = normalizePaidAtForPicker(application.paid_at)
+      form.external_transaction_no = application.external_transaction_no || ''
+      form.payment_voucher_keys = toVoucherKeyList(application.payment_voucher_keys ?? undefined)
+      form.remark = application.remark || ''
+      form.acting_reason = application.acting_reason || ''
+
+      const allocations = await fetchApplicationAllocations(application.id)
+      allocations.forEach((allocation) => {
+        if (!candidateBills.value.some((item) => item.id === allocation.bill_id)) {
+          candidateBills.value.push({
+            id: allocation.bill_id,
+            source_no: allocation.bill_source_no,
+            remaining_amount: Math.max(
+              allocation.amount,
+              (allocation.bill_receivable_amount ?? 0) -
+                (allocation.bill_received_amount ?? 0) -
+                (allocation.bill_reserved_amount ?? 0),
+              0
+            )
+          })
+        }
+        if (!selectedBillIds.value.includes(allocation.bill_id)) {
+          selectedBillIds.value.push(allocation.bill_id)
+        }
+        amountMap[allocation.bill_id] = fenToYuan(allocation.amount)
+      })
+
+      if (paidAmountFen.value < totalAmountFen.value) {
+        form.paid_amount = fenToYuan(totalAmountFen.value)
+      }
+    } else if (props.presetBill) {
+      const bill = candidateBills.value.find((item) => item.id === props.presetBill?.id)
+      selectedBillIds.value = [props.presetBill.id]
+      amountMap[props.presetBill.id] = fenToYuan(
+        bill?.remaining_amount ?? props.presetBill.remaining_amount ?? 0
+      )
+    }
+  }
+
+  watch(
+    () => props.modelValue,
+    (visible) => {
+      if (visible) void initialize()
+    }
+  )
+
+  const handleClosed = () => {
+    resetState()
+    formRef.value?.clearValidate()
+  }
+
+  const buildAllocations = (): EmployeeCollectionAllocationRequest[] | null => {
+    const payload: EmployeeCollectionAllocationRequest[] = []
+    for (const billId of selectedBillIds.value) {
+      const amount = yuanToFen(amountMap[billId]) || 0
+      const option = candidateBills.value.find((bill) => bill.id === billId)
+      if (amount <= 0) {
+        ElMessage.warning('请填写每张账单的核销金额')
+        return null
+      }
+      if (option && amount > option.remaining_amount) {
+        ElMessage.warning('核销金额不能超过账单未核销金额')
+        return null
+      }
+      payload.push({ bill_id: billId, amount })
+    }
+    return payload
+  }
+
+  const handleSubmit = async () => {
+    if (!formRef.value) return
+    await formRef.value.validate()
+
+    if (!selectedBillIds.value.length) {
+      ElMessage.warning('请至少选择一张待核销账单')
+      return
+    }
+    const allocations = buildAllocations()
+    if (!allocations) return
+
+    const payload: EmployeeCollectionApplicationRequest = {
+      payment_method_id: form.payment_method_id as number,
+      paid_amount: paidAmountFen.value,
+      paid_at: form.paid_at,
+      payer_name: form.payer_name.trim(),
+      external_transaction_no: form.external_transaction_no.trim(),
+      payment_voucher_keys: toVoucherKeyList(form.payment_voucher_keys),
+      remark: form.remark.trim() || undefined,
+      allocations,
+      acting_reason: isActing.value ? form.acting_reason.trim() : undefined
+    }
+
+    submitting.value = true
+    try {
+      const res = props.application
+        ? await EmployeeCollectionService.updateApplication(props.application.id, payload)
+        : await EmployeeCollectionService.createApplication(payload)
+      if (res.code !== 0) return
+      ElMessage.success(isResubmit.value ? '重新提交成功' : '核销申请已提交')
+      emit('update:modelValue', false)
+      emit('success')
+    } catch (error) {
+      ElMessage.error(getErrorMessage(error, '提交核销申请失败'))
+    } finally {
+      submitting.value = false
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .form-tip {
+    margin-top: 4px;
+    font-size: 12px;
+    line-height: 18px;
+    color: var(--el-text-color-secondary);
+  }
+
+  .amount-tip {
+    margin-left: 12px;
+    font-size: 12px;
+    color: var(--el-text-color-secondary);
+  }
+
+  .bill-selector {
+    width: 100%;
+
+    &__empty {
+      padding: 16px 0;
+      color: var(--el-text-color-secondary);
+      text-align: center;
+    }
+
+    &__list {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      max-height: 280px;
+      padding-right: 4px;
+      overflow-y: auto;
+    }
+
+    &__total {
+      margin-top: 10px;
+      font-size: 13px;
+      color: var(--el-text-color-regular);
+    }
+  }
+
+  .bill-row {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    padding: 10px 12px;
+    background: var(--el-fill-color-blank);
+    border: 1px solid var(--el-border-color-lighter);
+    border-radius: 8px;
+
+    &__main {
+      flex: 1;
+      min-width: 0;
+    }
+
+    &__title {
+      font-size: 14px;
+      font-weight: 500;
+      color: var(--el-text-color-primary);
+    }
+
+    &__meta {
+      margin-top: 2px;
+      overflow: hidden;
+      font-size: 12px;
+      color: var(--el-text-color-secondary);
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .dialog-footer {
+    display: flex;
+    gap: 12px;
+    justify-content: flex-end;
+  }
+</style>
--- a/src/views/finance/employee-collection/applications/detail.vue
+++ b/src/views/finance/employee-collection/applications/detail.vue
@@ -0,0 +1,308 @@
+<template>
+  <div class="employee-collection-application-detail-page">
+    <ElCard shadow="never">
+      <div class="detail-header">
+        <ElButton @click="handleBack">
+          <template #icon>
+            <ElIcon><ArrowLeft /></ElIcon>
+          </template>
+          返回
+        </ElButton>
+        <h2 class="detail-title">核销申请详情</h2>
+      </div>
+
+      <DetailPage v-if="application" :sections="detailSections" :data="application" />
+
+      <div v-if="loading" class="loading-container">
+        <ElIcon class="is-loading"><Loading /></ElIcon>
+        <span>加载中...</span>
+      </div>
+    </ElCard>
+
+    <ElCard v-if="allocations.length" shadow="never" class="block-card">
+      <template #header>
+        <div class="block-title">分摊账单</div>
+      </template>
+      <ElTable :data="allocations" border>
+        <ElTableColumn label="账单编号" width="130">
+          <template #default="{ row }">
+            <span class="link-text" @click="handleViewBill(row.bill_id)">#{{ row.bill_id }}</span>
+          </template>
+        </ElTableColumn>
+        <ElTableColumn prop="bill_source_no" label="来源单号" min-width="190" show-overflow-tooltip>
+          <template #default="{ row }">{{ row.bill_source_no || '-' }}</template>
+        </ElTableColumn>
+        <ElTableColumn label="本次核销金额" width="140">
+          <template #default="{ row }">{{ formatCollectionCurrency(row.amount) }}</template>
+        </ElTableColumn>
+        <ElTableColumn label="账单状态" width="120">
+          <template #default="{ row }">
+            {{ row.bill_status_name || getBillStatusLabel(row.bill_status) }}
+          </template>
+        </ElTableColumn>
+        <ElTableColumn label="分摊状态" width="130">
+          <template #default="{ row }">{{ row.status_name || '-' }}</template>
+        </ElTableColumn>
+        <ElTableColumn prop="created_at" label="创建时间" width="170">
+          <template #default="{ row }">{{ formatDateTime(row.created_at) }}</template>
+        </ElTableColumn>
+        <ElTableColumn prop="released_at" label="释放时间" width="170">
+          <template #default="{ row }">{{ formatDateTime(row.released_at) }}</template>
+        </ElTableColumn>
+      </ElTable>
+    </ElCard>
+
+    <ElCard shadow="never" class="block-card">
+      <template #header>
+        <div class="block-title">付款凭证</div>
+      </template>
+      <ElButton v-if="voucherKeys.length" @click="voucherVisible = true">查看付款凭证</ElButton>
+      <span v-else class="empty-text">暂无付款凭证</span>
+    </ElCard>
+
+    <ElCard v-if="attempts.length" shadow="never" class="block-card">
+      <template #header>
+        <div class="block-title">提交与审批记录</div>
+      </template>
+      <ElTimeline>
+        <ElTimelineItem
+          v-for="(item, index) in attempts"
+          :key="index"
+          :timestamp="item.created_at ? formatDateTime(item.created_at) : ''"
+          placement="top"
+        >
+          <div class="timeline-title">
+            第 {{ item.attempt_no || index + 1 }} 次提交 · {{ item.approval_status_name || '-' }}
+          </div>
+          <div class="timeline-operator">
+            付款方：{{ item.payer_name || '-' }} · 金额：{{
+              formatCollectionCurrency(item.paid_amount)
+            }}
+          </div>
+          <div class="timeline-operator">
+            流水号：{{ item.external_transaction_no || '-' }} · 收款方式：{{
+              item.payment_method_name || '-'
+            }}
+          </div>
+          <div v-if="item.acting_reason" class="timeline-comment"
+            >代办原因：{{ item.acting_reason }}</div
+          >
+          <div v-if="item.approval_opinion" class="timeline-comment">
+            审批意见：{{ item.approval_opinion }}
+          </div>
+          <div v-if="item.remark" class="timeline-comment">备注：{{ item.remark }}</div>
+        </ElTimelineItem>
+      </ElTimeline>
+    </ElCard>
+
+    <PaymentVoucherDialog :file-keys="voucherKeys" @close="voucherVisible = false" />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed, onMounted, ref } from 'vue'
+  import { useRoute, useRouter } from 'vue-router'
+  import {
+    ElButton,
+    ElCard,
+    ElIcon,
+    ElMessage,
+    ElTable,
+    ElTableColumn,
+    ElTimeline,
+    ElTimelineItem
+  } from 'element-plus'
+  import { ArrowLeft, Loading } from '@element-plus/icons-vue'
+  import DetailPage from '@/components/common/DetailPage.vue'
+  import type { DetailSection } from '@/components/common/DetailPage.vue'
+  import { EmployeeCollectionService } from '@/api/modules'
+  import type {
+    EmployeeCollectionAllocation,
+    EmployeeCollectionApplication,
+    EmployeeCollectionApplicationAttempt,
+    EmployeeCollectionApplicationDetailData
+  } from '@/types/api'
+  import { RoutesAlias } from '@/router/routesAlias'
+  import { getErrorMessage, toVoucherKeyList } from '@/utils/business'
+  import { formatDateTime } from '@/utils/business/format'
+  import PaymentVoucherDialog from '@/components/business/PaymentVoucherDialog.vue'
+  import {
+    formatCollectionCurrency,
+    getApplicationStatusLabel,
+    getBillStatusLabel
+  } from '../employeeCollectionDisplay'
+
+  defineOptions({ name: 'EmployeeCollectionApplicationDetail' })
+
+  const route = useRoute()
+  const router = useRouter()
+
+  const loading = ref(false)
+  const detail = ref<EmployeeCollectionApplicationDetailData | null>(null)
+  const voucherVisible = ref(false)
+
+  const application = computed<EmployeeCollectionApplication | null>(
+    () => detail.value?.application || null
+  )
+  const allocations = computed<EmployeeCollectionAllocation[]>(
+    () => detail.value?.allocations || []
+  )
+  const attempts = computed<EmployeeCollectionApplicationAttempt[]>(
+    () => detail.value?.attempts || []
+  )
+  const voucherKeys = computed(() =>
+    toVoucherKeyList(application.value?.payment_voucher_keys ?? undefined)
+  )
+
+  const detailSections = computed((): DetailSection[] => [
+    {
+      title: '申请信息',
+      fields: [
+        { label: '申请编号', prop: 'id', formatter: (value) => (value ? `#${value}` : '-') },
+        { label: '收款方式', prop: 'payment_method_name', formatter: (value) => value || '-' },
+        {
+          label: '付款金额',
+          formatter: (_, data) => formatCollectionCurrency(data.paid_amount)
+        },
+        { label: '付款方名称', prop: 'payer_name', formatter: (value) => value || '-' },
+        {
+          label: '付款时间',
+          prop: 'paid_at',
+          formatter: (value) => formatDateTime(value)
+        },
+        {
+          label: '外部交易流水号',
+          prop: 'external_transaction_no',
+          formatter: (value) => value || '-'
+        },
+        {
+          label: '状态',
+          prop: 'status',
+          formatter: (value, data) => data.status_name || getApplicationStatusLabel(value)
+        },
+        {
+          label: '审批实例ID',
+          prop: 'latest_approval_instance_id',
+          formatter: (value) => (value ? String(value) : '-')
+        },
+        { label: '提交时间', prop: 'created_at', formatter: (value) => formatDateTime(value) },
+        { label: '更新时间', prop: 'updated_at', formatter: (value) => formatDateTime(value) },
+        { label: '审批终态时间', prop: 'decided_at', formatter: (value) => formatDateTime(value) },
+        {
+          label: '备注',
+          prop: 'remark',
+          formatter: (value) => value || '-',
+          fullWidth: true
+        },
+        {
+          label: '代办原因',
+          prop: 'acting_reason',
+          formatter: (value) => value || '-',
+          fullWidth: true
+        },
+        {
+          label: '异常终态说明',
+          prop: 'terminal_reason',
+          formatter: (value) => value || '-',
+          fullWidth: true
+        }
+      ]
+    }
+  ])
+
+  const loadDetail = async () => {
+    const id = Number(route.params.id)
+    if (!id) return
+    loading.value = true
+    try {
+      const res = await EmployeeCollectionService.getApplicationById(id)
+      if (res.code === 0) {
+        detail.value = res.data
+      }
+    } catch (error) {
+      ElMessage.error(getErrorMessage(error, '获取核销申请详情失败'))
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const handleViewBill = (billId: number) => {
+    if (!billId) return
+    router.push({ path: `${RoutesAlias.EmployeeCollectionBillDetail}/${billId}` })
+  }
+
+  const handleBack = () => {
+    router.push({ path: RoutesAlias.EmployeeCollectionApplications })
+  }
+
+  onMounted(() => void loadDetail())
+</script>
+
+<style scoped lang="scss">
+  .employee-collection-application-detail-page {
+    height: 100%;
+  }
+
+  .detail-header {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    margin-bottom: 16px;
+
+    .detail-title {
+      flex: 1;
+      margin: 0;
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--el-text-color-primary);
+    }
+  }
+
+  .block-card {
+    margin-top: 16px;
+  }
+
+  .block-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--el-text-color-primary);
+  }
+
+  .link-text {
+    color: var(--el-color-primary);
+    text-decoration: underline;
+    cursor: pointer;
+  }
+
+  .empty-text {
+    font-size: 13px;
+    color: var(--el-text-color-secondary);
+  }
+
+  .timeline-title {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--el-text-color-primary);
+  }
+
+  .timeline-operator {
+    margin-top: 2px;
+    font-size: 12px;
+    color: var(--el-text-color-secondary);
+  }
+
+  .timeline-comment {
+    margin-top: 4px;
+    font-size: 13px;
+    color: var(--el-text-color-regular);
+  }
+
+  .loading-container {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    justify-content: center;
+    padding: 32px 0;
+    color: var(--el-text-color-secondary);
+  }
+</style>
--- a/src/views/finance/employee-collection/applications/index.vue
+++ b/src/views/finance/employee-collection/applications/index.vue
@@ -0,0 +1,300 @@
+<template>
+  <ArtTableFullScreen>
+    <div id="table-full-screen" class="employee-collection-applications-page">
+      <ArtSearchBar
+        v-model:filter="searchForm"
+        :items="searchFormItems"
+        @reset="handleReset"
+        @search="handleSearch"
+      />
+
+      <ElCard shadow="never" class="art-table-card">
+        <ArtTableHeader
+          :column-list="columnOptions"
+          v-model:columns="columnChecks"
+          @refresh="getTableData"
+        >
+          <template #left>
+            <ElButton
+              v-permission="AUGUST_PERMISSIONS.employeeCollection.applicationCreate"
+              type="primary"
+              @click="openCreateApplication"
+            >
+              创建核销申请
+            </ElButton>
+          </template>
+        </ArtTableHeader>
+
+        <ArtTable
+          ref="tableRef"
+          row-key="id"
+          :loading="loading"
+          :data="applicationList"
+          :current-page="pagination.page"
+          :page-size="pagination.page_size"
+          :total="pagination.total"
+          :margin-top="10"
+          :actions="getActions"
+          :actions-width="200"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        >
+          <template #default>
+            <ElTableColumn v-for="col in columns" :key="col.prop || col.type" v-bind="col" />
+          </template>
+        </ArtTable>
+      </ElCard>
+    </div>
+
+    <ApplicationFormDialog
+      v-model="applicationDialogVisible"
+      :application="currentApplication"
+      @success="handleApplicationSuccess"
+    />
+  </ArtTableFullScreen>
+</template>
+
+<script setup lang="ts">
+  import { h, onMounted, reactive, ref } from 'vue'
+  import { useRouter } from 'vue-router'
+  import { ElButton, ElMessage, ElTag } from 'element-plus'
+  import { EmployeeCollectionService } from '@/api/modules'
+  import type {
+    EmployeeCollectionApplication,
+    EmployeeCollectionApplicationQueryParams,
+    EmployeeCollectionPaymentMethod
+  } from '@/types/api'
+  import type { SearchFormItem } from '@/types'
+  import { useCheckedColumns } from '@/composables/useCheckedColumns'
+  import { useAuth } from '@/composables/useAuth'
+  import { AUGUST_PERMISSIONS } from '@/config/constants/augustIteration'
+  import { RoutesAlias } from '@/router/routesAlias'
+  import { getErrorMessage } from '@/utils/business'
+  import { formatDateTime } from '@/utils/business/format'
+  import ApplicationFormDialog from './components/ApplicationFormDialog.vue'
+  import {
+    APPLICATION_STATUS_OPTIONS,
+    canResubmitApplication,
+    formatCollectionCurrency,
+    getApplicationStatusLabel,
+    getApplicationStatusTagType,
+    normalizeCollectionList,
+    normalizeCollectionPage
+  } from '../employeeCollectionDisplay'
+
+  defineOptions({ name: 'EmployeeCollectionApplications' })
+
+  const router = useRouter()
+  const { hasAuth } = useAuth()
+
+  const loading = ref(false)
+  const tableRef = ref()
+  const applicationDialogVisible = ref(false)
+  const applicationList = ref<EmployeeCollectionApplication[]>([])
+  const currentApplication = ref<EmployeeCollectionApplication | null>(null)
+  const paymentMethods = ref<EmployeeCollectionPaymentMethod[]>([])
+
+  const initialSearchState = {
+    status: undefined as number | undefined,
+    payment_method_id: undefined as number | undefined,
+    dateRange: [] as string[],
+    created_from: '',
+    created_to: ''
+  }
+  const searchForm = reactive({ ...initialSearchState })
+  const pagination = reactive({ page: 1, page_size: 20, total: 0 })
+
+  const searchFormItems: SearchFormItem[] = [
+    {
+      label: '状态',
+      prop: 'status',
+      type: 'select',
+      placeholder: '请选择状态',
+      options: APPLICATION_STATUS_OPTIONS,
+      config: { clearable: true }
+    },
+    {
+      label: '收款方式',
+      prop: 'payment_method_id',
+      type: 'select',
+      placeholder: '请选择收款方式',
+      options: () => paymentMethods.value.map((item) => ({ label: item.name, value: item.id })),
+      config: { clearable: true, filterable: true }
+    },
+    {
+      label: '创建时间',
+      prop: 'dateRange',
+      type: 'daterange',
+      config: {
+        type: 'daterange',
+        rangeSeparator: '至',
+        startPlaceholder: '开始日期',
+        endPlaceholder: '结束日期',
+        valueFormat: 'YYYY-MM-DD'
+      }
+    }
+  ]
+
+  const columnOptions = [
+    { label: '申请编号', prop: 'id' },
+    { label: '收款方式', prop: 'payment_method_name' },
+    { label: '付款金额', prop: 'paid_amount' },
+    { label: '状态', prop: 'status' },
+    { label: '提交时间', prop: 'created_at' }
+  ]
+
+  const handleViewDetail = (row: EmployeeCollectionApplication) => {
+    router.push({ path: `${RoutesAlias.EmployeeCollectionApplicationDetail}/${row.id}` })
+  }
+
+  const { columnChecks, columns } = useCheckedColumns(() => [
+    {
+      prop: 'id',
+      label: '申请编号',
+      minWidth: 140,
+      formatter: (row: EmployeeCollectionApplication) =>
+        h(
+          'span',
+          {
+            style: 'color: var(--el-color-primary); cursor: pointer; text-decoration: underline;',
+            onClick: () => handleViewDetail(row)
+          },
+          `#${row.id}`
+        )
+    },
+    {
+      prop: 'payment_method_name',
+      label: '收款方式',
+      width: 140,
+      formatter: (row: EmployeeCollectionApplication) => row.payment_method_name || '-'
+    },
+    {
+      prop: 'paid_amount',
+      label: '付款金额',
+      width: 130,
+      formatter: (row: EmployeeCollectionApplication) => formatCollectionCurrency(row.paid_amount)
+    },
+    {
+      prop: 'status',
+      label: '状态',
+      width: 130,
+      formatter: (row: EmployeeCollectionApplication) =>
+        h(
+          ElTag,
+          { type: getApplicationStatusTagType(row.status), effect: 'plain' },
+          () => row.status_name || getApplicationStatusLabel(row.status)
+        )
+    },
+    {
+      prop: 'created_at',
+      label: '提交时间',
+      width: 170,
+      formatter: (row: EmployeeCollectionApplication) => formatDateTime(row.created_at)
+    }
+  ])
+
+  const buildQueryParams = (): EmployeeCollectionApplicationQueryParams => ({
+    status: searchForm.status,
+    payment_method_id: searchForm.payment_method_id,
+    created_from: searchForm.created_from || undefined,
+    created_to: searchForm.created_to || undefined
+  })
+
+  const loadPaymentMethods = async () => {
+    try {
+      const res = await EmployeeCollectionService.getPaymentMethods({ page: 1, page_size: 100 })
+      if (res.code === 0) {
+        paymentMethods.value = normalizeCollectionList<EmployeeCollectionPaymentMethod>(res.data)
+      }
+    } catch (error) {
+      console.error('Load payment methods failed:', error)
+    }
+  }
+
+  const getTableData = async () => {
+    loading.value = true
+    try {
+      const res = await EmployeeCollectionService.getApplications({
+        page: pagination.page,
+        page_size: pagination.page_size,
+        ...buildQueryParams()
+      })
+      if (res.code === 0) {
+        const { list, total } = normalizeCollectionPage<EmployeeCollectionApplication>(res.data)
+        applicationList.value = list
+        pagination.total = total
+      }
+    } catch (error) {
+      ElMessage.error(getErrorMessage(error, '获取核销申请列表失败'))
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const handleSearch = () => {
+    if (Array.isArray(searchForm.dateRange) && searchForm.dateRange.length === 2) {
+      searchForm.created_from = searchForm.dateRange[0]
+      searchForm.created_to = searchForm.dateRange[1]
+    } else {
+      searchForm.created_from = ''
+      searchForm.created_to = ''
+    }
+    pagination.page = 1
+    getTableData()
+  }
+
+  const handleReset = () => {
+    Object.assign(searchForm, { ...initialSearchState })
+    pagination.page = 1
+    getTableData()
+  }
+
+  const handleSizeChange = (size: number) => {
+    pagination.page_size = size
+    getTableData()
+  }
+
+  const handleCurrentChange = (page: number) => {
+    pagination.page = page
+    getTableData()
+  }
+
+  const openCreateApplication = () => {
+    currentApplication.value = null
+    applicationDialogVisible.value = true
+  }
+
+  const handleResubmit = (row: EmployeeCollectionApplication) => {
+    currentApplication.value = row
+    applicationDialogVisible.value = true
+  }
+
+  const handleApplicationSuccess = () => {
+    getTableData()
+  }
+
+  const getActions = (row: EmployeeCollectionApplication) => {
+    const actions: any[] = []
+    if (hasAuth(AUGUST_PERMISSIONS.employeeCollection.applicationDetail)) {
+      actions.push({ label: '详情', handler: () => handleViewDetail(row), type: 'primary' })
+    }
+    if (
+      hasAuth(AUGUST_PERMISSIONS.employeeCollection.applicationUpdate) &&
+      canResubmitApplication(row)
+    ) {
+      actions.push({ label: '修改并重新提交', handler: () => handleResubmit(row), type: 'primary' })
+    }
+    return actions
+  }
+
+  onMounted(() => {
+    void getTableData()
+    void loadPaymentMethods()
+  })
+</script>
+
+<style scoped lang="scss">
+  .employee-collection-applications-page {
+    height: 100%;
+  }
+</style>
--- a/src/views/finance/employee-collection/bills/detail.vue
+++ b/src/views/finance/employee-collection/bills/detail.vue
@@ -0,0 +1,368 @@
+<template>
+  <div class="employee-collection-bill-detail-page">
+    <ElCard shadow="never">
+      <div class="detail-header">
+        <ElButton @click="handleBack">
+          <template #icon>
+            <ElIcon><ArrowLeft /></ElIcon>
+          </template>
+          返回
+        </ElButton>
+        <h2 class="detail-title">员工代收款账单详情</h2>
+      </div>
+
+      <DetailPage v-if="bill" :sections="detailSections" :data="bill" />
+
+      <div v-if="loading" class="loading-container">
+        <ElIcon class="is-loading"><Loading /></ElIcon>
+        <span>加载中...</span>
+      </div>
+    </ElCard>
+
+    <ElCard v-if="allocations.length" shadow="never" class="block-card">
+      <template #header>
+        <div class="block-title">核销分摊</div>
+      </template>
+      <ElTable :data="allocations" border>
+        <ElTableColumn label="核销申请" width="140">
+          <template #default="{ row }">
+            {{ row.application_id ? `#${row.application_id}` : '-' }}
+          </template>
+        </ElTableColumn>
+        <ElTableColumn label="核销金额" width="140">
+          <template #default="{ row }">{{ formatCollectionCurrency(row.amount) }}</template>
+        </ElTableColumn>
+        <ElTableColumn label="分摊状态" width="130">
+          <template #default="{ row }">{{ row.status_name || '-' }}</template>
+        </ElTableColumn>
+        <ElTableColumn label="申请状态" width="130">
+          <template #default="{ row }">
+            {{ row.application_status_name || getApplicationStatusLabel(row.application_status) }}
+          </template>
+        </ElTableColumn>
+        <ElTableColumn label="所属尝试" width="110">
+          <template #default="{ row }">{{ row.attempt_id ? `#${row.attempt_id}` : '-' }}</template>
+        </ElTableColumn>
+        <ElTableColumn prop="created_at" label="创建时间" min-width="170">
+          <template #default="{ row }">{{ formatDateTime(row.created_at) }}</template>
+        </ElTableColumn>
+        <ElTableColumn prop="released_at" label="释放时间" min-width="170">
+          <template #default="{ row }">{{ formatDateTime(row.released_at) }}</template>
+        </ElTableColumn>
+      </ElTable>
+    </ElCard>
+
+    <ElCard v-if="applications.length" shadow="never" class="block-card">
+      <template #header>
+        <div class="block-title">关联核销申请</div>
+      </template>
+      <ElTable :data="applications" border>
+        <ElTableColumn type="expand" width="48">
+          <template #default="{ row }">
+            <div v-if="row.attempts?.length" class="attempt-list">
+              <ElTimeline>
+                <ElTimelineItem
+                  v-for="(item, index) in row.attempts"
+                  :key="index"
+                  :timestamp="item.created_at ? formatDateTime(item.created_at) : ''"
+                  placement="top"
+                >
+                  <div class="timeline-title">
+                    第 {{ item.attempt_no || index + 1 }} 次提交 ·
+                    {{ item.approval_status_name || '-' }}
+                  </div>
+                  <div class="timeline-operator">
+                    付款方：{{ item.payer_name || '-' }} · 金额：{{
+                      formatCollectionCurrency(item.paid_amount)
+                    }}
+                  </div>
+                  <div class="timeline-operator">
+                    流水号：{{ item.external_transaction_no || '-' }} · 收款方式：{{
+                      item.payment_method_name || '-'
+                    }}
+                  </div>
+                  <div v-if="item.approval_opinion" class="timeline-comment">
+                    审批意见：{{ item.approval_opinion }}
+                  </div>
+                </ElTimelineItem>
+              </ElTimeline>
+            </div>
+            <span v-else class="empty-text">暂无审批记录</span>
+          </template>
+        </ElTableColumn>
+        <ElTableColumn label="申请编号" width="140">
+          <template #default="{ row }">
+            <span class="link-text" @click="handleViewApplication(row)">#{{ row.id }}</span>
+          </template>
+        </ElTableColumn>
+        <ElTableColumn label="收款方式" width="140">
+          <template #default="{ row }">{{ row.payment_method_name || '-' }}</template>
+        </ElTableColumn>
+        <ElTableColumn label="付款金额" width="140">
+          <template #default="{ row }">{{ formatCollectionCurrency(row.paid_amount) }}</template>
+        </ElTableColumn>
+        <ElTableColumn label="状态" width="120">
+          <template #default="{ row }">
+            {{ row.status_name || getApplicationStatusLabel(row.status) }}
+          </template>
+        </ElTableColumn>
+        <ElTableColumn prop="created_at" label="提交时间" min-width="170">
+          <template #default="{ row }">{{ formatDateTime(row.created_at) }}</template>
+        </ElTableColumn>
+      </ElTable>
+    </ElCard>
+
+    <ElCard v-if="refunds.length" shadow="never" class="block-card">
+      <template #header>
+        <div class="block-title">退款冲销</div>
+      </template>
+      <ElTable :data="refunds" border>
+        <ElTableColumn label="退款申请ID" width="130">
+          <template #default="{ row }">{{ row.refund_id ? `#${row.refund_id}` : '-' }}</template>
+        </ElTableColumn>
+        <ElTableColumn label="来源订单ID" width="130">
+          <template #default="{ row }">
+            {{ row.source_order_id ? `#${row.source_order_id}` : '-' }}
+          </template>
+        </ElTableColumn>
+        <ElTableColumn label="退款金额" width="130">
+          <template #default="{ row }">{{ formatCollectionCurrency(row.refund_amount) }}</template>
+        </ElTableColumn>
+        <ElTableColumn label="冲减应收" width="130">
+          <template #default="{ row }">{{ formatCollectionCurrency(row.reduced_amount) }}</template>
+        </ElTableColumn>
+        <ElTableColumn label="冲销前应收" width="140">
+          <template #default="{ row }">
+            {{ formatCollectionCurrency(row.bill_receivable_amount) }}
+          </template>
+        </ElTableColumn>
+        <ElTableColumn label="处理结果" width="150">
+          <template #default="{ row }">{{ row.outcome_name || row.outcome || '-' }}</template>
+        </ElTableColumn>
+        <ElTableColumn prop="created_at" label="创建时间" min-width="170">
+          <template #default="{ row }">{{ formatDateTime(row.created_at) }}</template>
+        </ElTableColumn>
+      </ElTable>
+    </ElCard>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed, onMounted, ref } from 'vue'
+  import { useRoute, useRouter } from 'vue-router'
+  import {
+    ElButton,
+    ElCard,
+    ElIcon,
+    ElMessage,
+    ElTable,
+    ElTableColumn,
+    ElTimeline,
+    ElTimelineItem
+  } from 'element-plus'
+  import { ArrowLeft, Loading } from '@element-plus/icons-vue'
+  import DetailPage from '@/components/common/DetailPage.vue'
+  import type { DetailSection } from '@/components/common/DetailPage.vue'
+  import { EmployeeCollectionService } from '@/api/modules'
+  import type {
+    EmployeeCollectionBill,
+    EmployeeCollectionBillAllocation,
+    EmployeeCollectionBillApplication,
+    EmployeeCollectionBillDetailData,
+    EmployeeCollectionBillRefund
+  } from '@/types/api'
+  import { RoutesAlias } from '@/router/routesAlias'
+  import { getErrorMessage } from '@/utils/business'
+  import { formatDateTime } from '@/utils/business/format'
+  import {
+    formatCollectionCurrency,
+    getApplicationStatusLabel,
+    getBillSourceLabel,
+    getBillStatusLabel
+  } from '../employeeCollectionDisplay'
+
+  defineOptions({ name: 'EmployeeCollectionBillDetail' })
+
+  const route = useRoute()
+  const router = useRouter()
+
+  const loading = ref(false)
+  const detail = ref<EmployeeCollectionBillDetailData | null>(null)
+
+  const bill = computed<EmployeeCollectionBill | null>(() => detail.value?.bill || null)
+  const allocations = computed<EmployeeCollectionBillAllocation[]>(
+    () => detail.value?.allocations || []
+  )
+  const applications = computed<EmployeeCollectionBillApplication[]>(
+    () => detail.value?.applications || []
+  )
+  const refunds = computed<EmployeeCollectionBillRefund[]>(() => detail.value?.refunds || [])
+
+  const detailSections = computed((): DetailSection[] => [
+    {
+      title: '账单信息',
+      fields: [
+        { label: '账单编号', prop: 'id', formatter: (value) => (value ? `#${value}` : '-') },
+        {
+          label: '来源',
+          prop: 'source_type_name',
+          formatter: (value, data) => value || getBillSourceLabel(data.source_type)
+        },
+        { label: '关联单号', prop: 'source_no', formatter: (value) => value || '-' },
+        {
+          label: '负责员工',
+          prop: 'debtor_snapshot.account_name',
+          formatter: (value) => value || '-'
+        },
+        {
+          label: '客户',
+          prop: 'customer_snapshot.buyer_nickname',
+          formatter: (value) => value || '-'
+        },
+        {
+          label: '店铺',
+          prop: 'customer_snapshot.shop_id',
+          formatter: (value) => (value ? `店铺 #${value}` : '-')
+        },
+        {
+          label: '资产标识',
+          prop: 'customer_snapshot.asset_identifier',
+          formatter: (value) => value || '-'
+        },
+        {
+          label: '账单状态',
+          prop: 'status_name',
+          formatter: (value, data) => value || getBillStatusLabel(data.status)
+        },
+        {
+          label: '应收金额',
+          formatter: (_, data) => formatCollectionCurrency(data.receivable_amount)
+        },
+        {
+          label: '已核销金额',
+          formatter: (_, data) => formatCollectionCurrency(data.received_amount)
+        },
+        {
+          label: '审批中预占金额',
+          formatter: (_, data) => formatCollectionCurrency(data.reserved_amount)
+        },
+        {
+          label: '未核销金额',
+          formatter: (_, data) => formatCollectionCurrency(data.remaining_amount)
+        },
+        {
+          label: '审批中申请',
+          formatter: (_, data) => (data.approval_pending ? '存在审批中的申请' : '无')
+        },
+        { label: '创建时间', prop: 'created_at', formatter: (value) => formatDateTime(value) },
+        { label: '更新时间', prop: 'updated_at', formatter: (value) => formatDateTime(value) },
+        { label: '关闭时间', prop: 'closed_at', formatter: (value) => formatDateTime(value) },
+        {
+          label: '关闭原因',
+          prop: 'closed_reason',
+          formatter: (value) => value || '-',
+          fullWidth: true
+        }
+      ]
+    }
+  ])
+
+  const loadDetail = async () => {
+    const id = Number(route.params.id)
+    if (!id) return
+    loading.value = true
+    try {
+      const res = await EmployeeCollectionService.getBillById(id)
+      if (res.code === 0) {
+        detail.value = res.data
+      }
+    } catch (error) {
+      ElMessage.error(getErrorMessage(error, '获取账单详情失败'))
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const handleViewApplication = (row: EmployeeCollectionBillApplication) => {
+    router.push({ path: `${RoutesAlias.EmployeeCollectionApplicationDetail}/${row.id}` })
+  }
+
+  const handleBack = () => {
+    router.push({ path: RoutesAlias.EmployeeCollectionBills })
+  }
+
+  onMounted(() => void loadDetail())
+</script>
+
+<style scoped lang="scss">
+  .employee-collection-bill-detail-page {
+    height: 100%;
+  }
+
+  .detail-header {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    margin-bottom: 16px;
+
+    .detail-title {
+      flex: 1;
+      margin: 0;
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--el-text-color-primary);
+    }
+  }
+
+  .block-card {
+    margin-top: 16px;
+  }
+
+  .block-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--el-text-color-primary);
+  }
+
+  .link-text {
+    color: var(--el-color-primary);
+    text-decoration: underline;
+    cursor: pointer;
+  }
+
+  .attempt-list {
+    padding: 4px 12px;
+  }
+
+  .empty-text {
+    font-size: 13px;
+    color: var(--el-text-color-secondary);
+  }
+
+  .timeline-title {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--el-text-color-primary);
+  }
+
+  .timeline-operator {
+    margin-top: 2px;
+    font-size: 12px;
+    color: var(--el-text-color-secondary);
+  }
+
+  .timeline-comment {
+    margin-top: 4px;
+    font-size: 13px;
+    color: var(--el-text-color-regular);
+  }
+
+  .loading-container {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    justify-content: center;
+    padding: 32px 0;
+    color: var(--el-text-color-secondary);
+  }
+</style>
--- a/src/views/finance/employee-collection/bills/index.vue
+++ b/src/views/finance/employee-collection/bills/index.vue
@@ -0,0 +1,539 @@
+<template>
+  <ArtTableFullScreen>
+    <div id="table-full-screen" class="employee-collection-bills-page">
+      <div class="stat-row">
+        <ElCard shadow="never" class="stat-card">
+          <div class="stat-card__label">应收金额</div>
+          <div class="stat-card__value">
+            {{ formatCollectionCurrency(statistics.receivable_total) }}
+          </div>
+        </ElCard>
+        <ElCard shadow="never" class="stat-card">
+          <div class="stat-card__label">已核销金额</div>
+          <div class="stat-card__value stat-card__value--success">
+            {{ formatCollectionCurrency(statistics.received_total) }}
+          </div>
+        </ElCard>
+        <ElCard shadow="never" class="stat-card">
+          <div class="stat-card__label">未核销金额</div>
+          <div class="stat-card__value stat-card__value--warning">
+            {{ formatCollectionCurrency(statistics.unsettled_total) }}
+          </div>
+        </ElCard>
+        <ElCard shadow="never" class="stat-card">
+          <div class="stat-card__label">待处理账单</div>
+          <div class="stat-card__value">{{ statistics.pending_bill_count }}</div>
+        </ElCard>
+      </div>
+
+      <ArtSearchBar
+        v-model:filter="searchForm"
+        :items="searchFormItems"
+        @reset="handleReset"
+        @search="handleSearch"
+      />
+
+      <ElCard shadow="never" class="art-table-card">
+        <ArtTableHeader
+          :column-list="columnOptions"
+          v-model:columns="columnChecks"
+          @refresh="handleRefresh"
+        >
+          <template #left>
+            <ElButton
+              v-permission="AUGUST_PERMISSIONS.employeeCollection.applicationCreate"
+              type="primary"
+              :disabled="!hasSelectableBill"
+              @click="openCreateApplication()"
+            >
+              创建核销申请
+            </ElButton>
+          </template>
+        </ArtTableHeader>
+
+        <ArtTable
+          ref="tableRef"
+          row-key="id"
+          :loading="loading"
+          :data="billList"
+          :current-page="pagination.page"
+          :page-size="pagination.page_size"
+          :total="pagination.total"
+          :margin-top="10"
+          :actions="getActions"
+          :actions-width="200"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        >
+          <template #default>
+            <ElTableColumn v-for="col in columns" :key="col.prop || col.type" v-bind="col" />
+          </template>
+        </ArtTable>
+      </ElCard>
+    </div>
+
+    <ElDialog v-model="closeDialogVisible" title="关闭账单" width="480px" destroy-on-close>
+      <ElForm ref="closeFormRef" :model="closeForm" :rules="closeRules" label-width="88px">
+        <ElFormItem label="账单编号">
+          <span>{{ currentBill ? `#${currentBill.id}` : '-' }}</span>
+        </ElFormItem>
+        <ElFormItem label="关闭原因" prop="reason">
+          <ElInput
+            v-model="closeForm.reason"
+            type="textarea"
+            :rows="3"
+            maxlength="500"
+            show-word-limit
+            placeholder="请填写关闭原因"
+          />
+        </ElFormItem>
+      </ElForm>
+      <template #footer>
+        <div class="dialog-footer">
+          <ElButton @click="closeDialogVisible = false">取消</ElButton>
+          <ElButton type="primary" :loading="closeSubmitting" @click="handleCloseBill">
+            确定关闭
+          </ElButton>
+        </div>
+      </template>
+    </ElDialog>
+
+    <ApplicationFormDialog
+      v-model="applicationDialogVisible"
+      :preset-bill="presetBill"
+      @success="handleApplicationSuccess"
+    />
+  </ArtTableFullScreen>
+</template>
+
+<script setup lang="ts">
+  import { computed, h, onMounted, reactive, ref } from 'vue'
+  import { useRouter } from 'vue-router'
+  import { ElButton, ElMessage, ElTag } from 'element-plus'
+  import type { FormInstance, FormRules } from 'element-plus'
+  import { EmployeeCollectionService, ShopService } from '@/api/modules'
+  import type {
+    EmployeeCollectionBill,
+    EmployeeCollectionBillQueryParams,
+    EmployeeCollectionBillStatistics
+  } from '@/types/api'
+  import type { SearchFormItem } from '@/types'
+  import { useCheckedColumns } from '@/composables/useCheckedColumns'
+  import { useAuth } from '@/composables/useAuth'
+  import { AUGUST_PERMISSIONS } from '@/config/constants/augustIteration'
+  import { RoutesAlias } from '@/router/routesAlias'
+  import { getErrorMessage } from '@/utils/business'
+  import { formatDateTime } from '@/utils/business/format'
+  import ApplicationFormDialog from '../applications/components/ApplicationFormDialog.vue'
+  import {
+    BILL_SOURCE_OPTIONS,
+    BILL_STATUS_OPTIONS,
+    canCloseBill,
+    canCreateApplication,
+    formatCollectionCurrency,
+    getBillCustomerLabel,
+    getBillDebtorName,
+    getBillSourceLabel,
+    getBillStatusLabel,
+    getBillStatusTagType,
+    normalizeCollectionPage
+  } from '../employeeCollectionDisplay'
+
+  defineOptions({ name: 'EmployeeCollectionBills' })
+
+  const router = useRouter()
+  const { hasAuth } = useAuth()
+
+  const loading = ref(false)
+  const closeSubmitting = ref(false)
+  const tableRef = ref()
+  const closeFormRef = ref<FormInstance>()
+  const closeDialogVisible = ref(false)
+  const applicationDialogVisible = ref(false)
+  const currentBill = ref<EmployeeCollectionBill | null>(null)
+  const presetBill = ref<EmployeeCollectionBill | null>(null)
+  const billList = ref<EmployeeCollectionBill[]>([])
+  const shopOptions = ref<Array<{ id: number; shop_name: string }>>([])
+  const statistics = ref<EmployeeCollectionBillStatistics>({
+    receivable_total: 0,
+    received_total: 0,
+    unsettled_total: 0,
+    pending_bill_count: 0
+  })
+
+  const initialSearchState = {
+    source_type: undefined as string | undefined,
+    source_no: '',
+    status: undefined as number | undefined,
+    customer_id: undefined as number | undefined,
+    dateRange: [] as string[],
+    created_from: '',
+    created_to: ''
+  }
+  const searchForm = reactive({ ...initialSearchState })
+  const pagination = reactive({ page: 1, page_size: 20, total: 0 })
+  const closeForm = reactive({ reason: '' })
+
+  const closeRules: FormRules = {
+    reason: [{ required: true, message: '请填写关闭原因', trigger: 'blur' }]
+  }
+
+  const shopNameMap = computed<Record<number, string>>(() =>
+    shopOptions.value.reduce<Record<number, string>>((map, shop) => {
+      map[shop.id] = shop.shop_name
+      return map
+    }, {})
+  )
+
+  const searchFormItems: SearchFormItem[] = [
+    {
+      label: '来源',
+      prop: 'source_type',
+      type: 'select',
+      placeholder: '请选择来源',
+      options: BILL_SOURCE_OPTIONS,
+      config: { clearable: true }
+    },
+    {
+      label: '来源单号',
+      prop: 'source_no',
+      type: 'input',
+      placeholder: '请输入来源单号',
+      config: { clearable: true }
+    },
+    {
+      label: '核销状态',
+      prop: 'status',
+      type: 'select',
+      placeholder: '请选择核销状态',
+      options: BILL_STATUS_OPTIONS,
+      config: { clearable: true }
+    },
+    {
+      label: '店铺',
+      prop: 'customer_id',
+      type: 'select',
+      placeholder: '请选择店铺',
+      options: () => shopOptions.value.map((shop) => ({ label: shop.shop_name, value: shop.id })),
+      config: {
+        clearable: true,
+        filterable: true,
+        remote: true,
+        remoteMethod: (query: string) => searchShops(query)
+      }
+    },
+    {
+      label: '起止时间',
+      prop: 'dateRange',
+      type: 'daterange',
+      config: {
+        type: 'daterange',
+        rangeSeparator: '至',
+        startPlaceholder: '开始日期',
+        endPlaceholder: '结束日期',
+        valueFormat: 'YYYY-MM-DD'
+      }
+    }
+  ]
+
+  const columnOptions = [
+    { label: '账单编号', prop: 'id' },
+    { label: '来源', prop: 'source_type' },
+    { label: '关联单号', prop: 'source_no' },
+    { label: '负责员工', prop: 'debtor_snapshot' },
+    { label: '客户/店铺', prop: 'customer_snapshot' },
+    { label: '应收金额', prop: 'receivable_amount' },
+    { label: '已核销金额', prop: 'received_amount' },
+    { label: '未核销金额', prop: 'remaining_amount' },
+    { label: '状态', prop: 'status' },
+    { label: '创建时间', prop: 'created_at' }
+  ]
+
+  const hasSelectableBill = computed(() =>
+    billList.value.some((bill) => canCreateApplication(bill))
+  )
+
+  const buildQueryParams = (): EmployeeCollectionBillQueryParams => ({
+    source_type: searchForm.source_type,
+    source_no: searchForm.source_no.trim() || undefined,
+    status: searchForm.status,
+    customer_id: searchForm.customer_id,
+    created_from: searchForm.created_from || undefined,
+    created_to: searchForm.created_to || undefined
+  })
+
+  const searchShops = async (query: string) => {
+    try {
+      const params: any = { page: 1, page_size: 20 }
+      if (query) params.shop_name = query
+      const res = await ShopService.getShops(params)
+      if (res.code === 0) {
+        shopOptions.value = res.data.items || []
+      }
+    } catch (error) {
+      console.error('Search shops failed:', error)
+    }
+  }
+
+  const handleViewDetail = (row: EmployeeCollectionBill) => {
+    router.push({ path: `${RoutesAlias.EmployeeCollectionBillDetail}/${row.id}` })
+  }
+
+  const { columnChecks, columns } = useCheckedColumns(() => [
+    {
+      prop: 'id',
+      label: '账单编号',
+      minWidth: 120,
+      formatter: (row: EmployeeCollectionBill) =>
+        h(
+          'span',
+          {
+            style: 'color: var(--el-color-primary); cursor: pointer; text-decoration: underline;',
+            onClick: () => handleViewDetail(row)
+          },
+          `#${row.id}`
+        )
+    },
+    {
+      prop: 'source_type',
+      label: '来源',
+      width: 160,
+      formatter: (row: EmployeeCollectionBill) =>
+        row.source_type_name || getBillSourceLabel(row.source_type)
+    },
+    { prop: 'source_no', label: '关联单号', width: 210, showOverflowTooltip: true },
+    {
+      prop: 'debtor_snapshot',
+      label: '负责员工',
+      width: 120,
+      formatter: (row: EmployeeCollectionBill) => getBillDebtorName(row)
+    },
+    {
+      prop: 'customer_snapshot',
+      label: '客户/店铺',
+      width: 160,
+      showOverflowTooltip: true,
+      formatter: (row: EmployeeCollectionBill) => getBillCustomerLabel(row, shopNameMap.value)
+    },
+    {
+      prop: 'receivable_amount',
+      label: '应收金额',
+      width: 120,
+      formatter: (row: EmployeeCollectionBill) => formatCollectionCurrency(row.receivable_amount)
+    },
+    {
+      prop: 'received_amount',
+      label: '已核销金额',
+      width: 130,
+      formatter: (row: EmployeeCollectionBill) => formatCollectionCurrency(row.received_amount)
+    },
+    {
+      prop: 'remaining_amount',
+      label: '未核销金额',
+      width: 130,
+      formatter: (row: EmployeeCollectionBill) => formatCollectionCurrency(row.remaining_amount)
+    },
+    {
+      prop: 'status',
+      label: '状态',
+      width: 110,
+      formatter: (row: EmployeeCollectionBill) =>
+        h(
+          ElTag,
+          { type: getBillStatusTagType(row.status), effect: 'plain' },
+          () => row.status_name || getBillStatusLabel(row.status)
+        )
+    },
+    {
+      prop: 'created_at',
+      label: '创建时间',
+      width: 170,
+      formatter: (row: EmployeeCollectionBill) => formatDateTime(row.created_at)
+    }
+  ])
+
+  const getTableData = async () => {
+    loading.value = true
+    try {
+      const res = await EmployeeCollectionService.getBills({
+        page: pagination.page,
+        page_size: pagination.page_size,
+        ...buildQueryParams()
+      })
+      if (res.code === 0) {
+        const { list, total } = normalizeCollectionPage<EmployeeCollectionBill>(res.data)
+        billList.value = list
+        pagination.total = total
+      }
+    } catch (error) {
+      ElMessage.error(getErrorMessage(error, '获取账单列表失败'))
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const getStatistics = async () => {
+    try {
+      const res = await EmployeeCollectionService.getBillStatistics(buildQueryParams())
+      if (res.code === 0 && res.data) {
+        statistics.value = res.data
+      }
+    } catch (error) {
+      ElMessage.error(getErrorMessage(error, '获取账单统计失败'))
+    }
+  }
+
+  const reload = () => {
+    void getTableData()
+    void getStatistics()
+  }
+
+  const handleSearch = () => {
+    if (Array.isArray(searchForm.dateRange) && searchForm.dateRange.length === 2) {
+      searchForm.created_from = searchForm.dateRange[0]
+      searchForm.created_to = searchForm.dateRange[1]
+    } else {
+      searchForm.created_from = ''
+      searchForm.created_to = ''
+    }
+    pagination.page = 1
+    reload()
+  }
+
+  const handleReset = () => {
+    Object.assign(searchForm, { ...initialSearchState })
+    pagination.page = 1
+    reload()
+  }
+
+  const handleRefresh = () => reload()
+
+  const handleSizeChange = (size: number) => {
+    pagination.page_size = size
+    getTableData()
+  }
+
+  const handleCurrentChange = (page: number) => {
+    pagination.page = page
+    getTableData()
+  }
+
+  const openCreateApplication = (row?: EmployeeCollectionBill) => {
+    presetBill.value = row || null
+    applicationDialogVisible.value = true
+  }
+
+  const handleApplicationSuccess = () => {
+    reload()
+  }
+
+  const openCloseDialog = (row: EmployeeCollectionBill) => {
+    if (!canCloseBill(row)) {
+      ElMessage.warning('账单已关闭，无需重复操作')
+      return
+    }
+    if (row.approval_pending) {
+      ElMessage.warning('存在审批中的核销申请，账单暂不可关闭')
+      return
+    }
+    currentBill.value = row
+    closeForm.reason = ''
+    closeDialogVisible.value = true
+  }
+
+  const handleCloseBill = async () => {
+    if (!closeFormRef.value || !currentBill.value) return
+    await closeFormRef.value.validate()
+    closeSubmitting.value = true
+    try {
+      const res = await EmployeeCollectionService.closeBill(currentBill.value.id, {
+        reason: closeForm.reason.trim()
+      })
+      if (res.code !== 0) return
+      ElMessage.success('账单已关闭')
+      closeDialogVisible.value = false
+      reload()
+    } catch (error) {
+      ElMessage.error(getErrorMessage(error, '关闭账单失败'))
+    } finally {
+      closeSubmitting.value = false
+    }
+  }
+
+  const getActions = (row: EmployeeCollectionBill) => {
+    const actions: any[] = []
+    if (
+      hasAuth(AUGUST_PERMISSIONS.employeeCollection.applicationCreate) &&
+      canCreateApplication(row)
+    ) {
+      actions.push({
+        label: '创建核销申请',
+        handler: () => openCreateApplication(row),
+        type: 'primary'
+      })
+    }
+    if (hasAuth(AUGUST_PERMISSIONS.employeeCollection.billDetail)) {
+      actions.push({ label: '详情', handler: () => handleViewDetail(row), type: 'primary' })
+    }
+    if (hasAuth(AUGUST_PERMISSIONS.employeeCollection.billClose) && canCloseBill(row)) {
+      actions.push({ label: '关闭账单', handler: () => openCloseDialog(row), type: 'danger' })
+    }
+    return actions
+  }
+
+  onMounted(() => {
+    reload()
+    void searchShops('')
+  })
+</script>
+
+<style scoped lang="scss">
+  .employee-collection-bills-page {
+    height: 100%;
+  }
+
+  .stat-row {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 16px;
+    margin-bottom: 12px;
+  }
+
+  .stat-card {
+    :deep(.el-card__body) {
+      padding: 16px 20px;
+    }
+
+    &__label {
+      font-size: 13px;
+      color: var(--el-text-color-secondary);
+    }
+
+    &__value {
+      margin-top: 8px;
+      font-size: 22px;
+      font-weight: 600;
+      color: var(--el-text-color-primary);
+
+      &--success {
+        color: var(--el-color-success);
+      }
+
+      &--warning {
+        color: var(--el-color-warning);
+      }
+    }
+  }
+
+  .dialog-footer {
+    display: flex;
+    gap: 12px;
+    justify-content: flex-end;
+  }
+
+  @media (width <= 768px) {
+    .stat-row {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+</style>
--- a/src/views/finance/employee-collection/employeeCollectionDisplay.ts
+++ b/src/views/finance/employee-collection/employeeCollectionDisplay.ts
@@ -0,0 +1,215 @@
+/**
+ * 员工代收款展示辅助函数
+ */
+
+import type {
+  EmployeeCollectionApplication,
+  EmployeeCollectionApplicationStatus,
+  EmployeeCollectionBill,
+  EmployeeCollectionBillStatus
+} from '@/types/api'
+
+type TagType = 'success' | 'warning' | 'danger' | 'info'
+
+/** 账单状态：0 待核销 / 1 部分核销 / 2 已核销 / 3 已关闭 */
+export const BILL_STATUS = {
+  PENDING: 0,
+  PARTIAL: 1,
+  VERIFIED: 2,
+  CLOSED: 3
+} as const
+
+/** 申请状态：0 审批中 / 1 已通过 / 2 已驳回 / 3 已撤销或已关闭 */
+export const APPLICATION_STATUS = {
+  PENDING: 0,
+  APPROVED: 1,
+  REJECTED: 2,
+  REVOKED: 3
+} as const
+
+/**
+ * 兼容后端列表返回结构：
+ * - 直接返回数组
+ * - { list: [...] } / { items: [...] } / { records: [...] }
+ */
+export const normalizeCollectionPage = <T>(data: unknown): { list: T[]; total: number } => {
+  if (Array.isArray(data)) {
+    return { list: data as T[], total: data.length }
+  }
+  if (data && typeof data === 'object') {
+    const record = data as Record<string, unknown>
+    for (const key of ['items', 'list', 'records']) {
+      const value = record[key]
+      if (Array.isArray(value)) {
+        const total = Number(record.total)
+        return { list: value as T[], total: Number.isNaN(total) ? value.length : total }
+      }
+    }
+  }
+  return { list: [], total: 0 }
+}
+
+export const normalizeCollectionList = <T>(data: unknown): T[] =>
+  normalizeCollectionPage<T>(data).list
+
+/**
+ * 金额格式化（分 -> 元）
+ */
+export const formatCollectionCurrency = (amount?: number | null): string => {
+  if (amount === undefined || amount === null || Number.isNaN(amount)) return '-'
+  return `¥${(amount / 100).toFixed(2)}`
+}
+
+/**
+ * 账单状态选项
+ */
+export const BILL_STATUS_OPTIONS = [
+  { label: '待核销', value: BILL_STATUS.PENDING },
+  { label: '部分核销', value: BILL_STATUS.PARTIAL },
+  { label: '已核销', value: BILL_STATUS.VERIFIED },
+  { label: '已关闭', value: BILL_STATUS.CLOSED }
+]
+
+/**
+ * 核销申请状态选项
+ */
+export const APPLICATION_STATUS_OPTIONS = [
+  { label: '审批中', value: APPLICATION_STATUS.PENDING },
+  { label: '已通过', value: APPLICATION_STATUS.APPROVED },
+  { label: '已驳回', value: APPLICATION_STATUS.REJECTED },
+  { label: '已撤销或已关闭', value: APPLICATION_STATUS.REVOKED }
+]
+
+/**
+ * 账单来源选项
+ */
+export const BILL_SOURCE_OPTIONS = [
+  { label: '后台线下套餐订单', value: 'order' },
+  { label: '代理线下充值', value: 'recharge' }
+]
+
+const BILL_STATUS_LABEL_MAP: Record<number, string> = BILL_STATUS_OPTIONS.reduce(
+  (map, item) => ({ ...map, [item.value]: item.label }),
+  {}
+)
+
+const APPLICATION_STATUS_LABEL_MAP: Record<number, string> = APPLICATION_STATUS_OPTIONS.reduce(
+  (map, item) => ({ ...map, [item.value]: item.label }),
+  {}
+)
+
+const BILL_SOURCE_LABEL_MAP: Record<string, string> = BILL_SOURCE_OPTIONS.reduce(
+  (map, item) => ({ ...map, [item.value]: item.label }),
+  {}
+)
+
+/**
+ * 账单状态文案（优先使用后端 status_name）
+ */
+export const getBillStatusLabel = (status?: EmployeeCollectionBillStatus | null): string => {
+  if (status === undefined || status === null) return '-'
+  return BILL_STATUS_LABEL_MAP[status] ?? String(status)
+}
+
+/**
+ * 核销申请状态文案
+ */
+export const getApplicationStatusLabel = (
+  status?: EmployeeCollectionApplicationStatus | null
+): string => {
+  if (status === undefined || status === null) return '-'
+  return APPLICATION_STATUS_LABEL_MAP[status] ?? String(status)
+}
+
+/**
+ * 账单来源文案（优先使用后端 source_type_name）
+ */
+export const getBillSourceLabel = (source?: string | null): string => {
+  if (!source) return '-'
+  return BILL_SOURCE_LABEL_MAP[source] || source
+}
+
+/**
+ * 账单状态标签类型
+ */
+export const getBillStatusTagType = (status?: EmployeeCollectionBillStatus | null): TagType => {
+  switch (status) {
+    case BILL_STATUS.PENDING:
+      return 'warning'
+    case BILL_STATUS.PARTIAL:
+      return 'info'
+    case BILL_STATUS.VERIFIED:
+      return 'success'
+    case BILL_STATUS.CLOSED:
+      return 'info'
+    default:
+      return 'info'
+  }
+}
+
+/**
+ * 核销申请状态标签类型
+ */
+export const getApplicationStatusTagType = (
+  status?: EmployeeCollectionApplicationStatus | null
+): TagType => {
+  switch (status) {
+    case APPLICATION_STATUS.PENDING:
+      return 'warning'
+    case APPLICATION_STATUS.APPROVED:
+      return 'success'
+    case APPLICATION_STATUS.REJECTED:
+      return 'danger'
+    case APPLICATION_STATUS.REVOKED:
+      return 'info'
+    default:
+      return 'info'
+  }
+}
+
+/**
+ * 账单责任人（员工）名称
+ */
+export const getBillDebtorName = (bill?: EmployeeCollectionBill | null): string =>
+  bill?.debtor_snapshot?.account_name || '-'
+
+/**
+ * 账单关联店铺 ID
+ */
+export const getBillShopId = (bill?: EmployeeCollectionBill | null): number | undefined =>
+  bill?.customer_snapshot?.shop_id ?? bill?.customer_snapshot?.seller_shop_id ?? undefined
+
+/**
+ * 账单客户展示：优先买家昵称，其次店铺名称，最后店铺 ID
+ */
+export const getBillCustomerLabel = (
+  bill?: EmployeeCollectionBill | null,
+  shopNameMap?: Record<number, string>
+): string => {
+  const nickname = bill?.customer_snapshot?.buyer_nickname
+  if (nickname) return nickname
+  const shopId = getBillShopId(bill)
+  if (!shopId) return '-'
+  return shopNameMap?.[shopId] || `店铺 #${shopId}`
+}
+
+/**
+ * 账单是否可关闭：仅待核销或部分核销可关闭（存在审批中预占时由调用方拦截或后端拒绝）
+ */
+export const canCloseBill = (bill: EmployeeCollectionBill): boolean =>
+  bill.status === BILL_STATUS.PENDING || bill.status === BILL_STATUS.PARTIAL
+
+/**
+ * 账单是否可发起核销申请
+ */
+export const canCreateApplication = (bill: EmployeeCollectionBill): boolean => {
+  if (bill.status === BILL_STATUS.CLOSED) return false
+  return (bill.remaining_amount ?? 0) > 0
+}
+
+/**
+ * 申请是否可修改并重新提交
+ */
+export const canResubmitApplication = (application: EmployeeCollectionApplication): boolean => {
+  return application.status === APPLICATION_STATUS.REJECTED
+}
--- a/src/views/finance/employee-collection/payment-methods/index.vue
+++ b/src/views/finance/employee-collection/payment-methods/index.vue
@@ -0,0 +1,348 @@
+<template>
+  <ArtTableFullScreen>
+    <div id="table-full-screen" class="employee-collection-payment-methods-page">
+      <ArtSearchBar
+        v-model:filter="searchForm"
+        :items="searchFormItems"
+        @reset="handleReset"
+        @search="handleSearch"
+      />
+
+      <ElCard shadow="never" class="art-table-card">
+        <ArtTableHeader
+          :column-list="columnOptions"
+          v-model:columns="columnChecks"
+          @refresh="getTableData"
+        >
+          <template #left>
+            <ElButton
+              v-permission="AUGUST_PERMISSIONS.employeeCollection.paymentMethodCreate"
+              type="primary"
+              @click="openCreate"
+            >
+              新增收款方式
+            </ElButton>
+          </template>
+        </ArtTableHeader>
+
+        <ArtTable
+          ref="tableRef"
+          row-key="id"
+          :loading="loading"
+          :data="filteredPaymentMethods"
+          :pagination="false"
+          :margin-top="10"
+          :actions="getActions"
+          :actions-width="140"
+        >
+          <template #default>
+            <ElTableColumn v-for="col in columns" :key="col.prop || col.type" v-bind="col" />
+          </template>
+        </ArtTable>
+      </ElCard>
+    </div>
+
+    <ElDialog
+      v-model="dialogVisible"
+      :title="editing ? '编辑收款方式' : '新增收款方式'"
+      width="520px"
+      destroy-on-close
+      @closed="handleDialogClosed"
+    >
+      <ElForm ref="formRef" :model="form" :rules="rules" label-width="56px">
+        <ElFormItem label="名称" prop="name">
+          <ElInput v-model="form.name" maxlength="100" placeholder="请输入收款方式名称" />
+        </ElFormItem>
+        <ElFormItem label="编码" prop="code">
+          <ElInput v-model="form.code" maxlength="64" placeholder="请输入唯一编码，如 cash" />
+          <div v-if="editing" class="form-tip">编码在未被核销申请引用时可修改</div>
+        </ElFormItem>
+        <ElFormItem label="排序" prop="sort">
+          <ElInputNumber v-model="form.sort" :min="0" :max="9999" style="width: 100%" />
+        </ElFormItem>
+        <ElFormItem label="状态">
+          <ElSwitch v-model="form.enabled" active-text="启用" inactive-text="停用" />
+        </ElFormItem>
+        <ElFormItem label="备注" prop="remark">
+          <ElInput
+            v-model="form.remark"
+            type="textarea"
+            :rows="3"
+            maxlength="500"
+            show-word-limit
+            placeholder="选填"
+          />
+        </ElFormItem>
+      </ElForm>
+      <template #footer>
+        <div class="dialog-footer">
+          <ElButton @click="dialogVisible = false">取消</ElButton>
+          <ElButton type="primary" :loading="saving" @click="handleSubmit">确定</ElButton>
+        </div>
+      </template>
+    </ElDialog>
+  </ArtTableFullScreen>
+</template>
+
+<script setup lang="ts">
+  import { computed, h, onMounted, reactive, ref } from 'vue'
+  import { ElMessage, ElMessageBox, ElTag } from 'element-plus'
+  import type { FormInstance, FormRules } from 'element-plus'
+  import { EmployeeCollectionService } from '@/api/modules'
+  import type {
+    EmployeeCollectionPaymentMethod,
+    EmployeeCollectionPaymentMethodQueryParams
+  } from '@/types/api'
+  import type { SearchFormItem } from '@/types'
+  import { useCheckedColumns } from '@/composables/useCheckedColumns'
+  import { useAuth } from '@/composables/useAuth'
+  import { STATUS_SELECT_OPTIONS } from '@/config/constants/status'
+  import { AUGUST_PERMISSIONS } from '@/config/constants/augustIteration'
+  import { getErrorMessage } from '@/utils/business'
+  import { formatDateTime } from '@/utils/business/format'
+  import { normalizeCollectionList } from '../employeeCollectionDisplay'
+
+  defineOptions({ name: 'EmployeeCollectionPaymentMethods' })
+
+  const { hasAuth } = useAuth()
+
+  const loading = ref(false)
+  const saving = ref(false)
+  const tableRef = ref()
+  const formRef = ref<FormInstance>()
+  const dialogVisible = ref(false)
+  const editing = ref(false)
+  const currentId = ref<number | null>(null)
+  const paymentMethods = ref<EmployeeCollectionPaymentMethod[]>([])
+
+  const initialSearchState = {
+    keyword: '',
+    enabled: undefined as number | undefined
+  }
+  const searchForm = reactive({ ...initialSearchState })
+
+  const searchFormItems: SearchFormItem[] = [
+    {
+      label: '关键字',
+      prop: 'keyword',
+      type: 'input',
+      placeholder: '请输入名称或编码',
+      config: { clearable: true }
+    },
+    {
+      label: '状态',
+      prop: 'enabled',
+      type: 'select',
+      placeholder: '请选择状态',
+      options: STATUS_SELECT_OPTIONS,
+      config: { clearable: true }
+    }
+  ]
+
+  const columnOptions = [
+    { label: '名称', prop: 'name' },
+    { label: '编码', prop: 'code' },
+    { label: '排序', prop: 'sort' },
+    { label: '状态', prop: 'enabled' },
+    { label: '备注', prop: 'remark' },
+    { label: '创建时间', prop: 'created_at' }
+  ]
+
+  const { columnChecks, columns } = useCheckedColumns(() => [
+    { prop: 'name', label: '名称', minWidth: 140 },
+    { prop: 'code', label: '编码', minWidth: 140 },
+    { prop: 'sort', label: '排序', width: 90 },
+    {
+      prop: 'enabled',
+      label: '状态',
+      width: 100,
+      formatter: (row: EmployeeCollectionPaymentMethod) =>
+        h(ElTag, { type: row.enabled ? 'success' : 'info', effect: 'plain' }, () =>
+          row.enabled ? '启用' : '停用'
+        )
+    },
+    { prop: 'remark', label: '备注', minWidth: 160, showOverflowTooltip: true },
+    {
+      prop: 'created_at',
+      label: '创建时间',
+      width: 170,
+      formatter: (row: EmployeeCollectionPaymentMethod) => formatDateTime(row.created_at)
+    }
+  ])
+
+  const filteredPaymentMethods = computed(() => {
+    const keyword = searchForm.keyword?.trim().toLowerCase()
+    return paymentMethods.value.filter((item) => {
+      const matchKeyword =
+        !keyword ||
+        (item.name || '').toLowerCase().includes(keyword) ||
+        (item.code || '').toLowerCase().includes(keyword)
+      const matchEnabled =
+        searchForm.enabled === undefined ||
+        searchForm.enabled === null ||
+        (searchForm.enabled === 1 ? item.enabled : !item.enabled)
+      return matchKeyword && matchEnabled
+    })
+  })
+
+  const form = reactive({
+    code: '',
+    name: '',
+    sort: 0,
+    enabled: true,
+    remark: ''
+  })
+
+  const rules: FormRules = {
+    name: [{ required: true, message: '请输入收款方式名称', trigger: 'blur' }],
+    code: [{ required: true, message: '请输入收款方式编码', trigger: 'blur' }]
+  }
+
+  const getTableData = async () => {
+    loading.value = true
+    try {
+      const params: EmployeeCollectionPaymentMethodQueryParams = { page: 1, page_size: 100 }
+      if (searchForm.enabled !== undefined && searchForm.enabled !== null) {
+        params.enabled = searchForm.enabled === 1
+      }
+      if (searchForm.keyword?.trim()) {
+        params.keyword = searchForm.keyword.trim()
+      }
+      const res = await EmployeeCollectionService.getPaymentMethods(params)
+      if (res.code === 0) {
+        paymentMethods.value = normalizeCollectionList<EmployeeCollectionPaymentMethod>(res.data)
+      }
+    } catch (error) {
+      ElMessage.error(getErrorMessage(error, '获取收款方式失败'))
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const handleSearch = () => getTableData()
+
+  const handleReset = () => {
+    Object.assign(searchForm, { ...initialSearchState })
+    void getTableData()
+  }
+
+  const resetForm = () => {
+    form.code = ''
+    form.name = ''
+    form.sort = 0
+    form.enabled = true
+    form.remark = ''
+  }
+
+  const openCreate = () => {
+    editing.value = false
+    currentId.value = null
+    resetForm()
+    dialogVisible.value = true
+  }
+
+  const openEdit = (row: EmployeeCollectionPaymentMethod) => {
+    editing.value = true
+    currentId.value = row.id
+    form.code = row.code
+    form.name = row.name
+    form.sort = row.sort ?? 0
+    form.enabled = !!row.enabled
+    form.remark = row.remark || ''
+    dialogVisible.value = true
+  }
+
+  const handleDialogClosed = () => {
+    resetForm()
+    formRef.value?.clearValidate()
+  }
+
+  const handleSubmit = async () => {
+    if (!formRef.value) return
+    await formRef.value.validate()
+    saving.value = true
+    try {
+      if (editing.value && currentId.value !== null) {
+        const res = await EmployeeCollectionService.updatePaymentMethod(currentId.value, {
+          code: form.code.trim(),
+          name: form.name.trim(),
+          sort: form.sort,
+          enabled: form.enabled,
+          remark: form.remark.trim()
+        })
+        if (res.code !== 0) return
+      } else {
+        const res = await EmployeeCollectionService.createPaymentMethod({
+          code: form.code.trim(),
+          name: form.name.trim(),
+          sort: form.sort,
+          enabled: form.enabled,
+          remark: form.remark.trim()
+        })
+        if (res.code !== 0) return
+      }
+      ElMessage.success(editing.value ? '修改成功' : '新增成功')
+      dialogVisible.value = false
+      await getTableData()
+    } catch (error) {
+      ElMessage.error(getErrorMessage(error, '保存失败'))
+    } finally {
+      saving.value = false
+    }
+  }
+
+  const handleDelete = (row: EmployeeCollectionPaymentMethod) => {
+    ElMessageBox.confirm(`确定删除收款方式「${row.name}」吗？`, '删除确认', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    })
+      .then(async () => {
+        try {
+          const res = await EmployeeCollectionService.deletePaymentMethod(row.id)
+          if (res && res.code !== 0) return
+          ElMessage.success('删除成功')
+          await getTableData()
+        } catch (error) {
+          ElMessage.error(
+            getErrorMessage(error, '删除失败；该收款方式可能已被业务引用，请改为停用')
+          )
+        }
+      })
+      .catch(() => {
+        // 用户取消
+      })
+  }
+
+  const getActions = (row: EmployeeCollectionPaymentMethod) => {
+    const actions: any[] = []
+    if (hasAuth(AUGUST_PERMISSIONS.employeeCollection.paymentMethodEdit)) {
+      actions.push({ label: '编辑', handler: () => openEdit(row), type: 'primary' })
+    }
+    if (hasAuth(AUGUST_PERMISSIONS.employeeCollection.paymentMethodDelete)) {
+      actions.push({ label: '删除', handler: () => handleDelete(row), type: 'danger' })
+    }
+    return actions
+  }
+
+  onMounted(() => void getTableData())
+</script>
+
+<style scoped lang="scss">
+  .employee-collection-payment-methods-page {
+    height: 100%;
+  }
+
+  .form-tip {
+    margin-top: 4px;
+    font-size: 12px;
+    line-height: 18px;
+    color: var(--el-text-color-secondary);
+  }
+
+  .dialog-footer {
+    display: flex;
+    gap: 12px;
+    justify-content: flex-end;
+  }
+</style>
--- a/src/views/order-management/order-list/index.vue
+++ b/src/views/order-management/order-list/index.vue
@@ -197,7 +197,11 @@
                  提示: 使用钱包支付时,订单将直接完成
                </template>
                <template v-else-if="createForm.payment_method === 'offline'">
-                  提示: 线下支付订单需要手动确认支付
+                  {{
+                    generatesCollectionBill
+                      ? '提示: 线下支付订单将生成员工代收款账单，付款凭证可在核销申请中提交'
+                      : '提示: 线下支付订单需要手动确认支付'
+                  }}
                </template>
              </div>
            </ElFormItem>
@@ -213,6 +217,12 @@
                @uploading-change="voucherUploading = $event"
                @change="createFormRef?.validateField('payment_voucher_key')"
              />
+              <div
+                v-if="generatesCollectionBill"
+                style="margin-top: 8px; font-size: 12px; color: var(--el-text-color-secondary)"
+              >
+                付款凭证为选填，也可在员工代收款核销申请中提交
+              </div>
            </ElFormItem>
          </ElForm>
          <template #footer>
@@ -570,8 +580,8 @@
      ]
    }

-    // 线下支付时，支付凭证为必填
-    if (createForm.payment_method === 'offline') {
+    // 线下支付时，支付凭证为必填；生成员工代收款账单时可在核销申请中提交
+    if (createForm.payment_method === 'offline' && !generatesCollectionBill.value) {
      baseRules.payment_voucher_key = [
        {
          required: true,
@@ -641,6 +651,34 @@
    return `¥${(pkg.suggested_retail_price / 100).toFixed(2)}`
  }

+  // 平台账号（超级管理员/平台用户）操作
+  const isPlatformAccount = computed(() => {
+    const userType = Number(userStore.info.user_type)
+    return userType === 1 || userType === 2
+  })
+
+  // 选中套餐的实际收款金额（分）
+  const selectedPackageAmountFen = computed(() => {
+    const selectedPackage = packageOptions.value.find((pkg) => pkg.id === createForm.package_id)
+    if (!selectedPackage) return 0
+    return (
+      selectedPackage.effective_retail_price ??
+      selectedPackage.suggested_retail_price ??
+      selectedPackage.retail_price ??
+      0
+    )
+  })
+
+  // 由平台账号操作、实际收款金额大于 0 且非赠送的线下订单会生成员工代收款账单，
+  // 该场景付款凭证由核销申请环节提供，创建订单时可为空
+  const generatesCollectionBill = computed(
+    () =>
+      createForm.payment_method === 'offline' &&
+      isPlatformAccount.value &&
+      !selectedPackageIsGift.value &&
+      selectedPackageAmountFen.value > 0
+  )
+
  // IoT卡选择变化时，根据series_id加载套餐列表
  const handleIotCardChange = (cardId: number | null) => {
    if (!cardId) {
@@ -1276,9 +1314,10 @@
            return
          }

-          // 线下支付时，支付凭证为必填
+          // 线下支付时，支付凭证为必填；生成员工代收款账单时可在核销申请中提交
          if (
            createForm.payment_method === 'offline' &&
+            !generatesCollectionBill.value &&
            !hasVoucherKeys(createForm.payment_voucher_key)
          ) {
            ElMessage.error('线下支付必须上传支付凭证')
--- a/src/views/settings/payment-merchant-pools/components/MerchantManagement.vue
+++ b/src/views/settings/payment-merchant-pools/components/MerchantManagement.vue
@@ -31,7 +31,7 @@
        :total="pagination.total"
        :marginTop="10"
        :actions="getActions"
-        :actionsWidth="180"
+        :actionsWidth="160"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
@@ -48,13 +48,6 @@
      destroy-on-close
      @closed="clearSensitiveForm"
    >
-      <ElAlert
-        title="支付凭证仅用于本次写入，页面不会回显、缓存或记录凭证内容。"
-        type="warning"
-        :closable="false"
-        show-icon
-      />
-
      <ElForm ref="formRef" :model="form" :rules="formRules" label-width="120px">
        <ElFormItem label="商户名称" prop="name">
          <ElInput v-model="form.name" maxlength="100" placeholder="请输入商户名称" />
@@ -117,12 +110,12 @@
        </ElFormItem>
        <template v-if="showCredentialEditor">
          <ElDivider content-position="left">写入支付凭证</ElDivider>
-          <ElAlert
-            title="凭证值以密码方式输入，提交后立即清空。"
-            type="info"
-            :closable="false"
-            show-icon
-          />
+          <div class="credential-tip">
+            必填字段：{{ credentialFieldSpec.required.join('、') || '-' }}
+            <template v-if="credentialFieldSpec.optional.length">
+              ；可选字段：{{ credentialFieldSpec.optional.join('、') }}
+            </template>
+          </div>
          <div class="credential-list">
            <div
              v-for="(entry, index) in form.credentials"
@@ -170,37 +163,12 @@
        </ElButton>
      </template>
    </ElDrawer>
-
-    <ElDrawer v-model="detailDrawerVisible" title="支付商户详情" size="560px">
-      <ElDescriptions v-if="detail" :column="1" border>
-        <ElDescriptionsItem label="商户名称">{{ detail.name }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="支付方式">{{
-          getPaymentMethodLabel(detail.payment_method)
-        }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="服务商类型">{{
-          getPaymentProviderLabel(detail.provider_type)
-        }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="商户标识">{{ detail.merchant_identity }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="启停状态">{{
-          detail.enabled ? '启用' : '停用'
-        }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="支付凭证">{{
-          Number(detail.credential_version) > 0 ? '已配置' : '未配置'
-        }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="凭证版本">{{
-          detail.credential_version || '-'
-        }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="备注">{{ detail.remark || '-' }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="更新时间">{{
-          formatDateTime(detail.updated_at)
-        }}</ElDescriptionsItem>
-      </ElDescriptions>
-    </ElDrawer>
  </div>
 </template>

 <script setup lang="ts">
  import { computed, h, onMounted, onUnmounted, reactive, ref } from 'vue'
+  import { useRouter } from 'vue-router'
  import { Delete, Plus } from '@element-plus/icons-vue'
  import { ElButton, ElMessage, ElMessageBox, ElTag } from 'element-plus'
  import type { FormInstance, FormRules } from 'element-plus'
@@ -211,8 +179,10 @@
  import {
    PAYMENT_METHOD_OPTIONS,
    PAYMENT_PROVIDER_OPTIONS,
+    buildPaymentCredentials,
    getPaymentMethodLabel,
    getPaymentProviderLabel,
+    getPaymentCredentialFieldSpec,
    type PaymentCredentialEntry,
    type PaymentCredentials,
    type PaymentMerchant,
@@ -221,6 +191,7 @@
    type PaymentMerchantProviderType,
    type PaymentMerchantQueryParams
  } from '@/types/api/paymentMerchantPools'
+  import { RoutesAlias } from '@/router/routesAlias'
  import { formatDateTime } from '@/utils/business/format'

  defineOptions({ name: 'PaymentMerchantManagement' })
@@ -228,8 +199,20 @@
  type FilterVo = string | number | undefined | null | unknown[]

  const { isPlatformAccount } = usePermission()
+  const router = useRouter()
  const canManage = computed(() => isPlatformAccount.value)

+  const handleNameClick = (row: PaymentMerchant) => {
+    if (!canManage.value) {
+      ElMessage.warning('您没有查看支付商户详情的权限')
+      return
+    }
+
+    router.push({
+      path: `${RoutesAlias.PaymentMerchantPoolsDetail}/${row.id}`
+    })
+  }
+
  // 列表查询
  const searchForm = reactive<Record<string, FilterVo>>({
    page: 1,
@@ -273,7 +256,24 @@
  ]

  const columnOptions = [
-    { label: '商户名称', prop: 'name', minWidth: 180 },
+    {
+      label: '商户名称',
+      prop: 'name',
+      minWidth: 180,
+      showOverflowTooltip: true,
+      formatter: (row: PaymentMerchant) =>
+        h(
+          'span',
+          {
+            style: 'color: var(--el-color-primary); cursor: pointer; text-decoration: underline;',
+            onClick: (event: MouseEvent) => {
+              event.stopPropagation()
+              handleNameClick(row)
+            }
+          },
+          row.name
+        )
+    },
    {
      label: '支付方式',
      prop: 'payment_method',
@@ -388,6 +388,7 @@
  const formRef = ref<FormInstance>()
  const showCredentialEditor = ref(false)
  const credentialError = ref('')
+  const credentialTemplateKeys = ref<string[]>([])

  const initialFormState = () => ({
    id: 0,
@@ -409,6 +410,9 @@

  const credentialConfigured = computed(() => Number(form.credential_version) > 0)

+  // 当前服务商组合下的凭证必填/可选字段枚举
+  const credentialFieldSpec = computed(() => getPaymentCredentialFieldSpec(form.provider_type))
+
  const formRules = reactive<FormRules>({
    name: [
      { required: true, message: '请输入商户名称', trigger: 'blur' },
@@ -429,6 +433,7 @@
    form.credentials = []
    showCredentialEditor.value = false
    credentialError.value = ''
+    credentialTemplateKeys.value = []
  }

  const clearSensitiveForm = () => {
@@ -439,25 +444,13 @@
  }

  const buildCredentialPayload = (): PaymentCredentials | null => {
-    const credentials: Record<string, string> = {}
-    for (const entry of form.credentials) {
-      const key = entry.key.trim()
-      if (!key) {
-        credentialError.value = '请填写凭证字段名'
-        return null
-      }
-      if (!entry.value) {
-        credentialError.value = `请填写凭证字段 ${key} 的值`
-        return null
-      }
-      if (Object.prototype.hasOwnProperty.call(credentials, key)) {
-        credentialError.value = `凭证字段 ${key} 重复`
-        return null
-      }
-      credentials[key] = entry.value
-    }
-    if (form.credentials.length === 0) {
-      credentialError.value = '请至少添加一个凭证字段'
+    const { credentials, error } = buildPaymentCredentials(
+      form.provider_type,
+      form.merchant_identity,
+      form.credentials
+    )
+    if (!credentials) {
+      credentialError.value = error
      return null
    }
    credentialError.value = ''
@@ -467,6 +460,7 @@
  const showCreateDrawer = () => {
    if (!canManage.value) return
    Object.assign(form, initialFormState())
+    credentialTemplateKeys.value = []
    formDrawerVisible.value = true
    formMode.value = 'create'
    showCredentialEditor.value = true
@@ -476,8 +470,16 @@
  const startCredentialReplacement = () => {
    if (!canManage.value) return
    form.credentials = []
+    if (credentialTemplateKeys.value.length > 0) {
+      form.credentials = credentialTemplateKeys.value.map((key) => ({
+        localId: generateLocalId(),
+        key,
+        value: ''
+      }))
+    } else {
+      addCredential()
+    }
    showCredentialEditor.value = true
-    addCredential()
  }

  const addCredential = () => {
@@ -531,6 +533,7 @@
          ElMessage.success('支付凭证更新成功')
        }
        formDrawerVisible.value = false
+        clearSensitiveForm()
        await loadMerchants()
      } catch (error) {
        console.error('提交支付商户失败:', error)
@@ -549,6 +552,7 @@
      })
      ElMessage.success('支付商户已更新')
      formDrawerVisible.value = false
+      clearSensitiveForm()
      await loadMerchants()
    } catch (error) {
      console.error('更新支付商户失败:', error)
@@ -557,23 +561,9 @@
    }
  }

-  // 详情 / 启停 / 删除
-  const detailDrawerVisible = ref(false)
-  const detail = ref<PaymentMerchant | null>(null)
+  // 启停 / 删除
  const tableRef = ref()

-  const showDetail = async (id: number) => {
-    try {
-      const res = await PaymentMerchantPoolsService.getPaymentMerchantById(id)
-      if (res.code === 0) {
-        detail.value = res.data
-        detailDrawerVisible.value = true
-      }
-    } catch (error) {
-      console.error('加载支付商户详情失败:', error)
-    }
-  }
-
  const openEditDrawer = async (id: number) => {
    if (!canManage.value) return
    try {
@@ -648,11 +638,6 @@
  }

  const getActions = (row: PaymentMerchant) => [
-    {
-      label: '详情',
-      type: 'primary' as const,
-      handler: () => showDetail(row.id)
-    },
    {
      label: '编辑',
      type: 'primary' as const,
@@ -682,7 +667,6 @@
  onUnmounted(() => {
    resetSensitiveForm()
    merchants.value = []
-    detail.value = null
  })
 </script>

@@ -708,6 +692,14 @@
      color: var(--el-text-color-secondary);
    }

+    .credential-tip {
+      margin-bottom: 8px;
+      font-size: 12px;
+      line-height: 20px;
+      color: var(--el-text-color-secondary);
+      word-break: break-all;
+    }
+
    .field-error {
      margin-top: 8px;
      font-size: 12px;
--- a/src/views/settings/payment-merchant-pools/components/PoolManagement.vue
+++ b/src/views/settings/payment-merchant-pools/components/PoolManagement.vue
@@ -202,48 +202,12 @@
        </ElButton>
      </template>
    </ElDrawer>
-
-    <ElDrawer v-model="detailDrawerVisible" title="商户池详情" size="640px">
-      <ElDescriptions v-if="detail" :column="1" border>
-        <ElDescriptionsItem label="商户池名称">{{ detail.name }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="支付方式">{{
-          getPaymentMethodLabel(detail.payment_method)
-        }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="成员数量">{{ detail.member_ids.length }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="轮询策略">{{
-          getPaymentPoolStrategyLabel(detail.strategy)
-        }}</ElDescriptionsItem>
-        <ElDescriptionsItem
-          v-if="detail.strategy === 'amount' || detail.strategy === 'count'"
-          label="统计周期"
-        >
-          {{ getPaymentStatisticCycleLabel(detail.statistic_cycle) }}
-        </ElDescriptionsItem>
-        <ElDescriptionsItem v-if="detail.strategy === 'amount'" label="金额阈值">
-          {{ (Number(detail.threshold_amount) / 100).toFixed(2) }} 元
-        </ElDescriptionsItem>
-        <ElDescriptionsItem v-if="detail.strategy === 'count'" label="笔数阈值">
-          {{ detail.threshold_count }}
-        </ElDescriptionsItem>
-        <ElDescriptionsItem v-if="detail.strategy === 'time'" label="时间周期">
-          {{ detail.time_period_value }}
-          {{ getPaymentTimePeriodUnitLabel(detail.time_period_unit) }}
-        </ElDescriptionsItem>
-        <ElDescriptionsItem label="启停状态">
-          {{ detail.enabled ? '启用' : '停用' }}
-        </ElDescriptionsItem>
-        <ElDescriptionsItem label="路由世代">v{{ detail.routing_epoch }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="备注">{{ detail.remark || '-' }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="更新时间">{{
-          formatDateTime(detail.updated_at)
-        }}</ElDescriptionsItem>
-      </ElDescriptions>
-    </ElDrawer>
  </div>
 </template>

 <script setup lang="ts">
-  import { computed, h, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
+  import { computed, h, onMounted, onUnmounted, reactive, ref } from 'vue'
+  import { useRouter } from 'vue-router'
  import { Delete, Plus, Rank } from '@element-plus/icons-vue'
  import { VueDraggable } from 'vue-draggable-plus'
  import { ElButton, ElMessage, ElMessageBox, ElTag } from 'element-plus'
@@ -269,14 +233,25 @@
    type PaymentPoolStrategy
  } from '@/types/api/paymentMerchantPools'
  import { formatDateTime } from '@/utils/business/format'
+  import { RoutesAlias } from '@/router/routesAlias'

  defineOptions({ name: 'PaymentMerchantPoolManagement' })

  type FilterVo = string | number | undefined | null | unknown[]

  const { isPlatformAccount } = usePermission()
+  const router = useRouter()
  const canManage = computed(() => isPlatformAccount.value)

+  const handleNameClick = (row: PaymentMerchantPool) => {
+    if (!canManage.value) {
+      ElMessage.warning('您没有查看商户池详情的权限')
+      return
+    }
+
+    router.push({ path: `${RoutesAlias.PaymentMerchantPoolDetail}/${row.id}` })
+  }
+
  const searchForm = reactive<Record<string, FilterVo>>({
    page: 1,
    page_size: 10,
@@ -301,7 +276,24 @@
  ]

  const columnOptions = [
-    { label: '商户池名称', prop: 'name', minWidth: 180 },
+    {
+      label: '商户池名称',
+      prop: 'name',
+      minWidth: 180,
+      showOverflowTooltip: true,
+      formatter: (row: PaymentMerchantPool) =>
+        h(
+          'span',
+          {
+            style: 'color: var(--el-color-primary); cursor: pointer; text-decoration: underline;',
+            onClick: (event: MouseEvent) => {
+              event.stopPropagation()
+              handleNameClick(row)
+            }
+          },
+          row.name
+        )
+    },
    {
      label: '支付方式',
      prop: 'payment_method',
@@ -445,7 +437,7 @@
  )

  const getMemberName = (id: number) =>
-    availableMerchants.value.find((m) => m.id === id)?.name || `#${id}`
+    availableMerchants.value.find((m) => m.id === id)?.name || '未知商户'

  // 表单
  type FormMode = 'create' | 'edit'
@@ -475,16 +467,13 @@

  const form = reactive(initialFormState())

-  const orderedMemberIds = ref<number[]>([])
-  watch(
-    () => form.member_ids,
-    (val) => {
-      orderedMemberIds.value = [...val]
-    },
-    { immediate: true, deep: true }
-  )
-  watch(orderedMemberIds, (val) => {
-    form.member_ids = [...val]
+  // 成员顺序以 form.member_ids 为单一数据源：VueDraggable 的 v-model 直接写回该数组，
+  // 避免双向 watch 互相赋值导致的递归更新。
+  const orderedMemberIds = computed<number[]>({
+    get: () => form.member_ids,
+    set: (val) => {
+      form.member_ids = [...val]
+    }
  })

  const formRules = reactive<FormRules>({
@@ -611,7 +600,6 @@
  const handlePaymentMethodChange = (value: PaymentMerchantMethod) => {
    form.payment_method = value
    form.member_ids = []
-    orderedMemberIds.value = []
    availableMerchants.value = []
    memberError.value = ''
    loadAvailableMerchants(value)
@@ -688,7 +676,6 @@
  const showCreateDrawer = async () => {
    if (!canManage.value) return
    Object.assign(form, initialFormState())
-    orderedMemberIds.value = []
    formDrawerVisible.value = true
    formMode.value = 'create'
    await loadAvailableMerchants(form.payment_method)
@@ -712,14 +699,12 @@
      time_period_started_at: pool.time_period_started_at || '',
      remark: pool.remark || ''
    })
-    orderedMemberIds.value = [...pool.member_ids]
    formDrawerVisible.value = true
    formMode.value = 'edit'
  }

  const resetForm = () => {
    Object.assign(form, initialFormState())
-    orderedMemberIds.value = []
    memberError.value = ''
    pendingMemberId.value = undefined
    formRef.value?.clearValidate()
@@ -753,23 +738,8 @@
    }
  }

-  // 详情
-  const detailDrawerVisible = ref(false)
-  const detail = ref<PaymentMerchantPool | null>(null)
  const tableRef = ref()

-  const showDetail = async (id: number) => {
-    try {
-      const res = await PaymentMerchantPoolsService.getPaymentMerchantPoolById(id)
-      if (res.code === 0) {
-        detail.value = res.data
-        detailDrawerVisible.value = true
-      }
-    } catch (error) {
-      console.error('加载商户池详情失败:', error)
-    }
-  }
-
  const toggleEnabled = async (pool: PaymentMerchantPool) => {
    if (!canManage.value) return
    const target = !pool.enabled
@@ -795,11 +765,6 @@
  }

  const getActions = (row: PaymentMerchantPool) => [
-    {
-      label: '详情',
-      type: 'primary' as const,
-      handler: () => showDetail(row.id)
-    },
    {
      label: '编辑',
      type: 'primary' as const,
@@ -822,9 +787,7 @@

  onUnmounted(() => {
    pools.value = []
-    detail.value = null
    availableMerchants.value = []
-    orderedMemberIds.value = []
  })
 </script>

--- a/src/views/settings/payment-merchant-pools/detail.vue
+++ b/src/views/settings/payment-merchant-pools/detail.vue
@@ -0,0 +1,297 @@
+<template>
+  <div class="payment-merchant-detail-page">
+    <ElCard shadow="never">
+      <div class="detail-header">
+        <ElButton @click="handleBack">
+          <template #icon>
+            <ElIcon><ArrowLeft /></ElIcon>
+          </template>
+          返回
+        </ElButton>
+        <h2 class="detail-title">{{ pageTitle }}</h2>
+      </div>
+
+      <DetailPage v-if="detailData" :sections="detailSections" :data="detailData" />
+
+      <div v-if="loading" class="loading-container">
+        <ElIcon class="is-loading"><Loading /></ElIcon>
+        <span>加载中...</span>
+      </div>
+    </ElCard>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed, onMounted, ref } from 'vue'
+  import { useRoute, useRouter } from 'vue-router'
+  import { ElButton, ElCard, ElIcon } from 'element-plus'
+  import { ArrowLeft, Loading } from '@element-plus/icons-vue'
+  import DetailPage from '@/components/common/DetailPage.vue'
+  import type { DetailField, DetailSection } from '@/components/common/DetailPage.vue'
+  import { PaymentMerchantPoolsService } from '@/api/modules'
+  import type { PaymentMerchantDetail } from '@/types/api'
+  import { formatDateTime } from '@/utils/business/format'
+  import { getPaymentMethodLabel, getPaymentProviderLabel } from '@/types/api/paymentMerchantPools'
+
+  defineOptions({ name: 'PaymentMerchantPoolsDetail' })
+
+  const route = useRoute()
+  const router = useRouter()
+
+  const loading = ref(false)
+  const detailData = ref<PaymentMerchantDetail | null>(null)
+
+  const merchantId = computed(() => Number(route.params.id))
+  const pageTitle = computed(() => `支付商户详情 #${merchantId.value}`)
+
+  const formatText = (value: string | number | boolean | undefined | null): string => {
+    if (value === undefined || value === null || value === '') return '-'
+    return String(value)
+  }
+
+  const formatBoolean = (value: boolean): string => (value ? '是' : '否')
+
+  const formatCredentialStatus = (value: string | number | boolean | undefined | null): string => {
+    if (value === '已配置') return '已配置'
+    if (value === true || value === 1) return '已配置'
+    return '未配置'
+  }
+
+  const baseSection: DetailSection = {
+    title: '基本信息',
+    fields: [
+      { label: '商户ID', prop: 'id' },
+      { label: '商户名称', prop: 'name' },
+      {
+        label: '支付方式',
+        formatter: (_, data) => getPaymentMethodLabel(data.payment_method)
+      },
+      {
+        label: '服务商类型',
+        formatter: (_, data) => getPaymentProviderLabel(data.provider_type)
+      },
+      { label: '商户标识', prop: 'merchant_identity' },
+      {
+        label: '启停状态',
+        formatter: (_, data) => (data.enabled ? '启用' : '停用')
+      },
+      {
+        label: '凭证状态',
+        formatter: (_, data) =>
+          Number(data.credential_version) > 0 ? '已配置' : '未配置'
+      },
+      { label: '凭证版本', prop: 'credential_version' },
+      {
+        label: '备注',
+        prop: 'remark',
+        formatter: (value) => formatText(value),
+        fullWidth: true
+      },
+      {
+        label: '创建时间',
+        prop: 'created_at',
+        formatter: (value) => formatDateTime(value)
+      },
+      {
+        label: '更新时间',
+        prop: 'updated_at',
+        formatter: (value) => formatDateTime(value)
+      }
+    ]
+  }
+
+  const alipayFields: DetailField[] = [
+    {
+      label: '支付宝AppID',
+      prop: 'credentials.ali_app_id',
+      formatter: (value) => formatText(value)
+    },
+    {
+      label: '支付过期分钟数',
+      prop: 'credentials.ali_pay_expire_minutes',
+      formatter: (value) => formatText(value)
+    },
+    {
+      label: '生产环境',
+      prop: 'credentials.ali_production',
+      formatter: (value) => formatBoolean(value)
+    },
+    {
+      label: '异步通知地址',
+      prop: 'credentials.ali_notify_url',
+      formatter: (value) => formatText(value),
+      fullWidth: true
+    },
+    {
+      label: '同步跳转地址',
+      prop: 'credentials.ali_return_url',
+      formatter: (value) => formatText(value),
+      fullWidth: true
+    },
+    {
+      label: '应用私钥',
+      prop: 'credentials.ali_private_key',
+      formatter: (value) => formatCredentialStatus(value)
+    },
+    {
+      label: '支付宝公钥',
+      prop: 'credentials.ali_public_key',
+      formatter: (value) => formatCredentialStatus(value)
+    }
+  ]
+
+  const wechatPayFields: DetailField[] = [
+    {
+      label: '微信商户号',
+      prop: 'credentials.wx_mch_id',
+      formatter: (value) => formatText(value)
+    },
+    {
+      label: '证书序列号',
+      prop: 'credentials.wx_serial_no',
+      formatter: (value) => formatText(value)
+    },
+    {
+      label: '支付回调地址',
+      prop: 'credentials.wx_notify_url',
+      formatter: (value) => formatText(value),
+      fullWidth: true
+    },
+    {
+      label: 'APIv2密钥',
+      prop: 'credentials.wx_api_v2_key',
+      formatter: (value) => formatCredentialStatus(value)
+    },
+    {
+      label: 'APIv3密钥',
+      prop: 'credentials.wx_api_v3_key',
+      formatter: (value) => formatCredentialStatus(value)
+    },
+    {
+      label: '支付证书',
+      prop: 'credentials.wx_cert_content',
+      formatter: (value) => formatCredentialStatus(value)
+    },
+    {
+      label: '支付密钥',
+      prop: 'credentials.wx_key_content',
+      formatter: (value) => formatCredentialStatus(value)
+    }
+  ]
+
+  const fuiouFields: DetailField[] = [
+    {
+      label: '富友API地址',
+      prop: 'credentials.fy_api_url',
+      formatter: (value) => formatText(value),
+      fullWidth: true
+    },
+    {
+      label: '富友机构号',
+      prop: 'credentials.fy_ins_cd',
+      formatter: (value) => formatText(value)
+    },
+    {
+      label: '富友商户号',
+      prop: 'credentials.fy_mchnt_cd',
+      formatter: (value) => formatText(value)
+    },
+    {
+      label: '富友终端号',
+      prop: 'credentials.fy_term_id',
+      formatter: (value) => formatText(value)
+    },
+    {
+      label: '支付回调地址',
+      prop: 'credentials.fy_notify_url',
+      formatter: (value) => formatText(value)
+    },
+    {
+      label: '富友私钥',
+      prop: 'credentials.fy_private_key',
+      formatter: (value) => formatCredentialStatus(value)
+    },
+    {
+      label: '富友公钥',
+      prop: 'credentials.fy_public_key',
+      formatter: (value) => formatCredentialStatus(value)
+    }
+  ]
+
+  const credentialSections = computed<DetailSection[]>(() => {
+    if (!detailData.value) return []
+
+    const providerType = detailData.value.provider_type
+    if (providerType === 'alipay') {
+      return [{ title: '支付宝配置', fields: alipayFields }]
+    }
+
+    if (providerType === 'wechat' || providerType === 'wechat_v2') {
+      return [{ title: '微信支付配置', fields: wechatPayFields }]
+    }
+
+    if (providerType === 'fuiou') {
+      return [{ title: '富友支付配置', fields: fuiouFields }]
+    }
+
+    return []
+  })
+
+  const detailSections = computed<DetailSection[]>(() => [baseSection, ...credentialSections.value])
+
+  const handleBack = () => {
+    router.back()
+  }
+
+  const fetchDetail = async () => {
+    loading.value = true
+    try {
+      const res = await PaymentMerchantPoolsService.getPaymentMerchantDetailById(merchantId.value)
+      if (res.code === 0) {
+        detailData.value = res.data
+      }
+    } catch (error) {
+      console.error('加载支付商户详情失败:', error)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  onMounted(() => {
+    fetchDetail()
+  })
+</script>
+
+<style scoped lang="scss">
+  .payment-merchant-detail-page {
+    padding: 20px;
+  }
+
+  .detail-header {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    padding-bottom: 16px;
+
+    .detail-title {
+      margin: 0;
+      font-size: 20px;
+      font-weight: 600;
+      color: var(--el-text-color-primary);
+    }
+  }
+
+  .loading-container {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    align-items: center;
+    justify-content: center;
+    padding: 60px 20px;
+    color: var(--el-text-color-secondary);
+
+    .el-icon {
+      font-size: 32px;
+    }
+  }
+</style>
--- a/src/views/settings/payment-merchant-pools/pool-detail.vue
+++ b/src/views/settings/payment-merchant-pools/pool-detail.vue
@@ -0,0 +1,243 @@
+<template>
+  <div class="payment-merchant-pool-detail-page">
+    <ElCard shadow="never">
+      <div class="detail-header">
+        <ElButton @click="handleBack">
+          <template #icon>
+            <ElIcon><ArrowLeft /></ElIcon>
+          </template>
+          返回
+        </ElButton>
+        <h2 class="detail-title">商户池详情</h2>
+      </div>
+
+      <DetailPage v-if="detailData" :sections="detailSections" :data="detailData" />
+
+      <div v-if="loading" class="loading-container">
+        <ElIcon class="is-loading"><Loading /></ElIcon>
+        <span>加载中...</span>
+      </div>
+    </ElCard>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed, onMounted, ref } from 'vue'
+  import { useRoute, useRouter } from 'vue-router'
+  import { ElButton, ElCard, ElIcon } from 'element-plus'
+  import { ArrowLeft, Loading } from '@element-plus/icons-vue'
+  import DetailPage from '@/components/common/DetailPage.vue'
+  import type { DetailField, DetailSection } from '@/components/common/DetailPage.vue'
+  import { PaymentMerchantPoolsService } from '@/api/modules'
+  import type {
+    PaymentMerchantMethod,
+    PaymentMerchantPool,
+    PaymentMerchantPoolMemberOption
+  } from '@/types/api'
+  import {
+    getPaymentMethodLabel,
+    getPaymentPoolStrategyLabel,
+    getPaymentStatisticCycleLabel,
+    getPaymentTimePeriodUnitLabel
+  } from '@/types/api/paymentMerchantPools'
+  import { formatDateTime } from '@/utils/business/format'
+
+  defineOptions({ name: 'PaymentMerchantPoolDetail' })
+
+  const route = useRoute()
+  const router = useRouter()
+
+  const loading = ref(false)
+  const detailData = ref<PaymentMerchantPool | null>(null)
+  const memberMerchants = ref<PaymentMerchantPoolMemberOption[]>([])
+
+  const poolId = computed(() => Number(route.params.id))
+
+  const loadMemberMerchants = async (paymentMethod: PaymentMerchantMethod) => {
+    try {
+      const res = await PaymentMerchantPoolsService.getPaymentMerchants({
+        page: 1,
+        page_size: 100,
+        payment_method: paymentMethod
+      })
+      if (res.code === 0) {
+        memberMerchants.value = (res.data?.items || []).map((item) => ({
+          id: item.id,
+          name: item.name,
+          payment_method: item.payment_method,
+          enabled: item.enabled
+        }))
+      }
+    } catch (error) {
+      console.error('加载商户池成员商户失败:', error)
+    }
+  }
+
+  // 成员只展示商户名称，不展示 member_ids 原始 ID
+  const memberNamesText = computed(() => {
+    const memberIds = detailData.value?.member_ids || []
+    if (memberIds.length === 0) return '-'
+    return memberIds
+      .map(
+        (memberId) => memberMerchants.value.find((item) => item.id === memberId)?.name || '未知商户'
+      )
+      .join('、')
+  })
+
+  const formatText = (value: string | number | undefined | null): string => {
+    if (value === undefined || value === null || value === '') return '-'
+    return String(value)
+  }
+
+  const baseSection: DetailSection = {
+    title: '基本信息',
+    fields: [
+      { label: '商户池名称', prop: 'name' },
+      {
+        label: '支付方式',
+        formatter: (_, data) => getPaymentMethodLabel(data.payment_method)
+      },
+      {
+        label: '启停状态',
+        formatter: (_, data) => (data.enabled ? '启用' : '停用')
+      },
+      {
+        label: '成员数量',
+        formatter: (_, data) => `${(data.member_ids || []).length} 个`
+      },
+      {
+        label: '成员商户',
+        formatter: () => memberNamesText.value,
+        fullWidth: true
+      },
+      {
+        label: '备注',
+        prop: 'remark',
+        formatter: (value) => formatText(value),
+        fullWidth: true
+      }
+    ]
+  }
+
+  const rotationFields = computed<DetailField[]>(() => {
+    const data = detailData.value
+    if (!data) return []
+
+    const fields: DetailField[] = [
+      {
+        label: '轮询策略',
+        formatter: (_, row) => getPaymentPoolStrategyLabel(row.strategy)
+      }
+    ]
+
+    if (data.strategy === 'amount') {
+      fields.push({
+        label: '统计周期',
+        formatter: (_, row) => getPaymentStatisticCycleLabel(row.statistic_cycle)
+      })
+      fields.push({
+        label: '金额阈值',
+        formatter: (_, row) => `${(Number(row.threshold_amount) / 100).toFixed(2)} 元`
+      })
+    } else if (data.strategy === 'count') {
+      fields.push({
+        label: '统计周期',
+        formatter: (_, row) => getPaymentStatisticCycleLabel(row.statistic_cycle)
+      })
+      fields.push({ label: '笔数阈值', formatter: (_, row) => `${row.threshold_count} 笔` })
+    } else if (data.strategy === 'time') {
+      fields.push({
+        label: '时间周期',
+        formatter: (_, row) =>
+          `${row.time_period_value} ${getPaymentTimePeriodUnitLabel(row.time_period_unit)}`
+      })
+      fields.push({
+        label: '时间起点',
+        formatter: (_, row) => formatDateTime(row.time_period_started_at)
+      })
+    }
+
+    return fields
+  })
+
+  const runtimeFields = computed<DetailField[]>(() => {
+    const data = detailData.value
+    if (!data) return []
+
+    const fields: DetailField[] = [
+      { label: '路由世代', formatter: (_, row) => `v${row.routing_epoch}` }
+    ]
+
+    if (data.created_at) {
+      fields.push({ label: '创建时间', formatter: (_, row) => formatDateTime(row.created_at) })
+    }
+    if (data.updated_at) {
+      fields.push({ label: '更新时间', formatter: (_, row) => formatDateTime(row.updated_at) })
+    }
+
+    return fields
+  })
+
+  const detailSections = computed<DetailSection[]>(() => [
+    baseSection,
+    { title: '轮询配置', fields: rotationFields.value },
+    { title: '运行状态', fields: runtimeFields.value }
+  ])
+
+  const handleBack = () => {
+    router.back()
+  }
+
+  const fetchDetail = async () => {
+    loading.value = true
+    try {
+      const res = await PaymentMerchantPoolsService.getPaymentMerchantPoolById(poolId.value)
+      if (res.code === 0) {
+        detailData.value = res.data
+        await loadMemberMerchants(res.data.payment_method)
+      }
+    } catch (error) {
+      console.error('加载商户池详情失败:', error)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  onMounted(() => {
+    fetchDetail()
+  })
+</script>
+
+<style scoped lang="scss">
+  .payment-merchant-pool-detail-page {
+    padding: 20px;
+  }
+
+  .detail-header {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    padding-bottom: 16px;
+
+    .detail-title {
+      margin: 0;
+      font-size: 20px;
+      font-weight: 600;
+      color: var(--el-text-color-primary);
+    }
+  }
+
+  .loading-container {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    align-items: center;
+    justify-content: center;
+    padding: 60px 20px;
+    color: var(--el-text-color-secondary);
+
+    .el-icon {
+      font-size: 32px;
+    }
+  }
+</style>
--- a/src/views/settings/system-configs/index.vue
+++ b/src/views/settings/system-configs/index.vue
@@ -68,7 +68,7 @@
                v-for="item in currentConfig?.enum_values"
                :key="item"
                :value="item"
-                :label="item"
+                :label="formatEnumLabel(item)"
              />
            </ElSelect>
            <ElInput
@@ -105,7 +105,7 @@
 </template>

 <script setup lang="ts">
-  import { computed, h, onMounted, reactive, ref } from 'vue'
+  import { computed, h, onMounted, reactive, ref, watch } from 'vue'
  import { useRoute } from 'vue-router'
  import { ElMessage, ElTag } from 'element-plus'
  import { SystemConfigService } from '@/api/modules'
@@ -131,7 +131,21 @@
    { label: 'C 端支付方式配置', value: 'c2b.payment' }
  ]

-  const searchForm = reactive<{ module?: SystemConfigModule }>({ module: undefined })
+  const configEnumLabels: Record<string, string> = {
+    wechat_only: '仅微信支付',
+    alipay_only: '仅支付宝支付',
+    both: '同时支持微信与支付宝'
+  }
+
+  const formatEnumLabel = (value: string) => configEnumLabels[value] || value
+
+  const isSystemConfigModule = (value: unknown): value is SystemConfigModule =>
+    moduleOptions.some((item) => item.value === value)
+
+  const queryModule = String(route.query.module || '')
+  const searchForm = reactive<{ module?: SystemConfigModule }>({
+    module: isSystemConfigModule(queryModule) ? queryModule : undefined
+  })
  const searchFormItems: SearchFormItem[] = [
    {
      label: '配置模块',
@@ -252,6 +266,9 @@
      const methods = parsePaymentMethods(config.value)
      return methods.length ? methods.map((method) => paymentMethodLabels[method]).join('、') : '-'
    }
+    if (config.enum_values?.length) {
+      return formatEnumLabel(config.value) || '-'
+    }
    return config.value || '-'
  }

@@ -392,10 +409,16 @@
    loadConfigs()
  }

+  // 菜单跳转可能只变更 query（同一组件实例复用），需要跟随 module 变化重新筛选
+  watch(
+    () => route.query.module,
+    (value) => {
+      const module = String(value || '')
+      searchForm.module = isSystemConfigModule(module) ? module : undefined
+      pagination.page = 1
+      loadConfigs()
+    }
+  )
+
  onMounted(loadConfigs)
 </script>
-
-<style scoped lang="scss">
-  .system-configs-page {
-  }
-</style>
--- a/src/views/settings/wecom/scenes/index.vue
+++ b/src/views/settings/wecom/scenes/index.vue
@@ -64,6 +64,7 @@
                >
                  <ElOption label="退款审批" value="refund_approval" />
                  <ElOption label="线下代充值审批" value="offline_recharge_approval" />
+                  <ElOption label="员工代收款审批" value="employee_collection_approval" />
                </ElSelect>
              </ElFormItem>
            </ElCol>