goc_daniel/b2b
2
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: cart

Browse Source
This commit is contained in:
Valeriia Yakovenko
2026-04-15 12:42:20 +02:00
parent c97251c15b
commit e335c3aa6f
8 changed files with 301 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
bo/src/components/customer/PageCarts.vue
View File

@@ -1,7 +1,7 @@
<template>
<component :is="Default || 'div'">
<div class="flex flex-col gap-5 md:gap-10">
<div class="flex flex-col md:flex-row justify-between gap-4">
<div class="flex flex-col md:flex-row justify-between items-center gap-4">
<h1 class="text-2xl font-bold text-black dark:text-white">{{ t('Shopping Carts') }}</h1>
<div class="flex gap-3">
<UButton color="primary" @click="showCreateModal = true"
@@ -19,23 +19,23 @@
class="text-lg font-semibold text-black dark:text-white p-4 border-b border-(--border-light) dark:border-(--border-dark)">
{{ t('Your Carts') }}
</h2>
<div v-if="cartStore.carts.length > 0"
<div v-if="cartStore.carts?.length > 0"
class="divide-y divide-(--border-light) dark:divide-(--border-dark)">
<div v-for="cart in cartStore.carts" :key="cart.cart_id" @click="openCart(cart)"
class="p-4 cursor-pointer transition-colors flex gap-2 items-center justify-between" :class="cartStore.activeCartId === cart.cart_id
? 'bg-blue-50 dark:bg-blue-900/20 border-l-4 border-(--accent-blue-light) dark:border-(--accent-blue-dark)'
<div v-for="cart in cartStore.carts" :key="cart.cart_id"
@click="cartStore.setActiveCart(cart.cart_id)"
class="p-4 cursor-pointer flex gap-2 items-center justify-between" :class="cartStore.activeCartId === cart.cart_id
? 'bg-blue-50 dark:bg-blue-900/20'
: 'hover:bg-gray-50 dark:hover:bg-gray-800 border-l-4 border-transparent'">
<div class="flex-1 min-w-0">
<div class="flex items-center gap-2">
<p class="text-red-600 font-medium truncate">{{ cart.cart_id }}</p>
<p class="text-black dark:text-white font-medium truncate cursor-pointer">{{
cart.name }}</p>
<UIcon v-if="cartStore.activeCartId === cart.cart_id" name="mdi:check-circle"
class="text-(--accent-blue-light) dark:text-(--accent-blue-dark) flex-shrink-0" />
<p class="text-black dark:text-white font-medium truncate cursor-pointer"
@click="openCart(cart)">{{
cart.name }}</p>
</div>
</div>
<!-- <input type="checkbox" :checked="cartStore.activeCartId === cart.cart_id"
@change="cartStore.setActiveCart(cart.cart_id)" /> -->
<input type="checkbox" :checked="cartStore.activeCartId === cart.cart_id"
@change="toggleCart(cart.cart_id)" />
</div>
</div>
<div v-else class="p-8 text-center">
@@ -98,8 +98,15 @@ onMounted(() => {
})
function openCart(cart) {
router.push({ name: 'customer-cart', params: { id: cart.cart_id } });
}
function toggleCart(cartId: number) {
if (cartStore.activeCartId === cartId) {
cartStore.setActiveCart(null)
} else {
cartStore.setActiveCart(cartId)
}
}
</script>