don_confiao_frontend/src/pages/catalog.vue

<template>
  <v-container fluid>
    <v-row>
      <v-col cols="12" md="9">
        <v-card-title>
          <span class="headline">Catálogo</span>
        </v-card-title>
        <v-list-item v-for="item in items" :key="item.id" class="catalog-item">
          <Card :product="item" :increase="increase" :decrease="decrease" :currency="currency" @add-to-cart="addToCart"/>
        </v-list-item>
      </v-col>
      
      <v-col cols="12" md="3">
        <div class="cart-sidebar">
          <Cart 
            :cart-items="cartItems" 
            :currency="currency"
            @remove="removeFromCart"
            @checkout="goToCheckout"
            @update-quantity="updateCartQuantity"
          />
        </div>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import Card from '@/components/catalog/Card.vue';
import Cart from '@/components/catalog/Cart.vue';

export default {
  components: {
    Card,
    Cart
  },
  data() {
    return {
      cartItems: [],
      items: [
        { id: 1, name: 'Producto 1', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
        { id: 2, name: 'Producto 2', description: 'Descripción del producto 2', img: 'https://picsum.photos/300/200?random=2', quantity: 0, price: 1200 },
        { id: 3, name: 'Producto 3', description: 'Descripción del producto 3', img: 'https://picsum.photos/300/200?random=3', quantity: 0, price: 1200 },
        { id: 4, name: 'Producto 4', description: 'Descripción del producto 4', img: 'https://picsum.photos/300/200?random=4', quantity: 0, price: 1200 },
        { id: 5, name: 'Producto 5', description: 'Descripción del producto 5', img: 'https://picsum.photos/300/200?random=5', quantity: 0, price: 1200 },
        { id: 6, name: 'Producto 6', description: 'Descripción del producto 6', img: 'https://picsum.photos/300/200?random=6', quantity: 0, price: 1200 },
        { id: 7, name: 'Producto 7', description: 'Descripción del producto 7', img: 'https://picsum.photos/300/200?random=7', quantity: 0, price: 1200 },
        { id: 8, name: 'Producto 8', description: 'Descripción del producto 8', img: 'https://picsum.photos/300/200?random=8', quantity: 0, price: 1200 },
        { id: 9, name: 'Producto 9', description: 'Descripción del producto 9', img: 'https://picsum.photos/300/200?random=9', quantity: 0, price: 1200 },
        { id: 10, name: 'Producto 10', description: 'Descripción del producto 10', img: 'https://picsum.photos/300/200?random=10', quantity: 0, price: 1200 },
        { id: 11, name: 'Producto 11', description: 'Descripción del producto 11', img: 'https://picsum.photos/300/200?random=11', quantity: 0, price: 1200 },
        { id: 12, name: 'Producto 12', description: 'Descripción del producto 12', img: 'https://picsum.photos/300/200?random=12', quantity: 0, price: 1200 },
        { id: 13, name: 'Producto 13', description: 'Descripción del producto 13', img: 'https://picsum.photos/300/200?random=13', quantity: 0, price: 1200 },
        { id: 14, name: 'Producto 14', description: 'Descripción del producto 14', img: 'https://picsum.photos/300/200?random=14', quantity: 0, price: 1200 },
        { id: 15, name: 'Producto 15', description: 'Descripción del producto 15', img: 'https://picsum.photos/300/200?random=15', quantity: 0, price: 1200 },
        { id: 16, name: 'Producto 16', description: 'Descripción del producto 16', img: 'https://picsum.photos/300/200?random=16', quantity: 0, price: 1200 },
      ],
    };
  },
  computed: {
    cartCount() {
      return this.cartItems.reduce((sum, item) => sum + item.quantity, 0);
    }
  },
  methods: {
    increase(item) {
      item.quantity = Number(item.quantity) + 1;
      this.addToCart(item);
    },
    decrease(item) {
      item.quantity = Math.max(0, Number(item.quantity) - 1);
      if (item.quantity === 0) {
        this.removeFromCart(item.id);
      }
    },
    addToCart(item) {
      if (item.quantity <= 0) return;
      
      const existingItem = this.cartItems.find(i => i.id === item.id);
      if (existingItem) {
        existingItem.quantity = item.quantity;
      } else {
        this.cartItems.push({
          id: item.id,
          name: item.name,
          img: item.img,
          price: item.price,
          quantity: item.quantity
        });
      }
    },
    removeFromCart(itemId) {
      const index = this.cartItems.findIndex(i => i.id === itemId);
      if (index > -1) {
        this.cartItems.splice(index, 1);
      }
      const item = this.items.find(i => i.id === itemId);
      if (item) {
        item.quantity = 0;
      }
    },
    updateCartQuantity({ itemId, quantity }) {
      const cartItem = this.cartItems.find(i => i.id === itemId);
      if (cartItem) {
        cartItem.quantity = quantity;
      }
      const productItem = this.items.find(i => i.id === itemId);
      if (productItem) {
        productItem.quantity = quantity;
      }
    },
    goToCheckout() {
      this.$router.push('/comprar');
    },
    currency(val) {
      if (val == null) return '-';
      return new Intl.NumberFormat('es-CO', { style: 'currency', currency: 'COP', minimumFractionDigits: 0 }).format(val);
    },
  },
};
</script>

<style scoped>
.headline {
  font-weight: bold;
}
.catalog-item {
  padding-top: 12px;
  padding-bottom: 12px;
}
.cart-sidebar {
  position: sticky;
  top: 80px;
}
.product-img {
  width: 150px;
  height: 100px;
  border-radius: 6px;
  object-fit: cover;
}
.quantity-controls {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.prices .price-line {
  margin-bottom: 4px;
}
.quantity-input {
  max-width: 90px;
}
.quantity-input input {
  text-align: center;
}
.qty-btn {
  min-width: 36px !important;
  height: 36px !important;
  border-radius: 18px !important;
}
@media (max-width: 960px) {
  .cart-sidebar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    z-index: 100;
  }
}
@media (max-width: 600px) {
  .product-img {
    width: 120px;
    height: 80px;
  }
}
</style>