75 lines
2.1 KiB
Vue
75 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
type BonusCardStat = {
|
|
label: string;
|
|
value: string;
|
|
};
|
|
|
|
type BonusCardLink = {
|
|
id: string;
|
|
refereeName: string;
|
|
refereeEmail: string;
|
|
refereeCompanyName?: string | null;
|
|
bonusPercent: number;
|
|
};
|
|
|
|
withDefaults(defineProps<{
|
|
fullName: string;
|
|
email?: string;
|
|
companyName?: string | null;
|
|
balance: number;
|
|
stats?: BonusCardStat[];
|
|
sourceLinks?: BonusCardLink[];
|
|
}>(), {
|
|
email: '',
|
|
companyName: null,
|
|
stats: () => [],
|
|
sourceLinks: () => [],
|
|
});
|
|
|
|
function formatAmount(value: number) {
|
|
return new Intl.NumberFormat('ru-RU', {
|
|
minimumFractionDigits: 0,
|
|
maximumFractionDigits: 2,
|
|
}).format(value);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<article class="surface-card rounded-[32px] p-6">
|
|
<div class="space-y-1">
|
|
<h1 class="text-2xl font-bold leading-tight text-[#123824]">{{ fullName }}</h1>
|
|
<p v-if="companyName || email" class="text-sm text-[#5c7b69]">
|
|
{{ companyName || email }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mt-6 grid gap-3 md:grid-cols-2 xl:grid-cols-4">
|
|
<div
|
|
v-for="stat in stats"
|
|
:key="stat.label"
|
|
class="rounded-[24px] bg-[#f6fbf8] px-4 py-4"
|
|
>
|
|
<p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">{{ stat.label }}</p>
|
|
<p class="mt-2 text-xl font-bold leading-none text-[#123824]">{{ stat.value }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-6 rounded-[24px] bg-[#f6fbf8] px-4 py-4">
|
|
<p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Доступный бонус</p>
|
|
<p class="mt-2 text-3xl font-black leading-none text-[#123824]">{{ formatAmount(balance) }}</p>
|
|
</div>
|
|
|
|
<div v-if="sourceLinks.length" class="mt-6 space-y-2">
|
|
<div
|
|
v-for="link in sourceLinks"
|
|
:key="link.id"
|
|
class="rounded-[24px] bg-[#f6fbf8] px-4 py-4 text-sm text-[#355947]"
|
|
>
|
|
<p class="font-semibold text-[#123824]">{{ link.refereeName }}</p>
|
|
<p class="mt-1">{{ link.refereeCompanyName || link.refereeEmail }}</p>
|
|
<p class="mt-2 text-xs text-[#5c7b69]">Бонус {{ link.bonusPercent }}%</p>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</template>
|