modal
This commit is contained in:
parent
723b4e61e6
commit
88136b6150
|
|
@ -139,6 +139,7 @@ textarea {
|
|||
button {
|
||||
@apply rounded-full bg-primary hover:bg-primary-400 transition-colors px-10 py-3 inline-block text-lg font-bold shadow-lg cursor-pointer disabled:opacity-50 disabled:hover:bg-primary;
|
||||
|
||||
&.neutral,
|
||||
&[type="reset"] {
|
||||
@apply bg-neutral hover:bg-neutral-400
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,13 +3,24 @@ const config = useRuntimeConfig()
|
|||
const apiBase = config.public.apiBase
|
||||
|
||||
const isModalOpen = useState('modal_open', () => false)
|
||||
|
||||
const lamelles_count = useState<number>('lamelles_count')
|
||||
const fence_section = useState<number>('fence_section')
|
||||
const pillar_color = useState('pillar_color')
|
||||
const lamelle_color = useState('lamelle_color')
|
||||
const section_count = useState('section_count')
|
||||
|
||||
const toggleModal = () => {
|
||||
modal_data.phone = undefined
|
||||
modal_data.name = undefined
|
||||
modal_state.show_form = false
|
||||
isModalOpen.value = !isModalOpen.value
|
||||
}
|
||||
|
||||
const modal_data = reactive({
|
||||
type modalDataType = {
|
||||
phone?: string
|
||||
name?: string
|
||||
}
|
||||
const modal_data = reactive<modalDataType>({
|
||||
phone: undefined,
|
||||
name: undefined
|
||||
})
|
||||
|
|
@ -17,7 +28,12 @@ const modal_form = reactive({
|
|||
disabled: true,
|
||||
errors: [],
|
||||
})
|
||||
|
||||
const modal_state = reactive({
|
||||
show_form: false
|
||||
})
|
||||
const openForm = () => {
|
||||
modal_state.show_form = !modal_state.show_form
|
||||
}
|
||||
const validateInput = (evt: KeyboardEvent) => {
|
||||
const valid_symbols = /[a-zA-Z0-9\+(\\)\ @\.]/
|
||||
if (!valid_symbols.test(evt.key)) {
|
||||
|
|
@ -29,11 +45,15 @@ const validate = () => {
|
|||
const phone_regexp = /^\+?[\d\s-()]{0,14}\d{11}$/
|
||||
const email_regex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/
|
||||
|
||||
if (modal_phone.value.length < 3) {
|
||||
if (!modal_data.phone) {
|
||||
modal_form.disabled = true
|
||||
return
|
||||
}
|
||||
if (phone_regexp.test(modal_phone.value) || email_regex.test(modal_phone.value)) {
|
||||
if (modal_data.phone.length < 3) {
|
||||
modal_form.disabled = true
|
||||
return
|
||||
}
|
||||
if (phone_regexp.test(modal_data.phone) || email_regex.test(modal_data.phone)) {
|
||||
modal_form.disabled = false
|
||||
return
|
||||
}
|
||||
|
|
@ -45,26 +65,54 @@ const submit = (e: any) => {
|
|||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
name: modal_name.value || "ref from site",
|
||||
phone: modal_phone.value
|
||||
name: modal_data.name || `ref from site ${new Date}`,
|
||||
phone: modal_data.phone
|
||||
})
|
||||
})
|
||||
modal_phone.value = ''
|
||||
modal_data.phone = undefined
|
||||
modal_data.name = undefined
|
||||
isModalOpen.value = false
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div v-if="isModalOpen" class="modal-backdrop" @click.self="toggleModal">
|
||||
<div class="modal">
|
||||
<h2>Оставьте контакты для связи </h2>
|
||||
<form @submit.prevent="submit">
|
||||
<input type="text" placeholder="Ваше имя" v-model="modal_data.name" @keyup="validate" />
|
||||
<input type="phone" placeholder="Номер телефона или e-mail" v-model="modal_data.phone" @keypress="validateInput" @keyup="validate" />
|
||||
<div class="flex gap-4">
|
||||
<button class="not-prose" :disabled="modal_form.disabled" type="submit">Отправить</button>
|
||||
<button class="not-prose" type="reset" @click="toggleModal">Отмена</button>
|
||||
<template v-if="modal_state.show_form">
|
||||
<h2>Оставьте контакты для связи </h2>
|
||||
<form @submit.prevent="submit">
|
||||
<input type="text" placeholder="Ваше имя" v-model="modal_data.name" @keyup="validate" />
|
||||
<input type="phone" placeholder="Номер телефона или e-mail" v-model="modal_data.phone"
|
||||
@keypress="validateInput" @keyup="validate" />
|
||||
<div class="flex gap-4">
|
||||
<button class="not-prose" :disabled="modal_form.disabled" type="submit">Отправить</button>
|
||||
<button class="not-prose" type="reset" @click="toggleModal">Отмена</button>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
<template v-else>
|
||||
<h2>Это данные расчета</h2>
|
||||
<div class="flex gap-4 flex-col mb-4">
|
||||
<div>
|
||||
Ламелей: {{ lamelles_count }}
|
||||
</div>
|
||||
<div>
|
||||
Длина секции: {{ fence_section * 1000 }}
|
||||
</div>
|
||||
<div>
|
||||
Секций: {{ section_count }}
|
||||
</div>
|
||||
<div>
|
||||
Цвет столба: {{ pillar_color }}
|
||||
</div>
|
||||
<div>
|
||||
Цвет ламелей: {{ lamelle_color }}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div class="flex gap-4">
|
||||
<button class="not-prose" @click="openForm">Данные верны</button>
|
||||
<button class="not-prose neutral" @click="toggleModal">Закрыть окно</button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Loading…
Reference in New Issue