mohadese-nm
57 lines
1.3 KiB
Vue
57 lines
1.3 KiB
Vue
<template>
|
|
<NuxtLayout :name="device" :config="config">
|
|
<main class="cart">
|
|
<CartTabs />
|
|
<section>
|
|
<div>
|
|
<ul v-if="cart.items.length > 0">
|
|
<li v-for="(item, i) in cart.items" :key="i">
|
|
<CartItem :data="item.product" />
|
|
</li>
|
|
</ul>
|
|
<CartTotalAside />
|
|
</div>
|
|
</section>
|
|
<CartTotalFixed v-if="device == 'mobile'" />
|
|
<CartBuyersBought />
|
|
</main>
|
|
</NuxtLayout>
|
|
</template>
|
|
|
|
<script setup>
|
|
const config = reactive({ mobile: { header: false } });
|
|
const { device } = inject("service");
|
|
|
|
const cart = useCartStore();
|
|
if (import.meta.client && localStorage.getItem("cart")) {
|
|
cart.items = JSON.parse(localStorage.getItem("cart") || "{}");
|
|
} else cart.get();
|
|
|
|
provide(
|
|
"data",
|
|
computed(() => cart.items)
|
|
);
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.cart {
|
|
@apply w-full flex flex-col gap-[2.6rem] pb-32 lg:gap-6 lg:pt-10;
|
|
|
|
& > section:not([class]) {
|
|
@apply w-full min-h-96 flex lg:mb-[6.4rem];
|
|
|
|
& > div {
|
|
@apply container flex flex-col items-center lg:items-start lg:flex-row gap-6;
|
|
|
|
& > ul {
|
|
@apply max-w-[67.6rem] flex flex-col border-b lg:rounded-[0.6rem] lg:border border-[#E5E5E5] grow;
|
|
|
|
& > li {
|
|
@apply p-6 lg:p-10 border-b last:border-b-0 border-[#E5E5E5];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|