yakovenko_arina/your-gold
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

summary checkout

Browse Source
This commit is contained in:
Arina Yakovenko
2025-07-02 15:55:13 +02:00
parent fbb6c071af
commit 834b48a307
7 changed files with 464 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
components/section/CheckoutSummary.vue
View File

@ -23,13 +23,13 @@
</div>
<div class="grid grid-cols-3 gap-[30px]">
<div class="col-start-1 col-end-3 space-y-5">
<h4 class="h4-uppercase-bold-inter">Seznam produktů</h4>
<div class="border-2 border-block rounded-2xl p-[50px] space-25-55">
<h4 class="h4-uppercase-bold-inter">{{ component.front_section_lang[0].data.product_list }}</h4>
<div class="border-2 border-block rounded-[15px] p-[50px] space-25-55">
<div v-for="(item, index) in checkoutStore.products" :key="index">
<div class="flex items-center h-[150px]">
<div class="min-w-[150px] flex items-center justify-center h-[150px]">
<img :src="`/api/public/file/${item.picture_uuid}.webp`"
alt="" class="max-w-full max-h-full object-contain">
<img :src="`/api/public/file/${item.picture_uuid}.webp`" alt=""
class="max-w-full max-h-full object-contain">
</div>
<div class="flex flex-col justify-between min-h-full w-full gap-[7px] sm:gap-[15px]">
@ -50,10 +50,12 @@
</div>
</div>
</div>
<div class="">
<div class="space-y-5">
<h4 class="h4-uppercase-bold-inter">Adresa účtu</h4>
<div class="border-2 border-block rounded-2xl px-2 py-3 flex flex-col gap-1">
<div class="flex flex-col items-center gap-[30px]">
<div class="space-y-5 w-full">
<h4 class="h4-uppercase-bold-inter">{{ component.front_section_lang[0].data.account_address }}
</h4>
<div
class="border-2 border-block rounded-[8px] px-[25px] py-[15px] flex flex-col gap-1 text-xl">
<span>{{ checkoutStore.defaultAddress?.address.name }} {{
checkoutStore.defaultAddress?.address.surname }}</span>
<span>{{ checkoutStore.defaultAddress?.address.street }}</span>
@ -61,17 +63,161 @@
checkoutStore.defaultAddress?.address.city }}</span>
</div>
</div>
<div class="flex flex-col space-y-5 w-full h-full">
<h4 class="h4-uppercase-bold-inter">{{ component.front_section_lang[0].data.note }}</h4>
<textarea v-model="checkoutStore.vNote"
class="border-2 border-block rounded-[8px] p-3 w-full flex-1 resize-none placeholder:text-button"
name="rty" id="1" :placeholder="component.front_section_lang[0].data.note"></textarea>
</div>
</div>
<div class="col-start-1 col-end-3 space-y-5">
<h4 class="h4-uppercase-bold-inter">Typ doručení</h4>
<div class="border-2 border-block rounded-[15px] p-[50px] space-y-[25px] text-xl">
<div @click="checkoutStore.setCurrentDelivery(delivery)"
v-for="delivery in checkoutStore.deliveryOption" class="flex flex-col cursor-pointer">
<div class="flex items-end justify-between">
<div class="flex gap-[15px]">
<div class="mt-1 w-4 h-4 border-2 border-button rounded-full">
<div v-if="checkoutStore.currentDelivery === delivery"
class="w-full h-full border-3 border-bg-light dark:border-bg-dark rounded-full bg-button">
</div>
</div>
<div class="flex flex-col">
<span>{{ delivery.delivery_supplier_name }}</span>
<span>{{ delivery.country_name }}</span>
</div>
</div>
<p class="font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold">
{{ menuStore.formatPrice(Number(delivery.shippment_price)) }}
</p>
</div>
</div>
</div>
</div>
<div class="space-y-5 w-full flex flex-col h-full">
<h4 class="h4-uppercase-bold-inter">{{ component.front_section_lang[0].data.payment_method }}</h4>
<div
class="border-2 border-block rounded-[8px] px-[25px] py-[15px] flex-1 flex flex-col gap-1 text-xl overflow-auto">
<UCarousel :prevIcon="'i-lucide-chevron-left'" :nextIcon="'i-lucide-chevron-right'" :ui="{
viewport: 'h-full',
container: 'h-full',
item: 'h-full',
prev: 'ring-0 text-button disable:text-block p-0 ring-inset ring-accented bg-inherit disabled:bg-inherit',
next: 'ring-0 text-button disable:text-block p-0 text-[30px] bg-inherit disabled:bg-inherit',
arrows: ''
}" :prev="{ size: 'xl' }" :next="{ size: 'xl' }" arrows :items="checkoutStore.paymentMethods"
class="relative max-w-full mx-10 h-full">
<template #default="{ item }">
<div class="flex flex-col items-start justify-between h-full">
<span>{{ item.bank_name }}</span>
<span>{{ item.country_name }}</span>
<span>{{ item.street_and_number }}</span>
<span>{{ item.iban }}</span>
<span>{{ item.swift }}</span>
</div>
</template>
</UCarousel>
</div>
</div>
</div>
<div class="w-full border-y-2 border-block p-[25px] flex flex-col gap-[15px] text-xl">
<div class="flex items-center justify-between">
<p>{{ component.front_section_lang[0].data.subtotal }}</p>
<p>€5,043.18</p>
</div>
<div class="flex items-center justify-between">
<p>{{ component.front_section_lang[0].data.shipping_cost }}</p>
<p>€5,043.18</p>
</div>
<div class="flex items-center justify-between uppercase">
<p>{{ component.front_section_lang[0].data.total }}</p>
<p
class="text-accent-green-light dark:text-accent-green-dark font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold">
€5,043.18
</p>
</div>
</div>
<div class="flex justify-between mt-1">
<div class="flex flex-col gap-1 text-white w-full">
<div class="flex gap-3 text-black dark:text-white items-center">
<input v-model="checkoutStore.vLegal" type="checkbox" id="first" name="first" />
<!-- <label for="first" class="text-sm leading-snug">
{{ $t("I accept ") }}
<NuxtLink target="_blank"
:to="{ name: 'lang-info-name', params: { lang: menuStore.selectedLanguage.iso_code, name: 'legal_statement.html' } }"
class="underline cursor-pointer">
{{ $t("the legal statement*") }}
</NuxtLink>
</label> -->
<p class="text-lg"> {{ $t("I accept ") }} {{ $t("the legal statement*") }}</p>
</div>
<span v-if="checkoutStore.legalValidation" class="text-xs text-red-600 ml-6">
{{ $t("You need to accept this") }}
</span>
<div class="flex gap-3 text-black dark:text-white items-center mt-2">
<input v-model="checkoutStore.vTerms" type="checkbox" id="second" name="second" />
<!-- <label for="second" class="text-sm leading-snug">
{{ $t("I accept ") }}
<NuxtLink target="_blank"
:to="{ name: 'lang-info-name', params: { lang: menuStore.selectedLanguage.iso_code, name: 'general_terms_and_conditions.html' } }"
class="underline cursor-pointer">
{{ $t("general terms and conditions*") }}
</NuxtLink>
</label> -->
<p class="text-lg"> {{ $t("I accept ") }} {{ $t("general terms and conditions*") }}</p>
</div>
<span v-if="checkoutStore.termsValidation" class="text-xs text-red-600 ml-6">
{{ $t("You need to accept this") }}
</span>
</div>
<UiButtonArrow type="fill" :arrow="true">
{{ $t("Buy") }}
</UiButtonArrow>
</div>
</div>
</UiContainer>
</template>
<script setup lang="ts">
import { UCarousel } from '#components';
const checkoutStore = useCheckoutStore();
const productStore = useProductStore()
const menuStore = useMenuStore()
checkoutStore.getOrder()
checkoutStore.getBankAccount()
checkoutStore.getUserCart()
checkoutStore.getDeliveryOptions()
checkoutStore.getDefAddress()
defineProps<{
component: {
id: number
name: string
img: string[]
component_name: string
is_no_lang: boolean
page_name: string
front_section_lang: {
data: {
product_list: string
account_address: string
note: string
delivery_type: string
payment_method: string
subtotal: string
shipping_cost: string
total: string
accept: string
legal: string
terms: string
}
id_front_section: number
id_lang: number
}[]
}
}>();
</script>

14
components/section/Product.vue
View File

@ -1,9 +1,10 @@
<template>
<div
class="w-[150px] sm:w-[260px] md:w-[330px] px-2 py-3 sm:py-5 sm:px-[15px] bg-block rounded-2xl flex flex-col items-center gap-[15px] sm:gap-[50px]">
<img :src="`/api/public/file/${props.product?.cover_picture_uuid}.webp`" alt="Product Image"
class="h-[95px] sm:h-[180px] md:h-[205px] rounded-[5px]"
onerror="this.onerror=null; this.src='/photo.svg';" />
<img :src="`/api/public/file/${props.product?.cover_picture_uuid}.webp`" alt="Product Image" :class="[
'h-[95px] sm:min-h-[180px] md:min-h-[205px] rounded-[5px]',
isError ? 'max-w-[50%]' : ''
]" @error="handleImageError" />
<div class="flex flex-col justify-between h-full w-full gap-[7px] sSm:gap-[15px]">
<div class="flex flex-col gap-[7px] sm:gap-[15px] w-full">
@ -33,4 +34,11 @@ const props = defineProps({
});
const productStore = useProductStore()
const isError = ref(false);
function handleImageError(event: Event) {
isError.value = true;
(event.target as HTMLImageElement).src = '/photo.svg';
}
</script>