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