148 lines
3.6 KiB
Vue
148 lines
3.6 KiB
Vue
<script setup lang="ts">
|
||
import { useI18n } from 'vue-i18n';
|
||
import DesktopDetailModalShell from './DesktopDetailModalShell.vue';
|
||
import { formatMoney, formatMoneyCompact } from '../../utils/localeDisplay';
|
||
import type { CashbackRecord } from '../../utils/cashback';
|
||
|
||
const props = defineProps<{
|
||
visible: boolean;
|
||
record: CashbackRecord | null;
|
||
}>();
|
||
|
||
const emit = defineEmits<{
|
||
'update:visible': [value: boolean];
|
||
}>();
|
||
|
||
const { t, locale } = useI18n();
|
||
|
||
function formatPeriod(start: string, end: string) {
|
||
const opts: Intl.DateTimeFormatOptions = { month: '2-digit', day: '2-digit' };
|
||
const s = new Date(start).toLocaleDateString(locale.value, opts);
|
||
const e = new Date(end).toLocaleDateString(locale.value, opts);
|
||
return `${s} – ${e}`;
|
||
}
|
||
|
||
function formatRate(rate: string) {
|
||
const n = parseFloat(rate);
|
||
if (!Number.isFinite(n)) return rate;
|
||
return `${(n * 100).toFixed(2)}%`;
|
||
}
|
||
|
||
function formatTime(value: string | null) {
|
||
if (!value) return '—';
|
||
return new Date(value).toLocaleString(locale.value, {
|
||
month: '2-digit',
|
||
day: '2-digit',
|
||
hour: '2-digit',
|
||
minute: '2-digit',
|
||
hour12: false,
|
||
});
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<DesktopDetailModalShell
|
||
:visible="visible"
|
||
:title="t('cashback.title')"
|
||
@update:visible="emit('update:visible', $event)"
|
||
>
|
||
<template v-if="record">
|
||
<div class="hero">
|
||
<div class="amount-hero">{{ formatMoney(record.amount, locale) }}</div>
|
||
<div class="batch-no">{{ record.batchNo }}</div>
|
||
</div>
|
||
|
||
<div class="detail-rows">
|
||
<div class="detail-row">
|
||
<span class="row-label">{{ t('cashback.period') }}</span>
|
||
<span class="row-val">{{ formatPeriod(record.periodStart, record.periodEnd) }}</span>
|
||
</div>
|
||
<div class="detail-row">
|
||
<span class="row-label">{{ t('cashback.effective_stake') }}</span>
|
||
<span class="row-val">{{ formatMoneyCompact(record.effectiveStake, locale) }}</span>
|
||
</div>
|
||
<div class="detail-row">
|
||
<span class="row-label">{{ t('cashback.rate') }}</span>
|
||
<span class="row-val">{{ formatRate(record.rate) }}</span>
|
||
</div>
|
||
<div class="detail-row">
|
||
<span class="row-label">{{ t('wallet.time') }}</span>
|
||
<span class="row-val muted">{{ formatTime(record.confirmedAt ?? record.createdAt) }}</span>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<div v-else class="state">{{ t('common.not_found') }}</div>
|
||
</DesktopDetailModalShell>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.state {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 48px 20px;
|
||
color: var(--text-muted);
|
||
font-size: 13px;
|
||
}
|
||
|
||
.hero {
|
||
padding: 20px 20px 16px;
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||
background: #162d36;
|
||
}
|
||
|
||
.amount-hero {
|
||
font-size: 30px;
|
||
font-weight: 800;
|
||
font-variant-numeric: tabular-nums;
|
||
font-family: 'SF Mono', 'Consolas', monospace;
|
||
color: var(--primary-light);
|
||
line-height: 1.1;
|
||
}
|
||
|
||
.batch-no {
|
||
margin-top: 6px;
|
||
font-family: 'SF Mono', 'Consolas', monospace;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.detail-rows {
|
||
padding: 4px 0 12px;
|
||
background: #1a323c;
|
||
}
|
||
|
||
.detail-row {
|
||
display: flex;
|
||
gap: 16px;
|
||
padding: 11px 20px;
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
|
||
}
|
||
|
||
.detail-row:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.row-label {
|
||
width: 108px;
|
||
flex-shrink: 0;
|
||
font-size: 12px;
|
||
color: var(--text-muted);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.row-val {
|
||
flex: 1;
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
color: var(--text);
|
||
}
|
||
|
||
.row-val.muted {
|
||
color: var(--text-muted);
|
||
font-weight: 600;
|
||
}
|
||
</style>
|