calcvalue

components/calcValues.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { getColorHexFromRal, getColorNameFromRal } from '@/components/ral'
+import { getColorNameFromRal } from '@/components/ral'
 import type { ralTypes } from '@/components/ral'
 
 const lamelles_count = useState('lamelles_count', () => 8)
@@ -107,15 +107,6 @@ const predefLamelleColors = ['3009', '9003', '6027', '5024', '9001', '1012', '30
 const predefPillarColors = ['3004', '7043', '6028', '5013', '8016', '1020', '3005', '4009']
 
 watch(form_state, changeParametres, { deep: true })
-watch(form_state, changeParametres, { deep: true })
-
-const calc_text = computed(() => {
-    let txt = `Всего секций: ${form_state.full_sections} по ${form_state.length}мм`
-    if (form_state.extra_section) {
-        txt += `, 1 по ${form_state.extra_section}мм`
-    }
-    return txt
-})
 
 const isModalOpen = useState('modal_open', () => false)
 const toggleModal = () => {
@@ -130,8 +121,8 @@ const toggleModal = () => {
                     <div class="form-item w-full">
                         <label for="length">Длина секции, мм</label>
                         <input disabled :value="`${form_state.length} мм`" class="w-28" />
-                        <input id="length" type="range" class="w-full" v-bind="parametric.length" v-model="form_state.length"
+                        <input id="length" type="range" class="w-full" v-bind="parametric.length"
-                            :disabled="auto_section_width" :ref="form_refs.length" />
+                            v-model="form_state.length" :disabled="auto_section_width" :ref="form_refs.length" />
                         <Icon name="mdi:calculator-variant" @click="autoSectionWidth" />
                     </div>
                 </div>
@@ -139,8 +130,8 @@ const toggleModal = () => {
                     <div class="form-item w-full">
                         <label for="height">Высота забора, мм</label>
                         <input disabled :value="`${form_state.height} мм`" class="w-28" />
-                        <input id="height" type="range" class="w-full" v-bind="parametric.height" v-model="form_state.height"
+                        <input id="height" type="range" class="w-full" v-bind="parametric.height"
-                            :ref="form_refs.height" />
+                            v-model="form_state.height" :ref="form_refs.height" />
                     </div>
                 </div>
                 <div class="form-row">
@@ -198,6 +189,35 @@ const toggleModal = () => {
                         Внимание! Дополнительная секция приводит к увеличению стоимости. Рекомендуем вам изменить длину
                         забора или длину секции!
                     </p>
+                <div class="form-row">
+                    <div class="prose col-span-6">
+                        <p>
+                            Забор общей длиной {{ form_state.total_length }} м,
+                            всего секций {{ section_count }} по {{ form_state.length }}мм
+                            <span class="contents" v-if="form_state.extra_section">
+                                и 1 дополнительной секцией в {{ form_state.extra_section }}мм
+                            </span>.
+                        </p>
+                        <p>
+                            Всего столбов {{ section_count + ~~(!!form_state.extra_section) + 1 }}.
+                            Всего ламелей {{ section_count * lamelles_count }} по {{ form_state.length }}мм
+                            <span class="contents" v-if="form_state.extra_section">
+                                и {{ ~~(!!form_state.extra_section) * lamelles_count }} по {{ form_state.extra_section
+                                }}мм
+                            </span>
+                        </p>
+                        <p>
+                            Окраска порошковым методом,
+                            ламели: {{ getColorNameFromRal(lamelle_color)?.toLowerCase() }},
+                            столбы: {{ getColorNameFromRal(pillar_color)?.toLowerCase() }}.
+                        </p>
+                    </div>
+                    <div class="prose col-span-6">
+                        <p v-if="form_state.extra_section" class="text-ioprim">
+                            Внимание! Дополнительная секция приводит к увеличению стоимости.
+                            Рекомендуем вам изменить длину забора или длину секции!
+                        </p>
+                    </div>
                 </div>
                 <div class="form-row justify-center">
                     <button @click.prevent="toggleModal">Купить прямо сейчас</button>

components/modal.vue

@@ -7,8 +7,8 @@ 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 pillar_color = useState<ralTypes>('pillar_color')
-const lamelle_color = useState('lamelle_color')
+const lamelle_color = useState<ralTypes>('lamelle_color')
 const section_count = useState('section_count')
 
 const toggleModal = () => {
@@ -103,13 +103,10 @@ const submit = (e: any) => {
                         Секций: {{ section_count }}
                     </div>
                     <div>
-                        Цвет столба:
+                        Цвет столба: {{ getColorNameFromRal(pillar_color) }}
-                        <input id="pillar_color" :value="getColorNameFromRal(pillar_color)" />
-                       
                     </div>
                     <div>
-                        Цвет ламелей:
+                        Цвет ламелей: {{getColorNameFromRal(lamelle_color) }}
-                        <input id="lamelle_color" :value="getColorNameFromRal(lamelle_color)" />
                     </div>
                 </div>
                 <div class="flex gap-4">