develop #10
|
|
@ -10,10 +10,10 @@ import { useVerticalCarouselImgs } from "src/hooks/useVerticalCarouselImgs";
|
|||
export default defineComponent({
|
||||
name: "vertical-carousel-imgs",
|
||||
props: {
|
||||
imgsArr: {
|
||||
banners: {
|
||||
type: Array,
|
||||
default: () => [""],
|
||||
},
|
||||
}
|
||||
},
|
||||
components: { IconSearch, Calendar, PostalCode },
|
||||
setup() {
|
||||
|
|
@ -45,65 +45,42 @@ export default defineComponent({
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
ref="target"
|
||||
class="vertical-carousel-container"
|
||||
style="min-height: 100dvh"
|
||||
>
|
||||
<q-carousel
|
||||
navigation-position="right"
|
||||
style="min-height: 100dvh"
|
||||
v-model="slide"
|
||||
navigation
|
||||
autoplay
|
||||
infinite
|
||||
animated
|
||||
v-if="!!imgsArr.length"
|
||||
class="custom-carousel"
|
||||
>
|
||||
<q-carousel-slide
|
||||
v-for="(img, i) in imgsArr"
|
||||
:key="i"
|
||||
:name="img"
|
||||
:img-src="img"
|
||||
/>
|
||||
<div ref="target" class="vertical-carousel-container" style="min-height: 100dvh">
|
||||
<q-carousel navigation-position="right" style="min-height: 100dvh" v-model="slide" navigation autoplay infinite
|
||||
animated v-if="!!banners.length" class="custom-carousel">
|
||||
<q-carousel-slide v-for="(item, i) in banners" :key="i" :name="item.title" :img-src="item.image">
|
||||
|
jsolis marked this conversation as resolved
|
||||
<div class="vertical-carousel-content">
|
||||
<header class="carousel-content-header">
|
||||
<h1 class="carousel-header-title">
|
||||
{{ item.title }}
|
||||
</h1>
|
||||
</header>
|
||||
pablone
commented
porque 5? porque 5?
jsolis
commented
porque los codigos postales tienen 5 digitos porque los codigos postales tienen 5 digitos
|
||||
|
||||
<form @submit="onSubmit" class="carousel-content-body">
|
||||
<div class="carousel-content-item">
|
||||
<PostalCode v-model="postalCode" v-bind:bindValue="postalCodeAttrs" :setFieldError="setFieldError" />
|
||||
</div>
|
||||
|
jsolis marked this conversation as resolved
pablone
commented
unificar el 5 en una constante unificar el 5 en una constante
|
||||
|
||||
<div class="carousel-content-item">
|
||||
<Calendar v-model="calendar" v-bind:bindValue="calendarAttrs" :setValues="setValues" />
|
||||
</div>
|
||||
|
||||
<q-btn type="submit" class="btn carousel-content-item">
|
||||
<IconSearch /> ver disponibilidad
|
||||
</q-btn>
|
||||
</form>
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
</q-carousel>
|
||||
|
||||
<div class="vertical-carousel-content">
|
||||
<header class="carousel-content-header">
|
||||
<h1 class="carousel-header-title">
|
||||
Regala un verano lleno de flores y plantas
|
||||
</h1>
|
||||
</header>
|
||||
|
||||
<form @submit="onSubmit" class="carousel-content-body">
|
||||
<div class="carousel-content-item">
|
||||
<PostalCode
|
||||
v-model="postalCode"
|
||||
v-bind:bindValue="postalCodeAttrs"
|
||||
:setFieldError="setFieldError"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="carousel-content-item">
|
||||
<Calendar
|
||||
v-model="calendar"
|
||||
v-bind:bindValue="calendarAttrs"
|
||||
:setValues="setValues"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<q-btn type="submit" class="btn carousel-content-item">
|
||||
<IconSearch /> ver disponibilidad
|
||||
</q-btn>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vertical-carousel-container {
|
||||
position: relative;
|
||||
|
||||
& .custom-carousel {
|
||||
user-select: none;
|
||||
}
|
||||
|
|
@ -116,6 +93,7 @@ export default defineComponent({
|
|||
bottom: 110px;
|
||||
width: min(100%, 845px);
|
||||
margin: 0 auto;
|
||||
|
||||
& .carousel-content-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -123,6 +101,7 @@ export default defineComponent({
|
|||
color: $white;
|
||||
text-align: center;
|
||||
margin-bottom: 27px;
|
||||
|
||||
& .carousel-header-title {
|
||||
font-size: $font-35;
|
||||
font-weight: 500;
|
||||
|
|
@ -161,6 +140,7 @@ export default defineComponent({
|
|||
padding-inline: 53px 34px;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
&:first-child::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
|
|
@ -170,11 +150,14 @@ export default defineComponent({
|
|||
right: 0;
|
||||
top: 27px;
|
||||
bottom: 29px;
|
||||
|
||||
@media only screen and (max-width: $med-md) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn {
|
||||
|
||||
&:focus,
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
|
|
@ -205,6 +188,7 @@ export default defineComponent({
|
|||
& .carousel-content-header {
|
||||
gap: 15px;
|
||||
margin-bottom: 49px;
|
||||
|
||||
& .carousel-header-title {
|
||||
font-size: $font-28;
|
||||
line-height: 34px;
|
||||
|
|
@ -215,16 +199,20 @@ export default defineComponent({
|
|||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
& .carousel-content-body {
|
||||
margin-bottom: initial;
|
||||
flex-direction: column;
|
||||
width: min(100%, 276px);
|
||||
margin: 0 auto;
|
||||
|
||||
& .carousel-content-item {
|
||||
padding-block: 24px;
|
||||
|
||||
&:first-child {
|
||||
border-radius: 10px 10px 0px 0px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 0 10px 10px;
|
||||
}
|
||||
|
|
@ -236,8 +224,7 @@ export default defineComponent({
|
|||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $med-md) {
|
||||
}
|
||||
@media only screen and (max-width: $med-md) {}
|
||||
|
||||
@media only screen and (max-height: 360px) {
|
||||
/* background-color: tomato; */
|
||||
|
|
|
|||
|
|
@ -241,7 +241,6 @@ export function useCheckoutForm() {
|
|||
type: values.paymentMethod,
|
||||
};
|
||||
addItem("payment", values.paymentMethod);
|
||||
|
||||
const typeObj = {
|
||||
paypal: async () => {
|
||||
const {
|
||||
|
|
@ -254,8 +253,10 @@ export function useCheckoutForm() {
|
|||
const {
|
||||
data: { data },
|
||||
} = await apiBack.post("payment", productData);
|
||||
redsysData.value = data;
|
||||
|
||||
redsysData.value = await data;
|
||||
document.querySelector("input[name='Ds_SignatureVersion']").value = redsysData.value.Ds_SignatureVersion;
|
||||
document.querySelector("input[name='Ds_MerchantParameters']").value = redsysData.value.Ds_MerchantParameters;
|
||||
document.querySelector("input[name='Ds_Signature']").value = redsysData.value.Ds_Signature;
|
||||
redsysFormRef.value.click();
|
||||
},
|
||||
default: () => {
|
||||
|
|
|
|||
|
|
@ -151,29 +151,19 @@ export default defineComponent({
|
|||
|
||||
<div class="checkout-container">
|
||||
<div class="checkout-steps">
|
||||
<div
|
||||
v-for="({ active, description, name, value }, i) in stepsFormated"
|
||||
class="step-item-container"
|
||||
:key="i"
|
||||
>
|
||||
<div v-for="({ active, description, name, value }, i) in stepsFormated" class="step-item-container" :key="i">
|
||||
<div class="step-item">
|
||||
<div class="circle-step-container">
|
||||
<span class="border-step" :class="[i == 0 && 'transparent']" />
|
||||
|
||||
<div
|
||||
class="circle-step"
|
||||
:class="[
|
||||
(active || (meta.valid && i == 1) || !checkoutBlock) &&
|
||||
'active',
|
||||
]"
|
||||
>
|
||||
<div class="circle-step" :class="[
|
||||
(active || (meta.valid && i == 1) || !checkoutBlock) &&
|
||||
'active',
|
||||
]">
|
||||
<span class="step-value">{{ value }}</span>
|
||||
</div>
|
||||
|
||||
<span
|
||||
class="border-step"
|
||||
:class="[i == stepList['data'].length - 1 && 'transparent']"
|
||||
/>
|
||||
<span class="border-step" :class="[i == stepList['data'].length - 1 && 'transparent']" />
|
||||
</div>
|
||||
|
||||
<div class="step-content">
|
||||
|
|
@ -199,85 +189,37 @@ export default defineComponent({
|
|||
|
||||
<div class="checkout-fields">
|
||||
<div class="field-control field-input">
|
||||
<q-input
|
||||
placeholder="Nombre*"
|
||||
name="name"
|
||||
type="text"
|
||||
v-model="name"
|
||||
v-bind:="nameAttrs"
|
||||
:error="!!errors.name"
|
||||
:error-message="errors.name"
|
||||
outlined
|
||||
/>
|
||||
<q-input placeholder="Nombre*" name="name" type="text" v-model="name" v-bind:="nameAttrs"
|
||||
:error="!!errors.name" :error-message="errors.name" outlined />
|
||||
</div>
|
||||
|
||||
<div class="field-control field-input">
|
||||
<q-input
|
||||
placeholder="Apellidos*"
|
||||
name="surname"
|
||||
type="text"
|
||||
v-model="surname"
|
||||
v-bind:="surnameAttrs"
|
||||
:error="!!errors.surname"
|
||||
:error-message="errors.surname"
|
||||
outlined
|
||||
/>
|
||||
<q-input placeholder="Apellidos*" name="surname" type="text" v-model="surname"
|
||||
v-bind:="surnameAttrs" :error="!!errors.surname" :error-message="errors.surname" outlined />
|
||||
</div>
|
||||
|
||||
<div class="field-control field-input">
|
||||
<q-input
|
||||
placeholder="Dirección*"
|
||||
name="address"
|
||||
type="text"
|
||||
v-model="address"
|
||||
v-bind:="addressAttrs"
|
||||
:error="!!errors.address"
|
||||
:error-message="errors.address"
|
||||
outlined
|
||||
/>
|
||||
<q-input placeholder="Dirección*" name="address" type="text" v-model="address"
|
||||
v-bind:="addressAttrs" :error="!!errors.address" :error-message="errors.address" outlined />
|
||||
</div>
|
||||
|
||||
<div class="field-control field-input">
|
||||
<q-input
|
||||
placeholder="Código postal*"
|
||||
name="postalCode"
|
||||
type="text"
|
||||
mask="#####"
|
||||
v-model="postalCode"
|
||||
v-bind:="postalCodeAttrs"
|
||||
:error="!!errors.postalCode"
|
||||
:error-message="errors.postalCode"
|
||||
ref="postalCodeRef"
|
||||
readonly
|
||||
outlined
|
||||
@mouseenter="showTooltip"
|
||||
@mouseleave="hideTooltip"
|
||||
>
|
||||
<q-input placeholder="Código postal*" name="postalCode" type="text" mask="#####"
|
||||
v-model="postalCode" v-bind:="postalCodeAttrs" :error="!!errors.postalCode"
|
||||
:error-message="errors.postalCode" ref="postalCodeRef" readonly outlined @mouseenter="showTooltip"
|
||||
@mouseleave="hideTooltip">
|
||||
<template #after>
|
||||
<q-btn
|
||||
to="/"
|
||||
:style="'--clr: #ffffff'"
|
||||
class="btn custom-btn-input paragraph-sm"
|
||||
label="EDITAR"
|
||||
/>
|
||||
<q-btn to="/" :style="'--clr: #ffffff'" class="btn custom-btn-input paragraph-sm"
|
||||
label="EDITAR" />
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<div
|
||||
ref="postalCodeTooltip"
|
||||
:style="[floatingStyles, '--clr: #117564']"
|
||||
:class="['tooltip ', isHidden && 'hidden']"
|
||||
@mouseenter="showTooltip"
|
||||
@mouseleave="hideTooltip"
|
||||
>
|
||||
<div ref="postalCodeTooltip" :style="[floatingStyles, '--clr: #117564']"
|
||||
:class="['tooltip ', isHidden && 'hidden']" @mouseenter="showTooltip" @mouseleave="hideTooltip">
|
||||
<p class="paragraph-sm">
|
||||
No se puede editar este campo
|
||||
<a
|
||||
href="https://www.google.com/maps"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
class="paragraph-sm link"
|
||||
>
|
||||
<a href="https://www.google.com/maps" rel="noreferrer noopener" target="_blank"
|
||||
class="paragraph-sm link">
|
||||
¿No conoce su código postal?
|
||||
</a>
|
||||
</p>
|
||||
|
|
@ -285,49 +227,23 @@ export default defineComponent({
|
|||
</div>
|
||||
|
||||
<div class="field-control field-select">
|
||||
<q-select
|
||||
name="province"
|
||||
v-model="province"
|
||||
v-bind:="provinceAttrs"
|
||||
:error="!!errors.province"
|
||||
:error-message="errors.province"
|
||||
:options="provinceOptions"
|
||||
option-value="code"
|
||||
option-label="name"
|
||||
label="País*"
|
||||
stack-label
|
||||
map-options
|
||||
emit-value
|
||||
outlined
|
||||
/>
|
||||
<q-select name="province" v-model="province" v-bind:="provinceAttrs" :error="!!errors.province"
|
||||
:error-message="errors.province" :options="provinceOptions" option-value="code"
|
||||
option-label="name" label="País*" stack-label map-options emit-value outlined />
|
||||
</div>
|
||||
|
||||
<div class="field-control field-select">
|
||||
<q-input
|
||||
placeholder="Ciudad*"
|
||||
name="city"
|
||||
type="text"
|
||||
v-model="city"
|
||||
v-bind:="cityAttrs"
|
||||
:error="!!errors.city"
|
||||
:error-message="errors.city"
|
||||
outlined
|
||||
/>
|
||||
<q-input placeholder="Ciudad*" name="city" type="text" v-model="city" v-bind:="cityAttrs"
|
||||
:error="!!errors.city" :error-message="errors.city" outlined />
|
||||
</div>
|
||||
|
||||
<div class="field-control field-input telephone">
|
||||
<vue-tel-input
|
||||
v-model="phone"
|
||||
v-bind="phoneAttrs"
|
||||
:styleClasses="[
|
||||
'custom-input',
|
||||
!!errors.phone && 'error',
|
||||
]"
|
||||
ref="phoneInputRef"
|
||||
:inputOptions="{
|
||||
placeholder: 'Teléfono*',
|
||||
}"
|
||||
/>
|
||||
<vue-tel-input v-model="phone" v-bind="phoneAttrs" :styleClasses="[
|
||||
'custom-input',
|
||||
!!errors.phone && 'error',
|
||||
]" ref="phoneInputRef" :inputOptions="{
|
||||
placeholder: 'Teléfono*',
|
||||
}" />
|
||||
<p v-if="!!errors.phone" class="error">
|
||||
{{ errors.phone }}
|
||||
</p>
|
||||
|
|
@ -342,57 +258,30 @@ export default defineComponent({
|
|||
|
||||
<div class="checkout-fields">
|
||||
<div class="field-control field-input">
|
||||
<q-input
|
||||
placeholder="Nombre y apellidos o nombre de empresa"
|
||||
name="senderName"
|
||||
type="text"
|
||||
v-model="senderName"
|
||||
v-bind:="senderNameAttrs"
|
||||
:error="!!errors.senderName"
|
||||
:error-message="errors.senderName"
|
||||
outlined
|
||||
/>
|
||||
<q-input placeholder="Nombre y apellidos o nombre de empresa" name="senderName" type="text"
|
||||
v-model="senderName" v-bind:="senderNameAttrs" :error="!!errors.senderName"
|
||||
:error-message="errors.senderName" outlined />
|
||||
</div>
|
||||
|
||||
<div class="field-control field-input">
|
||||
<q-input
|
||||
placeholder="CIF / NIF"
|
||||
name="senderCifNif"
|
||||
type="text"
|
||||
v-model="senderCifNif"
|
||||
v-bind:="senderCifNifAttrs"
|
||||
:error="!!errors.senderCifNif"
|
||||
:error-message="errors.senderCifNif"
|
||||
outlined
|
||||
/>
|
||||
<q-input placeholder="CIF / NIF" name="senderCifNif" type="text" v-model="senderCifNif"
|
||||
v-bind:="senderCifNifAttrs" :error="!!errors.senderCifNif" :error-message="errors.senderCifNif"
|
||||
outlined />
|
||||
</div>
|
||||
|
||||
<div class="field-control field-input">
|
||||
<q-input
|
||||
placeholder="Email"
|
||||
name="senderEmail"
|
||||
type="email"
|
||||
v-model="senderEmail"
|
||||
v-bind:="senderEmailAttrs"
|
||||
:error="!!errors.senderEmail"
|
||||
:error-message="errors.senderEmail"
|
||||
outlined
|
||||
/>
|
||||
<q-input placeholder="Email" name="senderEmail" type="email" v-model="senderEmail"
|
||||
v-bind:="senderEmailAttrs" :error="!!errors.senderEmail" :error-message="errors.senderEmail"
|
||||
outlined />
|
||||
</div>
|
||||
|
||||
<div class="field-control field-input telephone">
|
||||
<vue-tel-input
|
||||
v-model="senderPhone"
|
||||
v-bind="senderPhoneAttrs"
|
||||
:styleClasses="[
|
||||
'custom-input',
|
||||
!!errors.senderPhone && 'error',
|
||||
]"
|
||||
ref="phoneSenderInputRef"
|
||||
:inputOptions="{
|
||||
placeholder: 'Teléfono*',
|
||||
}"
|
||||
/>
|
||||
<vue-tel-input v-model="senderPhone" v-bind="senderPhoneAttrs" :styleClasses="[
|
||||
'custom-input',
|
||||
!!errors.senderPhone && 'error',
|
||||
]" ref="phoneSenderInputRef" :inputOptions="{
|
||||
placeholder: 'Teléfono*',
|
||||
}" />
|
||||
<p v-if="!!errors.senderPhone" class="error">
|
||||
{{ errors.senderPhone }}
|
||||
</p>
|
||||
|
|
@ -401,43 +290,19 @@ export default defineComponent({
|
|||
<div class="field-control field-input">
|
||||
<q-input
|
||||
placeholder="Notas sobre tu pedido (Opcional), por ejemplo, notas especiales para la entrega"
|
||||
name="senderNotes"
|
||||
type="textarea"
|
||||
v-model="senderNotes"
|
||||
v-bind:="senderNotesAttrs"
|
||||
:error="!!errors.senderNotes"
|
||||
:error-message="errors.senderNotes"
|
||||
class="message"
|
||||
autogrow
|
||||
outlined
|
||||
/>
|
||||
name="senderNotes" type="textarea" v-model="senderNotes" v-bind:="senderNotesAttrs"
|
||||
:error="!!errors.senderNotes" :error-message="errors.senderNotes" class="message" autogrow
|
||||
outlined />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-form>
|
||||
|
||||
<form
|
||||
v-if="paymentMethod === 'redsys' && meta.valid"
|
||||
name="from"
|
||||
action="https://sis-t.redsys.es:25443/sis/realizarPago"
|
||||
method="POST"
|
||||
class="hide"
|
||||
>
|
||||
<input
|
||||
type="hidden"
|
||||
name="Ds_SignatureVersion"
|
||||
:value="redsysData.Ds_SignatureVersion"
|
||||
/>
|
||||
<input
|
||||
type="hidden"
|
||||
name="Ds_MerchantParameters"
|
||||
:value="redsysData.Ds_MerchantParameters"
|
||||
/>
|
||||
<input
|
||||
type="hidden"
|
||||
name="Ds_Signature"
|
||||
:value="redsysData.Ds_Signature"
|
||||
/>
|
||||
<form v-if="paymentMethod === 'redsys' && meta.valid" name="from"
|
||||
action="https://sis-t.redsys.es:25443/sis/realizarPago" method="POST" class="hide">
|
||||
<input type="text" name="Ds_SignatureVersion" :value="redsysData.Ds_SignatureVersion" />
|
||||
<input type="text" name="Ds_MerchantParameters" :value="redsysData.Ds_MerchantParameters" />
|
||||
<input type="text" name="Ds_Signature" :value="redsysData.Ds_Signature" />
|
||||
<input ref="redsysFormRef" type="submit" value="Go to pay" />
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -462,11 +327,7 @@ export default defineComponent({
|
|||
|
||||
<div class="checkout-summary-body gray-bg">
|
||||
<ul class="checkout-summary-list">
|
||||
<li
|
||||
class="checkout-summary-item"
|
||||
v-for="({ name, price }, index) in cart"
|
||||
:key="index"
|
||||
>
|
||||
<li class="checkout-summary-item" v-for="({ name, price }, index) in cart" :key="index">
|
||||
<p>
|
||||
{{ name }}
|
||||
<span>{{ price }}€</span>
|
||||
|
|
@ -487,31 +348,18 @@ export default defineComponent({
|
|||
|
||||
<div class="checkout-payment-methods gray-bg">
|
||||
<header class="checkout-aside-header">
|
||||
<strong
|
||||
class="checkout-aside-title"
|
||||
:style="!!errors.paymentMethod && 'color: red'"
|
||||
>
|
||||
<strong class="checkout-aside-title" :style="!!errors.paymentMethod && 'color: red'">
|
||||
Método de pago
|
||||
</strong>
|
||||
<p v-if="!!errors.paymentMethod"></p>
|
||||
</header>
|
||||
|
||||
<div class="checkout-payment-body">
|
||||
<q-radio
|
||||
v-model="paymentMethod"
|
||||
v-bind="paymentMethodAttrs"
|
||||
val="paypal"
|
||||
color="primary"
|
||||
>
|
||||
<q-radio v-model="paymentMethod" v-bind="paymentMethodAttrs" val="paypal" color="primary">
|
||||
<p>Paypal</p>
|
||||
</q-radio>
|
||||
|
||||
<q-radio
|
||||
v-model="paymentMethod"
|
||||
v-bind="paymentMethodAttrs"
|
||||
val="redsys"
|
||||
color="primary"
|
||||
>
|
||||
<q-radio v-model="paymentMethod" v-bind="paymentMethodAttrs" val="redsys" color="primary">
|
||||
<p>Redsys</p>
|
||||
</q-radio>
|
||||
</div>
|
||||
|
|
@ -525,13 +373,7 @@ export default defineComponent({
|
|||
</p>
|
||||
</q-checkbox>
|
||||
|
||||
<q-btn
|
||||
flat
|
||||
class="btn"
|
||||
type="submit"
|
||||
form="checkout-form"
|
||||
:loading="isLoadingSubmit"
|
||||
>
|
||||
<q-btn flat class="btn" type="submit" form="checkout-form" :loading="isLoadingSubmit">
|
||||
PROCEDER AL PAGO
|
||||
</q-btn>
|
||||
</div>
|
||||
|
|
@ -585,13 +427,16 @@ export default defineComponent({
|
|||
align-items: center;
|
||||
border-radius: 50%;
|
||||
user-select: none;
|
||||
|
||||
.step-value {
|
||||
font-family: $font-questrial;
|
||||
color: $primary-dark;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: $primary-dark;
|
||||
|
||||
.step-value {
|
||||
color: $white;
|
||||
}
|
||||
|
|
@ -603,6 +448,7 @@ export default defineComponent({
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: $font-questrial;
|
||||
|
||||
h4 {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
|
|
@ -611,6 +457,7 @@ export default defineComponent({
|
|||
margin-bottom: 4px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 0.875rem;
|
||||
color: $text-default;
|
||||
|
|
@ -631,6 +478,7 @@ export default defineComponent({
|
|||
width: 100%;
|
||||
margin-bottom: 21px;
|
||||
border-radius: 5px;
|
||||
|
||||
& h3 {
|
||||
color: $text-default;
|
||||
font-weight: 600;
|
||||
|
|
@ -647,8 +495,10 @@ export default defineComponent({
|
|||
& .checkout-form {
|
||||
flex: 1 0 min(100%, 795px);
|
||||
}
|
||||
|
||||
& .checkout-aside {
|
||||
flex: 1 0 min(100%, 329px);
|
||||
|
||||
& .checkout-delivery-date,
|
||||
& .checkout-summary,
|
||||
& .checkout-payment-methods {
|
||||
|
|
@ -672,6 +522,7 @@ export default defineComponent({
|
|||
visibility: hidden;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
|
||||
&.active {
|
||||
height: min-content;
|
||||
padding-block: 16px 18px;
|
||||
|
|
@ -683,6 +534,7 @@ export default defineComponent({
|
|||
|
||||
& .checkout-summary {
|
||||
margin-bottom: 33px;
|
||||
|
||||
& .checkout-aside-header,
|
||||
& .checkout-summary-body,
|
||||
& .checkout-summary-footer {
|
||||
|
|
@ -691,6 +543,7 @@ export default defineComponent({
|
|||
|
||||
& .checkout-aside-header {
|
||||
padding-block: 16px 17px;
|
||||
|
||||
& .checkout-aside-title {
|
||||
font-family: $font-lora;
|
||||
font-weight: 600;
|
||||
|
|
@ -701,6 +554,7 @@ export default defineComponent({
|
|||
|
||||
& .checkout-summary-body {
|
||||
padding-bottom: 23px;
|
||||
|
||||
& p {
|
||||
font-size: $font-12;
|
||||
line-height: 21px;
|
||||
|
|
@ -713,12 +567,14 @@ export default defineComponent({
|
|||
flex-direction: column;
|
||||
gap: 4px;
|
||||
margin-bottom: 4px;
|
||||
|
||||
& .checkout-summary-item p {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .checkout-summary-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -737,19 +593,23 @@ export default defineComponent({
|
|||
& .checkout-payment-methods {
|
||||
padding: 9px 16px 20px 21px;
|
||||
margin-bottom: 21px;
|
||||
|
||||
& .checkout-aside-header {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
& .checkout-payment-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
|
||||
& p {
|
||||
width: min(100%, 200px);
|
||||
display: inline-flex;
|
||||
justify-content: space-between;
|
||||
gap: 31px;
|
||||
font-size: $font-12;
|
||||
|
||||
& .card-flags {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
|
@ -773,6 +633,7 @@ export default defineComponent({
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 23px;
|
||||
|
||||
& .terms p {
|
||||
margin-left: 10px;
|
||||
font-size: $font-12;
|
||||
|
|
@ -799,29 +660,36 @@ export default defineComponent({
|
|||
width: min(100%, 499px);
|
||||
margin: 122px auto 0;
|
||||
text-align: center;
|
||||
|
||||
& .checkout-success-title {
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
|
||||
& .checkout-success-body {
|
||||
& .checkout-success-content {
|
||||
background-color: $secondary-5;
|
||||
padding: 30px 46px 42px 38px;
|
||||
border-radius: 5px 5px 0px 0px;
|
||||
|
||||
& .checkout-success-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 28px;
|
||||
|
||||
& .checkout-success-item {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
|
||||
& .checkout-item-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex: 1;
|
||||
min-height: 61px;
|
||||
|
||||
& .checkout-product-details {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
|
||||
& .checkout-product-img {
|
||||
object-fit: cover;
|
||||
width: 54px;
|
||||
|
|
@ -875,8 +743,9 @@ export default defineComponent({
|
|||
& .form-fields-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
&.delivery {
|
||||
}
|
||||
|
||||
&.delivery {}
|
||||
|
||||
&.sender {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
|
@ -886,6 +755,7 @@ export default defineComponent({
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px 9px;
|
||||
|
||||
@media only screen and (max-width: $med-lg) {
|
||||
gap: 15px;
|
||||
}
|
||||
|
|
@ -896,6 +766,7 @@ export default defineComponent({
|
|||
|
||||
&.telephone {
|
||||
flex: 0 0 calc(50% - 5px);
|
||||
|
||||
@media only screen and (max-width: $med-lg) {
|
||||
flex: 1 0 min(100%, 390px);
|
||||
}
|
||||
|
|
@ -905,10 +776,12 @@ export default defineComponent({
|
|||
label {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
& .q-field__control {
|
||||
background-color: #fff;
|
||||
height: 40px;
|
||||
border: 1px solid $primary-light;
|
||||
|
||||
& input {
|
||||
padding: 0px 0px 0px 20px;
|
||||
font-family: $font-questrial;
|
||||
|
|
@ -923,20 +796,24 @@ export default defineComponent({
|
|||
&.text-negative {
|
||||
border-color: $negative;
|
||||
}
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.q-field__marginal {
|
||||
height: 40px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.q-field--error .q-field__bottom {
|
||||
padding-top: 4px;
|
||||
font-size: 0.675rem;
|
||||
}
|
||||
|
||||
&.field-select {
|
||||
.q-field__control {
|
||||
min-height: initial;
|
||||
|
|
@ -944,23 +821,28 @@ export default defineComponent({
|
|||
height: 40px;
|
||||
padding: 0px 30px;
|
||||
border: 1px solid $primary-light;
|
||||
|
||||
.q-field__native span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.q-field__append {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.q-field__label {
|
||||
font-family: $font-questrial;
|
||||
color: $text-default !important;
|
||||
}
|
||||
|
||||
.q-field__control-container {
|
||||
padding-top: 0;
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $med-lg) {
|
||||
&.sender {
|
||||
margin-top: 45px;
|
||||
|
|
@ -972,6 +854,7 @@ export default defineComponent({
|
|||
padding: 10.5px 1px;
|
||||
border-radius: 4px;
|
||||
transition: 200ms ease-in-out;
|
||||
|
||||
&:hover {
|
||||
border-color: $black;
|
||||
}
|
||||
|
|
@ -1007,4 +890,4 @@ export default defineComponent({
|
|||
font-family: "Roboto" !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
import { storeToRefs } from "pinia";
|
||||
import { defineComponent, onBeforeMount, ref } from "vue";
|
||||
|
||||
import { apiBack } from "src/boot/axios";
|
||||
import VerticalCarouselImgs from "src/components/quasar-components/carousel/VerticalCarouselImgs.vue";
|
||||
import Swiper from "src/components/swiper/Swiper.vue";
|
||||
import Card from "src/components/ui/Card.vue";
|
||||
|
|
@ -18,6 +19,7 @@ export default defineComponent({
|
|||
Card,
|
||||
},
|
||||
setup() {
|
||||
const banners = ref()
|
||||
const mobileStore = useMobileStore();
|
||||
const { isCarouselVisible, isOpenNav, screenWidth } =
|
||||
storeToRefs(mobileStore);
|
||||
|
|
@ -26,35 +28,24 @@ export default defineComponent({
|
|||
const { getProducts } = cartStore;
|
||||
const { products, homeSection } = storeToRefs(cartStore);
|
||||
|
||||
async function getBanners() {
|
||||
|
pablone
commented
no se utiliza la función no se utiliza la función
jsolis
commented
Deje la función porque es la función que va a buscar los banners, entiendo que el día de mañana se utilizará. Deje la función porque es la función que va a buscar los banners, entiendo que el día de mañana se utilizará.
|
||||
const { data: { data } } = await apiBack("/banners/")
|
||||
return data
|
||||
}
|
||||
|
||||
|
||||
onBeforeMount(async () => {
|
||||
await getProducts();
|
||||
});
|
||||
|
||||
const slidesContent = ref([]);
|
||||
|
||||
onBeforeMount(async () => {
|
||||
const images = await new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve([
|
||||
"assets/1.jpg",
|
||||
"assets/2.jpg",
|
||||
"assets/3.jpg",
|
||||
"assets/4.jpg",
|
||||
"assets/5.jpg",
|
||||
]);
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
slidesContent.value = images;
|
||||
banners.value = await getBanners();
|
||||
});
|
||||
|
||||
return {
|
||||
isCarouselVisible,
|
||||
slidesContent,
|
||||
screenWidth,
|
||||
homeSection,
|
||||
isOpenNav,
|
||||
products,
|
||||
banners
|
||||
};
|
||||
},
|
||||
});
|
||||
|
|
@ -63,7 +54,7 @@ export default defineComponent({
|
|||
<template>
|
||||
<q-page>
|
||||
<q-no-ssr>
|
||||
<VerticalCarouselImgs :imgsArr="slidesContent" class="home-carousel" />
|
||||
<VerticalCarouselImgs v-if="banners" :banners="banners" class="home-carousel" />
|
||||
</q-no-ssr>
|
||||
|
||||
<section class="products-section" ref="homeSection">
|
||||
|
|
@ -77,25 +68,15 @@ export default defineComponent({
|
|||
|
||||
<div class="products-body">
|
||||
<Container cardContainer>
|
||||
<template
|
||||
v-for="({ id, name, price, image, isNew }, i) in products?.data"
|
||||
:key="id"
|
||||
>
|
||||
<Card
|
||||
v-if="i < 8"
|
||||
:id="id"
|
||||
:price="price"
|
||||
:title="name"
|
||||
:imgSrc="image"
|
||||
:isNew="isNew"
|
||||
imgClass="list-products"
|
||||
size="md-card"
|
||||
/>
|
||||
<template v-for="({ id, name, price, image, isNew }, i) in products?.data" :key="id">
|
||||
<Card v-if="i < 8" :id="id" :price="price" :title="name" :imgSrc="image" :isNew="isNew"
|
||||
imgClass="list-products" size="md-card" />
|
||||
</template>
|
||||
</Container>
|
||||
|
||||
<RouterLink class="btn rounded outlined" to="/categoria/all">
|
||||
Ver todos los diseños <IconArrowCircleFilledRight />
|
||||
Ver todos los diseños
|
||||
<IconArrowCircleFilledRight />
|
||||
</RouterLink>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -112,20 +93,10 @@ export default defineComponent({
|
|||
<div class="products-selection-body">
|
||||
<q-no-ssr>
|
||||
<Swiper>
|
||||
<template
|
||||
v-for="({ id, isNew, price, name, image }, i) in products.data"
|
||||
:key="id"
|
||||
>
|
||||
<template v-for="({ id, isNew, price, name, image }, i) in products.data" :key="id">
|
||||
<swiper-slide class="swiper-slide" v-if="i < 10">
|
||||
<Card
|
||||
:id="id"
|
||||
:price="price"
|
||||
:title="name"
|
||||
:imgSrc="image"
|
||||
:isNew="isNew"
|
||||
imgClass="carousel"
|
||||
size="lg-card"
|
||||
/>
|
||||
<Card :id="id" :price="price" :title="name" :imgSrc="image" :isNew="isNew" imgClass="carousel"
|
||||
size="lg-card" />
|
||||
</swiper-slide>
|
||||
</template>
|
||||
</Swiper>
|
||||
|
|
@ -134,7 +105,8 @@ export default defineComponent({
|
|||
|
||||
<footer class="products-selection-footer">
|
||||
<RouterLink class="btn rounded outlined pd-icon" to="/">
|
||||
Ver todas las plantas <IconArrowCircleFilledRight />
|
||||
Ver todas las plantas
|
||||
<IconArrowCircleFilledRight />
|
||||
</RouterLink>
|
||||
</footer>
|
||||
</section>
|
||||
|
|
@ -177,11 +149,9 @@ export default defineComponent({
|
|||
scroll-margin: 30px;
|
||||
|
||||
& .products-section-header {
|
||||
& .products-header-title {
|
||||
}
|
||||
& .products-header-title {}
|
||||
|
||||
& .products-header-paragraph {
|
||||
}
|
||||
& .products-header-paragraph {}
|
||||
}
|
||||
|
||||
& .products-body {
|
||||
|
|
@ -193,8 +163,7 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
@media only screen and (max-width: $med-xmd) {
|
||||
& .products-body {
|
||||
}
|
||||
& .products-body {}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
falta ;