58 lines
1.7 KiB
Vue
58 lines
1.7 KiB
Vue
<script setup>
|
||
import DrawerHead from './DrawerHead.vue'
|
||
import CartItemList from '@/components/CartItemList.vue'
|
||
import { inject } from 'vue'
|
||
import { decimalFormatter } from '@/utils/helpers.js'
|
||
|
||
const { closeDrawer, totalPrice } = inject('cart')
|
||
|
||
defineProps({
|
||
cart: {
|
||
type: Array,
|
||
required: true
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<div @click="closeDrawer" class="fixed top-0 left-0 h-full w-full bg-black z-10 opacity-75">
|
||
</div>
|
||
|
||
<div @click.stop class="bg-white w-96 h-full fixed top-0 right-0 z-20 p-8">
|
||
<DrawerHead/>
|
||
|
||
<div v-if="cart.length > 0">
|
||
<CartItemList :items="cart" />
|
||
|
||
<div class="flex flex-col gap-2 my-6">
|
||
<div class="flex justify-between gap-2">
|
||
<span>Итого:</span>
|
||
<div class="flex-1 border-b border-dashed"></div>
|
||
<b>{{ decimalFormatter.format(totalPrice) }} руб.</b>
|
||
</div>
|
||
|
||
<div class="flex justify-between gap-2">
|
||
<span>Налог 5%:</span>
|
||
<div class="flex-1 border-b border-dashed"></div>
|
||
<b>{{ decimalFormatter.format(totalPrice * 0.05) }} руб.</b>
|
||
</div>
|
||
|
||
<div class="flex justify-between gap-2">
|
||
<span>К оплате:</span>
|
||
<div class="flex-1 border-b border-dashed"></div>
|
||
<b>{{ decimalFormatter.format(totalPrice * 0.95) }} руб.</b>
|
||
</div>
|
||
|
||
<button class="mt-5 bg-lime-500 w-full rounded-xl py-3 text-white transition disabled:bg-slate-300 hover:bg-lime-600 active:bg-lime-700">
|
||
Оформить заказ
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<h2 v-else class="text-lg font-bold text-center mt-10 text-slate-500">
|
||
В корзине нет товаров
|
||
</h2>
|
||
|
||
</div>
|
||
</template>
|