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

add info

This commit is contained in:
Kseninia Mikhaylova 2024-06-13 13:46:41 +03:00
parent 2e458a8905
commit 51d0b8ee51
1 changed files with 48 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
components/calcValues.vue
View File

@ -9,26 +9,23 @@ const lamelle_color = useState<ralTypes>('lamelle_color', () => '1002')
const section_count = useState('section_count', () => 1) const section_count = useState('section_count', () => 1)
const extra_section = useState('extra_section', () => 0) const extra_section = useState('extra_section', () => 0)
const parametric_state = useState('parametric', () => { const parametric = {
return { length: {
length: { min: 1000,
min: 1000, max: 2400,
max: 2400, step: 1,
step: 1, },
}, total_length: {
total_length: { min: 1,
min: 1, max: undefined,
max: undefined, step: 0.1,
step: 0.1, },
}, height: {
height: { min: 675,
min: 675, max: 2400,
max: 2400, step: 115,
step: 115,
}
} }
}) }
const parametric = parametric_state.value
const form_state = reactive({ const form_state = reactive({
length: fence_section.value * 1000, length: fence_section.value * 1000,
fence_length: 100, fence_length: 100,
@ -130,17 +127,19 @@ const toggleModal = () => {
<ClientOnly fallback-tag="div" fallback="Загрузка 3D модели"> <ClientOnly fallback-tag="div" fallback="Загрузка 3D модели">
<form class="form"> <form class="form">
<div class="form-row"> <div class="form-row">
<div class="form-item"> <div class="form-item w-full">
<label for="length">Длина секции, мм</label> <label for="length">Длина секции, мм</label>
<input disabled :value="`${form_state.length} мм`" class="w-28" /> <input disabled :value="`${form_state.length} мм`" class="w-28" />
<input id="length" type="range" v-bind="parametric.length" v-model="form_state.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" /> :disabled="auto_section_width" :ref="form_refs.length" />
<Icon name="mdi:calculator-variant" @click="autoSectionWidth" /> <Icon name="mdi:calculator-variant" @click="autoSectionWidth" />
</div> </div>
<div class="form-item"> </div>
<div class="form-row">
<div class="form-item w-full">
<label for="height">Высота забора, мм</label> <label for="height">Высота забора, мм</label>
<input disabled :value="`${form_state.height} мм`" class="w-28" /> <input disabled :value="`${form_state.height} мм`" class="w-28" />
<input id="height" type="range" v-bind="parametric.height" v-model="form_state.height" <input id="height" type="range" class="w-full" v-bind="parametric.height" v-model="form_state.height"
:ref="form_refs.height" /> :ref="form_refs.height" />
</div> </div>
</div> </div>
@ -172,10 +171,32 @@ const toggleModal = () => {
<input type="number" id="total_length" v-bind="parametric.total_length" <input type="number" id="total_length" v-bind="parametric.total_length"
v-model="form_state.total_length" :ref="form_refs.total_length" /> v-model="form_state.total_length" :ref="form_refs.total_length" />
</div> </div>
<div class="form-item grow"> </div>
<label for="calculation">Приблизительный расчет забора</label> <div class="form-row prose">
<textarea id="calculation" disabled class="w-full">{{ calc_text }}</textarea> <p>
</div> Забор общей длиной {{ 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>
<p v-if="form_state.extra_section" class="text-ioprim">
Внимание! Дополнительная секция приводит к увеличению стоимости. Рекомендуем вам изменить длину
забора или длину
секции!
</p>
</div> </div>
<div class="form-row justify-center"> <div class="form-row justify-center">
<button @click.prevent="toggleModal">Купить прямо сейчас</button> <button @click.prevent="toggleModal">Купить прямо сейчас</button>