assets/main.scss

@@ -43,6 +43,7 @@ body {
 
     a[href^=http] {
         @apply relative no-underline;
+
         &:after {
             content: '↷';
             @apply ml-2;
@@ -96,6 +97,7 @@ a[href^="#"] {
             @apply relative h-[50vh] min-h-[600px];
         }
     }
+
     &_content {
         >.container {
             @apply items-start;
@@ -146,6 +148,16 @@ a[href^="#"] {
         @apply absolute right-4 top-4 text-4xl opacity-50;
     }
 
+    &-status {
+        @apply text-center;
+        &-icon {
+            @apply text-8xl;
+        }
+        &-text {
+            @apply text-3xl;
+        }
+    }
+
     h2 {
         @apply px-4;
     }

components/modal.vue

@@ -23,6 +23,7 @@ const toggleModal = () => {
     modal_data.phone = undefined
     modal_data.name = undefined
     modal_state.show_form = false
+    modal_state.show_status = null
     isModalOpen.value = !isModalOpen.value
 }
 type modalDataType = {
@@ -40,7 +41,8 @@ const modal_form = reactive({
     errors: [],
 })
 const modal_state = reactive({
-    show_form: false
+    show_form: false,
+    show_status: null as null | 'loading' | 'success' | 'error',
 })
 const openForm = () => {
     modal_state.show_form = !modal_state.show_form
@@ -67,9 +69,11 @@ const validate = () => {
         return
     }
 }
-const submit = (e: any) => {
+const submit = async (e: any) => {
     goal('submit_form', modal_data)
-    fetch(`${apiBase}/custom_request/`, {
+    modal_state.show_status = 'loading'
+    try {
+        const res = await fetch(`${apiBase}/custom_request/`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -79,14 +83,15 @@ const submit = (e: any) => {
                 phone: modal_data.phone,
                 email: modal_data.email,
                 fence_info: [
-                ...Object.values(total_txt.value).map(el => el.join('\n')),
+                    ...Object.values(total_txt.value as object).map(el => el.join('\n')),
                     total_colors.value.join('\n')
                 ].join('\n\n'),
             })
         })
-    modal_data.phone = undefined
+        modal_state.show_status = 'success'
-    modal_data.name = undefined
+    } catch (error) {
-    toggleModal()
+        modal_state.show_status = 'error'
+    }
 }
 const roubleSign = new Intl.NumberFormat('ru-RU', {
     style: 'currency',
@@ -164,9 +169,15 @@ const total_txt = computed(() => {
 const goal = (target: string, params: object) => {
     const nuxtApp = useNuxtApp()
     if (nuxtApp.$metrika) {
-        nuxtApp.$metrika.reachGoal(target, params || {})
+        (nuxtApp.$metrika as any).reachGoal(target, params || {})
     }
 }
+
+const modalStatus = {
+    'loading': ["mdi:circle-arrows", 'Отправляем данные'],
+    'success': ["mdi:check-circle-outline", 'Данные отправлены'],
+    'error': ["mdi:close-circle-outline", 'Ошибка отправки'],
+}
 </script>
 <template>
     <div v-if="isModalOpen" class="modal-backdrop" @click.self="toggleModal">
@@ -174,7 +185,13 @@ const goal = (target: string, params: object) => {
             <span class="modal-close" @click="toggleModal">
                 <Icon name="mdi:close" />
             </span>
-            <template v-if="modal_state.show_form">
+            <div class="modal-status" v-if="modal_state.show_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">
                     <input type="text" placeholder="Ваше имя" v-model="modal_data.name" @keyup="validate" />