Refine catalog detail interactions

2026-04-09 19:47:50 +07:00
parent 03ac74e10b
commit e8ff766c24
1 changed files with 110 additions and 78 deletions
--- a/app/components/catalog/CatalogConfigurator.vue
+++ b/app/components/catalog/CatalogConfigurator.vue
@@ -484,40 +484,40 @@ function fieldHelperText(group: ProductGroup, field: ParamFieldKey) {
  const setting = groupCatalogSetting(group);

  if (field === 'widthMm') {
-    return 'Нужная ширина рулона.';
+    return 'Ширина определяет, насколько широкой будет полоса материала в работе и при намотке.';
  }

  if (field === 'lengthM') {
    const customRange = formatLengthRange(setting);
    if (setting.allowCustomLength && customRange) {
-      return `Можно выбрать стандартный метраж или свой: ${customRange}.`;
+      return `Можно выбрать стандартный метраж из наличия или заказать свой вариант. Доступный диапазон: ${customRange}.`;
    }

-    return 'Нужный метраж рулона.';
+    return 'Длина показывает, сколько метров материала будет в одном рулоне.';
  }

  if (field === 'thicknessMicron') {
-    return 'Плотность и толщина материала.';
+    return 'Толщина влияет на плотность, прочность и общее ощущение материала в работе.';
  }

  if (field === 'sleeveBrand') {
    if (setting.allowCustomSleeveBrand) {
-      return 'Стандартная втулка или своя с логотипом.';
+      return 'Можно выбрать стандартную втулку или сделать свою с логотипом под заказ.';
    }

-    return 'Вариант втулки внутри рулона.';
+    return 'Втулка находится внутри рулона и влияет на совместимость с вашим оборудованием.';
  }

  if (field === 'colorTag') {
-    return 'Цвет ленты.';
+    return 'Цвет нужен для визуального отличия, маркировки и внешнего вида готового рулона.';
  }

  if (field === 'labelTag') {
    if (setting.allowCustomLabel) {
-      return 'Стандартная маркировка или своя надпись.';
+      return 'Можно взять стандартную маркировку из каталога или нанести свою надпись.';
    }

-    return 'Готовая надпись или маркировка.';
+    return 'Надпись или маркировка помогает сразу выбрать нужный готовый вариант.';
  }

  return 'Параметр товара.';
@@ -543,29 +543,41 @@ function customizationDetails(group: ProductGroup) {
  return details;
 }

-function productBadges(product: ParsedProduct) {
-  const badges: string[] = [];
-
-  if (product.widthMm !== null) {
-    badges.push(`${product.widthMm} мм`);
-  }
-  if (product.lengthM !== null) {
-    badges.push(`${product.lengthM} м`);
-  }
-  if (product.thicknessMicron !== null) {
-    badges.push(`${product.thicknessMicron} мкм`);
-  }
-  if (product.sleeveBrand) {
-    badges.push(product.sleeveBrand);
-  }
-  if (product.colorTags[0]) {
-    badges.push(product.colorTags[0]);
-  }
-  if (product.labelTags[0]) {
-    badges.push(product.labelTags[0]);
+function totalAvailableQty(product: ParsedProduct) {
+  return product.availableInWarehouses.reduce((sum, balance) => sum + Number(balance.availableQty || 0), 0);
 }

-  return badges;
+function warehouseAvailability(product: ParsedProduct) {
+  return product.availableInWarehouses
+    .filter((balance) => Number(balance.availableQty || 0) > 0)
+    .map((balance) => `${balance.warehouse.code}: ${balance.availableQty}`)
+    .join(' · ');
+}
+
+function availabilityTone(product: ParsedProduct) {
+  const qty = totalAvailableQty(product);
+
+  if (qty <= 0) {
+    return 'bg-[#d95c5c]';
+  }
+  if (qty < 20) {
+    return 'bg-[#e2b534]';
+  }
+
+  return 'bg-[#2aa36b]';
+}
+
+function availabilityLabel(product: ParsedProduct) {
+  const qty = totalAvailableQty(product);
+
+  if (qty <= 0) {
+    return 'Нет в наличии';
+  }
+  if (qty < 20) {
+    return 'Остаток ограничен';
+  }
+
+  return 'В наличии';
 }

 function incrementProduct(product: ProductNode) {
@@ -618,7 +630,7 @@ function productDetailPath(group: ProductGroup) {
      <NuxtLink
        v-if="previousGroup"
        :to="productDetailPath(previousGroup)"
-        class="absolute left-0 top-28 z-10 hidden w-44 -translate-x-[92%] rounded-[28px] border border-[#e6efe9] bg-white p-3 shadow-[0_20px_40px_rgba(18,56,36,0.08)] transition hover:-translate-x-[98%] hover:shadow-[0_28px_48px_rgba(18,56,36,0.12)] 2xl:block"
+        class="absolute left-0 top-28 z-10 hidden w-44 -translate-x-[108%] rounded-[28px] border border-[#e6efe9] bg-white p-3 shadow-[0_20px_40px_rgba(18,56,36,0.08)] transition hover:-translate-x-[114%] hover:shadow-[0_28px_48px_rgba(18,56,36,0.12)] 2xl:block"
      >
        <img
          :src="createProductCover(previousGroup.typeLabel, previousGroup.key)"
@@ -632,7 +644,7 @@ function productDetailPath(group: ProductGroup) {
      <NuxtLink
        v-if="nextGroup"
        :to="productDetailPath(nextGroup)"
-        class="absolute right-0 top-28 z-10 hidden w-44 translate-x-[92%] rounded-[28px] border border-[#e6efe9] bg-white p-3 shadow-[0_20px_40px_rgba(18,56,36,0.08)] transition hover:translate-x-[98%] hover:shadow-[0_28px_48px_rgba(18,56,36,0.12)] 2xl:block"
+        class="absolute right-0 top-28 z-10 hidden w-44 translate-x-[108%] rounded-[28px] border border-[#e6efe9] bg-white p-3 shadow-[0_20px_40px_rgba(18,56,36,0.08)] transition hover:translate-x-[114%] hover:shadow-[0_28px_48px_rgba(18,56,36,0.12)] 2xl:block"
      >
        <img
          :src="createProductCover(nextGroup.typeLabel, nextGroup.key)"
@@ -727,7 +739,7 @@ function productDetailPath(group: ProductGroup) {
                class="cursor-pointer rounded-2xl border px-4 py-2 text-sm font-medium transition"
                :class="[
                  getGroupState(selectedGroup)[field.key] === option
-                    ? 'border-[#163624] bg-[#163624] text-white shadow-[0_12px_24px_rgba(22,54,36,0.18)]'
+                    ? 'border-[#163624] bg-[#163624] text-white'
                    : isOptionAvailable(selectedGroup, field.key, option)
                      ? 'border-[#dce9e1] bg-white text-[#163624] hover:border-[#163624]'
                      : 'border-[#e6eaee] bg-[#f3f5f7] text-[#8a949d]',
@@ -744,7 +756,10 @@ function productDetailPath(group: ProductGroup) {
              </label>
            </div>

-            <p class="mt-2 text-sm leading-6 text-[#607569]">{{ fieldHelperText(selectedGroup, field.key) }}</p>
+            <details class="mt-3 rounded-[20px] bg-[#f7fbf8] px-4 py-3 text-sm text-[#587064]">
+              <summary class="cursor-pointer font-medium text-[#355947]">Подробнее</summary>
+              <p class="mt-2 leading-6">{{ fieldHelperText(selectedGroup, field.key) }}</p>
+            </details>
          </article>
        </div>

@@ -789,27 +804,42 @@ function productDetailPath(group: ProductGroup) {
        <div class="rounded-[32px] border border-[#e6efe9] bg-white p-5 shadow-[0_20px_40px_rgba(18,56,36,0.06)]">
          <p class="text-base font-semibold text-[#163624]">Доступные варианты</p>

-          <div class="mt-4 space-y-3">
-            <article
-              v-for="product in selectedGroup.products"
-              :key="`${selectedGroup.key}-${product.id}`"
-              class="flex flex-col gap-4 rounded-[24px] border border-[#edf4ef] bg-[#fbfcfb] p-4 lg:flex-row lg:items-center lg:justify-between"
-            >
+          <div class="mt-4 overflow-x-auto rounded-[24px] border border-[#edf4ef]">
+            <table class="table bg-white">
+              <thead>
+                <tr class="text-[#587064]">
+                  <th>SKU</th>
+                  <th>Ширина</th>
+                  <th>Длина</th>
+                  <th>Толщина</th>
+                  <th>Втулка</th>
+                  <th>Цвет</th>
+                  <th>Надпись</th>
+                  <th>Остаток</th>
+                  <th class="text-right">Действие</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="product in selectedGroup.products" :key="`${selectedGroup.key}-${product.id}`" class="align-middle">
+                  <td class="font-semibold text-[#163624]">{{ product.sku }}</td>
+                  <td>{{ product.widthMm ?? '—' }}</td>
+                  <td>{{ product.lengthM ?? '—' }}</td>
+                  <td>{{ product.thicknessMicron ?? '—' }}</td>
+                  <td>{{ product.sleeveBrand ?? '—' }}</td>
+                  <td>{{ product.colorTags.join(', ') || '—' }}</td>
+                  <td>{{ product.labelTags.join(', ') || '—' }}</td>
+                  <td>
+                    <div class="flex min-w-[180px] items-center gap-3">
+                      <span class="h-3 w-3 rounded-sm" :class="availabilityTone(product)" />
                      <div class="min-w-0">
-                <p class="text-base font-semibold text-[#163624]">{{ product.sku }}</p>
-
-                <div class="mt-3 flex flex-wrap gap-2">
-                  <span
-                    v-for="badge in productBadges(product)"
-                    :key="`${product.id}-${badge}`"
-                    class="rounded-full border border-[#dce9e1] bg-white px-3 py-1.5 text-xs font-medium text-[#355947]"
-                  >
-                    {{ badge }}
-                  </span>
+                        <p class="text-sm font-medium text-[#163624]">{{ availabilityLabel(product) }}</p>
+                        <p class="text-xs text-[#607569]">
+                          {{ totalAvailableQty(product) }}<span v-if="warehouseAvailability(product)"> · {{ warehouseAvailability(product) }}</span>
+                        </p>
                      </div>
                    </div>
-
-              <div class="flex shrink-0 items-center justify-end">
+                  </td>
+                  <td class="text-right">
                    <button
                      v-if="getQuantity(product.id) === 0"
                      class="btn h-10 rounded-full border-0 bg-[#139957] px-5 text-sm font-semibold text-white hover:bg-[#0d854a]"
@@ -833,8 +863,10 @@ function productDetailPath(group: ProductGroup) {
                        +
                      </button>
                    </div>
-              </div>
-            </article>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
          </div>
        </div>
      </div>