fregat/web-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Simplify bonus manager cards

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-04-06 11:14:39 +07:00
parent 4a6871ecac
commit c4f9f0b6dc
3 changed files with 152 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
app/components/bonus/AccountCard.vue
View File

@@ -14,19 +14,22 @@ type BonusCardLink = {
withDefaults(defineProps<{
fullName: string;
email: string;
email?: string;
companyName?: string | null;
balance: number;
avatarSrc?: string;
initials?: string;
compact?: boolean;
stats?: BonusCardStat[];
sourceLinks?: BonusCardLink[];
detailTo?: string;
detailLabel?: string;
}>(), {
email: '',
companyName: null,
avatarSrc: '',
initials: 'FR',
compact: false,
stats: () => [],
sourceLinks: () => [],
detailTo: '',
detailLabel: 'Открыть',
});
function formatAmount(value: number) {
@@ -38,58 +41,73 @@ function formatAmount(value: number) {
</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">
<article
class="surface-card rounded-[32px]"
:class="compact ? 'flex min-h-[280px] flex-col p-6' : 'p-6'"
>
<template v-if="compact">
<div class="flex justify-center">
<img
v-if="avatarSrc"
:src="avatarSrc"
:alt="fullName"
class="h-24 w-24 rounded-[32px] object-cover shadow-[0_12px_30px_rgba(18,56,36,0.14)]"
>
<div
v-else
class="flex h-24 w-24 items-center justify-center rounded-[32px] bg-[linear-gradient(135deg,#dff7e9_0%,#c2ead3_100%)] text-3xl font-black text-[#123824] shadow-[inset_0_1px_0_rgba(255,255,255,0.65)]"
>
{{ initials }}
</div>
</div>
<div class="flex-1" />
<div class="pt-8 text-center">
<h2 class="text-lg font-bold leading-tight text-[#123824]">{{ fullName }}</h2>
</div>
<div class="pt-6 text-left">
<p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Доступный бонус</p>
<p class="mt-2 text-2xl font-black leading-none text-[#123824]">{{ formatAmount(balance) }}</p>
</div>
</template>
<template v-else>
<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>
<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>
<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 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>
</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 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-2xl bg-white px-3 py-2"
class="rounded-[24px] bg-[#f6fbf8] px-4 py-4 text-sm text-[#355947]"
>
<p class="font-medium text-[#123824]">{{ link.refereeName }}</p>
<p>{{ link.refereeCompanyName || link.refereeEmail }}</p>
<p class="text-xs text-[#5c7b69]">Бонус: {{ link.bonusPercent }}%</p>
<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>
<p v-else class="rounded-2xl bg-white px-3 py-2 text-[#5c7b69]">
Активных связок пока нет.
</p>
</div>
</template>
</article>
</template>