mns/mns-mini-zabor
mns
/
mns-mini-zabor
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

calcvalue

This commit is contained in:
Зеленская Анастасия Николаевна 2024-06-13 14:16:43 +03:00
parent 5ba6aea15c 107798df0e
commit c4c02ea5d2
2 changed files with 38 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
components/calcValues.vue
View File

@ -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"
:disabled="auto_section_width" :ref="form_refs.length" />
<input id="length" type="range" class="w-full" v-bind="parametric.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"
:ref="form_refs.height" />
<input id="height" type="range" class="w-full" v-bind="parametric.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>

11
components/modal.vue
View File

@ -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 lamelle_color = useState('lamelle_color')
const pillar_color = useState<ralTypes>('pillar_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>
Цвет столба:
<input id="pillar_color" :value="getColorNameFromRal(pillar_color)" />
Цвет столба: {{ getColorNameFromRal(pillar_color) }}
</div>
<div>
Цвет ламелей:
<input id="lamelle_color" :value="getColorNameFromRal(lamelle_color)" />
Цвет ламелей: {{getColorNameFromRal(lamelle_color) }}
</div>
</div>
<div class="flex gap-4">