diff --git a/src/api/modules/capital/withdraw.ts b/src/api/modules/capital/withdraw.ts
new file mode 100644
index 0000000..e8285a2
--- /dev/null
+++ b/src/api/modules/capital/withdraw.ts
@@ -0,0 +1,47 @@
+import { request } from '@/api'
+
+// 获取用户钱包信息
+export const getWalletCapital = () => {
+  return request.get('/user/getWalletCapital')
+}
+
+// 获取取款渠道列表 (role_id >= 5 使用)
+export const getWithdrawChannel = () => {
+  return request.get('/withdraw/withdrawChannel')
+}
+
+// 获取代理取款渠道列表 (role_id < 5 使用)
+export const getAgentWithdrawChannel = () => {
+  return request.get('/withdraw/agentWithdrawChannel')
+}
+
+// 代理取款 (role_id < 5)
+export const agentWithdraw = (params: {
+  channel_id: number
+  amount: string
+  withdraw_fee_handle: string
+  withdraw_point_diff: string
+  withdraw_service_fee: string
+  withdraw_head_fee: string
+  withdraw_risk_fee: string
+  withdraw_address: string
+}) => {
+  return request.post('/withdraw/agentWithdraw', params)
+}
+
+// 用户取款 (role_id >= 5)
+export const withdraw = (params: {
+  channel_id: number
+  amount: string
+  withdraw_fee_handle: string
+  withdraw_point_diff: string
+  withdraw_blance: string
+  withdraw_address: string
+  beneficiary_name: string
+  beneficiary_bank_name: string
+  swift_bic_code: string
+  beneficiary_bank_address: string
+  beneficiary_bank_account: string
+}) => {
+  return request.post('/withdraw/withdraw', params)
+}
\ No newline at end of file
diff --git a/src/i18n/locales/en-US/index.ts b/src/i18n/locales/en-US/index.ts
index 9154ab6..ea38bb1 100644
--- a/src/i18n/locales/en-US/index.ts
+++ b/src/i18n/locales/en-US/index.ts
@@ -98,5 +98,56 @@ export default {
       5: 'Agent',
       6: 'User'
     }
-  }
+  },
+  // Withdraw
+  withdraw: {
+    pageTitle: 'Withdraw',
+    withdraw: 'Withdraw',
+    dialog: {
+      title1: 'Withdraw',
+      title2: 'Confirm Withdraw Information',
+      amount: 'Withdraw Amount',
+      amountPlaceholder: 'Please enter withdraw amount',
+      walletBalance: 'Wallet Balance',
+      deductionDetails: 'Deduction Details',
+      type: 'Type',
+      originalBalance: 'Original Balance',
+      deductedAmount: 'Deducted Amount',
+      remaining: 'Remaining',
+      totalDeducted: 'Total Deducted',
+      channel: 'Channel',
+      withdrawAmount: 'Withdraw Amount',
+      walletAddress: 'Wallet Address',
+      walletAddressPlaceholder: 'Please enter wallet address',
+      beneficiaryName: 'Beneficiary Name',
+      beneficiaryNamePlaceholder: 'Please enter beneficiary name',
+      bankName: 'Bank Name',
+      bankNamePlaceholder: 'Please enter bank name',
+      swiftCode: 'SWIFT Code',
+      swiftCodePlaceholder: 'Please enter SWIFT code',
+      bankAddress: 'Bank Address',
+      bankAddressPlaceholder: 'Please enter bank address',
+      bankAccount: 'Bank Account',
+      bankAccountPlaceholder: 'Please enter bank account',
+      nextStep: 'Next Step',
+      confirmWithdraw: 'Confirm Withdraw',
+      submitSuccess: 'Withdraw application submitted',
+    },
+    wallet: {
+      feeHandling: 'Fee Handling',
+      pointDiff: 'Point Diff',
+      service: 'Service',
+      risk: 'Risk',
+      profit: 'Head Position',
+      headPosition: 'Head Position',
+      available: 'Available',
+    },
+    table: {
+      channelName: 'Channel Name',
+      channelFee: 'Channel Fee',
+      apiUrl: 'API URL',
+      apiAppid: 'API Appid',
+      status: 'Status',
+    },
+  },
 }
diff --git a/src/i18n/locales/zh-CN/index.ts b/src/i18n/locales/zh-CN/index.ts
index a2bf894..8d1f77a 100644
--- a/src/i18n/locales/zh-CN/index.ts
+++ b/src/i18n/locales/zh-CN/index.ts
@@ -98,5 +98,56 @@ export default {
       5: '代理',
       6: '用户'
     }
-  }
+  },
+  // 取款
+  withdraw: {
+    pageTitle: '取款',
+    withdraw: '取款',
+    dialog: {
+      title1: '取款',
+      title2: '确认取款信息',
+      amount: '取款金额',
+      amountPlaceholder: '请输入取款金额',
+      walletBalance: '钱包余额',
+      deductionDetails: '扣除明细',
+      type: '类型',
+      originalBalance: '原余额',
+      deductedAmount: '扣除金额',
+      remaining: '剩余',
+      totalDeducted: '合计扣除',
+      channel: '渠道',
+      withdrawAmount: '取款金额',
+      walletAddress: '钱包地址',
+      walletAddressPlaceholder: '请输入钱包地址',
+      beneficiaryName: '收款人姓名',
+      beneficiaryNamePlaceholder: '请输入收款人姓名',
+      bankName: '银行名称',
+      bankNamePlaceholder: '请输入银行名称',
+      swiftCode: 'SWIFT代码',
+      swiftCodePlaceholder: '请输入SWIFT代码',
+      bankAddress: '银行地址',
+      bankAddressPlaceholder: '请输入银行地址',
+      bankAccount: '银行账号',
+      bankAccountPlaceholder: '请输入银行账号',
+      nextStep: '下一步',
+      confirmWithdraw: '确认取款',
+      submitSuccess: '取款申请已提交',
+    },
+    wallet: {
+      feeHandling: '手续费',
+      pointDiff: '点差佣金',
+      service: '服务费',
+      risk: '风险金',
+      profit: '头寸',
+      headPosition: '头寸',
+      available: '可用余额',
+    },
+    table: {
+      channelName: '渠道名称',
+      channelFee: '渠道费用',
+      apiUrl: '接口地址',
+      apiAppid: '接口appid',
+      status: '状态',
+    },
+  },
 }
diff --git a/src/views/capital/withdraw/components/WithdrawDialog.vue b/src/views/capital/withdraw/components/WithdrawDialog.vue
new file mode 100644
index 0000000..411e62b
--- /dev/null
+++ b/src/views/capital/withdraw/components/WithdrawDialog.vue
@@ -0,0 +1,812 @@
+<template>
+  <Dialog
+    :visible="dialogVisible"
+    :title="currentStep === 1 ? t('withdraw.dialog.title1') : t('withdraw.dialog.title2')"
+    width="600px"
+    :show-footer="false"
+    @close="handleUpdateVisible"
+  >
+    <!-- 第一步：输入金额并展示计算明细 -->
+    <div v-if="currentStep === 1" class="step1-container">
+      <!-- 钱包余额展示 -->
+      <div class="wallet-section">
+        <div class="section-label">{{ t('withdraw.dialog.walletBalance') }}</div>
+        <div class="wallet-grid">
+          <div class="wallet-item">
+            <span class="wallet-label">{{ t('withdraw.wallet.feeHandling') }}</span>
+            <span class="wallet-value">{{ walletInfo.commission_fee_handling || 0 }}</span>
+          </div>
+          <div class="wallet-item">
+            <span class="wallet-label">{{ t('withdraw.wallet.pointDiff') }}</span>
+            <span class="wallet-value">{{ walletInfo.commission_point_diff || 0 }}</span>
+          </div>
+          <div class="wallet-item">
+            <span class="wallet-label">{{ t('withdraw.wallet.service') }}</span>
+            <span class="wallet-value">{{ walletInfo.service || 0 }}</span>
+          </div>
+          <div class="wallet-item" v-if="showRiskFee">
+            <span class="wallet-label">{{ t('withdraw.wallet.risk') }}</span>
+            <span class="wallet-value">{{ walletInfo.risk || 0 }}</span>
+          </div>
+          <div class="wallet-item">
+            <span class="wallet-label">{{ t('withdraw.wallet.profit') }}</span>
+            <span class="wallet-value">{{ walletInfo.closing_profit || 0 }}</span>
+          </div>
+          <div class="wallet-item" v-if="roleId >= 5">
+            <span class="wallet-label">{{ t('withdraw.wallet.available') }}</span>
+            <span class="wallet-value available">{{ availableBalance.toFixed(2) }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 金额输入 -->
+      <div class="amount-section">
+        <div class="section-label">
+          {{ t('withdraw.dialog.amount') }}
+          <span class="max-balance">（最大可取：{{ totalWalletBalance }} {{ currentCurrency }}）</span>
+        </div>
+        <el-input
+          v-model="withdrawAmount"
+          type="number"
+          :placeholder="t('withdraw.dialog.amountPlaceholder')"
+          @input="handleAmountInput"
+        >
+          <template #prepend>{{ currentCurrency }}</template>
+        </el-input>
+        <div v-if="amountError" class="amount-error">{{ amountError }}</div>
+      </div>
+
+      <!-- 合计扣除 -->
+      <div v-if="totalDeducted && parseFloat(totalDeducted) > 0" class="total-section">
+        <div class="total-label">{{ t('withdraw.dialog.totalDeducted') }}：</div>
+        <div class="total-value">-{{ totalDeducted }} {{ currentCurrency }}</div>
+      </div>
+
+      <!-- 扣除计算明细 - 用盒子展示 -->
+      <div v-if="withdrawAmount && calculatedData.length > 0" class="calculation-section">
+        <div class="section-label">{{ t('withdraw.dialog.deductionDetails') }}</div>
+        <div class="calculation-grid">
+          <div v-for="(item, index) in calculatedData" :key="index" class="calc-item">
+            <div class="calc-type">{{ item.type }}</div>
+            <div class="calc-values">
+              <div class="calc-original">
+                <span class="label">{{ t('withdraw.dialog.originalBalance') }}</span>
+                <span class="value">{{ item.original }}</span>
+              </div>
+              <div class="calc-deducted">
+                <span class="label">{{ t('withdraw.dialog.deductedAmount') }}</span>
+                <span class="value deducted">-{{ item.deducted }}</span>
+              </div>
+              <div class="calc-remaining">
+                <span class="label">{{ t('withdraw.dialog.remaining') }}</span>
+                <span class="value">{{ item.remaining }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="calc-summary">
+          <span class="label">{{ t('withdraw.dialog.totalDeducted') }}：</span>
+          <span class="total-value">{{ totalDeducted }}</span>
+        </div>
+      </div>
+
+      <!-- 快捷金额 -->
+      <div class="quick-amounts">
+        <el-button
+          v-for="amount in quickAmounts"
+          :key="amount"
+          size="small"
+          @click="handleQuickAmount(amount)"
+        >
+          {{ amount }}
+        </el-button>
+      </div>
+
+      <!-- 底部按钮 -->
+      <div class="dialog-footer">
+        <el-button @click="handleCancel">{{ t('common.cancel') }}</el-button>
+        <el-button type="primary" @click="handleNextStep">{{ t('withdraw.dialog.nextStep') }}</el-button>
+      </div>
+    </div>
+
+    <!-- 第二步：确认表单 -->
+    <div v-else class="step2-container">
+      <el-form
+        ref="formRef"
+        :model="formData"
+        :rules="formRules"
+        label-position="top"
+      >
+
+        <!-- 金额信息（只读） -->
+        <div class="amount-info">
+          <div class="info-row">
+            <span class="info-label">{{ t('withdraw.dialog.withdrawAmount') }}：</span>
+            <span class="info-value">{{ withdrawAmount }} USD</span>
+          </div>
+          <div class="info-row" v-for="(item, index) in calculatedData" :key="index">
+            <span class="info-label">{{ item.typeLabel }}：</span>
+            <span class="info-value">{{ item.deducted }} USD</span>
+          </div>
+        </div>
+
+        <!-- 钱包地址 -->
+        <el-form-item :label="t('withdraw.dialog.walletAddress')" prop="withdraw_address">
+          <el-input v-model="formData.withdraw_address" :placeholder="t('withdraw.dialog.walletAddressPlaceholder')" />
+        </el-form-item>
+
+        <!-- 用户取款额外字段 (role_id >= 5) -->
+        <template v-if="!isAgent">
+          <el-form-item :label="t('withdraw.dialog.beneficiaryName')" prop="beneficiary_name">
+            <el-input v-model="formData.beneficiary_name" :placeholder="t('withdraw.dialog.beneficiaryNamePlaceholder')" />
+          </el-form-item>
+          <el-form-item :label="t('withdraw.dialog.bankName')" prop="beneficiary_bank_name">
+            <el-input v-model="formData.beneficiary_bank_name" :placeholder="t('withdraw.dialog.bankNamePlaceholder')" />
+          </el-form-item>
+          <el-form-item :label="t('withdraw.dialog.swiftCode')" prop="swift_bic_code">
+            <el-input v-model="formData.swift_bic_code" :placeholder="t('withdraw.dialog.swiftCodePlaceholder')" />
+          </el-form-item>
+          <el-form-item :label="t('withdraw.dialog.bankAddress')" prop="beneficiary_bank_address">
+            <el-input v-model="formData.beneficiary_bank_address" :placeholder="t('withdraw.dialog.bankAddressPlaceholder')" />
+          </el-form-item>
+          <el-form-item :label="t('withdraw.dialog.bankAccount')" prop="beneficiary_bank_account">
+            <el-input v-model="formData.beneficiary_bank_account" :placeholder="t('withdraw.dialog.bankAccountPlaceholder')" />
+          </el-form-item>
+        </template>
+      </el-form>
+
+      <!-- 底部按钮 -->
+      <div class="dialog-footer">
+        <el-button @click="handleBack">{{ t('common.cancel') }}</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">{{ t('withdraw.dialog.confirmWithdraw') }}</el-button>
+      </div>
+    </div>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
+import Dialog from '@/components/common/Dialog.vue'
+import { getWalletCapital, getWithdrawChannel, getAgentWithdrawChannel, agentWithdraw, withdraw } from '@/api/modules/capital/withdraw'
+import { getStorage } from '@/utils/storage'
+
+const { t } = useI18n()
+
+interface Props {
+  visible: boolean
+  channelId?: number
+  channelInfo?: {
+    id: number
+    symbol?: string
+    currency?: {
+      symbol: string
+
+    }
+  }
+}
+
+interface Emits {
+  (e: 'update:visible', value: boolean): void
+  (e: 'success'): void
+}
+
+interface WalletInfo {
+  user_id: string
+  amount: string
+  commission_point_diff: string
+  freeze: string
+  risk: string
+  service: string
+  toucun_percent: string
+  fee_handling_percent: string
+  commission_fee_handling: string
+  bail: string
+  bail_stop_order: string
+  bail_change_order: string
+  risk_control_id: string
+  fee_setting_id: string
+  closing_profit: string
+}
+
+interface ChannelItem {
+  id: number
+  name: string
+}
+
+interface CalculatedItem {
+  type: string
+  typeLabel: string
+  original: string
+  deducted: string
+  remaining: string
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const dialogVisible = ref(props.visible)
+const currentStep = ref(1)
+const withdrawAmount = ref('')
+const submitLoading = ref(false)
+const amountError = ref('')
+
+// 处理金额输入
+const handleAmountInput = (value: string) => {
+  const numValue = parseFloat(value)
+  if (isNaN(numValue)) {
+    amountError.value = ''
+    calculatedData.value = []
+    return
+  }
+  
+  if (numValue > totalWalletBalance.value) {
+    amountError.value = `输入金额不能超过最大可取金额 ${totalWalletBalance.value.toFixed(2)}`
+    calculatedData.value = []
+    return
+  }
+  
+  amountError.value = ''
+  calculateWithdraw()
+}
+
+// 用户信息
+const userInfo: any = getStorage('userInfo')
+const roleId = userInfo?.role_id || 6
+
+// 角色判断
+const isAgent = computed(() => roleId >= 5)
+
+// 当前货币类型（从渠道信息获取）
+const currentCurrency = computed(() => props.channelInfo?.currency?.symbol || '-')
+
+// 计算可用余额 = amount - 所有钱包余额 - freeze
+// availableBalance = amount - freeze - (手续费 + 点差 + 服务费 + 风险金 + 头寸)
+const availableBalance = computed(() => {
+  const amount = parseFloat(walletInfo.value.amount || '0')
+  const freeze = parseFloat(walletInfo.value.freeze || '0')
+  // 钱包余额总和
+  const walletSum =
+    parseFloat(walletInfo.value.commission_fee_handling || '0') +
+    parseFloat(walletInfo.value.commission_point_diff || '0') +
+    parseFloat(walletInfo.value.service || '0') +
+    parseFloat(walletInfo.value.risk || '0') +
+    parseFloat(walletInfo.value.closing_profit || '0')
+  return Math.max(0, amount - freeze - walletSum)
+})
+
+// 计算钱包余额总和（用于验证输入金额上限）
+// roleId >= 5 时，totalWalletBalance 需要包含 availableBalance
+const totalWalletBalance = computed(() => {
+  const amount = parseFloat(walletInfo.value.amount || '0')
+  const freeze = parseFloat(walletInfo.value.freeze || '0')
+  
+  // 钱包余额总和（手续费 + 点差 + 服务费 + 风险金 + 头寸）
+  const walletSum =
+    parseFloat(walletInfo.value.commission_fee_handling || '0') +
+    parseFloat(walletInfo.value.commission_point_diff || '0') +
+    parseFloat(walletInfo.value.service || '0') +
+    parseFloat(walletInfo.value.risk || '0') +
+    parseFloat(walletInfo.value.closing_profit || '0')
+  
+  // availableBalance = amount - freeze - walletSum
+  const availableBal = Math.max(0, amount - freeze - walletSum)
+  
+  if (roleId >= 5) {
+    // roleId >= 5 时，总余额包含可用余额
+    return walletSum + availableBal
+  }
+  return walletSum
+})
+
+
+// 根据角色显示对应的费用项
+const showRiskFee = computed(() => [1].includes(roleId))
+
+// 费用项顺序
+const feeOrder = computed(() => {
+  const orders: Record<number, string[]> = {
+    1: ['手续费', '点差', '服务费', '风险金', '头寸', '可用余额'], // 平台
+    2: ['手续费', '点差', '服务费', '可用余额'], // 承包商
+    3: ['手续费', '点差', '服务费', '头寸', '可用余额'], // 特殊做市商
+    4: ['手续费', '点差', '服务费', '头寸', '可用余额'], // 普通做市商
+    5: ['手续费', '点差', '可用余额'], // 代理
+    6: ['手续费', '点差', '可用余额'], // 用户
+  }
+  return orders[roleId] ?? orders[6] ?? []
+})
+
+// 费用项对应的字段
+const feeFieldMap: Record<string, keyof WalletInfo> = {
+  '手续费': 'commission_fee_handling',
+  '点差': 'commission_point_diff',
+  '服务费': 'service',
+  '风险金': 'risk',
+  '头寸': 'closing_profit',
+  '可用余额': 'amount',
+}
+
+// 费用项标签映射
+const feeLabelMap: Record<string, string> = {
+  '手续费': '手续费佣金',
+  '点差': '点差佣金',
+  '服务费': '服务费',
+  '风险金': '风险金',
+  '头寸': '头寸',
+  '可用余额': '可用余额',
+}
+
+// 钱包信息
+const walletInfo = ref<WalletInfo>({
+  user_id: '',
+  amount: '',
+  commission_point_diff: '0',
+  freeze: '0',
+  risk: '0',
+  service: '0',
+  toucun_percent: '0',
+  fee_handling_percent: '0',
+  commission_fee_handling: '0',
+  bail: '0',
+  bail_stop_order: '0',
+  bail_change_order: '0',
+  risk_control_id: '',
+  fee_setting_id: '',
+  closing_profit: '0',
+})
+
+// 渠道列表
+const channelList = ref<ChannelItem[]>([])
+
+// 计算后的扣除明细
+const calculatedData = ref<CalculatedItem[]>([])
+
+// 合计扣除
+const totalDeducted = computed(() => {
+  return calculatedData.value.reduce((sum, item) => sum + parseFloat(item.deducted || '0'), 0).toFixed(2)
+})
+
+// 快捷金额
+const quickAmounts = ['100', '500', '1000', '5000']
+
+// 表单数据
+const formRef = ref<FormInstance>()
+const formData = ref({
+  channel_id: '',
+  withdraw_address: '',
+  // 代理取款字段
+  withdraw_fee_handle: '',
+  withdraw_point_diff: '',
+  withdraw_service_fee: '',
+  withdraw_head_fee: '',
+  withdraw_risk_fee: '',
+  // 用户取款额外字段
+  beneficiary_name: '',
+  beneficiary_bank_name: '',
+  swift_bic_code: '',
+  beneficiary_bank_address: '',
+  beneficiary_bank_account: '',
+})
+
+// 表单验证规则
+const formRules: FormRules = {
+  withdraw_address: [{ required: true, message: '请输入钱包地址', trigger: 'blur' }],
+  beneficiary_name: [{ required: true, message: '请输入收款人姓名', trigger: 'blur' }],
+  beneficiary_bank_name: [{ required: true, message: '请输入银行名称', trigger: 'blur' }],
+  swift_bic_code: [{ required: true, message: '请输入SWIFT代码', trigger: 'blur' }],
+  beneficiary_bank_address: [{ required: true, message: '请输入银行地址', trigger: 'blur' }],
+  beneficiary_bank_account: [{ required: true, message: '请输入银行账号', trigger: 'blur' }],
+}
+
+// 监听 visible 变化
+watch(() => props.visible, (val) => {
+  dialogVisible.value = val
+  if (val) {
+    initData()
+  }
+})
+
+// 初始化数据
+const initData = async () => {
+  currentStep.value = 1
+  withdrawAmount.value = ''
+  calculatedData.value = []
+  
+  // 获取钱包信息
+  try {
+    const res: any = await getWalletCapital()
+    if (res) {
+      walletInfo.value = {
+        commission_fee_handling: res.commission_fee_handling || '0',
+        commission_point_diff: res.commission_point_diff || '0',
+        service: res.service || '0',
+        risk: res.risk || '0',
+        closing_profit: res.closing_profit || '0',
+        toucun_percent: res.toucun_percent || '0',
+        amount: res.amount || '0',
+        user_id: res.user_id || '',
+        freeze: res.freeze || '0',
+        bail: res.bail || '0',
+        bail_stop_order: res.bail_stop_order || '0',
+        bail_change_order: res.bail_change_order || '0',
+        risk_control_id: res.risk_control_id || '',
+        fee_setting_id: res.fee_setting_id || '',
+        fee_handling_percent: res.fee_handling_percent || '0',
+      }
+    }
+  } catch (error) {
+    console.error('获取钱包信息失败', error)
+  }
+
+  // 获取渠道列表
+  try {
+    const api = isAgent.value ? getWithdrawChannel : getAgentWithdrawChannel
+    const res: any = await api()
+    if (res && Array.isArray(res)) {
+      channelList.value = res.map((item: any) => ({
+        id: item.id,
+        name: item.name,
+      }))
+    } else if (res?.data) {
+      channelList.value = res.data.map((item: any) => ({
+        id: item.id,
+        name: item.name,
+      }))
+    }
+  } catch (error) {
+    console.error('获取渠道列表失败', error)
+  }
+}
+
+// 计算扣除明细
+const calculateWithdraw = () => {
+  const amount = parseFloat(withdrawAmount.value) || 0
+  if (amount <= 0) {
+    calculatedData.value = []
+    return
+  }
+
+  const results: CalculatedItem[] = []
+  let remaining = amount
+
+  for (const feeType of feeOrder.value) {
+    const field = feeFieldMap[feeType]
+    if (!field) continue
+
+    const original = parseFloat(walletInfo.value[field] || '0')
+    if (original <= 0) continue
+
+    const deducted = Math.min(remaining, original).toFixed(2)
+    const newRemaining = Math.max(0, remaining - original)
+
+    results.push({
+      type: feeType,
+      typeLabel: feeLabelMap[feeType] || feeType,
+      original: original.toFixed(2),
+      deducted: deducted,
+      remaining: Math.max(0, original - parseFloat(deducted)).toFixed(2),
+    })
+
+    remaining = newRemaining
+    if (remaining <= 0) break
+  }
+
+  calculatedData.value = results
+}
+
+// 快捷金额
+const handleQuickAmount = (amount: string) => {
+  withdrawAmount.value = amount
+  calculateWithdraw()
+}
+
+// 关闭弹窗
+const handleUpdateVisible = (val: boolean) => {
+  emit('update:visible', val)
+}
+
+// 取消
+const handleCancel = () => {
+  dialogVisible.value = false
+  emit('update:visible', false)
+}
+
+// 返回上一步
+const handleBack = () => {
+  currentStep.value = 1
+}
+
+// 下一步
+const handleNextStep = () => {
+  const amount = parseFloat(withdrawAmount.value)
+  if (!withdrawAmount.value || amount <= 0) {
+    ElMessage.warning('请输入取款金额')
+    return
+  }
+  
+  if (amount > totalWalletBalance.value) {
+    ElMessage.warning(`输入金额不能超过最大可取金额 ${totalWalletBalance.value.toFixed(2)}`)
+    return
+  }
+
+  // 填充表单数据
+  formData.value.withdraw_fee_handle = calculatedData.value.find(item => item.type === '手续费')?.deducted || '0'
+  formData.value.withdraw_point_diff = calculatedData.value.find(item => item.type === '点差')?.deducted || '0'
+  formData.value.withdraw_service_fee = calculatedData.value.find(item => item.type === '服务费')?.deducted || '0'
+  formData.value.withdraw_risk_fee = calculatedData.value.find(item => item.type === '风险金')?.deducted || '0'
+  formData.value.withdraw_head_fee = calculatedData.value.find(item => item.type === '头寸')?.deducted || '0'
+
+  currentStep.value = 2
+}
+
+// 提交
+const handleSubmit = async () => {
+  try {
+    await formRef.value?.validate()
+  } catch {
+    return
+  }
+
+  submitLoading.value = true
+
+  try {
+    const params: any = {
+      channel_id: props.channelId,
+      amount: +withdrawAmount.value,
+      withdraw_fee_handle: formData.value.withdraw_fee_handle,
+      withdraw_point_diff: formData.value.withdraw_point_diff,
+      withdraw_address: formData.value.withdraw_address,
+    }
+
+    if (isAgent.value) {
+      // 用户取款
+      params.withdraw_blance = walletInfo.value.amount
+      params.beneficiary_name = formData.value.beneficiary_name
+      params.beneficiary_bank_name = formData.value.beneficiary_bank_name
+      params.swift_bic_code = formData.value.swift_bic_code
+      params.beneficiary_bank_address = formData.value.beneficiary_bank_address
+      params.beneficiary_bank_account = formData.value.beneficiary_bank_account
+
+      await withdraw(params)
+    } else {
+      // 代理取款
+      params.withdraw_service_fee = formData.value.withdraw_service_fee
+      params.withdraw_head_fee = formData.value.withdraw_head_fee
+      params.withdraw_risk_fee = formData.value.withdraw_risk_fee
+
+      await agentWithdraw(params)
+    }
+
+    ElMessage.success('取款申请已提交')
+    dialogVisible.value = false
+    emit('update:visible', false)
+    emit('success')
+  } catch (error) {
+    console.error('提交失败', error)
+  } finally {
+    submitLoading.value = false
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.step1-container {
+  .section-label {
+    margin-bottom: 12px;
+    font-size: 14px;
+    font-weight: 500;
+    color: #303133;
+  }
+}
+
+.wallet-section {
+  margin-bottom: 20px;
+  padding: 16px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 8px;
+  color: #fff;
+
+  .section-label {
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 13px;
+  }
+
+  .wallet-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 12px;
+  }
+
+  .wallet-item {
+    display: flex;
+    flex-direction: column;
+    padding: 12px;
+    background: rgba(255, 255, 255, 0.15);
+    border-radius: 6px;
+
+    .wallet-label {
+      margin-bottom: 6px;
+      font-size: 12px;
+      color: rgba(255, 255, 255, 0.8);
+    }
+
+    .wallet-value {
+      font-size: 18px;
+      font-weight: 700;
+      color: #fff;
+    }
+  }
+}
+
+.amount-section {
+  margin-bottom: 16px;
+
+  .section-label {
+    display: flex;
+    align-items: center;
+    margin-bottom: 12px;
+    font-size: 14px;
+    font-weight: 500;
+    color: #303133;
+
+    .max-balance {
+      margin-left: 8px;
+      font-size: 12px;
+      color: #909399;
+      font-weight: normal;
+    }
+  }
+
+  .amount-error {
+    margin-top: 8px;
+    font-size: 12px;
+    color: #f56c6c;
+  }
+}
+
+.total-section {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px;
+  margin-bottom: 16px;
+  background: #fef0f0;
+  border-radius: 8px;
+  border: 1px solid #fde2e2;
+
+  .total-label {
+    font-size: 14px;
+    color: #606266;
+  }
+
+  .total-value {
+    font-size: 18px;
+    font-weight: 700;
+    color: #f56c6c;
+  }
+}
+
+.calculation-section {
+  margin-bottom: 24px;
+
+  .section-label {
+    margin-bottom: 12px;
+    font-size: 14px;
+    font-weight: 500;
+    color: #303133;
+  }
+
+  .calculation-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .calc-item {
+    padding: 16px;
+    background: #f5f7fa;
+    border-radius: 8px;
+    border: 1px solid #ebeef5;
+  }
+
+  .calc-type {
+    margin-bottom: 12px;
+    font-size: 14px;
+    font-weight: 600;
+    color: #303133;
+  }
+
+  .calc-values {
+    display: flex;
+    gap: 24px;
+  }
+
+  .calc-original,
+  .calc-deducted,
+  .calc-remaining {
+    display: flex;
+    flex-direction: column;
+
+    .label {
+      margin-bottom: 4px;
+      font-size: 12px;
+      color: #909399;
+    }
+
+    .value {
+      font-size: 16px;
+      font-weight: 600;
+      color: #303133;
+
+      &.deducted {
+        color: #f56c6c;
+      }
+    }
+  }
+
+  .calc-summary {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    margin-top: 16px;
+    padding-top: 12px;
+    border-top: 1px solid #ebeef5;
+
+    .label {
+      font-size: 14px;
+      color: #606266;
+    }
+
+    .total-value {
+      margin-left: 8px;
+      font-size: 20px;
+      font-weight: 600;
+      color: #f56c6c;
+    }
+  }
+}
+
+.quick-amounts {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  margin-top: 24px;
+  padding-top: 16px;
+  border-top: 1px solid #ebeef5;
+}
+
+.step2-container {
+  .amount-info {
+    margin-bottom: 24px;
+    padding: 16px;
+    background: #f5f7fa;
+    border-radius: 4px;
+
+    .info-row {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 8px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .info-label {
+        color: #606266;
+      }
+
+      .info-value {
+        font-weight: 500;
+        color: #303133;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/capital/withdraw/index.vue b/src/views/capital/withdraw/index.vue
index 0ab090b..ed1b0da 100644
--- a/src/views/capital/withdraw/index.vue
+++ b/src/views/capital/withdraw/index.vue
@@ -1,330 +1,120 @@
 <template>
-    <div class="withdraw-page">
-        <!-- 第一步：输入页 -->
-        <div v-if="!isConfirmStep" class="withdraw-card">
-            <div class="page-title">{{ withdrawBaseInfo.channelName }}</div>
-
-            <!-- 输入表单：当前先做纯前端演示，后续可在此接入真实接口 -->
-            <el-form ref="withdrawFormRef" :model="withdrawForm" :rules="withdrawFormRules" label-position="top"
-                class="withdraw-form">
-                <el-form-item prop="withdrawAccount">
-                    <template #label>
-                        <span class="required-label">取款账户</span>
-                    </template>
-                    <el-input v-model="withdrawForm.withdrawAccount" disabled />
-                </el-form-item>
-
-                <el-form-item prop="currency">
-                    <template #label>
-                        <span class="required-label">支持币种</span>
-                    </template>
-                    <div class="currency-box">{{ withdrawForm.currency }}</div>
-                </el-form-item>
-
-                <el-form-item prop="amount">
-                    <template #label>
-                        <span class="required-label">取款金额</span>
-                    </template>
-
-                    <el-input v-model="withdrawForm.amount" placeholder="请输入金额">
-                        <template #prepend>{{ withdrawForm.currency }}</template>
-                    </el-input>
-
-                    <!-- 快捷金额：点击后直接回填金额输入框 -->
-                    <div class="quick-amounts">
-                        <el-button v-for="amount in withdrawQuickAmounts" :key="amount" plain size="small"
-                            @click="handleQuickAmount(amount)">
-                            {{ amount }}
-                        </el-button>
-                    </div>
-                </el-form-item>
-
-                <div class="action-row">
-                    <el-button type="primary" class="submit-btn" @click="handleNextStep">
-                        确认
-                    </el-button>
-                </div>
-            </el-form>
-        </div>
-
-        <!-- 第二步：收款信息页，展示你图里的表单结构 -->
-        <div v-else class="withdraw-card receive-card">
-            <el-form ref="receiveFormRef" :model="receiveForm" :rules="receiveFormRules" label-position="top"
-                class="withdraw-form receive-form">
-                <!-- 收款信息字段：由配置驱动渲染，方便后续增删字段 -->
-                <el-form-item v-for="field in withdrawReceiveFields" :key="field.prop" :prop="field.prop">
-                    <template #label>
-                        <span class="required-label">{{ field.label }}</span>
-                    </template>
-
-                    <el-input v-model="receiveForm[field.prop as keyof WithdrawReceiveFormData]" />
-                </el-form-item>
-
-                <!-- 第二步底部按钮：取消返回上一步，确定执行最终提交占位 -->
-                <div class="action-row confirm-actions">
-                    <el-button class="cancel-btn" @click="handleBackToEdit">取消</el-button>
-                    <el-button type="primary" class="submit-btn" @click="handleMockSubmit">确定</el-button>
-                </div>
-            </el-form>
-        </div>
-    </div>
+  <div class="withdraw-page">
+    <Table
+      ref="tableRef"
+      :table-data="tableData"
+      :columns="tableColumnsOptions"
+      row-key="id"
+      v-loading="tableLoading"
+      @rowClick="handleRowClick"
+    >
+      <template #action="{ row }">
+        <el-button type="primary" size="small" @click.stop="handleWithdraw(row)">取款</el-button>
+      </template>
+    </Table>
+    <Pagination
+      v-model:page="queryParams.page"
+      v-model:limit="queryParams.limit"
+      :total="total"
+      @pagination="getList"
+    />
+    <WithdrawDialog
+      :visible="withdrawDialogVisible"
+      :channel-id="currentChannelId"
+      :channel-info="currentChannelInfo"
+      @update:visible="withdrawDialogVisible = $event"
+      @success="handleWithdrawSuccess"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import Table from '@/components/common/Table.vue'
+import Pagination from '@/components/common/Pagination.vue'
+import WithdrawDialog from './components/WithdrawDialog.vue'
+import { tableColumns } from './options'
+import { getWithdrawChannel } from '@/api/modules/capital/withdraw'
 
 defineOptions({
   name: 'Withdraw'
 })
-import type { FormInstance, FormRules } from 'element-plus'
-import type { LocationQueryValue } from 'vue-router'
-import { ElMessage } from 'element-plus'
-import { computed, ref, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { withdrawBaseInfo, withdrawQuickAmounts, withdrawReceiveFields } from './options'
 
-// 第一步页面表单结构：当前只维护取款页本身所需字段。
-interface WithdrawFormData {
-    channelName: string
-    withdrawAccount: string
-    currency: string
-    amount: string
+interface TableRow {
+  id: number
+  name: string
+  channel_fee: string
+  api_url: string
+  api_appid: string
+  status: number
+  statusStr?: string
+  currency?: string
 }
 
-// 第二步收款信息结构：对应你提供截图中的表单项。
-interface WithdrawReceiveFormData {
-    bankName: string
-    bankAddress: string
-    swift: string
-    receiverName: string
-    receiverAccount: string
-    currencyType: string
-    receiverAddress: string
-    remark: string
-}
+const tableRef = ref()
+const tableData = ref<TableRow[]>([])
+const tableLoading = ref(false)
+const total = ref(0)
+const withdrawDialogVisible = ref(false)
+const currentChannelId = ref<number>()
+const currentChannelInfo = ref<{ id: number; name: string; currency?: string }>()
 
-const route = useRoute()
-const router = useRouter()
-const withdrawFormRef = ref<FormInstance>()
-const receiveFormRef = ref<FormInstance>()
-
-// 创建默认表单：首屏进入时使用本地静态值初始化。
-const createDefaultForm = (): WithdrawFormData => ({
-    channelName: withdrawBaseInfo.channelName,
-    withdrawAccount: withdrawBaseInfo.withdrawAccount,
-    currency: withdrawBaseInfo.currency,
-    amount: '',
+const queryParams = reactive({
+  page: 1,
+  limit: 10,
 })
 
-// 创建默认收款信息表单：第二步默认空白，货币类型会在读到 query 后自动同步。
-const createDefaultReceiveForm = (): WithdrawReceiveFormData => ({
-    bankName: '',
-    bankAddress: '',
-    swift: '',
-    receiverName: '',
-    receiverAccount: '',
-    currencyType: '',
-    receiverAddress: '',
-    remark: '',
+// 表格列配置
+const tableColumnsOptions = tableColumns
+
+// 获取列表数据
+const getList = async () => {
+  tableLoading.value = true
+  try {
+    const res: any = await getWithdrawChannel()
+    if (res) {
+      tableData.value = res.map((item: any) => ({
+        ...item,
+        statusStr: item.status === 1 ? '正常' : '禁用',
+      }))
+      total.value = res.length
+    }
+  } catch (error) {
+    console.error('获取列表失败', error)
+  } finally {
+    tableLoading.value = false
+  }
+}
+
+// 行点击
+const handleRowClick = (row: TableRow) => {
+  console.log('选中行', row)
+}
+
+// 取款按钮
+const handleWithdraw = (row: TableRow) => {
+  currentChannelId.value = row.id
+  currentChannelInfo.value = {
+    id: row.id,
+    name: row.name,
+    currency: row.currency || 'USD'
+  }
+  withdrawDialogVisible.value = true
+}
+
+// 取款成功回调
+const handleWithdrawSuccess = () => {
+  getList()
+}
+
+onMounted(() => {
+  getList()
 })
-
-const withdrawForm = ref<WithdrawFormData>(createDefaultForm())
-const receiveForm = ref<WithdrawReceiveFormData>(createDefaultReceiveForm())
-
-// 第一步校验规则：本页重点校验取款金额。
-const withdrawFormRules = ref<FormRules<WithdrawFormData>>({
-    amount: [
-        { required: true, message: '请输入取款金额', trigger: ['blur', 'change'] },
-        { pattern: /^\d+(\.\d{1,2})?$/, message: '金额格式不正确，最多保留2位小数', trigger: ['blur', 'change'] },
-    ],
-})
-
-// 第二步校验规则：所有字段按设计稿都作为必填项处理。
-const receiveFormRules = ref<FormRules<WithdrawReceiveFormData>>({
-    bankName: [{ required: true, message: '请输入收款银行名称', trigger: ['blur', 'change'] }],
-    bankAddress: [{ required: true, message: '请输入银行收款地址', trigger: ['blur', 'change'] }],
-    swift: [{ required: true, message: '请输入SWIFT', trigger: ['blur', 'change'] }],
-    receiverName: [{ required: true, message: '请输入收款人名称', trigger: ['blur', 'change'] }],
-    receiverAccount: [{ required: true, message: '请输入收款人账号', trigger: ['blur', 'change'] }],
-    currencyType: [{ required: true, message: '请输入货币类型', trigger: ['blur', 'change'] }],
-    receiverAddress: [{ required: true, message: '请输入收款人地址', trigger: ['blur', 'change'] }],
-    remark: [{ required: true, message: '请输入备注', trigger: ['blur', 'change'] }],
-})
-
-// 通过 query 中的 step 判断当前是否展示第二步页面。
-const isConfirmStep = computed(() => route.query.step === 'confirm')
-
-// 读取 query 参数时统一做兼容处理，避免 string / string[] 类型差异带来问题。
-const getQueryValue = (value: LocationQueryValue | LocationQueryValue[] | undefined, fallback = '') => {
-    if (Array.isArray(value)) {
-        return value[0] ?? fallback
-    }
-
-    return value ?? fallback
-}
-
-// 当路由参数变化时，把第一页参数同步回来；第二步的货币类型也默认带入第一页币种。
-const syncFormFromRoute = () => {
-    withdrawForm.value = {
-        channelName: getQueryValue(route.query.channelName, withdrawBaseInfo.channelName),
-        withdrawAccount: getQueryValue(route.query.withdrawAccount, withdrawBaseInfo.withdrawAccount),
-        currency: getQueryValue(route.query.currency, withdrawBaseInfo.currency),
-        amount: getQueryValue(route.query.amount),
-    }
-
-    receiveForm.value = {
-        ...createDefaultReceiveForm(),
-        currencyType: getQueryValue(route.query.currency, withdrawBaseInfo.currency),
-    }
-}
-
-watch(() => route.query, syncFormFromRoute, { immediate: true })
-
-// 快捷金额按钮：统一转成两位小数，和后续提交逻辑保持一致。
-const handleQuickAmount = (amount: string) => {
-    withdrawForm.value.amount = amount
-}
-
-// 点击确认后跳转到第二步，并通过 query 带上当前参数。
-const handleNextStep = async () => {
-    try {
-        await withdrawFormRef.value?.validate()
-
-        await router.push({
-            path: route.path,
-            query: {
-                step: 'confirm',
-                channelName: withdrawForm.value.channelName,
-                withdrawAccount: withdrawForm.value.withdrawAccount,
-                currency: withdrawForm.value.currency,
-                amount: withdrawForm.value.amount,
-            },
-        })
-    } catch (error) {
-        console.error('取款表单校验失败', error)
-    }
-}
-
-// 取消返回输入页：保留第一页参数，只移除步骤标记。
-const handleBackToEdit = async () => {
-    await router.push({
-        path: route.path,
-        query: {
-            channelName: withdrawForm.value.channelName,
-            withdrawAccount: withdrawForm.value.withdrawAccount,
-            currency: withdrawForm.value.currency,
-            amount: withdrawForm.value.amount,
-        },
-    })
-}
-
-// 最终提交占位：当前先校验第二步信息，并把两步数据合并后提示成功。
-const handleMockSubmit = async () => {
-    try {
-        await receiveFormRef.value?.validate()
-        ElMessage.success(`已提交取款信息，金额：${withdrawForm.value.currency} ${withdrawForm.value.amount}`)
-    } catch (error) {
-        console.error('收款信息表单校验失败', error)
-    }
-}
 </script>
 
 <style scoped lang="scss">
 .withdraw-page {
-    min-height: 100%;
-}
-
-.withdraw-card {
-    width: 420px;
-    padding: 24px 24px 28px;
-    background: #fff;
-    border-radius: 8px;
-    box-sizing: border-box;
-}
-
-.page-title {
-    margin-bottom: 24px;
-    font-size: 24px;
-    font-weight: 600;
-    color: #303133;
-}
-
-.withdraw-form {
-    :deep(.el-form-item) {
-        margin-bottom: 22px;
-    }
-
-    :deep(.el-form-item__label) {
-        padding-bottom: 10px;
-        font-size: 16px;
-        color: #303133;
-    }
-
-    :deep(.el-input__wrapper),
-    :deep(.el-input-group__prepend) {
-        height: 46px;
-        font-size: 14px;
-    }
-}
-
-.required-label {
-    position: relative;
-    padding-left: 12px;
-    font-size: 16px;
-    color: #303133;
-}
-
-.currency-box {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 92px;
-    height: 46px;
-    padding: 0 20px;
-    color: #303133;
-    background: #f5f7fa;
-    border: 1px solid #dcdfe6;
-    border-radius: 4px;
-    box-sizing: border-box;
-}
-
-.quick-amounts {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
-    margin-top: 12px;
-
-    :deep(.el-button) {
-        min-width: 66px;
-        margin-left: 0;
-    }
-}
-
-.action-row {
-    margin-top: 28px;
-}
-
-.submit-btn {
-    min-width: 96px;
-    height: 40px;
-}
-
-.receive-card {
-    width: 360px;
-}
-
-.receive-form {
-    :deep(.el-form-item) {
-        margin-bottom: 20px;
-    }
-}
-
-.confirm-actions {
-    display: flex;
-    gap: 18px;
-}
-
-.cancel-btn {
-    color: #3b82f6;
-    border-color: #3b82f6;
+  padding: 20px;
 }
 </style>
diff --git a/src/views/capital/withdraw/options.ts b/src/views/capital/withdraw/options.ts
index 0b30aa0..3d5da07 100644
--- a/src/views/capital/withdraw/options.ts
+++ b/src/views/capital/withdraw/options.ts
@@ -1,45 +1,23 @@
-// 取款页面的基础信息：当前先用本地静态数据，后续可替换成接口返回值。
-export const withdrawBaseInfo = {
-    channelName: '取款渠道名称',
-    withdrawAccount: '只能总钱包出账',
-    currency: 'USD',
-}
-
-// 快捷金额按钮：用于快速回填输入框。
-export const withdrawQuickAmounts = ['100.00', '500.00', '1000.00', '2000.00', '5000.00']
-
-// 第二步收款信息字段：统一由配置驱动，便于后续扩展或替换文案。
-export const withdrawReceiveFields = [
-    {
-        label: '收款银行名称',
-        prop: 'bankName',
-    },
-    {
-        label: '银行收款地址',
-        prop: 'bankAddress',
-    },
-    {
-        label: 'SWIFT',
-        prop: 'swift',
-    },
-    {
-        label: '收款人名称',
-        prop: 'receiverName',
-    },
-    {
-        label: '收款人账号',
-        prop: 'receiverAccount',
-    },
-    {
-        label: '货币类型',
-        prop: 'currencyType',
-    },
-    {
-        label: '收款人地址',
-        prop: 'receiverAddress',
-    },
-    {
-        label: '备注',
-        prop: 'remark',
-    },
+// 取款页面表格列配置
+export const tableColumns = [
+  // 序号
+  { label: '序号', type: 'index', width: 60, align: 'center' as const },
+  // 渠道名称
+  { label: '渠道名称', prop: 'name' },
+  // 渠道费用
+  { label: '渠道费用', prop: 'channel_fee' },
+  {
+    label: '出金货币',
+    prop: 'currency.symbol',
+    type: 'select',
+    placeholder: '请选择入金货币',
+  },
+  // 接口地址
+  { label: '接口地址', prop: 'api_url' },
+  // 接口appid
+  { label: '接口appid', prop: 'api_appid' },
+  // 状态
+  { label: '状态', prop: 'statusStr' },
+  // 操作
+  { label: '操作', prop: 'action', width: 100, slotName: 'action' as const },
 ]