62 lines
2.1 KiB
Vue
62 lines
2.1 KiB
Vue
<script setup lang="ts">
|
||
import { onMounted, ref } from 'vue'
|
||
|
||
import { fetchWalletBalance, fetchWalletLedger, type WalletAccount, type WalletLedger } from '@/api/wallet'
|
||
import { formatDateTime } from '@/utils/time'
|
||
|
||
const loading = ref(false)
|
||
const account = ref<WalletAccount | null>(null)
|
||
const ledger = ref<WalletLedger[]>([])
|
||
|
||
onMounted(loadWallet)
|
||
|
||
async function loadWallet() {
|
||
loading.value = true
|
||
try {
|
||
const [balance, rows] = await Promise.all([fetchWalletBalance(), fetchWalletLedger()])
|
||
account.value = balance
|
||
ledger.value = rows
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<section class="page" v-loading="loading">
|
||
<div class="page-header">
|
||
<p class="eyebrow">Wallet</p>
|
||
<h1>钱包</h1>
|
||
<p>查看可用余额、冻结余额和不可变资金流水。当前是开发态模拟账务，不代表真实支付余额。</p>
|
||
</div>
|
||
|
||
<div v-if="account" class="metric-grid">
|
||
<div class="metric-card">
|
||
<span>可用余额</span>
|
||
<strong>¥{{ account.available_balance }}</strong>
|
||
</div>
|
||
<div class="metric-card">
|
||
<span>冻结余额</span>
|
||
<strong>¥{{ account.frozen_balance }}</strong>
|
||
</div>
|
||
<div class="metric-card">
|
||
<span>状态</span>
|
||
<strong>{{ account.status }}</strong>
|
||
</div>
|
||
</div>
|
||
|
||
<el-table class="table-panel" :data="ledger">
|
||
<el-table-column prop="ledger_no" label="流水号" min-width="220" />
|
||
<el-table-column prop="biz_type" label="业务" width="140" />
|
||
<el-table-column prop="direction" label="方向" width="80" />
|
||
<el-table-column prop="amount" label="金额" width="100" />
|
||
<el-table-column prop="balance_type" label="余额类型" width="110" />
|
||
<el-table-column prop="balance_after" label="变化后余额" width="130" />
|
||
<el-table-column prop="remark" label="备注" min-width="220" />
|
||
<el-table-column label="时间" width="180">
|
||
<template #default="{ row }">{{ formatDateTime(row.created_at) }}</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</section>
|
||
</template>
|