modal

assets/main.scss

@@ -43,6 +43,7 @@ body {
 
     a[href^=http] {
         @apply relative no-underline;
+
         &:after {
             content: '↷';
             @apply ml-2;
@@ -96,8 +97,9 @@ a[href^="#"] {
             @apply relative h-[50vh] min-h-[600px];
         }
     }
+
     &_content {
-        > .container {
+        >.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,26 +69,29 @@ const validate = () => {
         return
     }
 }
-const submit = (e: any) => {
+const submit = async (e: any) => {
     goal('submit_form', modal_data)
-    fetch(`${apiBase}/custom_request/`, {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({
-            name: modal_data.name || `ref from site ${new Date}`,
-            phone: modal_data.phone,
-            email: modal_data.email,
-            fence_info: [
-                ...Object.values(total_txt.value).map(el => el.join('\n')),
-                total_colors.value.join('\n')
-            ].join('\n\n'),
+    modal_state.show_status = 'loading'
+    try {
+        const res = await fetch(`${apiBase}/custom_request/`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                name: modal_data.name || `ref from site ${new Date}`,
+                phone: modal_data.phone,
+                email: modal_data.email,
+                fence_info: [
+                    ...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_data.name = undefined
-    toggleModal()
+        modal_state.show_status = 'success'
+    } catch (error) {
+        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" />