Polish header pill sizing and simplify catalog/cart layouts
This commit is contained in:
Ruslan Bakiev
@@ -97,76 +97,71 @@ async function submitCart() {
|
||||
<section class="space-y-6">
|
||||
<h1 class="text-3xl font-extrabold text-[#0f2f20]">Корзина</h1>
|
||||
|
||||
<div class="surface-card space-y-4 rounded-3xl p-5 md:p-6">
|
||||
<div v-if="counterpartyLoading.value" class="alert">
|
||||
Проверяем карточку контрагента...
|
||||
</div>
|
||||
<div v-else-if="!isCounterpartyComplete" class="alert alert-warning">
|
||||
Для оформления заявки заполните карточку контрагента в
|
||||
<NuxtLink to="/profile" class="link link-hover font-semibold">профиле</NuxtLink>.
|
||||
</div>
|
||||
<div v-if="counterpartyLoading.value" class="alert surface-card border-0">
|
||||
Проверяем карточку контрагента...
|
||||
</div>
|
||||
<div v-else-if="!isCounterpartyComplete" class="alert alert-warning">
|
||||
Для оформления заявки заполните карточку контрагента в
|
||||
<NuxtLink to="/profile" class="link link-hover font-semibold">профиле</NuxtLink>.
|
||||
</div>
|
||||
|
||||
<div class="rounded-2xl border border-base-300 bg-base-100 p-4">
|
||||
<h2 class="text-lg font-bold text-[#123824]">Список позиций</h2>
|
||||
<h2 class="text-xl font-bold text-[#123824]">Позиции</h2>
|
||||
|
||||
<div v-if="cartItems.length === 0" class="alert mt-3">
|
||||
Корзина пока пустая. Добавьте товар из каталога.
|
||||
<div v-if="cartItems.length === 0" class="alert surface-card border-0">
|
||||
Корзина пока пустая. Добавьте товар из каталога.
|
||||
</div>
|
||||
|
||||
<ul v-else class="space-y-3">
|
||||
<li
|
||||
v-for="item in cartItems"
|
||||
:key="item.productId"
|
||||
class="surface-card flex flex-col gap-3 rounded-3xl px-4 py-4 md:flex-row md:items-center md:justify-between md:px-5 md:py-5"
|
||||
>
|
||||
<div>
|
||||
<p class="font-semibold text-[#123824]">{{ item.productName }}</p>
|
||||
<p class="text-xs opacity-70">SKU: {{ item.sku }}</p>
|
||||
<p class="text-sm opacity-80">
|
||||
Объем: {{ lineVolume(item.productId) }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ul v-else class="mt-3 space-y-2">
|
||||
<li
|
||||
v-for="item in cartItems"
|
||||
:key="item.productId"
|
||||
class="flex flex-col gap-3 rounded-xl border border-[#d6ebde] bg-white/75 px-3 py-3 md:flex-row md:items-center md:justify-between"
|
||||
>
|
||||
<div>
|
||||
<p class="font-semibold text-[#123824]">{{ item.productName }}</p>
|
||||
<p class="text-xs opacity-70">SKU: {{ item.sku }}</p>
|
||||
<p class="text-sm opacity-80">
|
||||
Объем: {{ lineVolume(item.productId) }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button class="btn btn-square btn-sm" @click="decrement(item.productId)">-</button>
|
||||
<span class="min-w-8 text-center font-semibold">{{ item.quantity }}</span>
|
||||
<button class="btn btn-square btn-sm" @click="increment(item.productId)">+</button>
|
||||
<button class="btn btn-ghost btn-sm text-error" @click="removeFromCart(item.productId)">
|
||||
Удалить
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<button class="btn btn-square btn-sm" @click="decrement(item.productId)">-</button>
|
||||
<span class="min-w-8 text-center font-semibold">{{ item.quantity }}</span>
|
||||
<button class="btn btn-square btn-sm" @click="increment(item.productId)">+</button>
|
||||
<button class="btn btn-ghost btn-sm text-error" @click="removeFromCart(item.productId)">
|
||||
Удалить
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="divider my-1" />
|
||||
|
||||
<div class="space-y-2 text-sm text-[#214735]">
|
||||
<div class="flex items-center justify-between">
|
||||
<span>Позиций</span>
|
||||
<span class="font-semibold">{{ totalPositions }}</span>
|
||||
</div>
|
||||
|
||||
<div class="rounded-2xl border border-base-300 bg-base-100 p-4">
|
||||
<h2 class="text-lg font-bold text-[#123824]">Итого</h2>
|
||||
<ul class="mt-3 space-y-2 text-sm text-[#214735]">
|
||||
<li class="flex items-center justify-between">
|
||||
<span>Позиций</span>
|
||||
<span class="font-semibold">{{ totalPositions }}</span>
|
||||
</li>
|
||||
<li class="flex items-center justify-between">
|
||||
<span>Количество, шт.</span>
|
||||
<span class="font-semibold">{{ totalItems }}</span>
|
||||
</li>
|
||||
<li class="flex items-center justify-between">
|
||||
<span>Суммарный объем</span>
|
||||
<span class="font-semibold">{{ totalVolume }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="flex items-center justify-between">
|
||||
<span>Количество, шт.</span>
|
||||
<span class="font-semibold">{{ totalItems }}</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span>Суммарный объем</span>
|
||||
<span class="font-semibold">{{ totalVolume }}</span>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="btn w-full border-0 bg-[#139957] text-white hover:bg-[#0d854a]"
|
||||
:disabled="sending || counterpartyLoading.value || !isCounterpartyComplete || cartItems.length === 0"
|
||||
@click="submitCart"
|
||||
>
|
||||
{{ sending ? 'Отправляем…' : 'Оформить заявку' }}
|
||||
</button>
|
||||
|
||||
<div v-if="success" class="alert alert-success">{{ success }}</div>
|
||||
<div v-if="errorMessage" class="alert alert-error">{{ errorMessage }}</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="btn w-full border-0 bg-[#139957] text-white hover:bg-[#0d854a]"
|
||||
:disabled="sending || counterpartyLoading.value || !isCounterpartyComplete || cartItems.length === 0"
|
||||
@click="submitCart"
|
||||
>
|
||||
{{ sending ? 'Отправляем…' : 'Оформить заявку' }}
|
||||
</button>
|
||||
|
||||
<div v-if="success" class="alert alert-success">{{ success }}</div>
|
||||
<div v-if="errorMessage" class="alert alert-error">{{ errorMessage }}</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user