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

Refine profile cards layout and styling

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-04-03 12:06:04 +07:00
parent 12fbe00ee2
commit 71d2b176e9
6 changed files with 75 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
app/pages/profile.vue
View File

@@ -39,14 +39,15 @@ const maxConnected = computed(() =>
const connectedMessengerCount = computed(() => Number(telegramConnected.value) + Number(maxConnected.value));
const companyNamePreview = computed(() => profileQuery.result.value?.myCounterpartyProfile?.companyName?.trim() || '');
const notificationsSummary = computed(() => {
if (connectedMessengerCount.value === 0) {
return 'Уведомления не подключены. Подключите Telegram и Max для удобной работы с заказами.';
return 'Подключите Telegram и Max, чтобы получать статусы заказов и важные уведомления.';
}
if (connectedMessengerCount.value === 1) {
return 'Подключен 1 канал. Рекомендуем подключить второй канал как резервный.';
return 'Подключен один канал. Добавьте второй канал для резервного уведомления.';
}
return 'Оба канала подключены. Вы будете получать уведомления в Telegram и Max.';
return 'Оба канала подключены. Уведомления будут приходить в Telegram и Max.';
});
const deliveryAddresses = computed<DeliveryAddressItem[]>(() => deliveryAddressesQuery.result.value?.myDeliveryAddresses ?? []);
@@ -58,32 +59,52 @@ const defaultDeliveryAddress = computed(() => deliveryAddresses.value.find((item
<h1 class="text-3xl font-extrabold text-[#0f2f20]">Профиль</h1>
<div class="grid gap-4 md:grid-cols-3">
<NuxtLink to="/profile/counterparty" class="block rounded-3xl border border-[#d6ebde] bg-[#f7fffb] p-5 transition hover:shadow-md">
<p class="text-sm opacity-70">Карточка контрагента</p>
<p class="mt-2 text-lg font-bold text-[#123824]">{{ profileIsComplete ? 'Заполнена' : 'Требует внимания' }}</p>
<p class="mt-2 text-sm text-[#355947]">
<NuxtLink to="/profile/counterparty" class="block rounded-3xl bg-white p-5 transition hover:shadow-md">
<div class="mb-2 flex items-start justify-between gap-2">
<p class="text-lg font-bold text-[#123824]">Карточка контрагента</p>
<span v-if="!profileIsComplete" class="badge bg-[#fff3db] text-[#8f5b00]">Attention</span>
</div>
<p class="text-sm text-[#355947]">
{{
profileIsComplete
? 'Данные контрагента заполнены.'
? `Компания: ${companyNamePreview || 'данные сохранены'}`
: 'Пожалуйста, заполните карточку контрагента, чтобы получить максимум возможностей личного кабинета.'
}}
</p>
</NuxtLink>
<NuxtLink to="/profile/notifications" class="block rounded-3xl border border-[#d6ebde] bg-[#f7fffb] p-5 transition hover:shadow-md">
<p class="text-sm opacity-70">Уведомления</p>
<p class="mt-2 text-lg font-bold text-[#123824]">{{ connectedMessengerCount }}/2 каналов подключено</p>
<p class="mt-2 text-sm text-[#355947]">{{ notificationsSummary }}</p>
<NuxtLink to="/profile/notifications" class="block rounded-3xl bg-white p-5 transition hover:shadow-md">
<div class="mb-2 flex items-center justify-between gap-2">
<p class="text-lg font-bold text-[#123824]">Уведомления</p>
<span v-if="connectedMessengerCount < 2" class="badge bg-[#fff3db] text-[#8f5b00]">Attention</span>
</div>
<div class="mb-2 flex items-center justify-end gap-2">
<span
class="inline-flex h-8 w-8 items-center justify-center rounded-full text-xs font-bold"
:class="telegramConnected ? 'bg-[#def6ea] text-[#0d854a]' : 'bg-[#eceff3] text-[#6b7280]'"
>
TG
</span>
<span
class="inline-flex h-8 w-8 items-center justify-center rounded-full text-xs font-bold"
:class="maxConnected ? 'bg-[#def6ea] text-[#0d854a]' : 'bg-[#eceff3] text-[#6b7280]'"
>
MX
</span>
</div>
<p class="text-sm text-[#355947]">{{ notificationsSummary }}</p>
</NuxtLink>
<NuxtLink to="/profile/addresses" class="block rounded-3xl border border-[#d6ebde] bg-[#f7fffb] p-5 transition hover:shadow-md">
<p class="text-sm opacity-70">Адреса доставки</p>
<p class="mt-2 text-lg font-bold text-[#123824]">{{ deliveryAddresses.length }}</p>
<p class="mt-2 text-sm text-[#355947]">
<NuxtLink to="/profile/addresses" class="block rounded-3xl bg-white p-5 transition hover:shadow-md">
<div class="mb-2 flex items-start justify-between gap-2">
<p class="text-lg font-bold text-[#123824]">Адреса доставки</p>
<span v-if="!defaultDeliveryAddress" class="badge bg-[#fff3db] text-[#8f5b00]">Attention</span>
</div>
<p class="text-sm text-[#355947]">
{{
defaultDeliveryAddress
? `Основной: ${defaultDeliveryAddress.label || defaultDeliveryAddress.address}`
: 'Адреса пока не добавлены. Добавьте минимум один адрес доставки.'
: 'Добавьте первый адрес доставки, чтобы быстро оформлять заказы в корзине.'
}}
</p>
</NuxtLink>