modal
This commit is contained in:
commit
a138a63529
|
@ -4,6 +4,7 @@ import type { ralTypes } from '@/components/ral'
|
||||||
|
|
||||||
const config = useRuntimeConfig()
|
const config = useRuntimeConfig()
|
||||||
const apiBase = config.public.apiBase
|
const apiBase = config.public.apiBase
|
||||||
|
const { data: calculatorData } = await useFetch(`${apiBase}/calculator/5/`)
|
||||||
|
|
||||||
const isModalOpen = useState('modal_open', () => false)
|
const isModalOpen = useState('modal_open', () => false)
|
||||||
|
|
||||||
|
@ -85,6 +86,26 @@ const submit = (e: any) => {
|
||||||
modal_data.name = undefined
|
modal_data.name = undefined
|
||||||
isModalOpen.value = false
|
isModalOpen.value = false
|
||||||
}
|
}
|
||||||
|
const roubleSign = new Intl.NumberFormat('ru-RU', {
|
||||||
|
style: 'currency',
|
||||||
|
currency: 'RUB',
|
||||||
|
});
|
||||||
|
const total = computed(() => {
|
||||||
|
const { mortgage, pillar, lamella } = calculatorData.value
|
||||||
|
const pillar_count = (section_count.value + 1)
|
||||||
|
const pil = (parseFloat(mortgage) + parseFloat(pillar)) * pillar_count
|
||||||
|
|
||||||
|
const lam_count = lamelles_count.value * section_count.value
|
||||||
|
const lam = lam_count * lamella
|
||||||
|
|
||||||
|
const top_count = section_count.value
|
||||||
|
const top = top_count * lamella
|
||||||
|
return [
|
||||||
|
`Столб, ${pillar_count}: ${roubleSign.format(pil)}`,
|
||||||
|
`Ламели, ${lam_count}: ${roubleSign.format(lam)}`,
|
||||||
|
`Верхняя планка, ${top_count}: ${roubleSign.format(top)}`,
|
||||||
|
]
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div v-if="isModalOpen" class="modal-backdrop" @click.self="toggleModal">
|
<div v-if="isModalOpen" class="modal-backdrop" @click.self="toggleModal">
|
||||||
|
@ -104,6 +125,7 @@ const submit = (e: any) => {
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<h2>данные расчета</h2>
|
<h2>данные расчета</h2>
|
||||||
<div class="flex gap-4 flex-col mb-4">
|
<div class="flex gap-4 flex-col mb-4">
|
||||||
|
<<<<<<< HEAD
|
||||||
<div>
|
<div>
|
||||||
Ламелей в одной секции: {{ lamelles_count }}
|
Ламелей в одной секции: {{ lamelles_count }}
|
||||||
</div>
|
</div>
|
||||||
|
@ -124,6 +146,17 @@ const submit = (e: any) => {
|
||||||
<div>
|
<div>
|
||||||
Цвет ламелей: {{ getColorNameFromRal(lamelle_color) }}
|
Цвет ламелей: {{ getColorNameFromRal(lamelle_color) }}
|
||||||
</div>
|
</div>
|
||||||
|
=======
|
||||||
|
<p>Ламелей: {{ lamelles_count }}<br />
|
||||||
|
Длина секции: {{ fence_section * 1000 }}<br />
|
||||||
|
Общая длина: {{ total_length }}<br />
|
||||||
|
Секций: {{ section_count }}<br />
|
||||||
|
Цвет столба: {{ getColorNameFromRal(pillar_color) }}<br />
|
||||||
|
Цвет ламелей: {{ getColorNameFromRal(lamelle_color) }}</p>
|
||||||
|
<p>
|
||||||
|
<template v-for="i in total">{{ i }}<br /></template>
|
||||||
|
</p>
|
||||||
|
>>>>>>> ba62bb0ffa821cda603bdee91922c79da69d166d
|
||||||
</div>
|
</div>
|
||||||
<div class="flex gap-4">
|
<div class="flex gap-4">
|
||||||
<button class="not-prose" @click="openForm">Данные верны</button>
|
<button class="not-prose" @click="openForm">Данные верны</button>
|
||||||
|
|
|
@ -38,7 +38,6 @@ const { scene: top } = await useGLTF('/models_one/verh_100.glb')
|
||||||
const { scene: fence } = await useGLTF('/models_one/fence.glb')
|
const { scene: fence } = await useGLTF('/models_one/fence.glb')
|
||||||
const { scene: fastening } = await useGLTF('/models_one/krepleniye_planok (1).glb')
|
const { scene: fastening } = await useGLTF('/models_one/krepleniye_planok (1).glb')
|
||||||
const { scene: lamelle } = await useGLTF('/models_one/lamel_100.glb')
|
const { scene: lamelle } = await useGLTF('/models_one/lamel_100.glb')
|
||||||
const { scene: back_light } = await useGLTF('/models_light/back_light.glb')
|
|
||||||
|
|
||||||
const { seek, seekAll } = useSeek()
|
const { seek, seekAll } = useSeek()
|
||||||
watch(section_count, () => {
|
watch(section_count, () => {
|
||||||
|
@ -82,7 +81,6 @@ ctx.fillRect(10, 10, 512, 512)
|
||||||
console.log(canvas.toDataURL())
|
console.log(canvas.toDataURL())
|
||||||
const texture = new DataTexture(ctx?.getImageData(0, 0, 512, 512).data.buffer, width, height);
|
const texture = new DataTexture(ctx?.getImageData(0, 0, 512, 512).data.buffer, width, height);
|
||||||
texture.needsUpdate = true;
|
texture.needsUpdate = true;
|
||||||
console.log(back_light)
|
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<TresGroup :translate-y="-3.25" name="base">
|
<TresGroup :translate-y="-3.25" name="base">
|
||||||
|
@ -107,7 +105,6 @@ console.log(back_light)
|
||||||
<TresBoxGeometry :args="[1, 1, 1]" />
|
<TresBoxGeometry :args="[1, 1, 1]" />
|
||||||
<TresMeshStandardMaterial :map="texture_one" />
|
<TresMeshStandardMaterial :map="texture_one" />
|
||||||
</TresMesh>
|
</TresMesh>
|
||||||
<TresDirectionalLight v-bind="back_light"/>
|
|
||||||
<template v-for="i in section_count">
|
<template v-for="i in section_count">
|
||||||
<template v-if="i <= 20">
|
<template v-if="i <= 20">
|
||||||
<ModelFence :index="i" :models="{ top, fence, fastening, lamelle }" />
|
<ModelFence :index="i" :models="{ top, fence, fastening, lamelle }" />
|
||||||
|
|
Loading…
Reference in New Issue