WIP: cart

This commit is contained in:
Nikita Kiselev
2025-07-22 00:27:40 +03:00
parent ce2c9e374d
commit 626ee6ecb0
10 changed files with 165 additions and 37 deletions

View File

@@ -1,12 +1,20 @@
<template>
<div class="max-w-3xl mx-auto p-4 space-y-6">
<h2 class="text-2xl">Корзина</h2>
<h2 class="text-2xl">
Корзина
<span v-if="cart.isLoading" class="loading loading-spinner loading-md"></span>
</h2>
<div>
<button class="btn" @click="cart.checkout()" :disabled="cart.isLoading">
Checkout
</button>
</div>
<div v-if="cart.items.length > 0">
<div
v-for="item in cart.items"
:key="item.productId"
:key="item.rowId"
class="card w-96 bg-base-100 card-sm shadow-sm"
>
<div class="card-body">
@@ -31,8 +39,8 @@
</p>
</div>
<div class="card-actions justify-between">
<Quantity v-model="item.quantity" @update:modelValue="onQuantityUpdate(item, $event)"/>
<button class="btn btn-error" @click="remove(item)">
<Quantity v-model="item.quantity" @update:modelValue="onQuantityUpdate(item.rowId, $event)"/>
<button class="btn btn-error" @click="cart.removeItem(item.rowId)">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
</svg>
@@ -57,14 +65,9 @@ import Quantity from "@/components/Quantity.vue";
const cart = useCartStore()
function onQuantityUpdate(item, newQuantity) {
function onQuantityUpdate(rowId, newQuantity) {
if (newQuantity === 0) {
remove(item)
cart.removeItem(rowId)
}
}
function remove(item) {
const index = cart.items.findIndex(i => i.productId === item.productId)
if (index !== -1) cart.items.splice(index, 1)
}
</script>