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

Move cart flow to catalog add and simplify checkout list

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-04-02 18:28:57 +07:00
parent caa9b9fba5
commit 88e5c248f4
4 changed files with 261 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
app/components/orders/OrderStatusBadge.vue
View File

@@ -3,14 +3,28 @@ const props = defineProps<{
status: string;
}>();
const statusLabel = computed(() => {
if (props.status === 'NEW') return 'Уточнение цены';
if (props.status === 'MANAGER_PROCESSING') return 'В работе у менеджера';
if (props.status === 'WAITING_DOUBLE_CONFIRM') return 'Ожидает подтверждения';
if (props.status === 'CONFIRMED') return 'Подтвержден';
if (props.status === 'IN_PROGRESS') return 'Выполняется';
if (props.status === 'COMPLETED') return 'Завершен';
if (props.status === 'CLIENT_REJECTED') return 'Отклонен клиентом';
if (props.status === 'MANAGER_REJECTED') return 'Отклонен менеджером';
if (props.status === 'MANAGER_BLOCKED') return 'Заблокирован';
return props.status;
});
const className = computed(() => {
if (props.status === 'COMPLETED') return 'badge badge-success';
if (props.status === 'CLIENT_REJECTED' || props.status === 'MANAGER_REJECTED') return 'badge badge-error';
if (props.status === 'MANAGER_BLOCKED') return 'badge badge-warning';
if (props.status === 'NEW') return 'badge badge-warning';
return 'badge badge-info';
});
</script>
<template>
<span :class="className">{{ status }}</span>
<span :class="className">{{ statusLabel }}</span>
</template>

109
app/composables/useClientCart.ts Normal file
View File

@@ -0,0 +1,109 @@
export type ClientCartItem = {
productId: string;
productName: string;
sku: string;
isCustomizable: boolean;
quantity: number;
parameters: {
width: number;
thickness: number;
color: string;
};
};
function normalizeQuantity(value: number) {
if (!Number.isFinite(value) || value < 1) {
return 1;
}
return Math.floor(value);
}
export function useClientCart() {
const items = useState<ClientCartItem[]>('client-cart-items', () => []);
const totalPositions = computed(() => items.value.length);
const totalItems = computed(() => items.value.reduce((sum, item) => sum + item.quantity, 0));
const totalVolume = computed(() =>
items.value.reduce((sum, item) => sum + item.quantity * item.parameters.width * item.parameters.thickness, 0),
);
function getQuantity(productId: string) {
return items.value.find((item) => item.productId === productId)?.quantity ?? 0;
}
function addProduct(product: {
id: string;
name: string;
sku: string;
isCustomizable: boolean;
}) {
const existing = items.value.find((item) => item.productId === product.id);
if (existing) {
existing.quantity += 1;
return;
}
items.value.push({
productId: product.id,
productName: product.name,
sku: product.sku,
isCustomizable: product.isCustomizable,
quantity: 1,
parameters: {
width: 100,
thickness: 50,
color: 'прозрачный',
},
});
}
function setQuantity(productId: string, quantity: number) {
const existing = items.value.find((item) => item.productId === productId);
if (!existing) {
return;
}
existing.quantity = normalizeQuantity(quantity);
}
function incrementQuantity(productId: string) {
const existing = items.value.find((item) => item.productId === productId);
if (!existing) {
return;
}
existing.quantity += 1;
}
function decrementQuantity(productId: string) {
const existing = items.value.find((item) => item.productId === productId);
if (!existing) {
return;
}
existing.quantity = normalizeQuantity(existing.quantity - 1);
}
function removeProduct(productId: string) {
items.value = items.value.filter((item) => item.productId !== productId);
}
function clearCart() {
items.value = [];
}
return {
items,
totalPositions,
totalItems,
totalVolume,
addProduct,
setQuantity,
incrementQuantity,
decrementQuantity,
removeProduct,
clearCart,
getQuantity,
};
}

157
app/pages/cart.vue
View File

@@ -1,70 +1,41 @@
<script setup lang="ts">
import { useMutation } from '@vue/apollo-composable';
import { SubmitCalculationOrderDocument } from '~/composables/graphql/generated';
import { useClientCart } from '~/composables/useClientCart';
import { useCounterpartyProfile } from '~/composables/useCounterpartyProfile';
type CartLine = {
id: number;
productName: string;
quantity: number;
width: number;
thickness: number;
color: string;
};
const { isComplete: isCounterpartyComplete, loading: counterpartyLoading } = useCounterpartyProfile();
const submitMutation = useMutation(SubmitCalculationOrderDocument, { throws: 'never' });
const draft = reactive({
productName: '',
quantity: 1,
width: 100,
thickness: 50,
color: 'прозрачный',
});
const cartItems = ref<CartLine[]>([]);
const nextLineId = ref(1);
const cart = useClientCart();
const sending = ref(false);
const success = ref('');
const errorMessage = ref('');
function lineVolume(item: CartLine) {
return Number(item.quantity) * Number(item.width) * Number(item.thickness);
function lineVolume(productId: string) {
const item = cart.items.value.find((entry) => entry.productId === productId);
if (!item) {
return 0;
}
const totalItems = computed(() => cartItems.value.reduce((acc, item) => acc + Number(item.quantity), 0));
const totalVolume = computed(() => cartItems.value.reduce((acc, item) => acc + lineVolume(item), 0));
return Number(item.quantity) * Number(item.parameters.width) * Number(item.parameters.thickness);
}
function addToCart() {
function increment(productId: string) {
success.value = '';
errorMessage.value = '';
if (!draft.productName.trim()) {
errorMessage.value = 'Укажите название позиции.';
return;
cart.incrementQuantity(productId);
}
if (Number(draft.quantity) <= 0) {
errorMessage.value = 'Количество должно быть больше нуля.';
return;
function decrement(productId: string) {
success.value = '';
errorMessage.value = '';
cart.decrementQuantity(productId);
}
cartItems.value.push({
id: nextLineId.value,
productName: draft.productName.trim(),
quantity: Number(draft.quantity),
width: Number(draft.width),
thickness: Number(draft.thickness),
color: draft.color.trim() || 'прозрачный',
});
nextLineId.value += 1;
draft.productName = '';
}
function removeFromCart(id: number) {
cartItems.value = cartItems.value.filter((item) => item.id !== id);
function removeFromCart(productId: string) {
success.value = '';
errorMessage.value = '';
cart.removeProduct(productId);
}
async function submitCart() {
@@ -76,7 +47,7 @@ async function submitCart() {
return;
}
if (cartItems.value.length < 1) {
if (cart.items.value.length < 1) {
errorMessage.value = 'Добавьте хотя бы одну позицию в корзину.';
return;
}
@@ -84,15 +55,15 @@ async function submitCart() {
sending.value = true;
const createdCodes: string[] = [];
for (const item of cartItems.value) {
for (const item of cart.items.value) {
const result = await submitMutation.mutate({
input: {
productName: item.productName,
quantity: Number(item.quantity),
parameters: {
width: Number(item.width),
thickness: Number(item.thickness),
color: item.color,
width: Number(item.parameters.width),
thickness: Number(item.parameters.thickness),
color: item.parameters.color,
},
},
});
@@ -108,8 +79,8 @@ async function submitCart() {
}
sending.value = false;
cartItems.value = [];
success.value = `Отправлено заявок: ${createdCodes.length}.`;
cart.clearCart();
success.value = `Отправлено заявок: ${createdCodes.length}. Статус: уточнение цены.`;
}
</script>
@@ -117,9 +88,7 @@ async function submitCart() {
<section class="space-y-6">
<h1 class="text-3xl font-extrabold text-[#0f2f20]">Корзина</h1>
<div class="surface-card rounded-3xl p-5 md:p-6">
<div class="grid gap-6 xl:grid-cols-[1.6fr_1fr]">
<div class="space-y-4">
<div class="surface-card space-y-4 rounded-3xl p-5 md:p-6">
<div v-if="counterpartyLoading.value" class="alert">
Проверяем карточку контрагента...
</div>
@@ -128,97 +97,67 @@ async function submitCart() {
<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>
<div class="mt-3 grid gap-3 md:grid-cols-2 xl:grid-cols-3">
<label class="form-control xl:col-span-3">
<span class="label-text">Название позиции</span>
<input v-model="draft.productName" type="text" class="input input-bordered w-full" placeholder="Лист ПЭТ" >
</label>
<label class="form-control">
<span class="label-text">Количество</span>
<input v-model="draft.quantity" type="number" min="1" class="input input-bordered w-full" >
</label>
<label class="form-control">
<span class="label-text">Ширина</span>
<input v-model="draft.width" type="number" min="1" class="input input-bordered w-full" >
</label>
<label class="form-control">
<span class="label-text">Толщина</span>
<input v-model="draft.thickness" type="number" min="1" class="input input-bordered w-full" >
</label>
<label class="form-control md:col-span-2 xl:col-span-3">
<span class="label-text">Цвет</span>
<input v-model="draft.color" type="text" class="input input-bordered w-full" >
</label>
</div>
<button class="btn btn-primary mt-4" @click="addToCart">Добавить в корзину</button>
</div>
<div class="rounded-2xl border border-base-300 bg-base-100 p-4">
<h2 class="text-lg font-bold text-[#123824]">Список позиций</h2>
<div v-if="cartItems.length === 0" class="alert mt-3">
Корзина пока пустая.
<div v-if="cart.items.length === 0" class="alert mt-3">
Корзина пока пустая. Добавьте товар из каталога.
</div>
<ul v-else class="mt-3 space-y-2">
<li
v-for="item in cartItems"
:key="item.id"
class="flex flex-col gap-2 rounded-xl border border-[#d6ebde] bg-white/75 px-3 py-3 md:flex-row md:items-center md:justify-between"
v-for="item in cart.items"
: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">
{{ item.quantity }} шт. • {{ item.width }} × {{ item.thickness }} • {{ item.color }}
Объем: {{ lineVolume(item.productId) }}
</p>
</div>
<div class="flex items-center gap-3">
<span class="text-sm font-semibold text-[#123824]">Объем: {{ lineVolume(item) }}</span>
<button class="btn btn-ghost btn-sm text-error" @click="removeFromCart(item.id)">Удалить</button>
<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>
</div>
<aside class="rounded-2xl border border-base-300 bg-base-100 p-4">
<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">{{ cartItems.length }}</span>
<span class="font-semibold">{{ cart.totalPositions }}</span>
</li>
<li class="flex items-center justify-between">
<span>Количество, шт.</span>
<span class="font-semibold">{{ totalItems }}</span>
<span class="font-semibold">{{ cart.totalItems }}</span>
</li>
<li class="flex items-center justify-between">
<span>Суммарный объем</span>
<span class="font-semibold">{{ totalVolume }}</span>
<span class="font-semibold">{{ cart.totalVolume }}</span>
</li>
</ul>
</div>
<button
class="btn mt-4 w-full border-0 bg-[#139957] text-white hover:bg-[#0d854a]"
:disabled="sending || counterpartyLoading.value || !isCounterpartyComplete || cartItems.length === 0"
class="btn w-full border-0 bg-[#139957] text-white hover:bg-[#0d854a]"
:disabled="sending || counterpartyLoading.value || !isCounterpartyComplete || cart.items.length === 0"
@click="submitCart"
>
{{ sending ? 'Отправляем…' : 'Оформить заявку' }}
</button>
</aside>
</div>
</div>
<div v-if="success" class="alert alert-success">{{ success }}</div>
<div v-if="errorMessage" class="alert alert-error">{{ errorMessage }}</div>
</div>
</section>
</template>

45
app/pages/products.vue
View File

@@ -1,10 +1,12 @@
<script setup lang="ts">
import { useQuery } from '@vue/apollo-composable';
import { ClientProductsDocument } from '~/composables/graphql/generated';
import { ClientProductsDocument, type ClientProductsQuery } from '~/composables/graphql/generated';
import { useClientCart } from '~/composables/useClientCart';
const { result, loading, error } = useQuery(ClientProductsDocument);
const search = ref('');
const stockFilter = ref<'ALL' | 'CUSTOM' | 'STANDARD'>('ALL');
const cart = useClientCart();
const coverPresets = [
['#e9fbe5', '#acfcd5', '#7be9aa'],
@@ -54,12 +56,30 @@ const filteredProducts = computed(() => {
return matchSearch && matchType;
});
});
function addProductToCart(product: ClientProductsQuery['clientProducts'][number]) {
cart.addProduct({
id: product.id,
name: product.name,
sku: product.sku,
isCustomizable: product.isCustomizable,
});
}
</script>
<template>
<section class="space-y-5">
<h1 class="text-3xl font-extrabold text-[#0f2f20]">Каталог</h1>
<div class="surface-card rounded-3xl p-4 md:p-5">
<div class="flex flex-wrap items-center justify-between gap-3">
<p class="text-sm text-base-content/75">Добавляй позиции и оформляй заявку в корзине.</p>
<NuxtLink to="/cart" class="btn btn-outline btn-sm">
Корзина: {{ cart.totalItems }}
</NuxtLink>
</div>
</div>
<div class="surface-card rounded-3xl p-4 md:p-5">
<div class="grid gap-3 md:grid-cols-[1fr_auto]">
<label class="form-control">
@@ -87,6 +107,19 @@ const filteredProducts = computed(() => {
<div v-else-if="error" class="alert alert-error">{{ error.message }}</div>
<div v-else-if="filteredProducts.length > 0" class="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
<article class="surface-card overflow-hidden rounded-3xl border border-dashed border-base-300 p-4">
<div class="flex h-full flex-col justify-between gap-4">
<div>
<div class="badge badge-outline">Кастом</div>
<h2 class="mt-3 text-lg font-bold text-[#133826]">Конструктор скотча</h2>
<p class="mt-1 text-sm text-base-content/75">
Отдельная карточка под индивидуальную конфигурацию. Параметры добавим следующим шагом.
</p>
</div>
<button class="btn btn-disabled w-full">Скоро</button>
</div>
</article>
<article
v-for="(product, index) in filteredProducts"
:key="product.id"
@@ -103,6 +136,16 @@ const filteredProducts = computed(() => {
</figure>
<div class="px-1 pb-2 pt-3">
<h2 class="text-lg font-bold text-[#133826]">{{ product.name }}</h2>
<p class="text-xs text-base-content/65">SKU: {{ product.sku }}</p>
<div class="mt-3 flex items-center justify-between">
<span class="badge badge-outline">В корзине: {{ cart.getQuantity(product.id) }}</span>
<button
class="btn btn-circle btn-sm border-0 bg-[#139957] text-white hover:bg-[#0d854a]"
@click="addProductToCart(product)"
>
+
</button>
</div>
</div>
</article>
</div>