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