OneTeam/don_confiao_frontend
16
0
Fork 0
Code Issues 2 Pull Requests 2 Actions Packages Projects Releases 8 Wiki Activity

Merge pull request 'Ajustes vista de catalogo' (#49) from feat/clean-catalog-mobile into main

Browse Source 
Reviewed-on: #49
This commit is contained in:
Aserrador
2026-07-11 20:08:30 -05:00
parent 7a75f93f67 523d0b9d08
commit 7a7939e309
10 changed files with 273 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.env.example
View File

@@ -1,2 +1,3 @@
VITE_API_IMPLEMENTATION=django
VITE_DJANGO_BASE_URL=http://localhost:7000
VITE_CONTACT_PHONE=3023567797

1
deploy/.env.example
View File

@@ -1,2 +1,3 @@
VITE_API_IMPLEMENTATION=django
VITE_DJANGO_BASE_URL=http://localhost:7000
VITE_CONTACT_PHONE=

2
deploy/Dockerfile
View File

@@ -3,9 +3,11 @@ FROM node:20-alpine AS builder
ARG VITE_DJANGO_BASE_URL
ARG VITE_API_IMPLEMENTATION
ARG VITE_CONTACT_PHONE
ENV VITE_DJANGO_BASE_URL=$VITE_DJANGO_BASE_URL
ENV VITE_API_IMPLEMENTATION=$VITE_API_IMPLEMENTATION
ENV VITE_CONTACT_PHONE=$VITE_CONTACT_PHONE
WORKDIR /app

1
deploy/build.sh
View File

@@ -59,6 +59,7 @@ set +a
BUILD_ARGS="--build-arg VITE_DJANGO_BASE_URL=$VITE_DJANGO_BASE_URL"
BUILD_ARGS="$BUILD_ARGS --build-arg VITE_API_IMPLEMENTATION=$VITE_API_IMPLEMENTATION"
BUILD_ARGS="$BUILD_ARGS --build-arg VITE_CONTACT_PHONE=$VITE_CONTACT_PHONE"
FULL_IMAGE_NAME="$GITEA_REGISTRY/$GITEA_USER/$IMAGE_NAME"

62
src/components/AppFooter.vue
View File

@@ -1,5 +1,13 @@
<template>
<v-footer height="40" app>
<div>
<!-- Footer completo: visible siempre en desktop, toggle en mobile -->
<v-footer
v-if="expanded || !isMobile"
height="40"
app
class="app-footer"
:class="{ 'footer-overlay': isMobile }"
>
<a
v-for="item in items"
:key="item.title"
@@ -31,9 +39,24 @@
</a>
</div>
</v-footer>
<!-- Botón flotante: solo en mobile -->
<v-btn
v-if="isMobile"
icon
size="small"
class="footer-toggle-btn"
:color="expanded ? 'primary' : undefined"
@click="expanded = !expanded"
>
<v-icon :icon="expanded ? 'mdi-close' : '$vuetify'" :size="expanded ? 20 : 24" />
</v-btn>
</div>
</template>
<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
const items = [
{
title: 'Vuetify Documentation',
@@ -65,15 +88,48 @@
icon: `mdi-reddit`,
href: 'https://reddit.com/r/vuetifyjs',
},
]
];
const expanded = ref(false);
const windowWidth = ref(typeof window !== 'undefined' ? window.innerWidth : 1200);
const isMobile = computed(() => windowWidth.value < 960);
const onResize = () => {
windowWidth.value = window.innerWidth;
};
onMounted(() => {
window.addEventListener('resize', onResize);
});
onUnmounted(() => {
window.removeEventListener('resize', onResize);
});
</script>
<style scoped lang="sass">
.social-link :deep(.v-icon)
.social-link :deep(.v-icon)
color: rgba(var(--v-theme-on-background), var(--v-disabled-opacity))
text-decoration: none
transition: .2s ease-in-out
&:hover
color: rgba(25, 118, 210, 1)
/* Botón flotante para mobile */
.footer-toggle-btn
position: fixed
bottom: 12px
right: 12px
z-index: 2000
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25)
/* Overlay del footer en mobile */
.footer-overlay
position: fixed !important
bottom: 0
left: 0
right: 0
z-index: 1999
</style>

8
src/components/LoginDialog.vue
View File

@@ -1,7 +1,13 @@
<template>
<v-dialog v-model="show" max-width="400">
<v-card>
<v-card-title class="headline">Iniciar sesión</v-card-title>
<v-card-title class="headline d-flex align-center">
Iniciar sesión
<v-spacer />
<v-btn icon size="small" variant="text" @click="show = false">
<v-icon>mdi-close</v-icon>
</v-btn>
</v-card-title>
<v-card-text>
<v-form ref="form" @submit.prevent="onSubmit">
<v-text-field

4
src/components/SummaryPurchase.vue
View File

@@ -8,7 +8,7 @@
</v-container>
<v-container v-show="id">
<v-toolbar>
<v-toolbar-title> Resumen de la compra {{ id }}</v-toolbar-title>
<v-toolbar-title> {{ type === 'catalog' ? 'Resumen del pedido' : 'Resumen de la compra' }} {{ id }}</v-toolbar-title>
</v-toolbar>
<v-list>
<v-list-item>
@@ -39,7 +39,7 @@
{{ currencyFormat(calculateSubtotal(item.unit_price, item.quantity)) }}
</template>
</v-data-table-virtual>
<v-alert type="info" class="my-4">
<v-alert v-if="type !== 'catalog'" type="info" class="my-4">
Recuerda adicionar a la planilla física lo siguiente
<v-data-table
:headers="headersTemplate"

27
src/components/catalog/Card.vue
View File

@@ -47,7 +47,7 @@
</div>
<!-- Precio Total -->
<div class="price-row">
<div v-if="product.quantity > 0" class="price-row">
<span class="price-label text-caption">Precio total</span>
<v-chip
color="success"
@@ -63,6 +63,18 @@
<!-- 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
@@ -71,7 +83,7 @@
color="error"
class="qty-btn"
@click="decrease(product)"
:disabled="disabled || product.quantity === 0"
:disabled="product.quantity === 0"
>
<v-icon size="20">mdi-minus</v-icon>
</v-btn>
@@ -87,7 +99,6 @@
single-line
flat
aria-label="Cantidad"
:disabled="disabled"
@input="handleQuantityChange"
/>
@@ -98,17 +109,18 @@
color="success"
class="qty-btn"
@click="handleIncrease"
:disabled="disabled"
>
<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,
@@ -312,6 +324,13 @@ export default {
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 {

4
src/components/catalog/Cart.vue
View File

@@ -47,7 +47,7 @@
icon
size="small"
variant="text"
@click="$emit('toggle-collapse')"
@click.stop="$emit('toggle-collapse')"
:title="isCollapsed ? 'Expandir carrito' : 'Contraer carrito'"
>
<v-icon>{{ isCollapsed ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
@@ -133,7 +133,7 @@
<v-card-actions v-if="cartItems.length > 0" class="cart-checkout-section">
<v-btn color="primary" block @click="$emit('checkout')">
Finalizar Compra
Finalizar Pedido
</v-btn>
</v-card-actions>
</div>

135
src/pages/catalog.vue
View File

@@ -49,20 +49,6 @@
</div>
</v-sheet>
<!-- Controles de paginación superiores -->
<PaginationControls
v-if="filteredItems.length > 0"
:current-page="currentPage"
:total-pages="totalPages"
:items-per-page="itemsPerPage"
:items-per-page-options="itemsPerPageOptions"
:pagination-info="paginationInfo"
:total-visible-pages="totalVisiblePages"
@page-change="handlePageChange"
@items-per-page-change="handleItemsPerPageChange"
position="top"
/>
<!-- Grid de productos paginados -->
<v-row class="product-grid" v-if="paginatedItems.length > 0">
<v-col
@@ -82,6 +68,7 @@
:updateQuantity="updateQuantity"
:disabled="!isAuthenticated"
@add-to-cart="addToCart"
@request-login="showLogin"
/>
</v-col>
</v-row>
@@ -136,11 +123,54 @@
@update-quantity="updateCartQuantity"
@toggle-collapse="toggleCart"
/>
<v-card v-else class="login-prompt-card pa-4 text-center">
<v-card v-else-if="!isMobile || showLoginPrompt" class="login-prompt-card pa-4 text-center">
<v-btn
icon
size="x-small"
variant="text"
class="login-prompt-close"
@click="showLoginPrompt = false"
>
<v-icon size="18">mdi-close</v-icon>
</v-btn>
<v-icon size="48" color="primary" class="mb-2">mdi-cart-lock</v-icon>
<p class="text-body-2 text-medium-emphasis mb-3">
Inicia sesión para agregar productos al carrito y finalizar tu compra
Para hacer pedidos debes de tener usuario y clave, si no lo tienes comunicate con nosotros al
<strong class="text-primary">{{ contactPhone }}</strong>
para solicitarlo. Esto es necesario porque no podemos procesar tus pedidos todos los días del mes.
Comunicate con nosotros para contarte todos los detalles y que puedas apoyar este proceso.
</p>
<div class="d-flex justify-center ga-2 mb-3">
<v-btn
icon
size="small"
color="primary"
variant="tonal"
:href="'tel:' + contactPhone"
>
<v-icon size="18">mdi-phone</v-icon>
</v-btn>
<v-btn
icon
size="small"
color="success"
variant="tonal"
:href="'https://wa.me/' + contactPhone"
target="_blank"
>
<v-icon size="18">mdi-whatsapp</v-icon>
</v-btn>
<v-btn
icon
size="small"
color="info"
variant="tonal"
:href="'https://t.me/+57' + contactPhone"
target="_blank"
>
<v-icon size="18">mdi-send</v-icon>
</v-btn>
</div>
<v-btn
color="primary"
variant="tonal"
@@ -157,7 +187,7 @@
<!-- Modal 1: Confirmación de productos -->
<v-dialog v-model="checkoutDialog" max-width="600" persistent>
<v-card>
<v-card-title class="headline">Confirmar Compra</v-card-title>
<v-card-title class="headline">Confirmar Pedido</v-card-title>
<v-card-text>
<v-list v-if="cartItems.length > 0" class="product-list-scroll">
<v-list-item v-for="item in cartItems" :key="item.id">
@@ -192,7 +222,7 @@
</v-card>
</v-dialog>
<!-- Modal 2: Datos personales -->
<!-- Modal 2: Datos personales + aviso de coordinación -->
<v-dialog v-model="personalDataDialog" max-width="500" persistent>
<v-card>
<v-card-title class="headline">Datos de Contacto</v-card-title>
@@ -229,6 +259,48 @@
variant="outlined"
></v-select>
</v-form>
<v-divider class="my-3"></v-divider>
<v-alert type="info" variant="tonal" class="mb-0">
<div class="text-body-2 mb-2">
Para coordinar la entrega de tu pedido escríbenos:
</div>
<div class="d-flex ga-2">
<v-btn
icon
size="x-small"
color="primary"
variant="tonal"
:href="'tel:' + contactPhone"
>
<v-icon size="16">mdi-phone</v-icon>
</v-btn>
<v-btn
icon
size="x-small"
color="success"
variant="tonal"
:href="'https://wa.me/57' + contactPhone"
target="_blank"
>
<v-icon size="16">mdi-whatsapp</v-icon>
</v-btn>
<v-btn
icon
size="x-small"
color="info"
variant="tonal"
:href="'https://t.me/+57' + contactPhone"
target="_blank"
>
<v-icon size="16">mdi-send</v-icon>
</v-btn>
<span class="text-body-2 font-weight-bold ml-1 d-flex align-center">
{{ contactPhone }}
</span>
</div>
</v-alert>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
@@ -240,7 +312,7 @@
:loading="isSubmitting"
:disabled="isSubmitting"
>
Finalizar Compra
Finalizar Pedido
</v-btn>
</v-card-actions>
</v-card>
@@ -274,7 +346,8 @@ export default {
setup() {
const cartStore = useCartStore();
const authStore = useAuthStore();
const cartCollapsed = ref(false); // Cambiado a false para que inicie expandido en desktop
const cartCollapsed = ref(false);
const showLoginPrompt = ref(false);
const windowWidth = ref(window.innerWidth);
const isMobile = computed(() => windowWidth.value < 960); // Cambiado de 680 a 960
@@ -295,6 +368,7 @@ export default {
cartStore,
authStore,
cartCollapsed,
showLoginPrompt,
isMobile,
windowWidth,
};
@@ -339,6 +413,9 @@ export default {
isAuthenticated() {
return this.authStore.isAuthenticated;
},
contactPhone() {
return import.meta.env.VITE_CONTACT_PHONE || '';
},
// Búsqueda
filteredItems() {
if (!this.searchQuery) return this.items;
@@ -471,7 +548,6 @@ export default {
},
async onSubmitPurchase() {
const form = this.$refs.personalForm;
if (form) {
const { valid } = await form.validate();
if (!valid) return;
@@ -493,7 +569,6 @@ export default {
customer_phone: this.customerPhone,
pickup_method: this.pickupMethod,
};
this.api
.createCatalogPurchase(payload)
.then((data) => {
@@ -553,7 +628,14 @@ export default {
openLoginDialog() {
this.$refs.loginDialogRef.open();
},
showLogin() {
this.showLoginPrompt = true;
if (this.isMobile) {
this.cartCollapsed = false;
}
},
onLoginSuccess() {
this.showLoginPrompt = false;
this.api.getCurrentUser().then((user) => {
this.authStore.setUser(user);
});
@@ -769,6 +851,15 @@ export default {
.login-prompt-card {
border: 2px dashed rgba(0, 0, 0, 0.12);
background: #fafafa !important;
position: relative;
overflow-wrap: break-word;
word-break: break-word;
}
.login-prompt-close {
position: absolute;
top: 8px;
right: 8px;
}
/* ============================================