feat: Add catalog page idea
This commit is contained in:
130
src/pages/catalog.vue
Normal file
130
src/pages/catalog.vue
Normal file
@@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<v-container>
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
<span class="headline">Catálogo</span>
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<v-list two-line>
|
||||
<v-list-item v-for="item in items" :key="item.id" class="catalog-item">
|
||||
<v-row no-gutters align="center" class="w-100">
|
||||
<v-col cols="12" md="3" class="d-flex">
|
||||
<v-img :src="item.img" class="product-img" contain></v-img>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="6">
|
||||
<v-list-item-title class="title">{{ item.name }}</v-list-item-title>
|
||||
<v-list-item-subtitle class="subtitle">{{ item.description }}</v-list-item-subtitle>
|
||||
<div class="prices mt-2">
|
||||
<div class="price-line">Precio unitario: <strong>{{ currency(item.price) }}</strong></div>
|
||||
<div class="price-line">Precio total: <strong>{{ currency(item.price * item.quantity) }}</strong></div>
|
||||
</div>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="3" class="d-flex align-center justify-end">
|
||||
<div class="quantity-controls">
|
||||
<v-btn small text class="qty-btn" @click="decrease(item)"><v-icon small>mdi-minus</v-icon></v-btn>
|
||||
<v-text-field
|
||||
v-model.number="item.quantity"
|
||||
type="number"
|
||||
min="0"
|
||||
class="quantity-input"
|
||||
dense
|
||||
outlined
|
||||
hide-details
|
||||
aria-label="Cantidad"
|
||||
/>
|
||||
<v-btn small text class="qty-btn" @click="increase(item)"><v-icon small>mdi-plus</v-icon></v-btn>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-btn color="primary">Ver más</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
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: 1, name: 'Producto 2', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
|
||||
{ id: 1, name: 'Producto 3', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
|
||||
{ id: 1, name: 'Producto 4', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
|
||||
{ id: 1, name: 'Producto 5', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
|
||||
{ id: 1, name: 'Producto 6', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
|
||||
{ id: 1, name: 'Producto 7', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
|
||||
{ id: 1, name: 'Producto 8', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
|
||||
{ id: 1, name: 'Producto 9', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
|
||||
{ id: 1, name: 'Producto 10', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
|
||||
{ id: 1, name: 'Producto 11', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
|
||||
{ id: 1, name: 'Producto 12', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
|
||||
{ id: 1, name: 'Producto 13', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
|
||||
{ id: 1, name: 'Producto 14', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
|
||||
{ id: 1, name: 'Producto 15', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
|
||||
{ id: 1, name: 'Producto 16', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
increase(item) {
|
||||
item.quantity = Number(item.quantity) + 1;
|
||||
},
|
||||
decrease(item) {
|
||||
item.quantity = Math.max(0, Number(item.quantity) - 1);
|
||||
},
|
||||
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;
|
||||
}
|
||||
.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: 600px) {
|
||||
.product-img {
|
||||
width: 120px;
|
||||
height: 80px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user