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

Simplify bonus account page

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-04-06 11:34:07 +07:00
parent 77b98539ea
commit 55b0028ddb
1 changed files with 40 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
app/pages/bonus-system/[userId].vue
View File

@@ -23,19 +23,6 @@ const bonusAccount = computed(() => bonusAccountQuery.result.value?.managerBonus
const transactions = computed<TransactionItem[]>(() => bonusAccount.value?.transactions ?? []);
const pendingWithdrawals = computed<PendingWithdrawalItem[]>(() => bonusAccount.value?.pendingWithdrawals ?? []);
const accountStats = computed(() => {
if (!bonusAccount.value) {
return [];
}
return [
{ label: 'Всего начислено', value: formatAmount(bonusAccount.value.earnedAmount) },
{ label: 'Транзакций', value: String(bonusAccount.value.transactionsCount) },
{ label: 'Активных связок', value: String(bonusAccount.value.referralsCount) },
{ label: 'На выводе', value: formatAmount(bonusAccount.value.pendingWithdrawalAmount) },
];
});
function formatAmount(value: number) {
return new Intl.NumberFormat('ru-RU', {
minimumFractionDigits: 0,
@@ -62,17 +49,48 @@ function formatDateTime(value: string) {
<template v-else>
<div class="space-y-4">
<BonusAccountCard
:full-name="bonusAccount.fullName"
:email="bonusAccount.email"
:company-name="bonusAccount.companyName"
:balance="bonusAccount.balance"
:stats="accountStats"
:source-links="bonusAccount.referralLinks"
/>
<div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
<div class="space-y-1">
<h1 class="text-3xl font-extrabold text-[#123824]">{{ bonusAccount.fullName }}</h1>
<p v-if="bonusAccount.companyName || bonusAccount.email" class="text-sm text-[#5c7b69]">
{{ bonusAccount.companyName || bonusAccount.email }}
</p>
</div>
<div class="text-left sm:text-right">
<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(bonusAccount.balance) }}</p>
</div>
</div>
<div v-if="pendingWithdrawals.length" class="surface-card rounded-[32px] p-6">
<p class="text-lg font-bold text-[#123824]">Выводы</p>
<div class="mt-4 space-y-3">
<article
v-for="withdrawal in pendingWithdrawals"
:key="withdrawal.id"
class="rounded-[24px] bg-[#f6fbf8] px-4 py-4"
>
<div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
<div class="space-y-1">
<p class="text-sm font-semibold text-[#123824]">{{ formatAmount(withdrawal.amount) }}</p>
<p class="text-sm text-[#355947]">Создано {{ formatDateTime(withdrawal.createdAt) }}</p>
<p v-if="withdrawal.reviewComment" class="text-sm text-[#355947]">{{ withdrawal.reviewComment }}</p>
</div>
<NuxtLink
:to="`/bonus-system/withdrawals/${withdrawal.id}`"
class="text-sm font-semibold text-[#0d854a]"
>
Проверить выплату
</NuxtLink>
</div>
</article>
</div>
</div>
<div class="surface-card rounded-[32px] p-6">
<p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Начисления</p>
<p class="text-lg font-bold text-[#123824]">Транзакции</p>
<div v-if="transactions.length === 0" class="manager-empty-state mt-4">
Начислений пока нет.
@@ -102,33 +120,6 @@ function formatDateTime(value: string) {
</article>
</div>
</div>
<div v-if="pendingWithdrawals.length" class="surface-card rounded-[32px] p-6">
<p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Заявки на вывод</p>
<div class="mt-4 space-y-3">
<article
v-for="withdrawal in pendingWithdrawals"
:key="withdrawal.id"
class="rounded-[24px] bg-[#f6fbf8] px-4 py-4"
>
<div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
<div class="space-y-1">
<p class="text-sm font-semibold text-[#123824]">{{ formatAmount(withdrawal.amount) }}</p>
<p class="text-sm text-[#355947]">Создано {{ formatDateTime(withdrawal.createdAt) }}</p>
<p v-if="withdrawal.reviewComment" class="text-sm text-[#355947]">{{ withdrawal.reviewComment }}</p>
</div>
<NuxtLink
:to="`/bonus-system/withdrawals/${withdrawal.id}`"
class="text-sm font-semibold text-[#0d854a]"
>
Проверить выплату
</NuxtLink>
</div>
</article>
</div>
</div>
</div>
</template>
</section>