114 lines
4.0 KiB
Vue
114 lines
4.0 KiB
Vue
<template>
|
||
<section class="relative z-50 ml-4">
|
||
<UiHeading tag="h1" size="300" class="font-bold mb-16"> Корзина </UiHeading>
|
||
<div class="-ml-6">
|
||
<div
|
||
v-for="({ name, src, price, message, buy, id }, index) in cartList.items"
|
||
:key="index"
|
||
class="flex items-start mb-24"
|
||
>
|
||
<div class="w-40 h-40 relative -top-5">
|
||
<img :src="`${src}`" alt="book" />
|
||
</div>
|
||
<UiParagraph size="300" class="whitespace-pre mb-10 mr-12 w-80">{{ name }}</UiParagraph>
|
||
<UiParagraph size="300" class="whitespace-pre mb-10 mr-20">{{ message }}</UiParagraph>
|
||
<UiButton
|
||
:id="id"
|
||
class="mb-10"
|
||
v-if="store.getQuantity(id) === 0"
|
||
@click="handleAddToCart(id)"
|
||
>{{ buy }}</UiButton
|
||
>
|
||
<template v-else>
|
||
<div class="flex items-center gap-8 mr-20">
|
||
<button
|
||
class="w-8 h-8 flex items-center justify-center rounded-full border border-white text-white text-2xl"
|
||
@click="handleRemove(id)"
|
||
aria-label="Уменьшить количество"
|
||
>
|
||
−
|
||
</button>
|
||
<span class="text-white text-2xl">{{ store.getQuantity(id) }}</span>
|
||
<button
|
||
class="w-8 h-8 flex items-center justify-center rounded-full border border-white text-white text-2xl"
|
||
@click="handleIncrement(id)"
|
||
aria-label="Увеличить количество"
|
||
>
|
||
+
|
||
</button>
|
||
</div>
|
||
<span class="text-white text-2xl font-bold mr-20 whitespace-nowrap">
|
||
{{ Number(price) * store.getQuantity(id) }} ₽
|
||
</span>
|
||
<button
|
||
class="w-8 h-8 flex items-center justify-center rounded-full border border-white text-white text-xl"
|
||
@click="handleRemove(id)"
|
||
aria-label="Удалить товар"
|
||
>
|
||
×
|
||
</button>
|
||
</template>
|
||
</div>
|
||
<div class="flex items-center justify-end mt-8">
|
||
<UiParagraph is="span" size="300">Общая стоимость</UiParagraph>
|
||
<template v-if="isSpecialPrice">
|
||
<span class="text-white text-2xl font-bold ml-4 line-through select-none">
|
||
{{ regularTotalPrice }} ₽
|
||
</span>
|
||
<span class="text-primary text-3xl font-bold ml-4">
|
||
{{ store.getTotalPrice(cartList.items) }} ₽
|
||
</span>
|
||
</template>
|
||
<template v-else>
|
||
<span class="text-primary text-3xl font-bold ml-4">
|
||
{{ store.getTotalPrice(cartList.items) }} ₽
|
||
</span>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
<div class="mt-10 flex flex-col items-center justify-center">
|
||
<UiButton class="w-[660px]"> перейти к оформлению </UiButton>
|
||
<UiParagraph is="span" size="300" class="mb-10 mt-5"
|
||
>После оплаты книги сразу будут доступны для скачивания</UiParagraph
|
||
>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import cartList from './_data/cart.json'
|
||
import UiHeading from '~/components/Typography/UiHeading.vue'
|
||
import UiParagraph from '~/components/Typography/UiParagraph.vue'
|
||
import { useSelectedBook } from '@/store/useSelectedBook'
|
||
import { computed } from 'vue'
|
||
|
||
const store = useSelectedBook()
|
||
|
||
function handleIncrement(id: number) {
|
||
store.increment(id)
|
||
}
|
||
|
||
function handleDecrement(id: number) {
|
||
store.decrement(id)
|
||
}
|
||
|
||
function handleRemove(id: number) {
|
||
store.reset(id)
|
||
}
|
||
|
||
function handleAddToCart(id: number) {
|
||
store.addToCart(id)
|
||
}
|
||
|
||
const selectedBooksCount = computed(() => store.cartQuantities.filter((i) => i.quantity > 0).length)
|
||
|
||
const isSpecialPrice = computed(() => selectedBooksCount.value === 2)
|
||
|
||
const regularTotalPrice = computed(() => {
|
||
// Сумма без скидки
|
||
return store.cartQuantities.reduce((sum, item) => {
|
||
const book = cartList.items.find((b: any) => b.id === item.id)
|
||
return sum + (book ? Number(book.price) * item.quantity : 0)
|
||
}, 0)
|
||
})
|
||
</script>
|