nikitakiselev/interview-demo-code
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: UI changes

Browse Source
This commit is contained in:
Nikita Kiselev
2025-08-16 21:53:55 +03:00
parent d7df5a4b5c
commit d522cbef83
13 changed files with 173 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
spa/src/views/Checkout.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="max-w-3xl mx-auto p-4 space-y-6 pb-30 safe-top">
<h2 class="text-2xl">
<div class="max-w-3xl mx-auto space-y-6 pb-30 safe-top">
<h2 class="text-2xl text-center">
Оформление заказа
</h2>
@@ -10,42 +10,39 @@
v-model="checkout.customer.firstName"
placeholder="Введите имя"
:error="checkout.validationErrors.firstName"
:maxlength="32"
@clearError="checkout.clearError('firstName')"
/>
<TgInput
v-model="checkout.customer.lastName"
placeholder="Введите фамилию"
:maxlength="32"
:error="checkout.validationErrors.lastName"
@clearError="checkout.clearError('lastName')"
/>
<IMaskComponent
v-model="checkout.customer.phone"
type="tel"
class="input input-lg w-full"
mask="+{7} (000) 000-00-00"
placeholder="Введите телефон"
:unmask="true"
/>
<TgInput
v-model="checkout.customer.email"
type="email"
placeholder="Введите email"
placeholder="Введите email (опционально)"
:maxlength="96"
:error="checkout.validationErrors.email"
@clearError="checkout.clearError('email')"
/>
<TgInput
v-model="checkout.customer.phone"
type="tel"
placeholder="Введите телефон"
:error="checkout.validationErrors.phone"
@clearError="checkout.clearError('phone')"
/>
<TgInput
v-model="checkout.customer.address"
placeholder="Адрес доставки"
:error="checkout.validationErrors.address"
@clearError="checkout.clearError('address')"
/>
<TgTextarea
v-model="checkout.customer.comment"
placeholder="Комментарий"
placeholder="Комментарий (опционально)"
:error="checkout.validationErrors.comment"
@clearError="checkout.clearError('comment')"
/>
@@ -73,6 +70,7 @@ import TgInput from "@/components/Form/TgInput.vue";
import TgTextarea from "@/components/Form/TgTextarea.vue";
import {useRouter} from "vue-router";
import {computed, ref} from "vue";
import {IMaskComponent} from "vue-imask";
const checkout = useCheckoutStore();
const router = useRouter();

39
spa/src/views/OrderCreated.vue
View File

@@ -1,16 +1,43 @@
<template>
<div class="safe-top max-w-3xl mx-auto p-4 space-y-6 pb-30 flex flex-col items-center h-full justify-center">
<div class="flex flex-col justify-center items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-20 text-success">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 0 1-1.043 3.296 3.745 3.745 0 0 1-3.296 1.043A3.745 3.745 0 0 1 12 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 0 1-3.296-1.043 3.745 3.745 0 0 1-1.043-3.296A3.745 3.745 0 0 1 3 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 0 1 1.043-3.296 3.746 3.746 0 0 1 3.296-1.043A3.746 3.746 0 0 1 12 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 0 1 3.296 1.043 3.746 3.746 0 0 1 1.043 3.296A3.745 3.745 0 0 1 21 12Z" />
</svg>
<div class="flex flex-col justify-center items-center px-5">
<div class="mb-3">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-25 text-success">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 0 1-1.043 3.296 3.745 3.745 0 0 1-3.296 1.043A3.745 3.745 0 0 1 12 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 0 1-3.296-1.043 3.745 3.745 0 0 1-1.043-3.296A3.745 3.745 0 0 1 3 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 0 1 1.043-3.296 3.746 3.746 0 0 1 3.296-1.043A3.746 3.746 0 0 1 12 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 0 1 3.296 1.043 3.746 3.746 0 0 1 1.043 3.296A3.745 3.745 0 0 1 21 12Z" />
</svg>
</div>
<p class="text-2xl font-bold mb-3">Спасибо за заказ!</p>
<p class="text-center mb-4">Ваш заказ успешно оформлен и будет обработан в ближайшее время.</p>
<ul v-if="checkout.order" class="list w-full bg-base-200 mb-4">
<li class="list-row flex justify-between">
<div>Номер заказа:</div>
<div class="font-bold">#{{ checkout.order.id }}</div>
</li>
<li class="list-row flex justify-between">
<div>Дата:</div>
<div class="font-bold">{{ checkout.order.created_at }}</div>
</li>
<li class="list-row flex justify-between">
<div>Сумма:</div>
<div class="font-bold">{{ checkout.order.total }}</div>
</li>
</ul>
<p class="text-xs text-neutral mb-10">
Подтверждение отправлено Вам в личных сообщениях.
</p>
<p class="text-lg mb-3">Ваш заказ создан!</p>
<RouterLink class="btn btn-primary" to="/">На главную</RouterLink>
</div>
</div>
</template>
<script setup lang="ts">
<script setup>
import {useCheckoutStore} from "@/stores/CheckoutStore.js";
const checkout = useCheckoutStore();
</script>