优化

src/modules/finance/api/account.ts

@@ -78,11 +78,6 @@ export interface RechargeRequest {
   reviewedAt: string | null
 }
 
-export interface RechargeChannel {
-  enabled: boolean
-  qrCodeUrl: string | null
-}
-
 export function getFinanceAccount() {
   return apiRequest<FinanceAccount>({ method: 'GET', url: '/client/finance/v1/account' })
 }
@@ -105,10 +100,6 @@ export async function getRechargeRequests(page: number, size: number) {
   return normalizePageResult(result)
 }
 
-export function getRechargeChannel() {
-  return apiRequest<RechargeChannel>({ method: 'GET', url: '/client/finance/v1/recharge-channel' })
-}
-
 export function createRechargeRequest(amount: string, file: File, idempotencyKey: string) {
   const formData = new FormData()
   formData.append('amount', amount)

src/modules/finance/views/FinanceAccountView.test.mjs

@@ -8,7 +8,7 @@ const routesSource = readFileSync(new URL('../routes.ts', import.meta.url), 'utf
 const permissionsSource = readFileSync(new URL('../../tenant-management/contracts.ts', import.meta.url), 'utf8')
 
 test('uses only authenticated client finance account endpoints without customer scope', () => {
-  for (const path of ['/client/finance/v1/account', '/client/finance/v1/account/ledger', '/client/finance/v1/recharge-requests', '/client/finance/v1/recharge-channel']) {
+  for (const path of ['/client/finance/v1/account', '/client/finance/v1/account/ledger', '/client/finance/v1/recharge-requests']) {
     assert.match(apiSource, new RegExp(path.replaceAll('/', '\\/')))
   }
   assert.match(apiSource, /headers: \{ 'Idempotency-Key': idempotencyKey \}/)
@@ -54,8 +54,9 @@ test('renders server balances, ledger and recharge states without internal ident
 
 test('matches the frozen recharge workflow and preserves an idempotency key for failed retries', () => {
   assert.match(viewSource, /title="账户充值" width="760px"/)
-  for (const amount of ['50.00', '100.00', '200.00', '500.00']) assert.match(viewSource, new RegExp(amount.replace('.', '\\.')))
-  assert.match(viewSource, /rechargeChannel\.value\?\.enabled && rechargeChannel\.value\.qrCodeUrl/)
+  for (const amount of ['1000', '5000', '20000', '50000']) assert.match(viewSource, new RegExp(amount))
+  assert.match(viewSource, /自定义/)
+  assert.match(viewSource, /src="\/customer-recharge-qr\.png"/)
   assert.match(viewSource, /alt="平台收款二维码"/)
   assert.match(viewSource, /请扫描平台收款二维码，付款后上传截图。/)
   assert.match(viewSource, /accept="\.jpg,\.jpeg,\.png,image\/jpeg,image\/png"/)

src/modules/finance/views/FinanceAccountView.vue

@@ -9,12 +9,10 @@ import {
   createRechargeRequest,
   getAccountLedger,
   getFinanceAccount,
-  getRechargeChannel,
   getRechargeRequests,
   type AccountChangeType,
   type AccountLedgerEntry,
   type FinanceAccount,
-  type RechargeChannel,
   type RechargeRequest,
   type RechargeStatus,
 } from '../api/account'
@@ -23,10 +21,9 @@ const auth = useAuthStore()
 const account = ref<FinanceAccount | null>(null)
 const ledger = ref<AccountLedgerEntry[]>([])
 const rechargeRequests = ref<RechargeRequest[]>([])
-const rechargeChannel = ref<RechargeChannel | null>(null)
 const pageLoading = ref(false)
 const pageError = ref('')
-const channelsError = ref('')
+const qrCodeLoadError = ref(false)
 const ledgerPage = ref(1)
 const ledgerTotal = ref(0)
 const ledgerPageSize = ref(10)
@@ -40,10 +37,11 @@ const voucherFile = ref<File | null>(null)
 const voucherUpload = ref<UploadInstance>()
 let pendingIdempotencyKey = ''
 
-const form = reactive({ amount: '100.00' })
-const quickAmounts = ['50.00', '100.00', '200.00', '500.00']
+const form = reactive({ amount: '1000' })
+const quickAmounts = ['1000', '5000', '20000', '50000']
+const amountMode = ref<'preset' | 'custom'>('preset')
 const canRecharge = computed(() => auth.hasPermission('merchant:finance:recharge:create'))
-const channelReady = computed(() => Boolean(rechargeChannel.value?.enabled && rechargeChannel.value.qrCodeUrl))
+const channelReady = computed(() => !qrCodeLoadError.value)
 const amountValid = computed(() => {
   const value = Number(form.amount)
   return Number.isFinite(value) && value > 0 && /^\d+(?:\.\d{1,2})?$/.test(form.amount.trim())
@@ -106,7 +104,7 @@ function amountClass(amount: string) {
 async function loadAccountData() {
   pageLoading.value = true
   pageError.value = ''
-  channelsError.value = ''
+  qrCodeLoadError.value = false
   const requests = [getFinanceAccount(), getAccountLedger(ledgerPage.value, ledgerPageSize.value), getRechargeRequests(rechargePage.value, rechargePageSize.value)] as const
   try {
     const [accountResult, ledgerResult, rechargeResult] = await Promise.all(requests)
@@ -125,14 +123,6 @@ async function loadAccountData() {
   } finally {
     pageLoading.value = false
   }
-  if (canRecharge.value) {
-    try {
-      rechargeChannel.value = await getRechargeChannel()
-    } catch (error) {
-      rechargeChannel.value = null
-      channelsError.value = messageOf(error, '收款二维码加载失败，请稍后重试')
-    }
-  }
 }
 
 async function changeLedgerPage(nextPage: number) {
@@ -157,13 +147,26 @@ async function changeRechargePage(nextPage: number) {
 
 function openRecharge() {
   submitError.value = ''
+  qrCodeLoadError.value = false
+  amountMode.value = 'preset'
+  form.amount = '1000'
   rechargeVisible.value = true
 }
 
+function handleQrCodeError() {
+  qrCodeLoadError.value = true
+}
+
 function chooseAmount(amount: string) {
+  amountMode.value = 'preset'
   form.amount = amount
 }
 
+function chooseCustomAmount() {
+  amountMode.value = 'custom'
+  if (quickAmounts.includes(form.amount)) form.amount = ''
+}
+
 function handleVoucherChange(uploadFile: UploadFile, _uploadFiles: UploadFiles) {
   const file = uploadFile.raw
   if (!file) return
@@ -276,16 +279,17 @@ onMounted(() => { void loadAccountData() })
     <el-dialog v-model="rechargeVisible" title="账户充值" width="760px" :close-on-click-modal="false" :close-on-press-escape="!submitting" :show-close="!submitting" class="recharge-dialog">
       <div class="recharge-form">
         <label class="field-label" for="recharge-amount">充值金额</label>
-        <el-input id="recharge-amount" v-model="form.amount" size="large" inputmode="decimal" placeholder="请输入充值金额" aria-label="充值金额"><template #prefix>¥</template></el-input>
+        <el-input v-if="amountMode === 'custom'" id="recharge-amount" v-model="form.amount" size="large" inputmode="decimal" placeholder="请输入充值金额" aria-label="充值金额"><template #prefix>¥</template></el-input>
         <div class="quick-amounts" aria-label="快捷充值金额">
-          <button v-for="amount in quickAmounts" :key="amount" type="button" :class="{ active: form.amount === amount }" @click="chooseAmount(amount)">¥{{ Number(amount) }}</button>
+          <button v-for="amount in quickAmounts" :key="amount" type="button" :class="{ active: amountMode === 'preset' && form.amount === amount }" @click="chooseAmount(amount)">¥{{ Number(amount).toLocaleString() }}</button>
+          <button type="button" :class="{ active: amountMode === 'custom' }" @click="chooseCustomAmount">自定义</button>
         </div>
 
-        <div v-if="channelsError" class="channel-warning" role="alert">{{ channelsError }}</div>
-        <div v-else-if="channelReady" class="qr-panel">
-          <img :src="rechargeChannel?.qrCodeUrl || ''" alt="平台收款二维码">
+        <div v-if="channelReady" class="qr-panel">
+          <img src="/customer-recharge-qr.png" alt="平台收款二维码" @error="handleQrCodeError">
           <div><strong>扫码付款</strong><p>请扫描平台收款二维码，付款后上传截图。</p></div>
         </div>
+        <div v-else-if="qrCodeLoadError" class="channel-warning" role="alert">平台收款二维码资源不可用，请联系管理员更新二维码</div>
         <div v-else class="channel-warning" role="status">收款二维码尚未配置，暂不能提交充值申请。</div>
 
         <div class="voucher-upload">
@@ -317,7 +321,7 @@ onMounted(() => { void loadAccountData() })
 .amount-positive { color: #078a72; }.amount-negative { color: #b42318; }
 .account-state { display: flex; min-height: 240px; align-items: center; justify-content: center; flex-direction: column; gap: 12px; border-radius: 8px; }.account-state--error { border: 1px solid #f5c2bd; background: #fff8f7; color: #b42318; }.account-state p { margin: 0; }
 .recharge-form { display: flex; flex-direction: column; gap: 16px; }.field-label { color: #4e6075; font-size: 14px; font-weight: 650; }
-.quick-amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }.quick-amounts button { min-height: 54px; border: 1px solid #dbe3ed; border-radius: 10px; background: #f8fafc; color: #506077; cursor: pointer; font: inherit; }.quick-amounts button.active { border: 2px solid #1671c9; background: #eef8f7; color: #1467b8; font-weight: 700; }
+.quick-amounts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }.quick-amounts button { min-height: 54px; border: 1px solid #dbe3ed; border-radius: 10px; background: #f8fafc; color: #506077; cursor: pointer; font: inherit; }.quick-amounts button.active { border: 2px solid #1671c9; background: #eef8f7; color: #1467b8; font-weight: 700; }
 .qr-panel { display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: center; gap: 24px; padding: 20px; border: 1px solid #dbe3ed; border-radius: 12px; background: #f8fafc; }.qr-panel img { width: 210px; height: 210px; border: 1px solid #dae3ed; border-radius: 10px; background: #fff; object-fit: contain; }.qr-panel strong { color: var(--navy); font-size: 17px; }.qr-panel p { margin: 8px 0 0; color: #62758d; }
 .channel-warning { padding: 24px; border: 1px solid #f0d39b; border-radius: 10px; background: #fff9ed; color: #8b5b12; text-align: center; }.voucher-upload { display: grid; gap: 10px; }.voucher-upload :deep(.el-button) { display: inline-flex; align-items: center; gap: 6px; }.submit-error { margin: 0; color: #b42318; font-size: 13px; }.dialog-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }.dialog-actions .el-button { min-height: 46px; margin: 0; }
 @media (max-width: 1200px) { .balance-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }.balance-summary article { border-bottom: 1px solid var(--client-border); }.balance-summary article:nth-child(3n) { border-right: 0; }.balance-summary article:nth-last-child(-n + 3) { border-bottom: 0; } }