340 lines
8.9 KiB
Vue
340 lines
8.9 KiB
Vue
<template>
|
|
<q-page class="category-container">
|
|
<section class="products-section">
|
|
<header class="products-section-header">
|
|
<Container>
|
|
<div class="product-header-content">
|
|
<h3 class="product-header-title subtitle">
|
|
{{ sortProductFilters.category }} para obsequiar
|
|
</h3>
|
|
<p class="product-header-paragraph">
|
|
Descripción SEO: Lorem ipsum dolor sit amet, consectetur
|
|
adipiscing elit, sed do eiusmod tempor incididunt ut labore et
|
|
dolore magna aliqua.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="product-header-filters">
|
|
<div class="product-left-filters">
|
|
<div class="filter-item availability-filter">
|
|
<p class="filter-paragraph availability">
|
|
Disponibilidad para:
|
|
<span
|
|
v-if="availability.date && availability.postalCode"
|
|
class="green-text"
|
|
>
|
|
25 Julio en
|
|
{{ availability.postalCode.replace("-", "") }}</span
|
|
>
|
|
</p>
|
|
|
|
<q-btn
|
|
flat
|
|
class="btn filter-btn availability"
|
|
type="button"
|
|
@click="modalStore.openModal({ modal: 'availability' })"
|
|
>
|
|
<IconPencil />
|
|
</q-btn>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="product-right-filters">
|
|
<q-btn
|
|
flat
|
|
class="btn filter-item filters filter-btn"
|
|
type="button"
|
|
@click="modalStore.openModal({ modal: 'filters' })"
|
|
>
|
|
<p class="filter-paragraph remove-mob">Filtros</p>
|
|
<IconFilter />
|
|
</q-btn>
|
|
|
|
<div
|
|
class="filter-item order-filter"
|
|
:class="sortProductFilters.isOpenOrderFilter && 'active'"
|
|
>
|
|
<div class="order-filters">
|
|
<p class="filter-paragraph">
|
|
Ordenar por:
|
|
<span class="green-text">
|
|
{{ orderText[sortProductFilters.order] || "" }}
|
|
</span>
|
|
</p>
|
|
|
|
<SortSelect v-if="sortProductFilters.isOpenOrderFilter" />
|
|
</div>
|
|
|
|
<q-btn
|
|
flat
|
|
@click="openOrderFilter"
|
|
type="button"
|
|
class="btn filter-btn price-order"
|
|
>
|
|
<IconArrowDownWhite />
|
|
</q-btn>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</header>
|
|
|
|
<div class="products-section-body">
|
|
<Container cardContainer>
|
|
<Card
|
|
v-for="(
|
|
{ imgSrc, discount, isNew, title, value, id }, i
|
|
) in cardsMock"
|
|
:productValue="value"
|
|
:productName="title"
|
|
:discount="discount.toString()"
|
|
:imgSrc="imgSrc"
|
|
:isNew="isNew"
|
|
:key="i"
|
|
:id="id"
|
|
/>
|
|
</Container>
|
|
</div>
|
|
|
|
<footer class="products-section-footer">
|
|
<RouterLink class="btn rounded outlined" to="/">
|
|
Ver todos los diseños <IconArrowCircleFilledRight />
|
|
</RouterLink>
|
|
</footer>
|
|
</section>
|
|
|
|
<dudas-section />
|
|
<modal modalItem="isOpenAvailability" />
|
|
<modal modalItem="isOpenFilters" />
|
|
</q-page>
|
|
</template>
|
|
|
|
<script>
|
|
import { fakerES } from "@faker-js/faker";
|
|
import { storeToRefs } from "pinia";
|
|
import {
|
|
defineAsyncComponent,
|
|
defineComponent,
|
|
onUpdated,
|
|
reactive,
|
|
ref,
|
|
watch,
|
|
} from "vue";
|
|
import { useRoute } from "vue-router";
|
|
|
|
import SortSelect from "src/components/@inputs/SortSelect.vue";
|
|
import IconArrowCircleFilledRight from "src/components/icons/IconArrowCircleFilledRight.vue";
|
|
import IconArrowDownWhite from "src/components/icons/IconArrowDownWhite.vue";
|
|
import IconFilter from "src/components/icons/IconFilter.vue";
|
|
import IconPencil from "src/components/icons/IconPencil.vue";
|
|
import Container from "src/components/ui/Container.vue";
|
|
import { useFormStore } from "src/stores/forms";
|
|
import { useModalStore } from "src/stores/modalStore";
|
|
|
|
export default defineComponent({
|
|
name: "CategoryPage",
|
|
components: {
|
|
IconArrowCircleFilledRight,
|
|
IconArrowDownWhite,
|
|
IconPencil,
|
|
IconFilter,
|
|
Container,
|
|
DudasSection: defineAsyncComponent(() =>
|
|
import("src/components/sections/DudasSection.vue")
|
|
),
|
|
Modal: defineAsyncComponent(() => import("src/components/ui/Modal.vue")),
|
|
Card: defineAsyncComponent(() => import("src/components/ui/Card.vue")),
|
|
SortSelect,
|
|
},
|
|
setup() {
|
|
const modalStore = useModalStore();
|
|
const formStore = useFormStore();
|
|
const { availability, sortProductFilters } = storeToRefs(formStore);
|
|
const monthES = reactive({
|
|
0: "Enero",
|
|
1: "Febrero",
|
|
2: "Marzo",
|
|
3: "Abril",
|
|
4: "Mayo",
|
|
5: "Junio",
|
|
6: "Julio",
|
|
7: "Agosto",
|
|
8: "Septiembre",
|
|
9: "Octubre",
|
|
10: "Noviembre",
|
|
11: "Diciembre",
|
|
});
|
|
const isOpenOrder = ref(false);
|
|
const route = useRoute();
|
|
const cardsMock = Array.from({ length: 8 }, (_, i) => ({
|
|
id: i + 1,
|
|
imgSrc: `../assets/flowers/flower-${i + 1}.png`,
|
|
discount: fakerES.number.int({ min: 5, max: 15 }),
|
|
isNew: fakerES.datatype.boolean(),
|
|
title: fakerES.commerce.product(),
|
|
value: fakerES.commerce.price({ min: 30, max: 100 }),
|
|
}));
|
|
const orderText = {
|
|
"lowest-price": "menor precio",
|
|
"highest-price": "mayor precio",
|
|
recommended: "recomendados",
|
|
latest: "más recientes",
|
|
};
|
|
|
|
watch(
|
|
() => route.path,
|
|
(newPatch) => {
|
|
sortProductFilters.value.category = newPatch.split("/")[2];
|
|
}
|
|
);
|
|
|
|
onUpdated(() => {
|
|
console.groupCollapsed("%c Updated!", "color: green;");
|
|
console.log(sortProductFilters.value);
|
|
console.groupEnd();
|
|
});
|
|
|
|
function openOrderFilter() {
|
|
sortProductFilters.value.isOpenOrderFilter =
|
|
!sortProductFilters.value.isOpenOrderFilter;
|
|
}
|
|
|
|
return {
|
|
sortProductFilters,
|
|
openOrderFilter,
|
|
availability,
|
|
isOpenOrder,
|
|
modalStore,
|
|
orderText,
|
|
cardsMock,
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.products-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
margin-bottom: 82px;
|
|
|
|
& .products-section-header {
|
|
& .product-header-content {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
text-align: center;
|
|
gap: 25px;
|
|
margin-bottom: 93px;
|
|
& .product-header-title::first-letter {
|
|
text-transform: capitalize;
|
|
}
|
|
}
|
|
|
|
& .product-header-filters {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
gap: 41px;
|
|
margin-bottom: 78px;
|
|
& .filter-paragraph {
|
|
font-size: $font-14;
|
|
color: $text-gray;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
& .filter-item {
|
|
padding: 4px 0 4px 14px;
|
|
background-color: $secondary-10;
|
|
border-radius: 30px 0 0 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
user-select: none;
|
|
&.availability-filter {
|
|
padding: 4px 30px 4px 14px;
|
|
}
|
|
&.order-filter {
|
|
padding: 4px 10px 4px 20px;
|
|
text-align: end;
|
|
border-radius: 10px 0px 0px 10px;
|
|
&.active {
|
|
border-radius: 10px 0px 0px 0px;
|
|
}
|
|
|
|
& .order-filters {
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
&.filters {
|
|
padding: 4px 15px 4px 10px;
|
|
border-radius: 30px;
|
|
}
|
|
&.filter-price-order {
|
|
}
|
|
}
|
|
|
|
& .filter-btn {
|
|
padding: 8px;
|
|
border-radius: 0 30px 30px 0;
|
|
|
|
&.availability,
|
|
&.price-order {
|
|
position: absolute;
|
|
}
|
|
|
|
&.availability {
|
|
right: -27px;
|
|
padding: 6.5px;
|
|
}
|
|
|
|
&.price-order {
|
|
right: -33px;
|
|
padding: 9.5px;
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
& .product-right-filters {
|
|
display: flex;
|
|
gap: 40px;
|
|
margin-right: 33px;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
@media only screen and (max-width: $med-md) {
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
& .filter-paragraph.remove-mob {
|
|
display: none;
|
|
}
|
|
|
|
& .filter-item.filters {
|
|
padding: 4px 8px;
|
|
}
|
|
|
|
& .product-left-filters {
|
|
flex: 1;
|
|
margin-right: 28px;
|
|
}
|
|
|
|
& .product-right-filters {
|
|
flex: 1;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
& .products-section-body {
|
|
margin-bottom: 95px;
|
|
}
|
|
& .products-section-footer {
|
|
align-self: center;
|
|
}
|
|
}
|
|
</style>
|