105 lines
4.4 KiB
Vue
105 lines
4.4 KiB
Vue
<script setup lang="ts">
|
||
import { useMutation } from '@vue/apollo-composable';
|
||
import { SubmitCalculationOrderDocument } from '~/composables/graphql/generated';
|
||
|
||
const productName = ref('');
|
||
const quantity = ref(1);
|
||
const width = ref(100);
|
||
const thickness = ref(50);
|
||
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} отправлена`;
|
||
errorMessage.value = '';
|
||
});
|
||
|
||
onError((error) => {
|
||
errorMessage.value = error.message;
|
||
success.value = '';
|
||
});
|
||
|
||
function submit() {
|
||
mutate({
|
||
input: {
|
||
productName: productName.value,
|
||
quantity: Number(quantity.value),
|
||
parameters: {
|
||
width: Number(width.value),
|
||
thickness: Number(thickness.value),
|
||
color: color.value,
|
||
},
|
||
},
|
||
});
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<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>
|
||
|
||
<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 mx-auto max-w-4xl">{{ success }}</div>
|
||
<div v-if="errorMessage" class="alert alert-error">{{ errorMessage }}</div>
|
||
</section>
|
||
</template>
|