feat(finance): 添加财务记录状态显示功能

- 在 API 类型定义中添加订单状态字段及其枚举值
- 更新桌面端财务记录表格界面,增加状态列并调整列宽布局
- 实现移动端财务记录表格的状态列显示和样式适配
- 添加财务记录状态的颜色标识和标签显示逻辑
- 在多语言文件中添加状态相关的翻译内容
- 修复充值组件中的金额字段引用错误
- 重构提现功能中的汇率计算逻辑,提高准确性
This commit is contained in:
JiaJun
2026-07-07 16:56:56 +08:00
parent 5cde1d8f6b
commit 1535cb243b
2 changed files with 36 additions and 58 deletions

View File

@@ -95,15 +95,13 @@ function DesktopFinanceRecordsTab({ enabled }: { enabled: boolean }) {
<div
className={cn(
'grid gap-design-10 rounded-md border border-[#2B8CA3]/35 bg-[#031B24]/75 px-design-16 py-design-12 text-design-16 text-[#7ECAD1]',
vm.recordType === 'withdraw'
? 'grid-cols-[minmax(0,1.45fr)_minmax(0,0.78fr)_minmax(0,0.78fr)_minmax(0,0.72fr)]'
: 'grid-cols-[minmax(0,1.55fr)_minmax(0,0.9fr)_minmax(0,0.9fr)]',
'grid-cols-[minmax(0,1.45fr)_minmax(0,0.78fr)_minmax(0,0.78fr)_minmax(0,0.72fr)]',
)}
>
<div>{vm.headers.orderNo}</div>
<div>{vm.headers.amount}</div>
<div>{vm.headers.bonusAmount}</div>
{vm.recordType === 'withdraw' ? <div>{vm.headers.status}</div> : null}
<div>{vm.headers.status}</div>
</div>
<div
@@ -143,9 +141,7 @@ function DesktopFinanceRecordsTab({ enabled }: { enabled: boolean }) {
<motion.div
className={cn(
'grid h-[calc(var(--design-unit)*62)] items-center gap-design-10 rounded-md bg-[#0A4252] px-design-16 py-design-14 text-design-18 text-[#C4F2F7] shadow-[inset_0_0_calc(var(--design-unit)*10)_rgba(108,205,207,0.05)]',
vm.recordType === 'withdraw'
? 'grid-cols-[minmax(0,1.45fr)_minmax(0,0.78fr)_minmax(0,0.78fr)_minmax(0,0.72fr)]'
: 'grid-cols-[minmax(0,1.55fr)_minmax(0,0.9fr)_minmax(0,0.9fr)]',
'grid-cols-[minmax(0,1.45fr)_minmax(0,0.78fr)_minmax(0,0.78fr)_minmax(0,0.72fr)]',
)}
initial={{ opacity: 0, y: 6 }}
animate={{ opacity: 1, y: 0 }}
@@ -163,24 +159,20 @@ function DesktopFinanceRecordsTab({ enabled }: { enabled: boolean }) {
<div className={'truncate text-[#7CFFCF]'}>
{item.bonusAmountLabel}
</div>
{vm.recordType === 'withdraw' ? (
<div>
<span
className={cn(
'inline-flex max-w-full items-center rounded-full border px-design-7 py-design-3 text-design-13 font-medium',
item.statusTone === 'approved'
? 'border-[#5BEA99]/35 bg-[#0F593A]/55 text-[#7CFFCF]'
: item.statusTone === 'rejected'
? 'border-[#F47C7C]/35 bg-[#5D1E24]/55 text-[#FF9C9C]'
: 'border-[#F0B44A]/35 bg-[#5D441E]/55 text-[#FFD583]',
)}
>
<span className="truncate">
{item.statusLabel}
</span>
</span>
</div>
) : null}
<div>
<span
className={cn(
'inline-flex max-w-full items-center rounded-full border px-design-7 py-design-3 text-design-13 font-medium',
item.statusTone === 'approved'
? 'border-[#5BEA99]/35 bg-[#0F593A]/55 text-[#7CFFCF]'
: item.statusTone === 'rejected'
? 'border-[#F47C7C]/35 bg-[#5D1E24]/55 text-[#FF9C9C]'
: 'border-[#F0B44A]/35 bg-[#5D441E]/55 text-[#FFD583]',
)}
>
<span className="truncate">{item.statusLabel}</span>
</span>
</div>
</motion.div>
) : (
<DataLoadingIndicator

View File

@@ -98,27 +98,17 @@ function MobileFinanceRecordsTab({ enabled }: { enabled: boolean }) {
</div>
<div className="min-h-0 flex-1 overflow-x-auto rounded-md">
<div
className={cn(
vm.recordType === 'withdraw'
? 'min-w-design-410'
: 'min-w-design-330',
)}
>
<div className={cn('min-w-design-410')}>
<div
className={cn(
'grid gap-design-6 rounded-md border border-[#2B8CA3]/35 bg-[#031B24]/75 px-design-10 py-design-8 text-design-12 text-[#7ECAD1]',
vm.recordType === 'withdraw'
? 'grid-cols-[minmax(0,1.45fr)_minmax(0,0.75fr)_minmax(0,0.75fr)_minmax(0,0.72fr)]'
: 'grid-cols-[minmax(0,1.55fr)_minmax(0,0.9fr)_minmax(0,0.9fr)]',
'grid-cols-[minmax(0,1.45fr)_minmax(0,0.75fr)_minmax(0,0.75fr)_minmax(0,0.72fr)]',
)}
>
<div>{vm.headers.orderNo}</div>
<div>{vm.headers.amount}</div>
<div>{vm.headers.bonusAmount}</div>
{vm.recordType === 'withdraw' ? (
<div>{vm.headers.status}</div>
) : null}
<div>{vm.headers.status}</div>
</div>
<div
@@ -156,9 +146,7 @@ function MobileFinanceRecordsTab({ enabled }: { enabled: boolean }) {
<motion.div
className={cn(
'grid h-design-45 items-center gap-design-6 rounded-md bg-[#0A4252] px-design-10 py-design-8 text-design-12 text-[#C4F2F7] shadow-[inset_0_0_calc(var(--design-unit)*10)_rgba(108,205,207,0.05)]',
vm.recordType === 'withdraw'
? 'grid-cols-[minmax(0,1.45fr)_minmax(0,0.75fr)_minmax(0,0.75fr)_minmax(0,0.72fr)]'
: 'grid-cols-[minmax(0,1.55fr)_minmax(0,0.9fr)_minmax(0,0.9fr)]',
'grid-cols-[minmax(0,1.45fr)_minmax(0,0.75fr)_minmax(0,0.75fr)_minmax(0,0.72fr)]',
)}
initial={{ opacity: 0, y: 6 }}
animate={{ opacity: 1, y: 0 }}
@@ -179,24 +167,22 @@ function MobileFinanceRecordsTab({ enabled }: { enabled: boolean }) {
<div className="truncate text-[#7CFFCF]">
{item.bonusAmountLabel}
</div>
{vm.recordType === 'withdraw' ? (
<div>
<span
className={cn(
'inline-flex max-w-full items-center rounded-full border px-design-5 py-design-2 text-design-9 font-medium',
item.statusTone === 'approved'
? 'border-[#5BEA99]/35 bg-[#0F593A]/55 text-[#7CFFCF]'
: item.statusTone === 'rejected'
? 'border-[#F47C7C]/35 bg-[#5D1E24]/55 text-[#FF9C9C]'
: 'border-[#F0B44A]/35 bg-[#5D441E]/55 text-[#FFD583]',
)}
>
<span className="truncate">
{item.statusLabel}
</span>
<div>
<span
className={cn(
'inline-flex max-w-full items-center rounded-full border px-design-5 py-design-2 text-design-9 font-medium',
item.statusTone === 'approved'
? 'border-[#5BEA99]/35 bg-[#0F593A]/55 text-[#7CFFCF]'
: item.statusTone === 'rejected'
? 'border-[#F47C7C]/35 bg-[#5D1E24]/55 text-[#FF9C9C]'
: 'border-[#F0B44A]/35 bg-[#5D441E]/55 text-[#FFD583]',
)}
>
<span className="truncate">
{item.statusLabel}
</span>
</div>
) : null}
</span>
</div>
</motion.div>
) : (
<DataLoadingIndicator