Merge branch 'develop'
This commit is contained in:
Jaume Solís
commit
8f3c56f28b
|
|
@ -14,7 +14,6 @@
|
|||
"axios": "^1.2.1",
|
||||
"pinia": "^2.0.11",
|
||||
"quasar": "^2.6.0",
|
||||
"swiper": "^11.0.5",
|
||||
"v-mask": "^2.3.0",
|
||||
"vee-validate": "^4.12.2",
|
||||
"vue": "^3.0.0",
|
||||
|
|
@ -23,6 +22,7 @@
|
|||
"zod": "^3.22.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/types": "^7.23.6",
|
||||
"@faker-js/faker": "^8.3.1",
|
||||
"@quasar/app-vite": "^1.3.0",
|
||||
"@types/node": "^12.20.21",
|
||||
|
|
@ -51,6 +51,24 @@
|
|||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/helper-string-parser": {
|
||||
"version": "7.23.4",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz",
|
||||
"integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=6.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/helper-validator-identifier": {
|
||||
"version": "7.22.20",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
|
||||
"integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=6.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/parser": {
|
||||
"version": "7.23.6",
|
||||
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.6.tgz",
|
||||
|
|
@ -62,6 +80,20 @@
|
|||
"node": ">=6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/types": {
|
||||
"version": "7.23.6",
|
||||
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.6.tgz",
|
||||
"integrity": "sha512-+uarb83brBzPKN38NX1MkB6vb6+mwvR6amUulqAE7ccQw1pEl+bCia9TbdG1lsnFP7lZySvUn37CHyXQdfTwzg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@babel/helper-string-parser": "^7.23.4",
|
||||
"@babel/helper-validator-identifier": "^7.22.20",
|
||||
"to-fast-properties": "^2.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@eslint-community/eslint-utils": {
|
||||
"version": "4.4.0",
|
||||
"resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
|
||||
|
|
@ -5287,24 +5319,6 @@
|
|||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/swiper": {
|
||||
"version": "11.0.5",
|
||||
"resolved": "https://registry.npmjs.org/swiper/-/swiper-11.0.5.tgz",
|
||||
"integrity": "sha512-rhCwupqSyRnWrtNzWzemnBLMoyYuoDgGgspAm/8iBD3jCvAWycPLH4Z3TB0O5520DHLzMx94yUMH/B9Efpa48w==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "patreon",
|
||||
"url": "https://www.patreon.com/swiperjs"
|
||||
},
|
||||
{
|
||||
"type": "open_collective",
|
||||
"url": "http://opencollective.com/swiper"
|
||||
}
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 4.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/table": {
|
||||
"version": "6.8.1",
|
||||
"resolved": "https://registry.npmjs.org/table/-/table-6.8.1.tgz",
|
||||
|
|
@ -5383,6 +5397,15 @@
|
|||
"node": ">=0.6.0"
|
||||
}
|
||||
},
|
||||
"node_modules/to-fast-properties": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
|
||||
"integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/to-regex-range": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
|
||||
|
|
|
|||
|
|
@ -11,7 +11,8 @@
|
|||
"dev": "quasar dev -m ssr",
|
||||
"backend": "json-server -p 5000 -d 3000 -w src/services/json-server/db.json",
|
||||
"build": "quasar build -m ssr",
|
||||
"start:build": "npm run build && cd dist/ssr && npm i && npm run start"
|
||||
"start:build": "npm run build && cd dist/ssr && npm i && npm run start",
|
||||
"typecheck": "tsc --project tsconfig.json --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@quasar/extras": "^1.16.4",
|
||||
|
|
@ -20,7 +21,6 @@
|
|||
"axios": "^1.2.1",
|
||||
"pinia": "^2.0.11",
|
||||
"quasar": "^2.6.0",
|
||||
"swiper": "^11.0.5",
|
||||
"v-mask": "^2.3.0",
|
||||
"vee-validate": "^4.12.2",
|
||||
"vue": "^3.0.0",
|
||||
|
|
@ -29,6 +29,7 @@
|
|||
"zod": "^3.22.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/types": "^7.23.6",
|
||||
"@faker-js/faker": "^8.3.1",
|
||||
"@quasar/app-vite": "^1.3.0",
|
||||
"@types/node": "^12.20.21",
|
||||
|
|
|
|||
|
|
@ -1,22 +1,103 @@
|
|||
<template>
|
||||
<div class="custom-input-el">
|
||||
<IconCalendar />
|
||||
<div class="custom-input-el calendar">
|
||||
<q-btn round size="sm" class="custom-date-btn">
|
||||
<IconCalendar />
|
||||
|
||||
<q-popup-proxy
|
||||
@before-show="updateProxy"
|
||||
cover
|
||||
transition-show="scale"
|
||||
transition-hide="scale"
|
||||
>
|
||||
<q-date
|
||||
v-model="proxyDate"
|
||||
:options="optionsValidDates"
|
||||
mask="DD-MM-YYYY"
|
||||
>
|
||||
<div class="row items-center justify-end q-gutter-sm">
|
||||
<q-btn label="Cancel" color="primary" flat v-close-popup />
|
||||
<q-btn
|
||||
label="OK"
|
||||
color="primary"
|
||||
flat
|
||||
@click="save"
|
||||
v-close-popup
|
||||
/>
|
||||
</div>
|
||||
</q-date>
|
||||
</q-popup-proxy>
|
||||
</q-btn>
|
||||
|
||||
<div class="custom-block-content">
|
||||
<p class="custom-head-paragraph">¿Cuándo?</p>
|
||||
<p class="custom-main-paragraph">Elige una fecha</p>
|
||||
<q-input
|
||||
class="custom-date-input"
|
||||
label="Elige una fecha"
|
||||
placeholder="DD/MM/YYYY"
|
||||
v-model="calendar"
|
||||
mask="##/##/####"
|
||||
:error="!!errors.date"
|
||||
:error-message="errors.date"
|
||||
@blur="onBlur"
|
||||
borderless
|
||||
dense
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { toTypedSchema } from '@vee-validate/zod';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useFormStore } from 'src/stores/forms';
|
||||
import { availabilitySchema } from 'src/utils/zod/schemas/availabilitySchema';
|
||||
import { useForm } from 'vee-validate';
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import IconCalendar from '../icons/IconCalendar.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'calendar-input',
|
||||
components: { IconCalendar },
|
||||
setup() {
|
||||
const getDate = new Date();
|
||||
const currentDay = getDate.getDate().toString().padStart(2, '0');
|
||||
const currentMonth = getDate.getMonth() + 1;
|
||||
const currentYear = getDate.getFullYear();
|
||||
const fullCurrentDate = `${currentYear}/${currentMonth}/${currentDay}`;
|
||||
|
||||
const formStore = useFormStore();
|
||||
const { availability } = storeToRefs(formStore);
|
||||
const proxyDate = ref(fullCurrentDate);
|
||||
|
||||
const validationSchema = toTypedSchema(
|
||||
availabilitySchema.pick({ date: true })
|
||||
);
|
||||
const { errors, defineField } = useForm({
|
||||
validationSchema,
|
||||
});
|
||||
const [calendar, calendarAttrs] = defineField('date');
|
||||
const onBlur = () => {
|
||||
availability.value.date = calendar.value as string;
|
||||
};
|
||||
|
||||
return {
|
||||
availability,
|
||||
proxyDate,
|
||||
calendar,
|
||||
calendarAttrs,
|
||||
errors,
|
||||
onBlur,
|
||||
updateProxy() {
|
||||
proxyDate.value = availability.value.date;
|
||||
},
|
||||
optionsValidDates(date: string) {
|
||||
return date >= fullCurrentDate /* && date <= '2019/02/15' */;
|
||||
},
|
||||
save() {
|
||||
availability.value.date = proxyDate.value;
|
||||
calendar.value = proxyDate.value;
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
|
|||
|
|
@ -1,22 +1,62 @@
|
|||
<template>
|
||||
<div class="custom-input-el">
|
||||
<div class="custom-input-el postal-code">
|
||||
<IconPostalCode />
|
||||
|
||||
<div class="custom-block-content">
|
||||
<p class="custom-head-paragraph">¿Dónde?</p>
|
||||
<p class="custom-main-paragraph">código postal</p>
|
||||
<!-- <p class="custom-main-paragraph">código postal</p> -->
|
||||
<q-input
|
||||
borderless
|
||||
class="custom-main-paragraph"
|
||||
v-model="postalCode"
|
||||
v-bind="postalCodeAttrs"
|
||||
:error="!!errors.postalCode"
|
||||
:error-message="errors.postalCode"
|
||||
label="código postal"
|
||||
placeholder="00000-000"
|
||||
mask="#####-###"
|
||||
@blur="onBlur"
|
||||
dense
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toTypedSchema } from '@vee-validate/zod';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useFormStore } from 'src/stores/forms';
|
||||
import { availabilitySchema } from 'src/utils/zod/schemas/availabilitySchema';
|
||||
import { useForm } from 'vee-validate';
|
||||
import { defineComponent } from 'vue';
|
||||
import IconPostalCode from '../icons/IconPostalCode.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'postal-code',
|
||||
components: { IconPostalCode },
|
||||
setup() {
|
||||
const formStore = useFormStore();
|
||||
const { availability } = storeToRefs(formStore);
|
||||
const validationSchema = toTypedSchema(
|
||||
availabilitySchema.pick({ postalCode: true }).partial()
|
||||
);
|
||||
const { errors, defineField } = useForm({
|
||||
validationSchema,
|
||||
initialValues: {
|
||||
postalCode: availability.value.date,
|
||||
},
|
||||
});
|
||||
const [postalCode, postalCodeAttrs] = defineField('postalCode');
|
||||
const onBlur = () => {
|
||||
availability.value.postalCode = postalCode.value as string;
|
||||
};
|
||||
|
||||
return {
|
||||
postalCode,
|
||||
postalCodeAttrs,
|
||||
errors,
|
||||
onBlur,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
|
|||
|
|
@ -34,11 +34,7 @@ export default defineComponent({
|
|||
setup() {
|
||||
const rangePriceStore = useRangePriceStore();
|
||||
|
||||
const handleChange = (e: Event) => {
|
||||
console.log(e);
|
||||
};
|
||||
|
||||
return { rangePriceStore, handleChange };
|
||||
return { rangePriceStore };
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,82 @@
|
|||
<template>
|
||||
<div class="order-values" role="select">
|
||||
<div
|
||||
role="option"
|
||||
class="order-values-option"
|
||||
@click="handleOrder('lowest-price')"
|
||||
>
|
||||
<p class="filter-paragraph">menor precio</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
role="option"
|
||||
class="order-values-option"
|
||||
@click="handleOrder('highest-price')"
|
||||
>
|
||||
<p class="filter-paragraph">mayor precio</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
role="option"
|
||||
class="order-values-option"
|
||||
@click="handleOrder('latest')"
|
||||
>
|
||||
<p class="filter-paragraph">más recientes</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
role="option"
|
||||
class="order-values-option"
|
||||
@click="handleOrder('recommended')"
|
||||
>
|
||||
<p class="filter-paragraph">recomendados</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { Order, useFormStore } from 'src/stores/forms';
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'SortSelect',
|
||||
components: {},
|
||||
setup() {
|
||||
const formStore = useFormStore();
|
||||
const { sortProductFilters } = storeToRefs(formStore);
|
||||
|
||||
function handleOrder(order: Order) {
|
||||
sortProductFilters.value.order = order;
|
||||
sortProductFilters.value.isOpenOrderFilter = false;
|
||||
}
|
||||
|
||||
return { sortProductFilters, handleOrder };
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.order-values {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
right: -10px;
|
||||
left: -20px;
|
||||
z-index: 10;
|
||||
background-color: $secondary-10;
|
||||
padding: 0px 10px 10px;
|
||||
padding-right: 10px;
|
||||
border-radius: 0px 0px 10px 10px;
|
||||
|
||||
&-option {
|
||||
cursor: pointer;
|
||||
& .filter-paragraph {
|
||||
color: inherit;
|
||||
font-size: $font-14;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<p>{{ title }}</p>
|
||||
<ul>
|
||||
<li v-for="todo in todos" :key="todo.id" @click="increment">
|
||||
{{ todo.id }} - {{ todo.content }}
|
||||
</li>
|
||||
</ul>
|
||||
<p>Count: {{ todoCount }} / {{ meta.totalCount }}</p>
|
||||
<p>Active: {{ active ? 'yes' : 'no' }}</p>
|
||||
<p>Clicks on todos: {{ clickCount }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {
|
||||
defineComponent,
|
||||
PropType,
|
||||
computed,
|
||||
ref,
|
||||
toRef,
|
||||
Ref,
|
||||
} from 'vue';
|
||||
import { Todo, Meta } from './models';
|
||||
|
||||
function useClickCount() {
|
||||
const clickCount = ref(0);
|
||||
function increment() {
|
||||
clickCount.value += 1
|
||||
return clickCount.value;
|
||||
}
|
||||
|
||||
return { clickCount, increment };
|
||||
}
|
||||
|
||||
function useDisplayTodo(todos: Ref<Todo[]>) {
|
||||
const todoCount = computed(() => todos.value.length);
|
||||
return { todoCount };
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ExampleComponent',
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
todos: {
|
||||
type: Array as PropType<Todo[]>,
|
||||
default: () => []
|
||||
},
|
||||
meta: {
|
||||
type: Object as PropType<Meta>,
|
||||
required: true
|
||||
},
|
||||
active: {
|
||||
type: Boolean
|
||||
}
|
||||
},
|
||||
setup (props) {
|
||||
return { ...useClickCount(), ...useDisplayTodo(toRef(props, 'todos')) };
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -2,23 +2,23 @@
|
|||
<nav class="menu-nav">
|
||||
<ul class="links-list">
|
||||
<li class="link-item">
|
||||
<RouterLink to="/">Ramos</RouterLink>
|
||||
<RouterLink to="/categoria/ramos">Ramos</RouterLink>
|
||||
</li>
|
||||
|
||||
<li class="link-item">
|
||||
<RouterLink to="/">Plantas</RouterLink>
|
||||
<RouterLink to="/categoria/plantas">Plantas</RouterLink>
|
||||
</li>
|
||||
|
||||
<li class="link-item">
|
||||
<RouterLink to="/">Floranet</RouterLink>
|
||||
</li>
|
||||
<!-- <li class="link-item">
|
||||
<RouterLink to="/category">Floranet</RouterLink>
|
||||
</li> -->
|
||||
|
||||
<!-- <li class="link-item">
|
||||
<RouterLink to="/category">FAQs</RouterLink>
|
||||
</li> -->
|
||||
|
||||
<li class="link-item">
|
||||
<RouterLink to="/faq">FAQs</RouterLink>
|
||||
</li>
|
||||
|
||||
<li class="link-item">
|
||||
<RouterLink to="/contacta">Contacta</RouterLink>
|
||||
<a href="#question-section">Contacta</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,15 @@
|
|||
<template>
|
||||
<div class="user-area">
|
||||
<RouterLink class="user-area-link help" to="/">
|
||||
¿necesitas ayuda?
|
||||
</RouterLink>
|
||||
|
||||
<dropdown-group class="user-area-lang" label="Idioma">
|
||||
<dropdown-item> EN </dropdown-item>
|
||||
<dropdown-item> PT </dropdown-item>
|
||||
<dropdown-item> ES </dropdown-item>
|
||||
<dropdown-item current-lang="en"> EN </dropdown-item>
|
||||
<dropdown-item current-lang="pt"> PT </dropdown-item>
|
||||
<dropdown-item current-lang="es"> ES </dropdown-item>
|
||||
</dropdown-group>
|
||||
|
||||
<RouterLink class="user-area-link user" to="/"><icon-user /></RouterLink>
|
||||
<RouterLink class="user-area-link cart" to="/"><icon-cart /></RouterLink>
|
||||
<RouterLink class="user-area-link cart" to="/checkout">
|
||||
<icon-cart />
|
||||
</RouterLink>
|
||||
|
||||
<q-btn
|
||||
class="user-area-hamburg"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
<template>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="21"
|
||||
height="14"
|
||||
viewBox="0 0 21 14"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M0.934292 6.39147H18.2151L13.2101 1.23843C13.0946 1.13258 13.03 0.985578 13.03 0.828772C13.03 0.671966 13.0946 0.524961 13.2101 0.419117C13.3079 0.301512 13.4546 0.23291 13.6092 0.23291C13.7638 0.23291 13.9086 0.301512 14.0064 0.419117L20.0034 6.59335C20.1149 6.70116 20.1814 6.84816 20.1854 7.00301C20.1814 7.15786 20.1169 7.30486 20.0034 7.41071L14.0044 13.5889C13.9047 13.7025 13.7638 13.7672 13.6131 13.7672C13.4625 13.7672 13.3216 13.7025 13.2218 13.5889C13.1064 13.483 13.0418 13.336 13.0418 13.1792C13.0418 13.0224 13.1064 12.8754 13.2218 12.7696L18.1798 7.67335H0.934292C0.867767 7.67335 0.814941 7.62043 0.814941 7.55379V6.50907C0.814941 6.47771 0.82668 6.44635 0.850159 6.42479C0.871682 6.40323 0.902986 6.39147 0.934292 6.39147Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<template><svg width="29" height="19" viewBox="0 0 29 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="29" height="19" rx="3" fill="#01326F"/>
|
||||
<path d="M17.1001 14.1905H11.748V4.81104H17.1001V14.1905Z" fill="#6C6BBD"/>
|
||||
<path d="M12.0917 9.49997C12.0917 7.59731 13.0052 5.90247 14.4279 4.81025C13.3875 4.01156 12.0746 3.53485 10.6477 3.53485C7.26957 3.53485 4.53125 6.20549 4.53125 9.49997C4.53125 12.7945 7.26957 15.4651 10.6477 15.4651C12.0746 15.4651 13.3875 14.9884 14.4279 14.1897C13.0052 13.0975 12.0917 11.4026 12.0917 9.49997Z" fill="#0099DF"/>
|
||||
<path d="M24.3189 9.49997C24.3189 12.7945 21.5806 15.4651 18.2025 15.4651C16.7756 15.4651 15.4626 14.9884 14.4219 14.1897C15.8449 13.0975 16.7585 11.4026 16.7585 9.49997C16.7585 7.59731 15.8449 5.90247 14.4219 4.81025C15.4626 4.01156 16.7756 3.53485 18.2025 3.53485C21.5806 3.53485 24.3189 6.20549 24.3189 9.49997Z" fill="#EB001B"/>
|
||||
</svg>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<template>
|
||||
<svg
|
||||
width="29"
|
||||
height="19"
|
||||
viewBox="0 0 29 19"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clip-path="url(#clip0_79_1742)">
|
||||
<rect width="29" height="19" rx="3" fill="#1D71B9" />
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M17.4941 15.4503V9.1377L29.0158 9.14802V10.8917L27.684 12.2791L29.0158 13.6799V15.4603H26.8897L25.7598 14.2445L24.6377 15.4652L17.4941 15.4503Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M18.2637 14.7579V9.83228H22.5468V10.967H19.6508V11.7373H22.4778V12.8533H19.6508V13.6098H22.5468V14.7579H18.2637Z"
|
||||
fill="#1D71B9"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M22.5254 14.7578L24.895 12.2923L22.5254 9.83252H24.3594L25.8076 11.3935L27.2598 9.83252H29.0154V9.87113L26.696 12.2923L29.0154 14.6882V14.7578H27.2422L25.7684 13.1811L24.3096 14.7578H22.5254Z"
|
||||
fill="#1D71B9"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M18.0319 3.53491H20.8092L21.7846 5.69494V3.53491H25.2135L25.8047 5.15321L26.3979 3.53491H29.016V9.84716H15.1797L18.0319 3.53491Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M18.5578 4.2207L16.3164 9.14212H17.8536L18.2763 8.15654H20.5674L20.9901 9.14212H22.5653L20.3334 4.2207H18.5578ZM18.7503 7.05206L19.4222 5.48537L20.0938 7.05206H18.7503Z"
|
||||
fill="#1D71B9"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M22.5449 9.14139V4.21997L24.7055 4.22723L25.8174 7.2528L26.9367 4.21997H29.0161V9.14139L27.6781 9.15286V5.77213L26.4149 9.14139H25.1932L23.9038 5.76066V9.14139H22.5449Z"
|
||||
fill="#1D71B9"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_79_1742">
|
||||
<rect width="29" height="19" rx="3" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<template>
|
||||
<svg
|
||||
width="29"
|
||||
height="19"
|
||||
viewBox="0 0 29 19"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clip-path="url(#clip0_79_1742)">
|
||||
<rect width="29" height="19" rx="3" fill="#1D71B9" />
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M17.4941 15.4503V9.1377L29.0158 9.14802V10.8917L27.684 12.2791L29.0158 13.6799V15.4603H26.8897L25.7598 14.2445L24.6377 15.4652L17.4941 15.4503Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M18.2637 14.7579V9.83228H22.5468V10.967H19.6508V11.7373H22.4778V12.8533H19.6508V13.6098H22.5468V14.7579H18.2637Z"
|
||||
fill="#1D71B9"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M22.5254 14.7578L24.895 12.2923L22.5254 9.83252H24.3594L25.8076 11.3935L27.2598 9.83252H29.0154V9.87113L26.696 12.2923L29.0154 14.6882V14.7578H27.2422L25.7684 13.1811L24.3096 14.7578H22.5254Z"
|
||||
fill="#1D71B9"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M18.0319 3.53491H20.8092L21.7846 5.69494V3.53491H25.2135L25.8047 5.15321L26.3979 3.53491H29.016V9.84716H15.1797L18.0319 3.53491Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M18.5578 4.2207L16.3164 9.14212H17.8536L18.2763 8.15654H20.5674L20.9901 9.14212H22.5653L20.3334 4.2207H18.5578ZM18.7503 7.05206L19.4222 5.48537L20.0938 7.05206H18.7503Z"
|
||||
fill="#1D71B9"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M22.5449 9.14139V4.21997L24.7055 4.22723L25.8174 7.2528L26.9367 4.21997H29.0161V9.14139L27.6781 9.15286V5.77213L26.4149 9.14139H25.1932L23.9038 5.76066V9.14139H22.5449Z"
|
||||
fill="#1D71B9"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_79_1742">
|
||||
<rect width="29" height="19" rx="3" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<template>
|
||||
<span>
|
||||
<svg
|
||||
width="21"
|
||||
height="13"
|
||||
viewBox="0 0 21 13"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g id="logo">
|
||||
<g id="icon">
|
||||
<path
|
||||
id="Vector"
|
||||
d="M13.1039 1.81055H7.75195V11.1896H13.1039V1.81055Z"
|
||||
fill="#FF5F00"
|
||||
/>
|
||||
<path
|
||||
id="<Path>"
|
||||
d="M8.091 6.50114C8.09001 5.59775 8.29983 4.70597 8.70458 3.89335C9.10933 3.08073 9.69839 2.36856 10.4272 1.81079C9.52482 1.11928 8.44119 0.689275 7.3001 0.569914C6.15901 0.450553 5.0065 0.646652 3.97429 1.1358C2.94208 1.62495 2.07182 2.38741 1.46298 3.33604C0.854126 4.28468 0.53125 5.38121 0.53125 6.50032C0.53125 7.61942 0.854126 8.71596 1.46298 9.66459C2.07182 10.6132 2.94208 11.3757 3.97429 11.8648C5.0065 12.354 6.15901 12.5501 7.3001 12.4307C8.44119 12.3114 9.52482 11.8814 10.4272 11.1898C9.69861 10.6322 9.10969 9.92035 8.70495 9.10803C8.30022 8.29571 8.09027 7.40426 8.091 6.50114Z"
|
||||
fill="#EB001B"
|
||||
/>
|
||||
<path
|
||||
id="Vector_2"
|
||||
d="M20.3245 6.50086C20.3245 7.62005 20.0016 8.71665 19.3926 9.66531C18.7836 10.614 17.9133 11.3764 16.8809 11.8655C15.8486 12.3546 14.696 12.5506 13.5548 12.431C12.4136 12.3115 11.33 11.8813 10.4277 11.1896C11.156 10.6315 11.7447 9.91937 12.1496 9.10701C12.5544 8.29465 12.7648 7.40323 12.7648 6.50003C12.7648 5.59682 12.5544 4.70541 12.1496 3.89305C11.7447 3.08069 11.156 2.3686 10.4277 1.8105C11.33 1.11878 12.4136 0.688563 13.5548 0.569031C14.696 0.449498 15.8486 0.645471 16.8809 1.13455C17.9133 1.62363 18.7836 2.38608 19.3926 3.33474C20.0016 4.28341 20.3245 5.38001 20.3245 6.4992V6.50086Z"
|
||||
fill="#F79E1B"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 3.5px 4.5px;
|
||||
border-radius: 3px;
|
||||
background-color: #01326f;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<template>
|
||||
<svg
|
||||
width="29"
|
||||
height="19"
|
||||
viewBox="0 0 29 19"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="29" height="19" rx="3" fill="url(#paint0_linear_79_1437)" />
|
||||
<path
|
||||
d="M14.8733 8.37561C14.8609 9.32964 15.7452 9.86206 16.4114 10.1786C17.0958 10.5034 17.3257 10.7116 17.3231 11.002C17.3179 11.4466 16.7771 11.6427 16.271 11.6504C15.388 11.6637 14.8746 11.4179 14.4665 11.2319L14.1484 12.6834C14.5579 12.8674 15.3161 13.0279 16.1025 13.0349C17.9481 13.0349 19.1557 12.1465 19.1623 10.7689C19.1694 9.02076 16.6824 8.92395 16.6994 8.14252C16.7053 7.90561 16.9371 7.65277 17.4453 7.58845C17.6967 7.55597 18.3909 7.53113 19.1779 7.88459L19.4868 6.48031C19.0636 6.33001 18.5196 6.18608 17.8423 6.18608C16.1051 6.18608 14.8831 7.0866 14.8733 8.37561ZM22.4552 6.30708C22.1182 6.30708 21.8341 6.49878 21.7074 6.79301L19.0708 12.9317H20.9152L21.2822 11.9427H23.5361L23.749 12.9317H25.3745L23.956 6.30708H22.4552ZM22.7132 8.09667L23.2454 10.5843H21.7877L22.7132 8.09667ZM12.6371 6.30708L11.1833 12.9317H12.9408L14.394 6.30708H12.6371ZM10.0371 6.30708L8.2078 10.8161L7.46784 6.98216C7.38098 6.55418 7.0381 6.30708 6.65734 6.30708H3.6668L3.625 6.49941C4.23891 6.62933 4.93642 6.83886 5.35898 7.06304C5.61761 7.19996 5.69141 7.31969 5.77631 7.64513L7.17786 12.9317H9.03528L11.8828 6.30708H10.0371Z"
|
||||
fill="white"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="paint0_linear_79_1437"
|
||||
x1="13.0273"
|
||||
y1="19"
|
||||
x2="18.7509"
|
||||
y2="0.330809"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#222357" />
|
||||
<stop offset="1" stop-color="#254AA5" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="23" height="22" viewBox="0 0 23 22" fill="none">
|
||||
<ellipse cx="11.5" cy="11" rx="11.5" ry="11" transform="rotate(-180 11.5 11)" fill="#117564" />
|
||||
<path d="M13.6904 16.2383L9.61959 12.1516C8.84245 11.3714 8.84217 10.1098 9.61895 9.32931L13.6904 5.23828"
|
||||
stroke="#CDEBD2" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 399 B |
|
|
@ -0,0 +1,7 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="23" height="22" viewBox="0 0 23 22" fill="none">
|
||||
<ellipse cx="11.5" cy="11" rx="11.5" ry="11" fill="#117564" />
|
||||
<path d="M9.30957 5.76172L13.3804 9.8484C14.1575 10.6286 14.1578 11.8902 13.381 12.6707L9.30957 16.7617"
|
||||
fill="#117564" />
|
||||
<path d="M9.30957 5.76172L13.3804 9.8484C14.1575 10.6286 14.1578 11.8902 13.381 12.6707L9.30957 16.7617"
|
||||
stroke="#CDEBD2" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 493 B |
|
|
@ -1,8 +0,0 @@
|
|||
export interface Todo {
|
||||
id: number;
|
||||
content: string;
|
||||
}
|
||||
|
||||
export interface Meta {
|
||||
totalCount: number;
|
||||
}
|
||||
|
|
@ -1,29 +1,87 @@
|
|||
<template>
|
||||
<swiper
|
||||
:navigation="true"
|
||||
<Swiper
|
||||
:space-between="screenWidth > 1024 ? 56 : 25"
|
||||
:slides-per-view="'auto'"
|
||||
:centered-slides="true"
|
||||
:modules="modules"
|
||||
class="cards-carousel-container"
|
||||
:grabCursor="true"
|
||||
:loop="true"
|
||||
:pagination="{
|
||||
dynamicBullets: true,
|
||||
clickable: true,
|
||||
}"
|
||||
:keyboard="{
|
||||
enabled: true,
|
||||
}"
|
||||
@swiper="onSwiper"
|
||||
>
|
||||
<slot></slot>
|
||||
</swiper>
|
||||
</Swiper>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Swiper from 'swiper';
|
||||
import { Navigation } from 'swiper/modules';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { Autoplay, Keyboard, Navigation, Pagination } from 'swiper/modules';
|
||||
import type { Swiper as SwiperTypes } from 'swiper/types';
|
||||
import { Swiper } from 'swiper/vue';
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
import 'swiper/css';
|
||||
import 'swiper/css/navigation';
|
||||
import { useMobileStore } from 'src/stores/mobileNav';
|
||||
import { useSwiperStore } from 'src/stores/swiper';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'horizontal-carousel',
|
||||
props: {},
|
||||
components: {
|
||||
Swiper,
|
||||
},
|
||||
setup() {
|
||||
const swiperStore = useSwiperStore();
|
||||
const { swiperCtx } = storeToRefs(swiperStore);
|
||||
function onSwiper(swiper: SwiperTypes) {
|
||||
swiperCtx.value = swiper;
|
||||
}
|
||||
|
||||
const mobileStore = useMobileStore();
|
||||
const { screenWidth } = storeToRefs(mobileStore);
|
||||
|
||||
return {
|
||||
modules: [Navigation],
|
||||
onSwiper,
|
||||
screenWidth,
|
||||
modules: [Navigation, Pagination, Keyboard, Autoplay],
|
||||
};
|
||||
},
|
||||
components: { Swiper },
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.swiper {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
& .swiper-wrapper .swiper-slide {
|
||||
width: 360px !important;
|
||||
}
|
||||
|
||||
& .swiper-button-prev,
|
||||
& .swiper-button-next {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
&::after,
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
& .swiper-button-prev {
|
||||
background-image: url('../../icons/svg/ArrowCircleFilledLeft.svg');
|
||||
}
|
||||
|
||||
& .swiper-button-next {
|
||||
background-image: url('../../icons/svg/ArrowCircleFilledRight.svg');
|
||||
}
|
||||
|
||||
& .swiper-pagination {
|
||||
& .swiper-pagination-bullet.swiper-pagination-bullet-active {
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -44,14 +44,12 @@
|
|||
<PostalCode />
|
||||
</div>
|
||||
|
||||
<button class="btn carousel-content-item">
|
||||
<q-btn to="/categoria/ramos" class="btn carousel-content-item">
|
||||
<IconSearch /> ver disponibilidad
|
||||
</button>
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
<footer class="carousel-content-footer">
|
||||
<IconMouse />
|
||||
</footer>
|
||||
<!-- <footer class="carousel-content-footer"></footer> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -63,7 +61,6 @@ import { PropType, defineComponent, ref } from 'vue';
|
|||
import { storeToRefs } from 'pinia';
|
||||
import Calendar from 'src/components/@inputs/Calendar.vue';
|
||||
import PostalCode from 'src/components/@inputs/PostalCode.vue';
|
||||
import IconMouse from 'src/components/icons/IconMouse.vue';
|
||||
import IconSearch from 'src/components/icons/IconSearch.vue';
|
||||
import { useMobileStore } from 'src/stores/mobileNav';
|
||||
|
||||
|
|
@ -93,7 +90,7 @@ export default defineComponent({
|
|||
screenWidth,
|
||||
};
|
||||
},
|
||||
components: { IconMouse, IconSearch, Calendar, PostalCode },
|
||||
components: { IconSearch, Calendar, PostalCode },
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -138,10 +135,27 @@ export default defineComponent({
|
|||
flex-wrap: wrap;
|
||||
border-radius: 10px 0 0 10px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 82px;
|
||||
/* margin-bottom: 82px; */
|
||||
min-height: 150px;
|
||||
& .carousel-content-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 27px 53px 34px 48px;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
&:first-child::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
opacity: 0.2;
|
||||
background-color: $text-normal-100;
|
||||
right: 0;
|
||||
top: 27px;
|
||||
bottom: 29px;
|
||||
@media only screen and (max-width: $med-md) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&.btn {
|
||||
&:focus,
|
||||
&:focus-visible {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<q-item clickable v-close-popup @click="onItemClick">
|
||||
<q-item clickable v-close-popup @click="onItemClick(currentLang)">
|
||||
<q-item-section>
|
||||
<q-item-label>
|
||||
<slot></slot>
|
||||
|
|
@ -9,17 +9,27 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useLanguageStore } from 'src/stores/language';
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'DropdownItem',
|
||||
props: {
|
||||
currentLang: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const langStore = useLanguageStore();
|
||||
const { lang } = storeToRefs(langStore);
|
||||
|
||||
return {
|
||||
onItemClick() {
|
||||
// console.log('Clicked on an Item')
|
||||
onItemClick(currentLang: string) {
|
||||
lang.value = currentLang;
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
|
|||
|
|
@ -12,9 +12,12 @@
|
|||
sin intermediarios.
|
||||
</p>
|
||||
|
||||
<RouterLink class="btn rounded outlined green-color pd-icon" to="/">
|
||||
<a
|
||||
href="#question-section"
|
||||
class="btn rounded outlined green-color pd-icon"
|
||||
>
|
||||
¿Quieres saber más? <IconChatRoundedFill />
|
||||
</RouterLink>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
<template>
|
||||
<section
|
||||
class="question-container"
|
||||
style="background-image: url('assets/question-bg.png')"
|
||||
style="background-image: url('../../assets/question-bg.png')"
|
||||
id="question-section"
|
||||
>
|
||||
<container class="question-container-form" role="main">
|
||||
<Container class="question-container-form">
|
||||
<header class="question-content">
|
||||
<LogoWhite />
|
||||
|
||||
|
|
@ -25,72 +26,23 @@
|
|||
<h5 class="question-form-title">Pregunta a nuestro especialista</h5>
|
||||
</header>
|
||||
|
||||
<form class="question-form-body" @submit="handleSubmit" role="main">
|
||||
<q-input
|
||||
bg-color="white"
|
||||
v-model="text"
|
||||
label="Nombre"
|
||||
class="name"
|
||||
standout
|
||||
/>
|
||||
<q-input
|
||||
bg-color="white"
|
||||
v-model="text"
|
||||
label="Apellidos"
|
||||
class="nickname"
|
||||
standout
|
||||
/>
|
||||
<q-input
|
||||
bg-color="white"
|
||||
v-model="text"
|
||||
type="email"
|
||||
label="Email"
|
||||
class="email"
|
||||
standout
|
||||
/>
|
||||
<q-input
|
||||
bg-color="white"
|
||||
v-model="text"
|
||||
type="tel"
|
||||
label="Teléfono"
|
||||
class="telephone"
|
||||
standout
|
||||
/>
|
||||
<q-input
|
||||
bg-color="white"
|
||||
v-model="text"
|
||||
label="Motivo de consulta"
|
||||
class="consult"
|
||||
standout
|
||||
/>
|
||||
<q-input
|
||||
bg-color="white"
|
||||
v-model="text"
|
||||
label="Mensaje"
|
||||
class="message"
|
||||
type="textarea"
|
||||
autogrow
|
||||
standout
|
||||
/>
|
||||
<q-checkbox
|
||||
v-model="checkbox"
|
||||
label="*Acepto los términos y condiciones (Ver), y recibir respuesta comercial por parte de Verdnatura"
|
||||
/>
|
||||
</form>
|
||||
<QuestionForm />
|
||||
</div>
|
||||
</container>
|
||||
</Container>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
|
||||
import IconQuestion from '../icons/IconQuestion.vue';
|
||||
import LogoWhite from '../logo/LogoWhite.vue';
|
||||
import Container from '../ui/Container.vue';
|
||||
import QuestionForm from '../ui/QuestionForm.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'question-component',
|
||||
components: { Container, LogoWhite, IconQuestion },
|
||||
components: { Container, LogoWhite, IconQuestion, QuestionForm },
|
||||
setup() {
|
||||
const handleSubmit = () => {
|
||||
console.log('Foi submit');
|
||||
|
|
@ -188,32 +140,6 @@ p {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .question-form-body {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
|
||||
& .q-field {
|
||||
&.name,
|
||||
&.nickname,
|
||||
&.email,
|
||||
&.telephone {
|
||||
flex: 1 0 min(100%, 218px);
|
||||
}
|
||||
|
||||
&.consult,
|
||||
&.message {
|
||||
flex: 1 0 100%;
|
||||
}
|
||||
/* & .q-field__native {
|
||||
color: $black !important;
|
||||
} */
|
||||
}
|
||||
}
|
||||
& .q-checkbox {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $med-xmd) {
|
||||
|
|
|
|||
|
|
@ -41,9 +41,12 @@
|
|||
</li>
|
||||
</ul>
|
||||
|
||||
<RouterLink class="btn rounded outlined white-color pd-icon" to="/">
|
||||
<a
|
||||
href="#question-section"
|
||||
class="btn rounded outlined white-color pd-icon"
|
||||
>
|
||||
¿Tienes dudas? hablemos <IconChatRoundedFill />
|
||||
</RouterLink>
|
||||
</a>
|
||||
</div>
|
||||
</Container>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,196 @@
|
|||
<template>
|
||||
<q-btn
|
||||
title="previous button"
|
||||
class="swiper-btn prev"
|
||||
color="primary"
|
||||
size="sm"
|
||||
@click="handlePrev"
|
||||
round
|
||||
flat
|
||||
>
|
||||
<IconArrowCircleFilledLeft />
|
||||
</q-btn>
|
||||
|
||||
<swiper-container
|
||||
class="swiper"
|
||||
:space-between="screenWidth > 1024 ? 56 : 25"
|
||||
:slides-per-view="'auto'"
|
||||
:centered-slides="true"
|
||||
:grabCursor="true"
|
||||
:navigation="true"
|
||||
:loop="true"
|
||||
:pagination="{
|
||||
dynamicBullets: true,
|
||||
clickable: true,
|
||||
}"
|
||||
:keyboard="{
|
||||
enabled: true,
|
||||
}"
|
||||
>
|
||||
<slot></slot>
|
||||
</swiper-container>
|
||||
|
||||
<q-btn
|
||||
title="next button"
|
||||
class="swiper-btn next"
|
||||
color="primary"
|
||||
size="sm"
|
||||
@click="handleNext"
|
||||
round
|
||||
flat
|
||||
>
|
||||
<IconArrowCircleFilledRight />
|
||||
</q-btn>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { defineComponent, onMounted, ref } from 'vue';
|
||||
|
||||
import { useMobileStore } from 'src/stores/mobileNav';
|
||||
import IconArrowCircleFilledLeft from '../icons/IconArrowCircleFilledLeft.vue';
|
||||
import IconArrowCircleFilledRight from '../icons/IconArrowCircleFilledRight.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'SwiperComponent',
|
||||
components: { IconArrowCircleFilledLeft, IconArrowCircleFilledRight },
|
||||
setup() {
|
||||
const mobileStore = useMobileStore();
|
||||
const { screenWidth } = storeToRefs(mobileStore);
|
||||
|
||||
const prevBtn = ref(null);
|
||||
const nextBtn = ref(null);
|
||||
const swiperContainer = ref(null);
|
||||
const prevSwiperBtn = ref(null);
|
||||
const nextSwiperBtn = ref(null);
|
||||
|
||||
onMounted(() => {
|
||||
// console.log('Montado!');
|
||||
|
||||
swiperContainer.value =
|
||||
document.querySelector('swiper-container').shadowRoot;
|
||||
prevSwiperBtn.value = swiperContainer.value.querySelector(
|
||||
'.swiper-button-prev'
|
||||
);
|
||||
nextSwiperBtn.value = swiperContainer.value.querySelector(
|
||||
'.swiper-button-next'
|
||||
);
|
||||
const swiperDisplay = 'none';
|
||||
nextSwiperBtn.value.style.display = swiperDisplay;
|
||||
prevSwiperBtn.value.style.display = swiperDisplay;
|
||||
nextBtn.value = document.querySelector('.swiper-btn.next');
|
||||
prevBtn.value = document.querySelector('.swiper-btn.prev');
|
||||
});
|
||||
|
||||
/* onUpdated(() => {
|
||||
console.log('Atualizado!');
|
||||
|
||||
console.groupCollapsed('%c Custom', 'color: tomato;');
|
||||
console.log({ prevBtn: prevBtn.value, nextBtn: nextBtn.value });
|
||||
console.groupEnd();
|
||||
|
||||
console.groupCollapsed('%c Swiper', 'color: hotpink;');
|
||||
console.log(prevSwiperBtn.value);
|
||||
console.groupEnd();
|
||||
}); */
|
||||
|
||||
return {
|
||||
screenWidth,
|
||||
handlePrev() {
|
||||
// console.log('Prev click');
|
||||
prevSwiperBtn.value.click();
|
||||
},
|
||||
handleNext() {
|
||||
// console.log('Next click');
|
||||
nextSwiperBtn.value.click();
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.swiper {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 409px;
|
||||
width: 150px;
|
||||
background: rgb(0, 0, 0);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(0, 0, 0, 0) 25%,
|
||||
rgba(255, 255, 255, 1) 100%
|
||||
);
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
& .swiper-slide {
|
||||
width: 360px !important;
|
||||
}
|
||||
|
||||
& .swiper-button-prev,
|
||||
& .swiper-button-next {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
&::after,
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
& .swiper-button-prev {
|
||||
background-image: url('../../icons/svg/ArrowCircleFilledLeft.svg');
|
||||
}
|
||||
|
||||
& .swiper-button-next {
|
||||
background-image: url('../../icons/svg/ArrowCircleFilledRight.svg');
|
||||
}
|
||||
|
||||
& .swiper-pagination {
|
||||
& .swiper-pagination-bullet.swiper-pagination-bullet-active {
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $med-lg) {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& .swiper-slide {
|
||||
width: 166px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-btn {
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
top: calc(50% - 40px);
|
||||
transform: translateY(-50%);
|
||||
&.prev {
|
||||
left: 40px;
|
||||
}
|
||||
|
||||
&.next {
|
||||
right: 125px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $med-lg) {
|
||||
top: -45px;
|
||||
transform: initial;
|
||||
&.prev {
|
||||
left: 13px;
|
||||
}
|
||||
|
||||
&.next {
|
||||
right: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -10,7 +10,12 @@
|
|||
<p v-if="discount" class="tag discount">-{{ discount }}%</p>
|
||||
</div>
|
||||
|
||||
<img class="card-img" :src="imgSrc" :alt="alt" @load="handleLoad" />
|
||||
<img
|
||||
class="card-img"
|
||||
:src="imgSrc ? imgSrc : '../../assets/empty-img.png'"
|
||||
:alt="alt"
|
||||
@load="handleLoad"
|
||||
/>
|
||||
|
||||
<div class="head-hovered">
|
||||
<IconEyes />
|
||||
|
|
@ -23,7 +28,7 @@
|
|||
|
||||
<div class="card-values">
|
||||
<p class="price" v-if="productValue">{{ productValue }}€</p>
|
||||
<p class="price offer tachado" v-if="valueWithDiscount">
|
||||
<p class="price offer tachado" v-if="+valueWithDiscount > 0">
|
||||
{{ valueWithDiscount() }}€
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -32,7 +37,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { PropType, defineComponent } from 'vue';
|
||||
import { PropType, defineComponent, ref } from 'vue';
|
||||
import IconEyes from '../icons/IconEyes.vue';
|
||||
|
||||
type Size = 'sm-card' | 'md-card' | 'lg-card';
|
||||
|
|
@ -78,15 +83,17 @@ export default defineComponent({
|
|||
},
|
||||
},
|
||||
setup({ productValue, discount }) {
|
||||
const loadingImg = ref(true);
|
||||
const handleLoad = () => {
|
||||
// console.log('Carregou');
|
||||
loadingImg.value = false;
|
||||
};
|
||||
|
||||
const valueWithDiscount = () => {
|
||||
const productWithouCaracters = ~~productValue.replaceAll('€', '');
|
||||
|
||||
if (discount) {
|
||||
const finalValue = (+discount / 100) * +productValue;
|
||||
// console.log(finalValue);
|
||||
return finalValue;
|
||||
const finalValue = (+discount / 100) * productWithouCaracters;
|
||||
return finalValue.toFixed(2);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -132,6 +139,9 @@ export default defineComponent({
|
|||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
&:focus-visible {
|
||||
outline: 2px solid $primary-light;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
& .tags {
|
||||
|
|
@ -163,6 +173,7 @@ export default defineComponent({
|
|||
font-family: $font-lora;
|
||||
user-select: none;
|
||||
font-weight: 600;
|
||||
font-size: $font-12;
|
||||
|
||||
&.new {
|
||||
color: $white;
|
||||
|
|
@ -173,12 +184,17 @@ export default defineComponent({
|
|||
background: $primary-light;
|
||||
color: $primary-dark;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $med-lg) {
|
||||
font-size: $font-10;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .card-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
<template>
|
||||
<q-btn flat @click="handleClick"><IconChat /></q-btn>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import IconChat from '../icons/IconChat.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'chat-component',
|
||||
components: { IconChat },
|
||||
setup() {
|
||||
const handleClick = () => {
|
||||
console.log('click');
|
||||
};
|
||||
return { handleClick };
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -1,11 +1,19 @@
|
|||
<template>
|
||||
<div class="mobile-nav-container" :class="!isOpenNav && 'hide'">
|
||||
<header class="mobile-nav-links">
|
||||
<RouterLink class="mobile-link" to="/">Ramos</RouterLink>
|
||||
<RouterLink class="mobile-link" to="/">Plantas</RouterLink>
|
||||
<RouterLink class="mobile-link" to="/">Floranet</RouterLink>
|
||||
<RouterLink class="mobile-link" to="/">FAQs</RouterLink>
|
||||
<RouterLink class="mobile-link" to="/">Contacta</RouterLink>
|
||||
<RouterLink @click="closeNav" class="mobile-link" to="/categoria/ramos"
|
||||
>Ramos</RouterLink
|
||||
>
|
||||
<RouterLink @click="closeNav" class="mobile-link" to="/categoria/plantas">
|
||||
Plantas
|
||||
</RouterLink>
|
||||
<RouterLink @click="closeNav" class="mobile-link" to="/"
|
||||
>Floranet</RouterLink
|
||||
>
|
||||
<RouterLink @click="closeNav" class="mobile-link" to="/">FAQs</RouterLink>
|
||||
<RouterLink @click="closeNav" class="mobile-link" to="/"
|
||||
>Contacta</RouterLink
|
||||
>
|
||||
</header>
|
||||
|
||||
<div class="mobile-nav-lang">
|
||||
|
|
@ -37,9 +45,14 @@ export default defineComponent({
|
|||
const mobileStore = useMobileStore();
|
||||
const { isOpenNav } = storeToRefs(mobileStore);
|
||||
|
||||
const setBodyStyle = (overflow: 'hidden' | 'visible') => {
|
||||
function setBodyStyle(overflow: 'hidden' | 'visible') {
|
||||
document.body.style.overflow = overflow;
|
||||
};
|
||||
}
|
||||
|
||||
function closeNav() {
|
||||
isOpenNav.value = false;
|
||||
console.log('foi click');
|
||||
}
|
||||
|
||||
watch(isOpenNav, (newValue) => {
|
||||
if (newValue) {
|
||||
|
|
@ -50,7 +63,7 @@ export default defineComponent({
|
|||
setBodyStyle('visible');
|
||||
});
|
||||
|
||||
return { isOpenNav };
|
||||
return { isOpenNav, closeNav };
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<IconCloseModal />
|
||||
</q-btn>
|
||||
|
||||
<q-card-section class="modal-header">
|
||||
<q-card-section class="modal-header" role="heading">
|
||||
<h5 class="modal-header-title subtitle green-text">
|
||||
{{ modalTextContent[modalItem].title }}
|
||||
</h5>
|
||||
|
|
@ -73,7 +73,6 @@ export default defineComponent({
|
|||
IconSearch,
|
||||
IconCloseModal,
|
||||
PriceRange,
|
||||
|
||||
Calendar,
|
||||
PostalCode,
|
||||
},
|
||||
|
|
@ -195,6 +194,7 @@ export default defineComponent({
|
|||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
gap: 60px;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
|
|
@ -207,6 +207,10 @@ export default defineComponent({
|
|||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
& .custom-input-el {
|
||||
flex: 1 0 100px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $med-md) {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,234 @@
|
|||
<template>
|
||||
<form class="question-form-body" @submit.prevent="onSubmit">
|
||||
<div class="fields">
|
||||
<q-input
|
||||
v-model="firstName"
|
||||
v-bind="firstNameAttrs"
|
||||
:error-message="errors.name"
|
||||
:error="!!errors.name"
|
||||
bg-color="white"
|
||||
label="Nombre"
|
||||
class="name"
|
||||
standout
|
||||
/>
|
||||
<q-input
|
||||
v-model="secondName"
|
||||
v-bind="secondNameAttrs"
|
||||
:error-message="errors.surname"
|
||||
:error="!!errors.surname"
|
||||
bg-color="white"
|
||||
label="Apellidos"
|
||||
class="nickname"
|
||||
standout
|
||||
/>
|
||||
<q-input
|
||||
v-model="email"
|
||||
v-bind="emailAttrs"
|
||||
:error-message="errors.email"
|
||||
:error="!!errors.email"
|
||||
bg-color="white"
|
||||
type="email"
|
||||
label="Email"
|
||||
class="email"
|
||||
standout
|
||||
/>
|
||||
<q-input
|
||||
v-model="phone"
|
||||
v-bind="phoneAttrs"
|
||||
:error-message="errors.phone"
|
||||
:error="!!errors.phone"
|
||||
bg-color="white"
|
||||
type="tel"
|
||||
label="Teléfono"
|
||||
class="telephone"
|
||||
mask="(##) ##### ####"
|
||||
standout
|
||||
/>
|
||||
<q-input
|
||||
v-model="query"
|
||||
v-bind="queryAttrs"
|
||||
:error-message="errors.query"
|
||||
:error="!!errors.query"
|
||||
bg-color="white"
|
||||
label="Motivo de consulta"
|
||||
class="consult"
|
||||
standout
|
||||
/>
|
||||
<q-input
|
||||
v-model="message"
|
||||
v-bind="messageAttrs"
|
||||
:error-message="errors.message"
|
||||
:error="!!errors.message"
|
||||
bg-color="white"
|
||||
label="Mensaje"
|
||||
class="message"
|
||||
type="textarea"
|
||||
autogrow
|
||||
standout
|
||||
/>
|
||||
<q-checkbox
|
||||
v-model="terms"
|
||||
v-bind="termsAttrs"
|
||||
:error-message="errors.terms"
|
||||
:error="!!errors.terms"
|
||||
class="terms"
|
||||
>
|
||||
*Acepto los términos y condiciones
|
||||
<RouterLink class="terms-link" to="/">(Ver)</RouterLink>, y recibir
|
||||
respuesta comercial por parte de Verdnatura
|
||||
</q-checkbox>
|
||||
</div>
|
||||
|
||||
<q-btn
|
||||
type="submit"
|
||||
class="question-submit-btn btn rounded"
|
||||
flat
|
||||
:disable="!meta.valid"
|
||||
>
|
||||
Enviar solicitud <IconArrowRightOne />
|
||||
</q-btn>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { useQuasar } from 'quasar';
|
||||
import { useFormStore } from 'src/stores/forms';
|
||||
import { useForm } from 'vee-validate';
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
import IconArrowRightOne from 'src/components/icons/IconArrowRightOne.vue';
|
||||
import { questionSchema } from 'src/utils/zod/schemas/questionSchema';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'QuestionForm',
|
||||
components: { IconArrowRightOne },
|
||||
setup() {
|
||||
const $q = useQuasar();
|
||||
const formStore = useFormStore();
|
||||
const { handleQuestionData } = formStore;
|
||||
|
||||
const { errors, meta, defineField, handleSubmit, handleReset } = useForm({
|
||||
validationSchema: questionSchema,
|
||||
initialValues: {
|
||||
terms: false,
|
||||
},
|
||||
});
|
||||
const [firstName, firstNameAttrs] = defineField('name');
|
||||
const [secondName, secondNameAttrs] = defineField('surname');
|
||||
const [email, emailAttrs] = defineField('email');
|
||||
const [phone, phoneAttrs] = defineField('phone');
|
||||
const [query, queryAttrs] = defineField('query');
|
||||
const [message, messageAttrs] = defineField('message');
|
||||
const [terms, termsAttrs] = defineField('terms');
|
||||
|
||||
const onSubmit = handleSubmit((values) => {
|
||||
console.log(values);
|
||||
handleQuestionData(values);
|
||||
handleReset();
|
||||
if (!terms.value) {
|
||||
$q.notify({
|
||||
color: 'negative',
|
||||
message: 'Primero tienes que aceptar la licencia y las condiciones',
|
||||
});
|
||||
return;
|
||||
}
|
||||
$q.notify({
|
||||
icon: 'done',
|
||||
color: 'positive',
|
||||
message: 'Enviado',
|
||||
});
|
||||
});
|
||||
|
||||
return {
|
||||
errors,
|
||||
firstName,
|
||||
firstNameAttrs,
|
||||
secondName,
|
||||
secondNameAttrs,
|
||||
email,
|
||||
emailAttrs,
|
||||
phone,
|
||||
phoneAttrs,
|
||||
query,
|
||||
queryAttrs,
|
||||
message,
|
||||
messageAttrs,
|
||||
terms,
|
||||
termsAttrs,
|
||||
onSubmit,
|
||||
meta,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.question-form-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
& label {
|
||||
padding-bottom: initial;
|
||||
}
|
||||
|
||||
& .fields {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
& .q-field {
|
||||
caret-color: $primary;
|
||||
font-family: $font-questrial;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
font-size: $font-14;
|
||||
|
||||
&.q-field--error {
|
||||
transition: 200ms ease-in-out;
|
||||
margin-bottom: 30px;
|
||||
color: #fff;
|
||||
|
||||
& div[role='alert'] {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.name,
|
||||
&.nickname,
|
||||
&.email,
|
||||
&.telephone {
|
||||
flex: 1 0 min(100%, 218px);
|
||||
}
|
||||
|
||||
&.consult,
|
||||
&.message {
|
||||
flex: 1 0 100%;
|
||||
}
|
||||
}
|
||||
|
||||
& .question-submit-btn {
|
||||
align-self: flex-start;
|
||||
@media only screen and (max-width: $med-lg) {
|
||||
align-self: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.q-checkbox {
|
||||
&.terms {
|
||||
color: $white;
|
||||
font-family: $font-questrial;
|
||||
font-size: $font-14;
|
||||
line-height: 18px;
|
||||
letter-spacing: 0.28px;
|
||||
|
||||
& .terms-link {
|
||||
color: #f90;
|
||||
&:hover {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -7,6 +7,11 @@
|
|||
@import './pages/faq.scss';
|
||||
@import './components/calendar-postalcode.scss';
|
||||
|
||||
:root {
|
||||
--swiper-theme-color: #117564;
|
||||
--swiper-pagination-color: #117564;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
@ -16,6 +21,10 @@
|
|||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: $primary-light;
|
||||
color: $primary;
|
||||
|
|
@ -35,6 +44,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
.checkout-padding {
|
||||
padding-top: 149px !important;
|
||||
@media only screen and (max-width: $med-md) {
|
||||
padding-top: 73px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
|
|
@ -82,7 +98,7 @@
|
|||
|
||||
&:focus,
|
||||
&:focus-visible {
|
||||
outline: 2px solid $primary-light;
|
||||
outline: 2px solid $primary-light !important;
|
||||
}
|
||||
|
||||
&.outlined {
|
||||
|
|
@ -112,6 +128,13 @@
|
|||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
& .q-btn__content {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $med-xmd) {
|
||||
font-size: $font-16;
|
||||
}
|
||||
|
|
@ -221,7 +244,11 @@ ul {
|
|||
a {
|
||||
font-family: $font-questrial;
|
||||
text-decoration: none;
|
||||
font-size: font-xxxsm;
|
||||
font-size: $font-xxxsm;
|
||||
// display: inline-flex;
|
||||
&:focus-visible {
|
||||
outline: 2px solid $primary-light;
|
||||
}
|
||||
}
|
||||
|
||||
p,
|
||||
|
|
@ -249,7 +276,12 @@ p,
|
|||
|
||||
.header-title {
|
||||
margin-block: 90px 50px;
|
||||
.pege-title {
|
||||
&.success {
|
||||
width: min(100%, 676px);
|
||||
margin: 90px auto 64px;
|
||||
}
|
||||
|
||||
& .pege-title {
|
||||
font-family: $font-lora;
|
||||
font-size: 1.875rem;
|
||||
line-height: 1.1;
|
||||
|
|
@ -258,10 +290,14 @@ p,
|
|||
margin-bottom: 25px;
|
||||
color: $title-default;
|
||||
}
|
||||
.pege-subtitle {
|
||||
|
||||
& .pege-subtitle {
|
||||
font-family: $font-questrial;
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
&.checkout {
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,11 +2,23 @@
|
|||
display: flex;
|
||||
gap: 9px;
|
||||
align-items: flex-end;
|
||||
& svg {
|
||||
&.calendar {
|
||||
}
|
||||
|
||||
& .custom-date-btn {
|
||||
margin-bottom: 4px;
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
& > svg {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
& .custom-block-content {
|
||||
margin-bottom: -20px;
|
||||
|
||||
& .custom-head-paragraph,
|
||||
& .custom-main-paragraph {
|
||||
line-height: 20px;
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@ $positive: #21ba45;
|
|||
$negative: #c10015;
|
||||
$info: #31ccec;
|
||||
$warning: #f2c037;
|
||||
$blue: #00709f;
|
||||
|
||||
//! Media queries
|
||||
$med-hg: 1441px;
|
||||
|
|
@ -54,12 +55,14 @@ $primary-light: #cdebd2;
|
|||
//! Secondary pallete
|
||||
$white: #ffffff;
|
||||
$secondary-orange: #ff9900;
|
||||
$secondary-orange-light: #e3e3e3;
|
||||
$secondary-100: #141414;
|
||||
$secondary-80: #54544f;
|
||||
$secondary-60: #979797;
|
||||
$secondary-40: #ededed;
|
||||
$secondary-20: #f8f8f8;
|
||||
$secondary-10: #f9f9f9;
|
||||
$secondary-5: #fafafa;
|
||||
|
||||
//! Font color pallete
|
||||
$title-default: #117564;
|
||||
|
|
@ -135,6 +138,7 @@ $font-18: 1.125rem;
|
|||
$font-16: 1rem;
|
||||
$font-14: 0.875rem;
|
||||
$font-12: 0.75rem;
|
||||
$font-10: 0.625rem;
|
||||
|
||||
//! Button
|
||||
$btn-black-bg: $text-title-100;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
</q-no-ssr>
|
||||
<mobile-nav />
|
||||
|
||||
<q-page-container class="no-padding padding-top more" role="main">
|
||||
<q-page-container class="no-padding padding-top more">
|
||||
<router-view />
|
||||
</q-page-container>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,10 +5,12 @@
|
|||
</q-no-ssr>
|
||||
<mobile-nav />
|
||||
|
||||
<q-page-container class="no-padding padding-top more" role="main">
|
||||
<q-page-container class="no-padding padding-top checkout-padding">
|
||||
<router-view />
|
||||
</q-page-container>
|
||||
|
||||
<dudas-section is-white />
|
||||
|
||||
<question-section />
|
||||
|
||||
<footer-component />
|
||||
|
|
@ -21,13 +23,20 @@ import { defineComponent } from 'vue';
|
|||
import { storeToRefs } from 'pinia';
|
||||
import FooterComponent from 'src/components/footer/FooterComponent.vue';
|
||||
import HeaderSecondary from 'src/components/header/HeaderSecondary.vue';
|
||||
import DudasSection from 'src/components/sections/DudasSection.vue';
|
||||
import QuestionSection from 'src/components/sections/QuestionSection.vue';
|
||||
import MobileNav from 'src/components/ui/MobileNav.vue';
|
||||
import { useMobileStore } from 'src/stores/mobileNav';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ProductLayout',
|
||||
components: { HeaderSecondary, FooterComponent, QuestionSection, MobileNav },
|
||||
components: {
|
||||
HeaderSecondary,
|
||||
FooterComponent,
|
||||
QuestionSection,
|
||||
MobileNav,
|
||||
DudasSection,
|
||||
},
|
||||
setup() {
|
||||
const mobileStore = useMobileStore();
|
||||
const { isOpenNav } = storeToRefs(mobileStore);
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
</q-no-ssr>
|
||||
<mobile-nav />
|
||||
|
||||
<q-page-container class="no-padding more product-layout" role="main">
|
||||
<q-page-container class="no-padding more product-layout">
|
||||
<router-view />
|
||||
</q-page-container>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
</q-no-ssr>
|
||||
<mobile-nav />
|
||||
|
||||
<q-page-container class="no-padding" role="main">
|
||||
<q-page-container class="no-padding">
|
||||
<router-view />
|
||||
</q-page-container>
|
||||
|
||||
|
|
@ -18,9 +18,9 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
import { storeToRefs } from 'pinia';
|
||||
import FooterComponent from 'src/components/footer/FooterComponent.vue';
|
||||
import HeaderPrimary from 'src/components/header/HeaderPrimary.vue';
|
||||
import InfoSection from 'src/components/sections/InfoSection.vue';
|
||||
|
|
|
|||
|
|
@ -1,13 +1,16 @@
|
|||
import { fakerES } from '@faker-js/faker';
|
||||
|
||||
export const cardMock = Array.from({ length: 10 }, (_, i) => ({
|
||||
imgSrc: `assets/flowers/flower-${i + 1}.png`,
|
||||
discount: i % 2 === 0 ? '10' : '',
|
||||
title: 'Nombre del producto',
|
||||
isNew: i % 2 === 0,
|
||||
value: '25,90',
|
||||
export const cardMock = Array.from({ length: 8 }, (_, i) => ({
|
||||
id: i + 1,
|
||||
attributes: [''],
|
||||
imgSrc: `assets/flowers/flower-${i + 1}.png`,
|
||||
title: fakerES.commerce.productName(),
|
||||
discount: fakerES.commerce.price({ min: 5, max: 15, dec: 0 }),
|
||||
isNew: fakerES.datatype.boolean(),
|
||||
value: fakerES.commerce.price({ min: 20, max: 150 }),
|
||||
// title: 'Nombre del producto',
|
||||
// discount: i % 2 === 0 ? '10' : '',
|
||||
// isNew: i % 2 === 0,
|
||||
// value: '25,90',
|
||||
}));
|
||||
|
||||
interface GenerateFlowersParams {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<q-page class="category-container">
|
||||
<section class="products-section">
|
||||
<header class="products-section-header">
|
||||
<container>
|
||||
<Container>
|
||||
<div class="product-header-content">
|
||||
<h3 class="product-header-title subtitle">Ramos para obsequiar</h3>
|
||||
<p class="product-header-paragraph">
|
||||
|
|
@ -17,59 +17,81 @@
|
|||
<div class="filter-item availability-filter">
|
||||
<p class="filter-paragraph availability">
|
||||
Disponibilidad para:
|
||||
<span class="green-text">25 Julio en 08005</span>
|
||||
<span
|
||||
v-if="availability.date && availability.postalCode"
|
||||
class="green-text"
|
||||
>
|
||||
25 Julio en
|
||||
{{ availability.postalCode.replace('-', '') }}</span
|
||||
>
|
||||
</p>
|
||||
|
||||
<button
|
||||
<q-btn
|
||||
flat
|
||||
class="btn filter-btn availability"
|
||||
type="button"
|
||||
@click="modalStore.openModal({ modal: 'availability' })"
|
||||
>
|
||||
<IconPencil />
|
||||
</button>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="product-right-filters">
|
||||
<button
|
||||
<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 />
|
||||
</button>
|
||||
</q-btn>
|
||||
|
||||
<div class="filter-item order-filter">
|
||||
<p class="filter-paragraph">
|
||||
Ordenar por:
|
||||
<span class="green-text">precio</span>
|
||||
</p>
|
||||
<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 as Order] || ''
|
||||
}}</span>
|
||||
</p>
|
||||
|
||||
<button type="button" class="btn filter-btn price-order">
|
||||
<SortSelect v-if="sortProductFilters.isOpenOrderFilter" />
|
||||
</div>
|
||||
|
||||
<q-btn
|
||||
flat
|
||||
@click="openOrderFilter"
|
||||
type="button"
|
||||
class="btn filter-btn price-order"
|
||||
>
|
||||
<IconArrowDownWhite />
|
||||
</button>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</container>
|
||||
</Container>
|
||||
</header>
|
||||
|
||||
<div class="products-section-body">
|
||||
<container cardContainer>
|
||||
<card
|
||||
<Container cardContainer>
|
||||
<Card
|
||||
v-for="(
|
||||
{ imgSrc, discount, isNew, title, value, id }, i
|
||||
) in cardMock"
|
||||
) in cardsMock"
|
||||
:productValue="value"
|
||||
:productName="title"
|
||||
:discount="discount"
|
||||
:discount="discount.toString()"
|
||||
:imgSrc="imgSrc"
|
||||
:isNew="isNew"
|
||||
:key="i"
|
||||
:id="id"
|
||||
/>
|
||||
</container>
|
||||
</Container>
|
||||
</div>
|
||||
|
||||
<footer class="products-section-footer">
|
||||
|
|
@ -86,18 +108,40 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { fakerES } from '@faker-js/faker';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import {
|
||||
defineAsyncComponent,
|
||||
defineComponent,
|
||||
onMounted,
|
||||
onUpdated,
|
||||
reactive,
|
||||
ref,
|
||||
} 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 DudasSection from 'src/components/sections/DudasSection.vue';
|
||||
import Card from 'src/components/ui/Card.vue';
|
||||
import Container from 'src/components/ui/Container.vue';
|
||||
import Modal from 'src/components/ui/Modal.vue';
|
||||
import { cardMock } from 'src/mock/cards';
|
||||
import { Category, Order, useFormStore } from 'src/stores/forms';
|
||||
import { useModalStore } from 'src/stores/modalStore';
|
||||
|
||||
import { defineComponent } from 'vue';
|
||||
type MonthES =
|
||||
| 'Enero'
|
||||
| 'Febrero'
|
||||
| 'Marzo'
|
||||
| 'Abril'
|
||||
| 'Mayo'
|
||||
| 'Junio'
|
||||
| 'Julio'
|
||||
| 'Agosto'
|
||||
| 'Septiembre'
|
||||
| 'Octubre'
|
||||
| 'Noviembre'
|
||||
| 'Diciembre';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'CategoryPage',
|
||||
|
|
@ -107,14 +151,73 @@ export default defineComponent({
|
|||
IconPencil,
|
||||
IconFilter,
|
||||
Container,
|
||||
Modal,
|
||||
Card,
|
||||
DudasSection,
|
||||
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: Record<number, 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 category = ref('');
|
||||
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: Record<Order, string> = {
|
||||
'lowest-price': 'menor precio',
|
||||
'highest-price': 'mayor precio',
|
||||
recommended: 'recomendados',
|
||||
latest: 'más recientes',
|
||||
};
|
||||
|
||||
return { cardMock, modalStore };
|
||||
onMounted(() => {
|
||||
sortProductFilters.value.category = route.path.split('/')[3] as Category;
|
||||
});
|
||||
|
||||
onUpdated(() => {
|
||||
console.log('Atualizado!');
|
||||
console.log(sortProductFilters.value);
|
||||
});
|
||||
|
||||
function openOrderFilter() {
|
||||
sortProductFilters.value.isOpenOrderFilter =
|
||||
!sortProductFilters.value.isOpenOrderFilter;
|
||||
}
|
||||
|
||||
return {
|
||||
sortProductFilters,
|
||||
openOrderFilter,
|
||||
availability,
|
||||
isOpenOrder,
|
||||
modalStore,
|
||||
orderText,
|
||||
cardsMock,
|
||||
category,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -161,7 +264,16 @@ export default defineComponent({
|
|||
padding: 4px 30px 4px 14px;
|
||||
}
|
||||
&.order-filter {
|
||||
padding: 4px 30px 4px 14px;
|
||||
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 {
|
||||
|
|
@ -175,6 +287,7 @@ export default defineComponent({
|
|||
& .filter-btn {
|
||||
padding: 8px;
|
||||
border-radius: 0 30px 30px 0;
|
||||
|
||||
&.availability,
|
||||
&.price-order {
|
||||
position: absolute;
|
||||
|
|
@ -188,6 +301,7 @@ export default defineComponent({
|
|||
&.price-order {
|
||||
right: -33px;
|
||||
padding: 9.5px;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -195,6 +309,7 @@ export default defineComponent({
|
|||
display: flex;
|
||||
gap: 40px;
|
||||
margin-right: 33px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $med-md) {
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -4,11 +4,6 @@
|
|||
<VerticalCarouselImgs :imgsArr="slidesContent" class="home-carousel" />
|
||||
</q-no-ssr>
|
||||
|
||||
<!-- <p v-if="mobileStore.isCarouselVisible">Está visível</p>
|
||||
<p v-if="!mobileStore.isCarouselVisible">Não está visível</p>
|
||||
<p v-if="mobileStore.isOpenNav">Hamburg ativo</p>
|
||||
<p v-if="!mobileStore.isOpenNav">Hamburg não ativo</p> -->
|
||||
|
||||
<section class="products-section">
|
||||
<header class="products-section-header section-header">
|
||||
<h3 class="products-header-title subtitle">
|
||||
|
|
@ -44,7 +39,7 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section class="products-selection">
|
||||
<section class="products-selection-section">
|
||||
<header class="products-selection-header section-header">
|
||||
<h3 class="products-selection-title subtitle">
|
||||
Nuestra selección de plantas para el verano
|
||||
|
|
@ -58,7 +53,42 @@
|
|||
</header>
|
||||
|
||||
<div class="products-selection-body">
|
||||
<!-- <Container> </Container> -->
|
||||
<!-- <HorizontalCarousel>
|
||||
<SwiperSlideOne
|
||||
v-for="{ id, discount, isNew, value, title, imgSrc } in cardMock"
|
||||
:key="id"
|
||||
>
|
||||
<Card
|
||||
:id="id"
|
||||
:key="id"
|
||||
:productValue="value"
|
||||
:productName="title"
|
||||
:discount="discount"
|
||||
:imgSrc="imgSrc"
|
||||
:isNew="isNew"
|
||||
/>
|
||||
</SwiperSlideOne>
|
||||
</HorizontalCarousel> -->
|
||||
|
||||
<q-no-ssr>
|
||||
<Swiper>
|
||||
<swiper-slide
|
||||
v-for="{ id, discount, isNew, value, title, imgSrc } in cardMock"
|
||||
:key="id"
|
||||
class="swiper-slide"
|
||||
>
|
||||
<Card
|
||||
:id="id"
|
||||
:key="id"
|
||||
:productValue="value"
|
||||
:productName="title"
|
||||
:discount="discount"
|
||||
:imgSrc="imgSrc"
|
||||
:isNew="isNew"
|
||||
/>
|
||||
</swiper-slide>
|
||||
</Swiper>
|
||||
</q-no-ssr>
|
||||
</div>
|
||||
|
||||
<footer class="products-selection-footer">
|
||||
|
|
@ -71,11 +101,9 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { defineAsyncComponent, defineComponent, ref } from 'vue';
|
||||
|
||||
import IconArrowCircleFilledRight from 'src/components/icons/IconArrowCircleFilledRight.vue';
|
||||
import VerticalCarouselImgs from 'src/components/quasar-components/carousel/VerticalCarouselImgs.vue';
|
||||
import Card from 'src/components/ui/Card.vue';
|
||||
import Container from 'src/components/ui/Container.vue';
|
||||
import { cardMock } from 'src/mock/cards';
|
||||
import { useMobileStore } from 'src/stores/mobileNav';
|
||||
|
|
@ -83,16 +111,23 @@ import { useMobileStore } from 'src/stores/mobileNav';
|
|||
export default defineComponent({
|
||||
name: 'HomePage',
|
||||
components: {
|
||||
IconArrowCircleFilledRight,
|
||||
VerticalCarouselImgs,
|
||||
// HorizontalCarousel,
|
||||
// ButtonComponent,
|
||||
// SwiperSlide,
|
||||
VerticalCarouselImgs: defineAsyncComponent(
|
||||
() =>
|
||||
import(
|
||||
'src/components/quasar-components/carousel/VerticalCarouselImgs.vue'
|
||||
)
|
||||
),
|
||||
Swiper: defineAsyncComponent(
|
||||
() => import('src/components/swiper/Swiper.vue')
|
||||
),
|
||||
Card: defineAsyncComponent(() => import('src/components/ui/Card.vue')),
|
||||
Container,
|
||||
Card,
|
||||
},
|
||||
setup() {
|
||||
const mobileStore = useMobileStore();
|
||||
const { isCarouselVisible, isOpenNav, screenWidth } =
|
||||
storeToRefs(mobileStore);
|
||||
|
||||
const slidesContent = [
|
||||
'assets/1.jpg',
|
||||
'assets/2.jpg',
|
||||
|
|
@ -100,11 +135,15 @@ export default defineComponent({
|
|||
'assets/4.jpg',
|
||||
'assets/5.jpg',
|
||||
];
|
||||
const data = ref(null);
|
||||
|
||||
return {
|
||||
isCarouselVisible,
|
||||
slidesContent,
|
||||
screenWidth,
|
||||
isOpenNav,
|
||||
cardMock,
|
||||
mobileStore,
|
||||
data,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
|
@ -136,7 +175,7 @@ export default defineComponent({
|
|||
@media only screen and (max-width: $med-xmd) {
|
||||
padding-inline: 16px;
|
||||
gap: 22px;
|
||||
margin-bottom: 33px;
|
||||
margin-bottom: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -166,7 +205,7 @@ export default defineComponent({
|
|||
}
|
||||
}
|
||||
|
||||
.products-selection {
|
||||
.products-selection-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
|
@ -174,6 +213,23 @@ export default defineComponent({
|
|||
background-color: $secondary-10;
|
||||
padding-block: 104px 73px;
|
||||
|
||||
& .products-selection-body {
|
||||
width: min(100%, 1440px);
|
||||
margin: 0 auto 92px;
|
||||
padding-inline: 76px;
|
||||
height: 490px;
|
||||
position: relative;
|
||||
|
||||
@media only screen and (max-width: $med-lg) {
|
||||
height: 300px;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $med-md) {
|
||||
padding-inline: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $med-xmd) {
|
||||
padding-block: 48px 41px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -428,7 +428,7 @@ export default defineComponent({
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 6px;
|
||||
gap: 84px;
|
||||
& .product-pag-item {
|
||||
margin-top: 76px;
|
||||
&::before {
|
||||
|
|
|
|||
|
|
@ -14,15 +14,20 @@ const routes: RouteRecordRaw[] = [
|
|||
],
|
||||
},
|
||||
{
|
||||
path: '/category',
|
||||
path: '/categoria',
|
||||
component: () => import('layouts/CategoryLayout.vue'),
|
||||
redirect: '/category',
|
||||
redirect: '/categoria',
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
path: 'ramos',
|
||||
name: 'Category',
|
||||
component: () => import('pages/CategoryPage.vue'),
|
||||
},
|
||||
{
|
||||
path: 'plantas',
|
||||
name: 'Plantas',
|
||||
component: () => import('pages/CategoryPage.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -0,0 +1,75 @@
|
|||
import { defineStore } from 'pinia';
|
||||
import { AvailabilityForm } from 'src/utils/zod/schemas/availabilitySchema';
|
||||
import type { CheckoutForm } from 'src/utils/zod/schemas/checkoutSchema';
|
||||
import type { QuestionForm } from 'src/utils/zod/schemas/questionSchema';
|
||||
|
||||
export type Order = 'lowest-price' | 'highest-price' | 'latest' | 'recommended';
|
||||
export type Category = 'ramos' | 'plantas';
|
||||
interface UseFormStoreState {
|
||||
sortProductFilters: {
|
||||
isOpenOrderFilter: boolean;
|
||||
order?: Order;
|
||||
price?: number;
|
||||
category: Category;
|
||||
};
|
||||
question: QuestionForm;
|
||||
availability: AvailabilityForm;
|
||||
checkout: CheckoutForm;
|
||||
}
|
||||
|
||||
export const useFormStore = defineStore('forms', {
|
||||
state: (): UseFormStoreState => ({
|
||||
sortProductFilters: {
|
||||
isOpenOrderFilter: false,
|
||||
order: undefined,
|
||||
price: undefined,
|
||||
category: 'ramos',
|
||||
},
|
||||
question: {
|
||||
name: '',
|
||||
surname: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
query: '',
|
||||
message: '',
|
||||
terms: false,
|
||||
},
|
||||
availability: {
|
||||
date: '',
|
||||
postalCode: '',
|
||||
},
|
||||
checkout: {
|
||||
name: '',
|
||||
surname: '',
|
||||
address: '',
|
||||
postalCode: '',
|
||||
city: '',
|
||||
province: '',
|
||||
phone: '',
|
||||
senderName: '',
|
||||
senderCifNif: '',
|
||||
senderEmail: '',
|
||||
senderPhone: '',
|
||||
senderNotes: '',
|
||||
paymentMethod: 'credit',
|
||||
terms: false,
|
||||
},
|
||||
}),
|
||||
|
||||
actions: {
|
||||
handleQuestionData(values: QuestionForm) {
|
||||
console.log(values);
|
||||
this.question = values;
|
||||
},
|
||||
|
||||
handleAvailabilityData(values: typeof this.availability) {
|
||||
console.log(values);
|
||||
this.availability = values;
|
||||
},
|
||||
|
||||
handleCheckoutData(values: CheckoutForm) {
|
||||
// console.log(values);
|
||||
this.checkout = values;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import { defineStore } from 'pinia';
|
||||
|
||||
export const useLanguageStore = defineStore('language', {
|
||||
state: () => ({
|
||||
lang: 'es',
|
||||
}),
|
||||
});
|
||||
|
|
@ -0,0 +1 @@
|
|||
export type Modify<T, R> = Omit<T, keyof R> & R;
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
export function handlePhoneVal(val: string) {
|
||||
const regex = /[\(\) ]/g;
|
||||
const valWithoutSpaceAndParenteses = val.replace(regex, '');
|
||||
const valLength = valWithoutSpaceAndParenteses.length;
|
||||
|
||||
return valLength > 0 && valLength === 11;
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import { z } from 'zod';
|
||||
|
||||
import * as M from './messages';
|
||||
|
||||
export const postalCode = z
|
||||
.string({ required_error: M.requiredMessage })
|
||||
.refine((val) => {
|
||||
const valWithoutHifen = val.replaceAll('-', '');
|
||||
const valLength = valWithoutHifen.length;
|
||||
|
||||
return valLength === 8 && valLength >= 1;
|
||||
}, 'El código postal debe tener 8 caracteres numéricos válidos');
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
export const nameMessage =
|
||||
'Sólo se aceptan una palabra y caracteres no numéricos';
|
||||
export const phoneMessage =
|
||||
'El número de teléfono debe contener 11 caracteres numéricos válidos';
|
||||
export const requiredMessage = 'Campo obligatorio';
|
||||
export const emailMessage =
|
||||
'Introduzca una dirección de correo electrónico válida.';
|
||||
|
|
@ -0,0 +1 @@
|
|||
export const justOneWord = /^[A-Za-z]+$/;
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
import { z } from 'zod';
|
||||
import { postalCode } from './../globalProperties';
|
||||
|
||||
const availabilityObj = {
|
||||
date: z.string().refine((val) => {
|
||||
const [day, month, year] = val.split('/');
|
||||
const regex = /\//g;
|
||||
const valWithoutSlash = val.replace(regex, '');
|
||||
const data = new Date(`${year}-${month}-${day}`);
|
||||
const today = new Date();
|
||||
|
||||
return valWithoutSlash.length === 8 && data >= today;
|
||||
}, 'La fecha no puede ser inferior al día de hoy!'),
|
||||
postalCode,
|
||||
};
|
||||
|
||||
export const availabilitySchema = z.object(availabilityObj);
|
||||
export type AvailabilityForm = z.infer<typeof availabilitySchema>;
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
import { z } from 'zod';
|
||||
|
||||
import { handlePhoneVal } from '../functions';
|
||||
import { postalCode } from '../globalProperties';
|
||||
import { justOneWord } from '../regex';
|
||||
|
||||
import * as M from '../messages';
|
||||
|
||||
const checkoutObjVal = {
|
||||
name: z
|
||||
.string({ required_error: M.requiredMessage })
|
||||
.regex(justOneWord, M.nameMessage),
|
||||
surname: z
|
||||
.string({ required_error: M.requiredMessage })
|
||||
.regex(justOneWord, M.nameMessage),
|
||||
address: z.string({ required_error: M.requiredMessage }),
|
||||
postalCode,
|
||||
city: z.string({ required_error: M.requiredMessage }).min(3),
|
||||
province: z.string({ required_error: M.requiredMessage }).min(3),
|
||||
phone: z
|
||||
.string({ required_error: M.requiredMessage })
|
||||
.refine(handlePhoneVal, M.phoneMessage),
|
||||
senderName: z.string().regex(justOneWord, M.nameMessage),
|
||||
senderCifNif: z
|
||||
.string()
|
||||
.length(9, 'El código postal debe tener 9 caracteres numéricos válidos'),
|
||||
senderEmail: z.string().email(M.emailMessage),
|
||||
senderPhone: z.string().refine(handlePhoneVal, M.phoneMessage),
|
||||
senderNotes: z.string(),
|
||||
paymentMethod: z.enum(['credit', 'stripe'], {
|
||||
required_error: 'Seleccione uno de los métodos de pago',
|
||||
}),
|
||||
terms: z.boolean().refine((val) => {
|
||||
return val === true;
|
||||
}, 'Acepte las condiciones antes de continuar con la compra'),
|
||||
};
|
||||
|
||||
export const checkoutSchema = z.object(checkoutObjVal).partial({
|
||||
senderName: true,
|
||||
senderCifNif: true,
|
||||
senderEmail: true,
|
||||
senderPhone: true,
|
||||
senderNotes: true,
|
||||
});
|
||||
export type CheckoutForm = z.infer<typeof checkoutSchema>;
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
import { toTypedSchema } from '@vee-validate/zod';
|
||||
import { z } from 'zod';
|
||||
|
||||
import { handlePhoneVal } from '../functions';
|
||||
import * as M from '../messages';
|
||||
import { justOneWord } from '../regex';
|
||||
|
||||
const questionObjVal = {
|
||||
name: z
|
||||
.string({ required_error: M.requiredMessage })
|
||||
.regex(justOneWord, M.nameMessage),
|
||||
surname: z
|
||||
.string({ required_error: M.requiredMessage })
|
||||
.regex(justOneWord, M.nameMessage),
|
||||
email: z.string({ required_error: M.requiredMessage }).email(M.emailMessage),
|
||||
phone: z
|
||||
.string({ required_error: M.requiredMessage })
|
||||
.refine(handlePhoneVal, M.phoneMessage),
|
||||
query: z.string({ required_error: M.requiredMessage }),
|
||||
message: z.string({ required_error: M.requiredMessage }),
|
||||
terms: z.boolean({ required_error: M.requiredMessage }).refine((val) => {
|
||||
return val === true;
|
||||
}),
|
||||
};
|
||||
|
||||
const questionType = z.object(questionObjVal);
|
||||
export type QuestionForm = z.infer<typeof questionType>;
|
||||
|
||||
export const questionSchema = toTypedSchema(z.object(questionObjVal));
|
||||
|
|
@ -2,5 +2,7 @@
|
|||
"extends": "@quasar/app-vite/tsconfig-preset",
|
||||
"compilerOptions": {
|
||||
"baseUrl": "."
|
||||
}
|
||||
}
|
||||
},
|
||||
"include": ["src/**/*"],
|
||||
"exclude": ["node_modules", "dist"]
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue