modal

assets/main.scss

@@ -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
     }

components/modal.vue

@@ -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
 }
-
+type modalDataType = {
-const modal_data = reactive({
+    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",
+            name: modal_data.name || `ref from site ${new Date}`,
-            phone: modal_phone.value
+            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>
+            <template v-if="modal_state.show_form">
-            <form @submit.prevent="submit">
+                <h2>Оставьте контакты для связи </h2>
-                <input type="text" placeholder="Ваше имя" v-model="modal_data.name" @keyup="validate" />
+                <form @submit.prevent="submit">
-                <input type="phone" placeholder="Номер телефона или e-mail" v-model="modal_data.phone" @keypress="validateInput" @keyup="validate" />
+                    <input type="text" placeholder="Ваше имя" v-model="modal_data.name" @keyup="validate" />
-                <div class="flex gap-4">
+                    <input type="phone" placeholder="Номер телефона или e-mail" v-model="modal_data.phone"
-                    <button class="not-prose" :disabled="modal_form.disabled" type="submit">Отправить</button>
+                        @keypress="validateInput" @keyup="validate" />
-                    <button class="not-prose" type="reset" @click="toggleModal">Отмена</button>
+                    <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>