admin
9d580a6bb7
- 所有页面统一使用 BasicPage 组件 - 添加面包屑导航支持 - 统一页面标题和描述样式 - 移除控制台页面的应用管理快捷链接 - 优化卡密管理、用户管理、财务管理页面布局
136 lines
3.8 KiB
Vue
136 lines
3.8 KiB
Vue
<script setup lang="ts">
|
|
import { ArrowDownLeft, ArrowUpRight, Loader2, Receipt, RotateCcw } from 'lucide-vue-next'
|
|
import { onMounted, ref } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
import { BasicPage } from '@/components/global-layout'
|
|
import api from '@/services/api'
|
|
|
|
const { t } = useI18n()
|
|
|
|
interface Transaction {
|
|
id: number
|
|
type: string
|
|
amount: number
|
|
description: string
|
|
balance: number
|
|
created_at: string
|
|
}
|
|
|
|
const loading = ref(true)
|
|
const balance = ref(0)
|
|
const transactions = ref<Transaction[]>([])
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
const data = await api.get<{ balance: number, transactions: Transaction[] }>('/agent/finance')
|
|
balance.value = data?.balance || 0
|
|
transactions.value = data?.transactions || []
|
|
}
|
|
catch (error) {
|
|
console.error('Load finance data failed:', error)
|
|
}
|
|
finally {
|
|
loading.value = false
|
|
}
|
|
})
|
|
|
|
function formatDate(dateStr: string) {
|
|
return new Date(dateStr).toLocaleString()
|
|
}
|
|
|
|
function getTypeLabel(type: string) {
|
|
const map: Record<string, string> = {
|
|
recharge: '充值',
|
|
consume: '消费',
|
|
refund: '退款',
|
|
}
|
|
return map[type] || type
|
|
}
|
|
|
|
function getTypeClass(type: string) {
|
|
const map: Record<string, string> = {
|
|
recharge: 'text-green-500',
|
|
consume: 'text-red-500',
|
|
refund: 'text-blue-500',
|
|
}
|
|
return map[type] || ''
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<BasicPage
|
|
:title="t('nav.finance')"
|
|
description="财务管理"
|
|
sticky
|
|
>
|
|
<div class="grid gap-4 md:grid-cols-3">
|
|
<UiCard>
|
|
<UiCardHeader class="pb-2">
|
|
<UiCardTitle class="text-sm font-medium">
|
|
账户余额
|
|
</UiCardTitle>
|
|
</UiCardHeader>
|
|
<UiCardContent>
|
|
<div class="text-3xl font-bold">
|
|
¥{{ balance.toFixed(2) }}
|
|
</div>
|
|
</UiCardContent>
|
|
</UiCard>
|
|
</div>
|
|
|
|
<UiCard class="mt-6">
|
|
<UiCardHeader>
|
|
<UiCardTitle>交易记录</UiCardTitle>
|
|
</UiCardHeader>
|
|
<UiCardContent class="p-0">
|
|
<div v-if="loading" class="flex items-center justify-center py-12">
|
|
<Loader2 class="size-8 animate-spin text-muted-foreground" />
|
|
</div>
|
|
|
|
<div v-else-if="transactions.length === 0" class="text-center py-12 text-muted-foreground">
|
|
<Receipt class="size-16 mx-auto mb-4 opacity-30" />
|
|
<p>暂无交易记录</p>
|
|
</div>
|
|
|
|
<div v-else class="divide-y">
|
|
<div
|
|
v-for="tx in transactions"
|
|
:key="tx.id"
|
|
class="flex items-center justify-between p-4 hover:bg-muted/30"
|
|
>
|
|
<div class="flex items-center gap-4">
|
|
<div
|
|
class="size-10 rounded-xl flex items-center justify-center"
|
|
:class="tx.type === 'recharge' ? 'bg-green-500/10' : tx.type === 'refund' ? 'bg-blue-500/10' : 'bg-red-500/10'"
|
|
>
|
|
<component
|
|
:is="tx.type === 'recharge' ? ArrowDownLeft : tx.type === 'refund' ? RotateCcw : ArrowUpRight"
|
|
:class="getTypeClass(tx.type)"
|
|
class="size-5"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<p class="font-medium">
|
|
{{ tx.description || getTypeLabel(tx.type) }}
|
|
</p>
|
|
<p class="text-xs text-muted-foreground">
|
|
{{ formatDate(tx.created_at) }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<p :class="getTypeClass(tx.type)" class="font-semibold text-lg">
|
|
{{ tx.type === 'recharge' || tx.type === 'refund' ? '+' : '-' }}¥{{ tx.amount.toFixed(2) }}
|
|
</p>
|
|
<p class="text-xs text-muted-foreground">
|
|
余额: ¥{{ tx.balance.toFixed(2) }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</UiCardContent>
|
|
</UiCard>
|
|
</BasicPage>
|
|
</template>
|