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

refactor(catalog): simplify product action panel

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-04-03 15:15:57 +07:00
parent 3fd41fb565
commit 21911f80ff
1 changed files with 24 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
app/components/catalog/CatalogConfigurator.vue
View File

@@ -303,6 +303,10 @@ function selectionDescription(group: ProductGroup) {
return 'Разверните весь список, если нужна ручная проверка вариантов.';
}
function addButtonLabel(group: ProductGroup) {
return selectedProduct(group) ? 'В корзину' : 'Выбрать параметры';
}
function boxQuantityLabel(group: ProductGroup) {
const product = selectedProduct(group);
if (product?.quantityPerBoxOptions.length) {
@@ -425,18 +429,23 @@ function decrementSelected(group: ProductGroup) {
:key="group.key"
class="surface-card rounded-3xl p-4 md:p-5"
>
<div class="grid gap-4 xl:grid-cols-6 xl:items-stretch">
<div class="grid gap-4 xl:grid-cols-6 xl:items-start">
<div class="rounded-[28px] bg-base-100 p-3 xl:col-span-1">
<img
:src="createProductCover(group.typeLabel, group.key)"
:alt="`Превью группы ${group.typeLabel}`"
class="h-full min-h-[220px] w-full rounded-[24px] object-cover"
class="aspect-square w-full rounded-[24px] object-cover"
loading="lazy"
>
</div>
<div class="rounded-[28px] bg-base-100 p-4 md:p-5 xl:col-span-4">
<div class="grid h-full gap-4 md:grid-cols-2">
<div class="mb-4">
<p class="text-xs font-semibold uppercase tracking-[0.18em] text-base-content/45">Тип товара</p>
<h2 class="mt-2 text-2xl font-bold text-[#163624]">{{ group.typeLabel }}</h2>
</div>
<div class="grid gap-4 md:grid-cols-2">
<fieldset
v-for="field in visibleFields(group)"
:key="`${group.key}-${field.key}`"
@@ -485,23 +494,22 @@ function decrementSelected(group: ProductGroup) {
<aside class="rounded-[28px] bg-base-100 p-4 md:p-5 xl:col-span-1">
<div class="flex h-full flex-col justify-between gap-4">
<div class="space-y-3">
<div>
<p class="text-xs font-semibold uppercase tracking-[0.18em] text-base-content/45">Тип товара</p>
<h2 class="mt-2 text-xl font-bold text-[#163624]">{{ group.typeLabel }}</h2>
</div>
<div class="flex flex-wrap gap-2">
<span class="badge badge-outline">{{ group.products.length }} вариантов</span>
<span class="badge badge-outline">Короб: {{ boxQuantityLabel(group) }}</span>
</div>
<div class="rounded-[22px] bg-base-200/70 p-3">
<p class="text-sm font-semibold text-[#163624]">{{ selectionHeadline(group) }}</p>
<p class="mt-1 text-xs leading-5 text-base-content/65">{{ selectionDescription(group) }}</p>
<p v-if="selectedProduct(group)" class="text-sm font-semibold text-[#163624]">{{ selectionHeadline(group) }}</p>
<p class="text-xs leading-5 text-base-content/65">{{ selectionDescription(group) }}</p>
<p class="mt-2 text-xs leading-5 text-base-content/65">Короб: {{ boxQuantityLabel(group) }}</p>
</div>
</div>
<div class="space-y-3">
<button
class="btn btn-neutral h-11 w-full rounded-full text-sm font-semibold"
:disabled="!selectedProduct(group)"
@click="incrementSelected(group)"
>
{{ addButtonLabel(group) }}
</button>
<div class="rounded-[22px] border border-base-300 bg-base-100 px-2 py-1">
<div class="flex items-center justify-between gap-2">
<button
@@ -515,11 +523,7 @@ function decrementSelected(group: ProductGroup) {
<div class="text-[11px] uppercase tracking-[0.16em] text-base-content/45">В корзине</div>
<div class="text-lg font-semibold text-[#163624]">{{ selectedQty(group) }}</div>
</div>
<button
class="btn btn-square btn-sm"
:disabled="!selectedProduct(group)"
@click="incrementSelected(group)"
>
<button class="btn btn-square btn-sm" :disabled="!selectedProduct(group)" @click="incrementSelected(group)">
+
</button>
</div>