470 lines
9.3 KiB
Vue
470 lines
9.3 KiB
Vue
<template>
|
|
<v-card class="product-card" elevation="2" rounded="lg">
|
|
<!-- Imagen del Producto -->
|
|
<div class="product-image-container">
|
|
<v-img
|
|
:src="product.img"
|
|
:alt="product.name"
|
|
class="product-img"
|
|
cover
|
|
max-height="300"
|
|
aspect-ratio="1"
|
|
>
|
|
<template v-slot:placeholder>
|
|
<div class="d-flex align-center justify-center fill-height">
|
|
<v-progress-circular
|
|
indeterminate
|
|
color="primary"
|
|
size="32"
|
|
></v-progress-circular>
|
|
</div>
|
|
</template>
|
|
</v-img>
|
|
</div>
|
|
|
|
<!-- Contenido de la Tarjeta -->
|
|
<v-card-text class="product-content pa-3 text-center">
|
|
<!-- Título del Producto -->
|
|
<v-tooltip location="top" :text="product.name">
|
|
<template v-slot:activator="{ props }">
|
|
<h3
|
|
class="product-name text-subtitle-1 font-weight-medium mb-2"
|
|
v-bind="props"
|
|
>
|
|
{{ product.name }}
|
|
</h3>
|
|
</template>
|
|
</v-tooltip>
|
|
|
|
<!-- Sección de Precios -->
|
|
<div class="prices-section mb-2">
|
|
<!-- Precio Unitario -->
|
|
<div class="price-row mb-1">
|
|
<span class="price-label text-caption">Precio unitario</span>
|
|
<div class="price-value text-body-1 font-weight-bold text-primary">
|
|
{{ currency(product.price) }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Precio Total -->
|
|
<div class="price-row">
|
|
<span class="price-label text-caption">Precio total</span>
|
|
<v-chip
|
|
color="success"
|
|
variant="flat"
|
|
size="small"
|
|
class="price-total-chip font-weight-bold mt-1"
|
|
>
|
|
{{ currency(product.price * product.quantity) }}
|
|
</v-chip>
|
|
</div>
|
|
</div>
|
|
</v-card-text>
|
|
|
|
<!-- Footer con Controles de Cantidad -->
|
|
<v-card-actions class="product-actions pa-2 pb-3 justify-center">
|
|
<template v-if="disabled">
|
|
<v-btn
|
|
color="primary"
|
|
variant="tonal"
|
|
prepend-icon="mdi-cart-plus"
|
|
class="login-add-btn"
|
|
@click="$emit('request-login')"
|
|
>
|
|
Agregar
|
|
</v-btn>
|
|
</template>
|
|
<template v-else>
|
|
<div class="quantity-controls">
|
|
<v-btn
|
|
icon
|
|
size="small"
|
|
variant="tonal"
|
|
color="error"
|
|
class="qty-btn"
|
|
@click="decrease(product)"
|
|
:disabled="product.quantity === 0"
|
|
>
|
|
<v-icon size="20">mdi-minus</v-icon>
|
|
</v-btn>
|
|
|
|
<v-text-field
|
|
v-model.number="product.quantity"
|
|
type="number"
|
|
min="0"
|
|
class="quantity-input mx-1"
|
|
variant="solo-filled"
|
|
density="compact"
|
|
hide-details
|
|
single-line
|
|
flat
|
|
aria-label="Cantidad"
|
|
@input="handleQuantityChange"
|
|
/>
|
|
|
|
<v-btn
|
|
icon
|
|
size="small"
|
|
variant="tonal"
|
|
color="success"
|
|
class="qty-btn"
|
|
@click="handleIncrease"
|
|
>
|
|
<v-icon size="20">mdi-plus</v-icon>
|
|
</v-btn>
|
|
</div>
|
|
</template>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
emits: ['add-to-cart', 'request-login'],
|
|
props: {
|
|
product: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
increase: {
|
|
type: Function,
|
|
required: true,
|
|
},
|
|
decrease: {
|
|
type: Function,
|
|
required: true,
|
|
},
|
|
currency: {
|
|
type: Function,
|
|
required: true,
|
|
},
|
|
updateQuantity: {
|
|
type: Function,
|
|
required: true,
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
methods: {
|
|
handleIncrease() {
|
|
this.increase(this.product);
|
|
this.$emit("add-to-cart", this.product);
|
|
},
|
|
handleQuantityChange(value) {
|
|
this.updateQuantity(this.product);
|
|
if (this.product.quantity > 0) {
|
|
this.$emit("add-to-cart", this.product);
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* ============================================
|
|
CARD CONTAINER
|
|
============================================ */
|
|
.product-card {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
border: 1px solid rgba(0, 0, 0, 0.08);
|
|
background: #ffffff;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.product-card:hover {
|
|
transform: translateY(-6px);
|
|
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12) !important;
|
|
border-color: rgba(33, 150, 243, 0.3);
|
|
}
|
|
|
|
/* ============================================
|
|
IMAGEN DEL PRODUCTO
|
|
============================================ */
|
|
.product-image-container {
|
|
position: relative;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.product-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.product-card:hover .product-img {
|
|
transform: scale(1.08);
|
|
}
|
|
|
|
/* ============================================
|
|
CONTENIDO DE LA TARJETA
|
|
============================================ */
|
|
.product-content {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.product-name {
|
|
font-size: 0.95rem;
|
|
font-weight: 500;
|
|
color: #1a1a1a;
|
|
line-height: 1.3;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
min-height: 2.5rem;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
/* ============================================
|
|
SECCIÓN DE PRECIOS
|
|
============================================ */
|
|
.prices-section {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.price-row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 2px;
|
|
}
|
|
|
|
.price-label {
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.8px;
|
|
font-size: 0.65rem;
|
|
color: #9e9e9e;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.price-value {
|
|
color: #1565c0;
|
|
letter-spacing: 0.02em;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.price-total-chip {
|
|
letter-spacing: 0.03em;
|
|
font-size: 0.9rem;
|
|
padding: 0 12px;
|
|
height: 26px;
|
|
box-shadow: 0 2px 8px rgba(76, 175, 80, 0.25);
|
|
}
|
|
|
|
/* ============================================
|
|
CONTROLES DE CANTIDAD
|
|
============================================ */
|
|
.product-actions {
|
|
border-top: 1px solid rgba(0, 0, 0, 0.06);
|
|
background: #fafafa;
|
|
}
|
|
|
|
.quantity-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.quantity-input {
|
|
max-width: 65px;
|
|
min-width: 65px;
|
|
}
|
|
|
|
.quantity-input :deep(.v-field) {
|
|
background-color: #ffffff !important;
|
|
border-radius: 8px;
|
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.quantity-input :deep(.v-field__input) {
|
|
text-align: center;
|
|
font-weight: 700;
|
|
font-size: 0.95rem;
|
|
color: #1a1a1a;
|
|
padding: 4px 0;
|
|
min-height: 32px;
|
|
}
|
|
|
|
.quantity-input :deep(.v-field__field) {
|
|
padding: 0;
|
|
}
|
|
|
|
.qty-btn {
|
|
flex-shrink: 0;
|
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.qty-btn:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.qty-btn:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
/* ============================================
|
|
RESPONSIVE BREAKPOINTS
|
|
============================================ */
|
|
|
|
/* Botón de agregar (no autenticado) */
|
|
.login-add-btn {
|
|
width: 100%;
|
|
font-weight: 600;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
/* Móvil pequeño (< 375px) */
|
|
@media (max-width: 374px) {
|
|
.product-content {
|
|
padding: 10px;
|
|
}
|
|
|
|
.product-name {
|
|
font-size: 0.9rem;
|
|
min-height: 2.4rem;
|
|
}
|
|
|
|
.price-value {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.quantity-input {
|
|
max-width: 60px;
|
|
min-width: 60px;
|
|
}
|
|
}
|
|
|
|
/* Móvil estándar (375px - 559px) */
|
|
@media (min-width: 375px) and (max-width: 559px) {
|
|
.product-name {
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.price-value {
|
|
font-size: 0.9rem;
|
|
}
|
|
}
|
|
|
|
/* Tablet (560px - 959px) */
|
|
@media (min-width: 560px) and (max-width: 959px) {
|
|
.product-content {
|
|
padding: 10px;
|
|
}
|
|
|
|
.product-name {
|
|
font-size: 0.9rem;
|
|
min-height: 2.1rem;
|
|
}
|
|
|
|
.price-label {
|
|
font-size: 0.62rem;
|
|
}
|
|
|
|
.price-value {
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.price-total-chip {
|
|
font-size: 0.8rem;
|
|
height: 24px;
|
|
}
|
|
|
|
.quantity-input {
|
|
max-width: 58px;
|
|
min-width: 58px;
|
|
}
|
|
}
|
|
|
|
/* Desktop (≥ 960px) */
|
|
@media (min-width: 960px) {
|
|
.product-content {
|
|
padding: 12px 10px;
|
|
}
|
|
|
|
.product-name {
|
|
font-size: 0.95rem;
|
|
min-height: 2.2rem;
|
|
}
|
|
|
|
.price-label {
|
|
font-size: 0.63rem;
|
|
}
|
|
|
|
.price-value {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.price-total-chip {
|
|
font-size: 0.85rem;
|
|
height: 25px;
|
|
padding: 0 11px;
|
|
}
|
|
|
|
.product-actions {
|
|
padding: 6px;
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
.quantity-input {
|
|
max-width: 58px;
|
|
min-width: 58px;
|
|
}
|
|
|
|
.qty-btn {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
}
|
|
|
|
/* Desktop Large (≥ 1280px) */
|
|
@media (min-width: 1280px) {
|
|
.product-content {
|
|
padding: 14px 12px;
|
|
}
|
|
|
|
.product-name {
|
|
font-size: 2rem;
|
|
min-height: 2.4rem;
|
|
}
|
|
|
|
.price-value {
|
|
font-size: 1.05rem;
|
|
}
|
|
|
|
.price-total-chip {
|
|
font-size: 0.9rem;
|
|
height: 26px;
|
|
}
|
|
}
|
|
|
|
/* Desktop Extra Large (≥ 1920px) */
|
|
@media (min-width: 1920px) {
|
|
.product-name {
|
|
font-size: 1.05rem;
|
|
min-height: 2.5rem;
|
|
}
|
|
|
|
.price-value {
|
|
font-size: 1.1rem;
|
|
}
|
|
}
|
|
</style>
|