51 lines
1.2 KiB
Vue
51 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* 文件职责：交易流水统计卡片展示。
|
|
*/
|
|
import type { FinanceTransactionStatsDto } from '#/api/finance';
|
|
|
|
import { IconifyIcon } from '@vben/icons';
|
|
|
|
import { formatCurrency } from '../composables/transaction-page/helpers';
|
|
|
|
interface Props {
|
|
stats: FinanceTransactionStatsDto;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="ft-stats">
|
|
<div class="ft-stat-card">
|
|
<div class="ft-stat-label">
|
|
<IconifyIcon icon="lucide:trending-up" class="ft-stat-icon" />
|
|
总收入
|
|
</div>
|
|
<div class="ft-stat-value is-green">
|
|
{{ formatCurrency(props.stats.totalIncome) }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ft-stat-card">
|
|
<div class="ft-stat-label">
|
|
<IconifyIcon icon="lucide:undo-2" class="ft-stat-icon" />
|
|
总退款
|
|
</div>
|
|
<div class="ft-stat-value is-red">
|
|
{{ formatCurrency(props.stats.totalRefund) }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ft-stat-card">
|
|
<div class="ft-stat-label">
|
|
<IconifyIcon icon="lucide:receipt" class="ft-stat-icon" />
|
|
交易笔数
|
|
</div>
|
|
<div class="ft-stat-value">
|
|
{{ props.stats.totalCount }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|