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

Redesign client cabinet UI with capsule nav and card layouts

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-04-01 18:59:20 +07:00
parent 5b5f6250d3
commit b4537c1483
9 changed files with 598 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
app/pages/cart.vue
View File

@@ -11,6 +11,7 @@ const color = ref('прозрачный');
const { mutate, loading, onDone, onError } = useMutation(SubmitCalculationOrderDocument);
const success = ref('');
const errorMessage = ref('');
const calculatedVolume = computed(() => Number(quantity.value) * Number(width.value) * Number(thickness.value));
onDone((result) => {
success.value = `Заявка ${result.data?.submitCalculationOrder.code} отправлена`;
@@ -38,36 +39,66 @@ function submit() {
</script>
<template>
<section class="space-y-4 max-w-2xl">
<h1 class="text-2xl font-bold">Корзина / заявка на расчет</h1>
<div class="card bg-base-100 border border-base-300">
<div class="card-body space-y-3">
<label class="form-control">
<span class="label-text">Название позиции</span>
<input v-model="productName" type="text" class="input input-bordered" />
</label>
<label class="form-control">
<span class="label-text">Количество</span>
<input v-model="quantity" type="number" min="1" class="input input-bordered" />
</label>
<label class="form-control">
<span class="label-text">Ширина</span>
<input v-model="width" type="number" min="1" class="input input-bordered" />
</label>
<label class="form-control">
<span class="label-text">Толщина</span>
<input v-model="thickness" type="number" min="1" class="input input-bordered" />
</label>
<label class="form-control">
<span class="label-text">Цвет</span>
<input v-model="color" type="text" class="input input-bordered" />
</label>
<section class="space-y-6">
<div class="text-center">
<h1 class="text-3xl font-extrabold text-[#0f2f20]">Корзина и checkout</h1>
<p class="mt-1 text-sm text-[#28543f]/80">Заполните параметры и отправьте расчёт менеджеру.</p>
</div>
<button class="btn btn-primary" :disabled="loading" @click="submit">Отправить менеджеру</button>
<div class="mx-auto max-w-4xl rounded-[30px] p-1 shadow-[0_26px_60px_rgba(13,133,74,0.18)]">
<div class="surface-card grid gap-6 rounded-[26px] p-5 md:grid-cols-[1.45fr_1fr] md:p-6">
<div class="space-y-3">
<label class="form-control">
<span class="label-text font-semibold text-[#194631]">Название позиции</span>
<input v-model="productName" type="text" class="input input-bordered border-[#d0e8d8] bg-white/80">
</label>
<div class="grid gap-3 sm:grid-cols-2">
<label class="form-control">
<span class="label-text font-semibold text-[#194631]">Количество</span>
<input v-model="quantity" type="number" min="1" class="input input-bordered border-[#d0e8d8] bg-white/80">
</label>
<label class="form-control">
<span class="label-text font-semibold text-[#194631]">Ширина</span>
<input v-model="width" type="number" min="1" class="input input-bordered border-[#d0e8d8] bg-white/80">
</label>
<label class="form-control">
<span class="label-text font-semibold text-[#194631]">Толщина</span>
<input v-model="thickness" type="number" min="1" class="input input-bordered border-[#d0e8d8] bg-white/80">
</label>
<label class="form-control">
<span class="label-text font-semibold text-[#194631]">Цвет</span>
<input v-model="color" type="text" class="input input-bordered border-[#d0e8d8] bg-white/80">
</label>
</div>
<button class="btn border-0 bg-[#139957] text-white hover:bg-[#0d854a]" :disabled="loading" @click="submit">
{{ loading ? 'Отправляем…' : 'Отправить менеджеру' }}
</button>
</div>
<aside class="rounded-2xl border border-[#cde8d8] bg-white/75 p-4">
<h2 class="text-lg font-bold text-[#103221]">Итог checkout</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">{{ productName || 'Не указано' }}</span>
</li>
<li class="flex items-center justify-between">
<span>Количество</span>
<span class="font-semibold">{{ quantity }}</span>
</li>
<li class="flex items-center justify-between">
<span>Цвет</span>
<span class="font-semibold">{{ color }}</span>
</li>
</ul>
<div class="mt-4 rounded-xl bg-[#139957]/10 p-3 text-sm text-[#174631]">
Оценочный объём: <span class="font-bold">{{ calculatedVolume }}</span>
</div>
</aside>
</div>
</div>
<div v-if="success" class="alert alert-success">{{ success }}</div>
<div v-if="success" class="alert alert-success mx-auto max-w-4xl">{{ success }}</div>
<div v-if="errorMessage" class="alert alert-error">{{ errorMessage }}</div>
</section>
</template>