remove pillar btn
This commit is contained in:
parent
640a17f1ba
commit
c48decce3b
|
|
@ -152,10 +152,10 @@ button {
|
|||
}
|
||||
|
||||
.form {
|
||||
@apply col-span-full flex flex-col gap-4;
|
||||
@apply col-span-full grid grid-cols-12 gap-4;
|
||||
|
||||
&-row {
|
||||
@apply flex flex-row flex-wrap gap-4;
|
||||
@apply col-span-full flex flex-row flex-wrap gap-4;
|
||||
}
|
||||
|
||||
&-item {
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import type { ralTypes } from '@/components/ral'
|
|||
|
||||
const lamelles_count = useState('lamelles_count', () => 8)
|
||||
const fence_section = useState<number>('fence_section', () => 2000 * 0.001)
|
||||
const remove_pillar = useState<boolean>('pillar_color', () => false)
|
||||
const pillar_color = useState<ralTypes>('pillar_color', () => '3009')
|
||||
const lamelle_color = useState<ralTypes>('lamelle_color', () => '3004')
|
||||
const section_count = useState('section_count', () => 1)
|
||||
|
|
@ -34,19 +35,18 @@ const form_state = reactive({
|
|||
total_length: fence_section.value * 2,
|
||||
total_length_mm: fence_section.value * 1000,
|
||||
full_sections: 1,
|
||||
extra_section: 0
|
||||
extra_section: 0,
|
||||
auto_length: false,
|
||||
remove_pillar: false
|
||||
})
|
||||
const form_refs = {
|
||||
length: ref(),
|
||||
height: ref(),
|
||||
total_length: ref(),
|
||||
}
|
||||
const auto_section_width = ref<boolean>(false)
|
||||
|
||||
const changeParametres = () => {
|
||||
const lamelles = Math.floor(form_state.height / parametric.height.step)
|
||||
lamelles_count.value = lamelles
|
||||
fence_section.value = form_state.length * 0.001
|
||||
|
||||
for (const key in form_state) {
|
||||
if (parametric.hasOwnProperty(key)) {
|
||||
|
|
@ -58,45 +58,48 @@ const changeParametres = () => {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
form_state.total_length_mm = form_state.total_length * 1000
|
||||
if (auto_section_width.value) {
|
||||
let w = parametric.length.max
|
||||
let tw_f = (form_state.total_length_mm - form_state.fence_length)
|
||||
let iw_f = (w - form_state.fence_length)
|
||||
while ((tw_f % iw_f) && w > (parametric.length.min + parametric.length.step * 10)) {
|
||||
w -= parametric.length.step
|
||||
}
|
||||
form_state.length = w
|
||||
}
|
||||
if (form_state.total_length_mm < form_state.length) {
|
||||
form_state.length = form_state.total_length_mm
|
||||
}
|
||||
|
||||
const t_f = (form_state.total_length_mm - form_state.fence_length)
|
||||
const i_f = (form_state.length - form_state.fence_length)
|
||||
form_state.full_sections = Math.floor(t_f / i_f)
|
||||
section_count.value = form_state.full_sections
|
||||
if (t_f % i_f) {
|
||||
form_state.extra_section = Math.round(t_f % i_f)
|
||||
} else {
|
||||
form_state.extra_section = 0
|
||||
}
|
||||
extra_section.value = form_state.extra_section
|
||||
|
||||
form_refs.total_length.value.setCustomValidity('')
|
||||
if (form_state.extra_section && form_state.extra_section < parametric.length.min) {
|
||||
form_refs.total_length.value.setCustomValidity('Расчет невозможен')
|
||||
}
|
||||
setTimeout(() => {
|
||||
if (form_state.total_length < parametric.total_length.min) {
|
||||
form_state.total_length = parametric.total_length.min
|
||||
form_state.length = parametric.length.min
|
||||
}
|
||||
}, 300)
|
||||
|
||||
total_length.value = form_state.total_length
|
||||
}
|
||||
|
||||
form_state.total_length_mm = form_state.total_length * 1000
|
||||
if (form_state.auto_length) {
|
||||
let w = parametric.length.max
|
||||
let tw_f = (form_state.total_length_mm - form_state.fence_length)
|
||||
let iw_f = (w - form_state.fence_length)
|
||||
while ((tw_f % iw_f) && w > (parametric.length.min + parametric.length.step * 10)) {
|
||||
w -= parametric.length.step
|
||||
}
|
||||
form_state.length = w
|
||||
}
|
||||
if (form_state.total_length_mm < form_state.length) {
|
||||
form_state.length = form_state.total_length_mm
|
||||
}
|
||||
|
||||
const t_f = (form_state.total_length_mm - form_state.fence_length)
|
||||
const i_f = (form_state.length - form_state.fence_length)
|
||||
form_state.full_sections = Math.floor(t_f / i_f)
|
||||
if (t_f % i_f) {
|
||||
form_state.extra_section = Math.round(t_f % i_f)
|
||||
} else {
|
||||
form_state.extra_section = 0
|
||||
}
|
||||
|
||||
form_refs.total_length.value.setCustomValidity('')
|
||||
if (form_state.extra_section && form_state.extra_section < parametric.length.min) {
|
||||
form_refs.total_length.value.setCustomValidity('Расчет невозможен')
|
||||
}
|
||||
setTimeout(() => {
|
||||
if (form_state.total_length < parametric.total_length.min) {
|
||||
form_state.total_length = parametric.total_length.min
|
||||
form_state.length = parametric.length.min
|
||||
}
|
||||
}, 300)
|
||||
|
||||
total_length.value = form_state.total_length
|
||||
lamelles_count.value = lamelles
|
||||
fence_section.value = form_state.length * 0.001
|
||||
section_count.value = form_state.full_sections
|
||||
extra_section.value = form_state.extra_section
|
||||
remove_pillar.value = form_state.remove_pillar
|
||||
}
|
||||
|
||||
const setLamelleColor = (color: ralTypes) => {
|
||||
|
|
@ -105,13 +108,6 @@ const setLamelleColor = (color: ralTypes) => {
|
|||
const setPillarColor = (color: ralTypes) => {
|
||||
pillar_color.value = color
|
||||
}
|
||||
const autoSectionWidth = () => {
|
||||
const v = auto_section_width.value
|
||||
auto_section_width.value = !auto_section_width.value
|
||||
if (!v == true) {
|
||||
// changeParametres()
|
||||
}
|
||||
}
|
||||
|
||||
const predefLamelleColors = ['3009', '9003', '6027', '5024', '9001', '1012', '3007', '4007']
|
||||
const predefPillarColors = ['3004', '7043', '6028', '5013', '8016', '1020', '3005', '4009']
|
||||
|
|
@ -132,86 +128,96 @@ const plurals = {
|
|||
<div class="container py-4">
|
||||
<ClientOnly fallback-tag="div" fallback="Загрузка 3D модели">
|
||||
<form class="form">
|
||||
<div class="form-row">
|
||||
<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" />
|
||||
<Icon name="mdi:calculator-variant" @click="autoSectionWidth" />
|
||||
<div class="col-span-6">
|
||||
<div class="form-row">
|
||||
<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="form_state.auto_length"
|
||||
:ref="form_refs.length" />
|
||||
</div>
|
||||
<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" />
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label for="total_length">Общая длина забора, м</label>
|
||||
<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">
|
||||
<input id="auto_length" type="checkbox" v-model="form_state.auto_length" />
|
||||
<label for="auto_length">Автоматический подбор секции</label>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<input id="remove_pillar" type="checkbox" v-model="form_state.remove_pillar" />
|
||||
<label for="remove_pillar">Без столбов</label>
|
||||
</div>
|
||||
</div>
|
||||
</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" class="w-full" v-bind="parametric.height"
|
||||
v-model="form_state.height" :ref="form_refs.height" />
|
||||
<div class="col-span-6">
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<label for="lamelle_color">Цвет ламелей</label>
|
||||
<input id="lamelle_color" type="text" :value="getColorNameFromRal(lamelle_color)"
|
||||
class="w-60" disabled />
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<template v-for="item in predefLamelleColors">
|
||||
<ColorPicker :color="item" :cb="setLamelleColor" :open="false"
|
||||
:active="lamelle_color == item" />
|
||||
</template>
|
||||
<ColorPicker :cb="setLamelleColor" />
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label for="pillar_color">Цвет столба</label>
|
||||
<input id="pillar_color" type="text" :value="getColorNameFromRal(pillar_color)" class="w-60"
|
||||
disabled />
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<template v-for="item in predefPillarColors">
|
||||
<ColorPicker :color="item" :cb="setPillarColor" :open="false"
|
||||
:active="pillar_color == item" />
|
||||
</template>
|
||||
<ColorPicker :cb="setPillarColor" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<label for="lamelle_color">Цвет ламелей</label>
|
||||
<input id="lamelle_color" type="text" :value="getColorNameFromRal(lamelle_color)" class="w-60"
|
||||
disabled />
|
||||
<template v-for="item in predefLamelleColors">
|
||||
<ColorPicker :color="item" :cb="setLamelleColor" :open="false"
|
||||
:active="lamelle_color == item" />
|
||||
</template>
|
||||
<ColorPicker :cb="setLamelleColor" />
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label for="pillar_color">Цвет столба</label>
|
||||
<input id="pillar_color" type="text" :value="getColorNameFromRal(pillar_color)" class="w-60"
|
||||
disabled />
|
||||
<template v-for="item in predefPillarColors">
|
||||
<ColorPicker :color="item" :cb="setPillarColor" :open="false"
|
||||
:active="pillar_color == item" />
|
||||
</template>
|
||||
<ColorPicker :cb="setPillarColor" />
|
||||
</div>
|
||||
<div class="col-span-8 prose min-w-full">
|
||||
<p>
|
||||
Забор общей длиной {{ form_state.total_length }}{{ '\xa0' }}м,
|
||||
{{ section_count }}
|
||||
<Plural :n="section_count" :forms="plurals.section" /> по
|
||||
{{ form_state.length }}{{ '\xa0' }}мм<span class="contents" v-if="form_state.extra_section">
|
||||
и 1 дополнительная секция длиной {{ form_state.extra_section }}{{ '\xa0' }}мм</span>.
|
||||
</p>
|
||||
<p>
|
||||
Всего {{ section_count + ~~(!!form_state.extra_section) + 1 }}
|
||||
<Plural :forms="plurals.fence" :n="section_count + ~~(!!form_state.extra_section) + 1" />,
|
||||
{{ section_count * lamelles_count }}
|
||||
<Plural :n="section_count * lamelles_count" :forms="plurals.lamelle" />
|
||||
длиной {{ form_state.length }}{{ '\xa0' }}мм
|
||||
<span class="contents" v-if="form_state.extra_section">
|
||||
и {{ ~~(!!form_state.extra_section) * lamelles_count }}
|
||||
<Plural :n="~~(!!form_state.extra_section) * lamelles_count" :forms="plurals.lamelle" />
|
||||
длиной {{
|
||||
form_state.extra_section }}{{ '\xa0' }}мм
|
||||
</span>.
|
||||
</p>
|
||||
<p>
|
||||
Все элементы окрашиваются порошковым методом: <br />
|
||||
ламели: {{ getColorNameFromRal(lamelle_color)?.toLowerCase() }};
|
||||
столбы: {{ getColorNameFromRal(pillar_color)?.toLowerCase() }}.
|
||||
</p>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<label for="total_length">Общая длина забора, м</label>
|
||||
<input type="number" id="total_length" v-bind="parametric.total_length"
|
||||
v-model="form_state.total_length" :ref="form_refs.total_length" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="col-span-8 prose">
|
||||
<p>
|
||||
Забор общей длиной {{ form_state.total_length }}{{ '\xa0' }}м,
|
||||
{{ section_count }}
|
||||
<Plural :n="section_count" :forms="plurals.section" /> по
|
||||
{{ form_state.length }}{{ '\xa0' }}мм<span class="contents" v-if="form_state.extra_section">
|
||||
и 1 дополнительная секция длиной {{ form_state.extra_section }}{{ '\xa0' }}мм</span>.
|
||||
</p>
|
||||
<p>
|
||||
Всего {{ section_count + ~~(!!form_state.extra_section) + 1 }}
|
||||
<Plural :forms="plurals.fence" :n="section_count + ~~(!!form_state.extra_section) + 1" />,
|
||||
{{ section_count * lamelles_count }}
|
||||
<Plural :n="section_count * lamelles_count" :forms="plurals.lamelle" />
|
||||
длиной {{ form_state.length }}{{ '\xa0' }}мм
|
||||
<span class="contents" v-if="form_state.extra_section">
|
||||
и {{ ~~(!!form_state.extra_section) * lamelles_count }}
|
||||
<Plural :n="~~(!!form_state.extra_section) * lamelles_count" :forms="plurals.lamelle" />
|
||||
длиной {{
|
||||
form_state.extra_section }}{{ '\xa0' }}мм
|
||||
</span>.
|
||||
</p>
|
||||
<p>
|
||||
Все элементы окрашиваются порошковым методом: <br />
|
||||
ламели: {{ getColorNameFromRal(lamelle_color)?.toLowerCase() }};
|
||||
столбы: {{ getColorNameFromRal(pillar_color)?.toLowerCase() }}.
|
||||
</p>
|
||||
</div>
|
||||
<div class="prose col-span-4">
|
||||
<p v-if="form_state.extra_section" class="text-ioprim">
|
||||
Внимание! Дополнительная секция приводит к увеличению стоимости.
|
||||
Рекомендуем вам изменить длину забора или длину секции!
|
||||
</p>
|
||||
</div>
|
||||
<div class="prose col-span-4">
|
||||
<p v-if="form_state.extra_section" class="text-ioprim">
|
||||
Внимание! Дополнительная секция приводит к увеличению стоимости.
|
||||
Рекомендуем вам изменить длину забора или длину секции!
|
||||
</p>
|
||||
</div>
|
||||
<div class="form-row justify-center">
|
||||
<button @click.prevent="toggleModal">Купить прямо сейчас</button>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ const lamelles_count = useState<number>('lamelles_count')
|
|||
const fence_section = useState<number>('fence_section')
|
||||
const pillar_color = useState<ralTypes>('pillar_color')
|
||||
const lamelle_color = useState<ralTypes>('lamelle_color')
|
||||
const remove_pillar = useState<boolean>('pillar_color')
|
||||
|
||||
const lSize = 0.115
|
||||
const bSize = 0.0235
|
||||
|
|
@ -23,6 +24,7 @@ watch([fence_section, lamelles_count], () => {
|
|||
const scale_koef = 2.5
|
||||
const show_pillar_one = ref(props.index == 1)
|
||||
const show_pillar_two = ref(true)
|
||||
|
||||
const make_translate_to_section = () => {
|
||||
let r = ((props.index - 1) / 2) * (fence_section.value + pillar_size + bSize) * scale_koef
|
||||
if (props.index % 2 == 0) {
|
||||
|
|
@ -41,7 +43,7 @@ watch(fence_section, () => {
|
|||
</script>
|
||||
<template>
|
||||
<TresGroup :scale="scale_koef" :position-x="translate_to_section" :name="`fence ${index}`">
|
||||
<TresGroup name="pillar_one" v-if="show_pillar_one" :position-x="pillar_one_pos" :position-z="0">
|
||||
<TresGroup name="pillar_one" v-if="!remove_pillar && show_pillar_one" :position-x="pillar_one_pos" :position-z="0">
|
||||
<TresGroup :position-y="(lSize * -0.5)" :scale="[1, 0.5, 1]">
|
||||
<ModelItem :model="props.models.fence" :color="getColorHexFromRal(pillar_color)" />
|
||||
</TresGroup>
|
||||
|
|
@ -55,7 +57,7 @@ watch(fence_section, () => {
|
|||
</TresGroup>
|
||||
</TresGroup>
|
||||
|
||||
<TresGroup name="pillar_two" v-if="show_pillar_two" :position-x="pillar_two_pos" :position-z="0">
|
||||
<TresGroup name="pillar_two" v-if="!remove_pillar && show_pillar_two" :position-x="pillar_two_pos" :position-z="0">
|
||||
<TresGroup :position-y="(lSize * -0.5)" :scale="[-1, 0.5, 1]">
|
||||
<ModelItem :model="props.models.fence" :color="getColorHexFromRal(pillar_color)" />
|
||||
</TresGroup>
|
||||
|
|
|
|||
Loading…
Reference in New Issue