84 lines
2.5 KiB
Vue
84 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import api from '../api';
|
|
import { formatMoney } from '../utils/localeDisplay';
|
|
|
|
const { t, locale } = useI18n();
|
|
const transactions = ref<
|
|
Array<{ transactionType: string; amount: string; createdAt: string; transactionId?: string }>
|
|
>([]);
|
|
|
|
const TX_KEY_MAP: Record<string, string> = {
|
|
MANUAL_DEPOSIT: 'wallet.tx_deposit',
|
|
MANUAL_WITHDRAW: 'wallet.tx_withdraw',
|
|
MANUAL_ADJUST: 'wallet.tx_adjust',
|
|
BET_FREEZE: 'wallet.tx_bet_freeze',
|
|
BET_DEDUCT: 'wallet.tx_bet_deduct',
|
|
BET_SETTLE_WIN: 'wallet.tx_bet_win',
|
|
BET_SETTLE_LOSE: 'wallet.tx_bet_lose',
|
|
BET_SETTLE_PUSH: 'wallet.tx_bet_push',
|
|
BET_WIN: 'wallet.tx_bet_win',
|
|
BET_REFUND: 'wallet.tx_bet_refund',
|
|
BET_VOID: 'wallet.tx_bet_void',
|
|
BET_VOID_REFUND: 'wallet.tx_bet_void',
|
|
CASHBACK: 'wallet.tx_cashback',
|
|
RESETTLE_REVERSE: 'wallet.tx_resettle',
|
|
DEPOSIT: 'wallet.tx_deposit',
|
|
WITHDRAW: 'wallet.tx_withdraw',
|
|
};
|
|
|
|
function txLabel(type: string): string {
|
|
const key = TX_KEY_MAP[type.toUpperCase()];
|
|
if (key) {
|
|
const translated = t(key);
|
|
if (translated !== key) return translated;
|
|
}
|
|
return type;
|
|
}
|
|
|
|
onMounted(async () => {
|
|
const { data } = await api.get('/player/wallet/transactions');
|
|
transactions.value = data.data.items ?? [];
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<h2 class="section-title">{{ t('nav.wallet') }}</h2>
|
|
<div v-if="transactions.length" class="card">
|
|
<div
|
|
v-for="tx in transactions"
|
|
:key="tx.transactionId ?? tx.createdAt"
|
|
class="tx-row"
|
|
>
|
|
<span class="tx-type">{{ txLabel(tx.transactionType) }}</span>
|
|
<span :class="parseFloat(tx.amount) >= 0 ? 'pos' : 'neg'">
|
|
{{ formatMoney(tx.amount, locale) }}
|
|
</span>
|
|
<span class="tx-time">{{ new Date(tx.createdAt).toLocaleString() }}</span>
|
|
</div>
|
|
</div>
|
|
<div v-else class="empty">{{ t('wallet.no_records') }}</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.tx-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 14px;
|
|
padding: 12px 0;
|
|
border-bottom: 1px solid var(--border);
|
|
flex-wrap: wrap;
|
|
}
|
|
.tx-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.tx-type { font-weight: 700; color: var(--text); }
|
|
.pos { color: var(--primary-light); font-weight: 800; font-size: 15px; }
|
|
.neg { color: var(--danger); font-weight: 700; }
|
|
.tx-time { width: 100%; font-size: 11px; color: var(--text-muted); margin-top: 4px; }
|
|
.empty { text-align: center; color: var(--text-muted); padding: 40px 16px; font-weight: 600; }
|
|
</style>
|