96 lines
2.8 KiB
Vue
96 lines
2.8 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[];
|
||
detailTo?: string;
|
||
detailLabel?: string;
|
||
}>(), {
|
||
companyName: null,
|
||
stats: () => [],
|
||
sourceLinks: () => [],
|
||
detailTo: '',
|
||
detailLabel: 'Открыть',
|
||
});
|
||
|
||
function formatAmount(value: number) {
|
||
return new Intl.NumberFormat('ru-RU', {
|
||
minimumFractionDigits: 0,
|
||
maximumFractionDigits: 2,
|
||
}).format(value);
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<article class="surface-card rounded-3xl p-5">
|
||
<div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
|
||
<div class="space-y-1">
|
||
<h2 class="text-lg font-bold text-[#123824]">{{ fullName }}</h2>
|
||
<p class="text-sm text-[#466653]">{{ email }}</p>
|
||
<p v-if="companyName" class="text-sm text-[#466653]">{{ companyName }}</p>
|
||
</div>
|
||
|
||
<NuxtLink
|
||
v-if="detailTo"
|
||
:to="detailTo"
|
||
class="btn btn-accent btn-sm w-fit border-0"
|
||
>
|
||
{{ detailLabel }}
|
||
</NuxtLink>
|
||
</div>
|
||
|
||
<div class="mt-5 rounded-[28px] bg-[linear-gradient(135deg,#123824_0%,#0d854a_100%)] px-5 py-4 text-white">
|
||
<p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-white/70">Доступный бонус</p>
|
||
<p class="mt-2 text-3xl font-black leading-none">{{ formatAmount(balance) }}</p>
|
||
</div>
|
||
|
||
<dl
|
||
v-if="stats.length"
|
||
class="mt-4 divide-y divide-[#deebe4] rounded-2xl border border-[#deebe4] bg-white"
|
||
>
|
||
<div
|
||
v-for="stat in stats"
|
||
:key="stat.label"
|
||
class="flex items-center justify-between gap-3 px-4 py-3 text-sm"
|
||
>
|
||
<dt class="text-[#5c7b69]">{{ stat.label }}</dt>
|
||
<dd class="text-right font-semibold text-[#123824]">{{ stat.value }}</dd>
|
||
</div>
|
||
</dl>
|
||
|
||
<div class="mt-4 space-y-2 rounded-2xl bg-[#f4faf6] p-4 text-sm text-[#355947]">
|
||
<p class="font-semibold text-[#123824]">Начисление идёт с заказов:</p>
|
||
<div v-if="sourceLinks.length" class="space-y-2">
|
||
<div
|
||
v-for="link in sourceLinks"
|
||
:key="link.id"
|
||
class="rounded-2xl bg-white px-3 py-2"
|
||
>
|
||
<p class="font-medium text-[#123824]">{{ link.refereeName }}</p>
|
||
<p>{{ link.refereeCompanyName || link.refereeEmail }}</p>
|
||
<p class="text-xs text-[#5c7b69]">Бонус: {{ link.bonusPercent }}%</p>
|
||
</div>
|
||
</div>
|
||
<p v-else class="rounded-2xl bg-white px-3 py-2 text-[#5c7b69]">
|
||
Активных связок пока нет.
|
||
</p>
|
||
</div>
|
||
</article>
|
||
</template>
|