app.vue

@@ -6,6 +6,5 @@ import '@/assets/main.scss'
     <Header />
     <NuxtPage />
     <Footer />
-    <Modal />
   </div>
 </template>

components/modal.vue

@@ -7,7 +7,7 @@ import { getName as getTopperName } from './topper';
 
 const config = useRuntimeConfig()
 const apiBase = config.public.apiBase
-const { data: calculatorData } = await apiFetch<ApiCalcType>(`calculator/5/`)
+const props = defineProps(['calcData'])
 const isModalOpen = useState('modal_open', () => false)
 
 const lamelle_height = useState<number>('lamelle_height')
@@ -122,12 +122,14 @@ const total_colors = computed(() => {
         `Столбы ${pillar_color.value} ${getColorNameFromRal(pillar_color.value)}`,
     ]
 })
+
 const total_txt = computed(() => {
-    if (!calculatorData.value) return
-    const pillar = parseFloat(calculatorData.value.pillar)
-    const pillar_base = parseFloat(calculatorData.value.pillar_base)
-    const lamelles_block = parseFloat(calculatorData.value.lamelles_block)
-    const { discount } = calculatorData.value
+    const calculatorData = props.calcData as ApiCalcType
+    if (!calculatorData) return
+    const pillar = parseFloat(calculatorData.pillar)
+    const pillar_base = parseFloat(calculatorData.pillar_base)
+    const lamelles_block = parseFloat(calculatorData.lamelles_block)
+    const { discount } = calculatorData
 
     const sections = section_count.value as number
     const extra_m = extra_section.value as number * 0.001

components/model/env.vue

@@ -32,7 +32,7 @@ onMounted(async () => {
     const newEnvMap = exrCubeRenderTarget ? exrCubeRenderTarget.texture : null;
 
     scene.value.environment = newEnvMap
-    scene.value.environmentIntensity = 1
+    scene.value.environmentIntensity = 0.7
     scene.value.environmentRotation.z = 0.25
     result.renderTarget.texture.dispose();
 })

nuxt.config.ts

@@ -25,7 +25,7 @@ export default defineNuxtConfig({
   ],
   runtimeConfig: {
     public: {
-      apiBase: 'https://mns.kustarshina.ru/kp',
+      apiBase: process.env.mode == 'DEVELOPMENT' ? "http://localhost:8000" : "https://mns.kustarshina.ru/kp",
       imgBase: 'https://mns.kustarshina.ru',
       baseUrl: '',
       yandexMetrika: {

pages/index.vue

@@ -21,7 +21,10 @@ const { data: menuData } = await apiFetch<ApiMenuType>(`menu/1/?ordering=order`)
 const pagesData = menuData.value ? menuData.value.pages : []
 
 const { data: reviewsData } = await apiFetch<ApiReviewsType[]>(`review/`)
-const { data: calculatorData } = await apiFetch(`calculator/5/`)
+
+const { data: calculators } = await apiFetch<ApiCalcType[]>('calculator')
+const openTab = ref<number>()
+if (calculators.value?.length) openTab.value = calculators.value[0].id
 
 const about = pagesData.find(el => el.slug == 'about')
 const reviews = pagesData.find(el => el.slug == 'clients')
@@ -37,13 +40,17 @@ const aboutText = computed(() => marked.parse(about?.content || ''))
 const deliveryText = computed(() => delivery?.content.split('[col]').map(el => marked.parse(el || '')))
 const advantagesText = computed(() => {
     let c = advantages?.content || ''
-    Object.entries(calculatorData.value || {}).map(item => {
-        c = c.replaceAll(`[${item[0]}]`, roubleSign.format(item[1]))
+    Object.entries(calculators.value?.find(el => el.id == openTab.value) || {}).map(item => {
+        c = c.replaceAll(`[${item[0]}]`, roubleSign.format(item[1] as number))
     })
     return marked.parse(c)
 })
 
 const { data: advData } = await apiFetch<ApiAdvantageType[]>(`advantage/`)
+
+const setCalcData = (id: number) => {
+    openTab.value = id
+}
 </script>
 <template>
     <div>
@@ -91,6 +98,21 @@ const { data: advData } = await apiFetch<ApiAdvantageType[]>(`advantage/`)
                 </template>
             </div>
         </div>
+        <div class="siteblock bg-white" id="calculator" v-if="calculators">
+            <div class="container">
+                <div class="flex col-span-full gap-2 justify-center">
+                    <template v-for="item in calculators">
+                        <div class="rounded p-2 cursor-pointer hover:bg-ioprim-300 border border-ioprim-300" :class="[{
+                            'bg-ioprim-200': openTab !== item.id,
+                            'bg-ioprim-400': openTab == item.id,
+                        }]" @click="setCalcData(item.id)">
+                            {{ item.title }}
+                        </div>
+                    </template>
+                </div>
+            </div>
+        </div>
+        <Modal :calcData="calculators.find(el => el.id == openTab)" />
         <div class="siteblock bg-white" :id="advantages?.slug">
             <div class="container gap-4">
                 <div class="col-span-full xl:col-span-8">