91 lines
2.8 KiB
Vue
91 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
const {
|
|
isModalOpen,
|
|
modal_data,
|
|
modal_form,
|
|
modal_state,
|
|
openModal,
|
|
closeModal,
|
|
toggleModal,
|
|
openForm,
|
|
validateInput,
|
|
submit,
|
|
} = useModalState();
|
|
|
|
const modalStatus = {
|
|
loading: ["mdi:circle-arrows", "Отправляем данные"],
|
|
success: ["mdi:check-circle-outline", "Данные отправлены"],
|
|
error: ["mdi:close-circle-outline", "Ошибка отправки"],
|
|
};
|
|
|
|
const policy = () => {
|
|
navigateTo("/policy", {
|
|
open: {
|
|
target: "_blank",
|
|
},
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="isModalOpen" class="modal-backdrop" @click.self="toggleModal">
|
|
<div class="modal">
|
|
<span class="modal-close" @click="toggleModal">
|
|
<Icon name="mdi:close" />
|
|
</span>
|
|
<div
|
|
v-if="modal_state.show_status"
|
|
class="modal-status"
|
|
:class="[modal_state.show_status]"
|
|
>
|
|
<div class="modal-status-icon">
|
|
<Icon :name="modalStatus[modal_state.show_status][0]" />
|
|
</div>
|
|
<div class="modal-status-text">
|
|
{{ modalStatus[modal_state.show_status][1] }}
|
|
</div>
|
|
</div>
|
|
<template v-else-if="modal_state.show_form">
|
|
<h2>Оставьте контакты для связи</h2>
|
|
<form @submit.prevent="submit" ref="form" class="modal-content">
|
|
<input type="text" placeholder="Ваше имя" v-model="modal_data.name" />
|
|
<input
|
|
type="phone"
|
|
placeholder="Ваш номер телефона"
|
|
v-model="modal_data.phone"
|
|
@keypress="validateInput"
|
|
/>
|
|
<input
|
|
type="email"
|
|
placeholder="Ваш e-mail"
|
|
v-model="modal_data.email"
|
|
@keypress="validateInput"
|
|
/>
|
|
<div class="flex gap-4 justify-between items-center">
|
|
<input type="checkbox" id="policy" v-model="modal_data.policy" />
|
|
<label for="policy">
|
|
Нажимая кнопку "Отправить", вы даете согласие на
|
|
<NuxtLink to="/policy" @click="policy">
|
|
обработку персональных данных.
|
|
</NuxtLink>
|
|
</label>
|
|
</div>
|
|
<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>
|
|
<div class="flex gap-4 justify-center">
|
|
<button class="not-prose" @click="openForm">
|
|
Отправить расчет на <span class="whitespace-nowrap">e-mail</span>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|