dev #26
|
@ -30,12 +30,15 @@ type modalDataType = {
|
||||||
phone?: string
|
phone?: string
|
||||||
name?: string
|
name?: string
|
||||||
email?: string
|
email?: string
|
||||||
|
policy: boolean
|
||||||
}
|
}
|
||||||
const modal_data = reactive<modalDataType>({
|
const modal_data = reactive<modalDataType>({
|
||||||
email: undefined,
|
email: undefined,
|
||||||
phone: undefined,
|
phone: undefined,
|
||||||
name: undefined
|
name: undefined,
|
||||||
|
policy: true
|
||||||
})
|
})
|
||||||
|
|
||||||
const modal_form = reactive({
|
const modal_form = reactive({
|
||||||
disabled: true,
|
disabled: true,
|
||||||
errors: [],
|
errors: [],
|
||||||
|
@ -62,13 +65,17 @@ const validate = () => {
|
||||||
|
|
||||||
modal_form.disabled = true
|
modal_form.disabled = true
|
||||||
if (
|
if (
|
||||||
|
(
|
||||||
(modal_data.phone && phone_regexp.test(modal_data.phone))
|
(modal_data.phone && phone_regexp.test(modal_data.phone))
|
||||||
|| (modal_data.email && email_regex.test(modal_data.email))
|
|| (modal_data.email && email_regex.test(modal_data.email))
|
||||||
|
) && modal_data.policy == true
|
||||||
) {
|
) {
|
||||||
modal_form.disabled = false
|
modal_form.disabled = false
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
watch(modal_data, validate)
|
||||||
|
|
||||||
const submit = async (e: any) => {
|
const submit = async (e: any) => {
|
||||||
goal('submit_form', modal_data)
|
goal('submit_form', modal_data)
|
||||||
modal_state.show_status = 'loading'
|
modal_state.show_status = 'loading'
|
||||||
|
@ -202,13 +209,13 @@ const policy = () => {
|
||||||
<template v-else-if="modal_state.show_form">
|
<template v-else-if="modal_state.show_form">
|
||||||
<h2>Оставьте контакты для связи </h2>
|
<h2>Оставьте контакты для связи </h2>
|
||||||
<form @submit.prevent="submit" ref="form">
|
<form @submit.prevent="submit" ref="form">
|
||||||
<input type="text" placeholder="Ваше имя" v-model="modal_data.name" @keyup="validate" />
|
<input type="text" placeholder="Ваше имя" v-model="modal_data.name" />
|
||||||
<input type="phone" placeholder="Ваш номер телефона" v-model="modal_data.phone"
|
<input type="phone" placeholder="Ваш номер телефона" v-model="modal_data.phone"
|
||||||
@keypress="validateInput" @keyup="validate" />
|
@keypress="validateInput" />
|
||||||
<input type="e-mail" placeholder="Ваш e-mail" v-model="modal_data.email" @keypress="validateInput"
|
<input type="e-mail" placeholder="Ваш e-mail" v-model="modal_data.email"
|
||||||
@keyup="validate" />
|
@keypress="validateInput" />
|
||||||
<div class="flex gap-4 justify-between items-center">
|
<div class="flex gap-4 justify-between items-center">
|
||||||
<input type="checkbox" id="policy" />
|
<input type="checkbox" id="policy" v-model="modal_data.policy" />
|
||||||
<label for="policy">Соглашение... <NuxtLink to="policy" @click="policy">cсылка</NuxtLink>
|
<label for="policy">Соглашение... <NuxtLink to="policy" @click="policy">cсылка</NuxtLink>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue