96 lines
3.5 KiB
Vue
96 lines
3.5 KiB
Vue
<template>
|
|
<UiContainer>
|
|
<div class="xl:w-[85%] mx-auto space-25-55">
|
|
<div class="space-25-55">
|
|
<div class="w-full flex items-center sm:justify-center">
|
|
<div
|
|
class="flex items-center justify-between sm:justify-center sm:gap-[25px] text-gray dark:text-button-disabled w-full sm:w-auto"
|
|
>
|
|
<div class="sm:px-6 sm:py-3 mx-auto">
|
|
{{ $t("login") }}
|
|
</div>
|
|
<div class="sm:px-6 sm:py-3 mx-auto">
|
|
{{ $t("address") }}
|
|
</div>
|
|
<div
|
|
class="cursor-pointer transition-all text-inter hover:bg-button-hover bg-button text-white font-medium rounded-xl px-3 py-1 sm:px-6 sm:py-3"
|
|
>
|
|
{{ $t("summary") }}
|
|
</div>
|
|
<div class="hidden sm:block sm:px-6 sm:py-3 sm:mx-auto">
|
|
{{ $t("order_placed") }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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">
|
|
<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"
|
|
>
|
|
</div>
|
|
|
|
<div
|
|
class="flex flex-col justify-between min-h-full w-full gap-[7px] sm:gap-[15px]"
|
|
>
|
|
<div class="w-full flex items-center justify-between">
|
|
<h3
|
|
class="text-[10px] sm:text-base md:text-lg text-xl font-bold leading-[130%] sm:leading-[150%] max-w-[100px] sm:max-w-[200px] md:max-w-[250px]"
|
|
>
|
|
{{ item.name }}
|
|
</h3>
|
|
</div>
|
|
<div class="flex w-full justify-between gap-[10px]">
|
|
<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"
|
|
>
|
|
{{ item.total_price }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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"
|
|
>
|
|
<span>{{ checkoutStore.defaultAddress?.address.name }}
|
|
{{ checkoutStore.defaultAddress?.address.surname }}</span>
|
|
<span>{{ checkoutStore.defaultAddress?.address.street }}</span>
|
|
<span>{{ checkoutStore.defaultAddress?.address.postcode }}
|
|
{{ checkoutStore.defaultAddress?.address.city }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</UiContainer>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const checkoutStore = useCheckoutStore()
|
|
|
|
checkoutStore.getUserCart()
|
|
checkoutStore.getDeliveryOptions()
|
|
checkoutStore.getDefAddress()
|
|
</script>
|