2024-07-08 09:23:32 +03:00
21 changed files with 133 additions and 132 deletions
--- a/assets/main.scss
+++ b/assets/main.scss
@ -36,6 +36,19 @@ body {

 .menu {
    @apply col-span-8 flex justify-between;
+
+    a {
+        @apply underline decoration-0 underline-offset-4 decoration-dotted hover:decoration-transparent transition-all;
+    }
+
+    a[href^=http] {
+        @apply relative no-underline;
+
+        &:after {
+            content: '↷';
+            @apply ml-2;
+        }
+    }
 }

 a[href^="#"] {
@ -74,11 +87,21 @@ a[href^="#"] {
    @apply py-10;

    &_imgbg {
-        @apply py-0 bg-no-repeat bg-cover bg-bottom h-[50vh];
+        @apply py-0 bg-no-repeat bg-cover bg-bottom h-[50vh] min-h-[600px];
    }

    &_calc {
        @apply py-0;
+
+        &-canvas {
+            @apply relative h-[50vh] min-h-[600px];
+        }
+    }
+
+    &_content {
+        >.container {
+            @apply items-start;
+        }
    }

    &-content {
@ -90,7 +113,7 @@ a[href^="#"] {
    }

    &-title {
-        @apply col-span-full text-6xl font-black font-h1 leading-[0.85] tracking-tight mb-[3.15rem]
+        @apply col-span-full text-4xl xl:text-6xl font-black font-h1 leading-[0.85] tracking-tight mb-[3.15rem]
    }

    &-image {
@ -115,12 +138,30 @@ a[href^="#"] {
 }

 .modal {
-    @apply bg-white p-10 border rounded shadow prose ;
+    @apply relative bg-white p-5 lg:p-10 border rounded shadow prose;

    &-backdrop {
        @apply fixed top-0 left-0 right-0 bottom-0 bg-white bg-opacity-70 flex items-center justify-center z-30;
    }

+    &-close {
+        @apply absolute right-4 top-4 text-4xl opacity-50;
+    }
+
+    &-status {
+        @apply text-center;
+        &-icon {
+            @apply text-8xl;
+        }
+        &-text {
+            @apply text-3xl;
+        }
+    }
+
+    h2 {
+        @apply px-4;
+    }
+
    form {
        @apply flex flex-col gap-4 items-center;
    }
@ -139,7 +180,7 @@ textarea {
 }

 button {
-    @apply rounded bg-primary hover:bg-primary-300 transition-colors p-4 inline-block text-2xl font-bold cursor-pointer disabled:opacity-50 disabled:hover:bg-primary leading-4;
+    @apply rounded bg-primary hover:bg-primary-300 transition-colors p-4 inline-block text-2xl font-bold cursor-pointer disabled:opacity-50 disabled:hover:bg-primary leading-5 lg:leading-4;

    &.neutral,
    &[type="reset"] {
@ -209,8 +250,10 @@ button {

 .canvas-icons {
    @apply absolute text-3xl top-0 left-0 flex flex-col;
+
    a {
        @apply cursor-pointer;
+
        &.disabled {
            @apply cursor-not-allowed opacity-50 pointer-events-none;
        }
--- a/components/calcModels.vue
+++ b/components/calcModels.vue
@ -46,34 +46,6 @@ const loadAll = async () => {
    pointLight.value.position.x = pointLight.value.position.x * k
    pointLight.value.position.y = pointLight.value.position.y * k
    pointLight.value.position.z = pointLight.value.position.z * k
-
-    const pbrTexture = await useTexture({
-        map: '/texture/Grass004_2K-PNG/Grass004_2K-PNG_Color.png',
-        displacementMap: '/texture/Grass004_2K-PNG/Grass004_2K-PNG_Displacement.png',
-        // roughnessMap: '/texture/Grass004_2K-PNG/Grass004_2K-PNG_Roughness.png',
-        normalMap: '/texture/Grass004_2K-PNG/Grass004_2K-PNG_NormalDX.png',
-        aoMap: '/texture/Grass004_2K-PNG/Grass004_2K-PNG_AmbientOcclusion.png',
-    })
-    const repeat = 10
-    for (const key in pbrTexture) {
-        if (Object.prototype.hasOwnProperty.call(pbrTexture, key)) {
-            const key_p = key as keyof typeof pbrTexture
-            const element = pbrTexture[key_p]
-            if (element && element.wrapS) {
-                element.wrapS = RepeatWrapping
-                element.wrapT = RepeatWrapping
-                element.repeat.x = repeat
-                element.repeat.y = repeat
-                element.flipY = false
-            }
-        }
-    }
-    groundMaterial.value = Object.assign(groundMaterial.value, {
-        map: pbrTexture.map,
-        displacementMap: pbrTexture.displacementMap,
-        normalMap: pbrTexture.normalMap,
-        aoMap: pbrTexture.aoMap,
-    })
 }
 const camera = ref("camera")

@ -89,7 +61,7 @@ watch([section_count, extra_section], () => {
 })
 </script>
 <template>
-    <div class="container min-w-full relative h-[50vh] min-h-[600px]">
+    <div class="container min-w-full siteblock_calc-canvas">
        <ClientOnly fallback-tag="div">
            <template #fallback>
                <div class="fallback">
--- a/components/calcValues.vue
+++ b/components/calcValues.vue
@ -234,7 +234,7 @@ const goal = (target: string, params: object) => {
                    </p>
                </template>
            </div>
-            <div class="prose col-span-4">
+            <div class="prose col-span-12 lg:col-span-4">
                <p v-if="form_state.extra_section" class="text-ioprim">
                    Внимание! Дополнительная секция приводит к увеличению стоимости.
                    Рекомендуем вам изменить длину забора или длину секции!
--- a/components/footer.vue
+++ b/components/footer.vue
@ -1,10 +1,9 @@
 <script setup lang="ts">
-const config = useRuntimeConfig()
-const apiBase = config.public.apiBase
 import k_logo from '@/assets/icons/logo.svg'
+import { apiFetch } from '~/utils/apiFetch';

-const { data: footerData } = await useFetch<ApiFooterType[]>(`${apiBase}/footer/?ordering=small_text`)
-const { data: social_networkData } = await useFetch<ApiSocial_networkType[]>(`${apiBase}/social_network/`)
+const { data: footerData } = await apiFetch<ApiFooterType[]>(`footer/?ordering=small_text`)
+const { data: social_networkData } = await apiFetch<ApiSocial_networkType[]>(`social_network/`)
 </script>
 <template>
    <div class="footer" id="contacts">
--- a/components/header.vue
+++ b/components/header.vue
@ -1,16 +1,7 @@
 <script setup lang="ts">
-const config = useRuntimeConfig()
-const apiBase = config.public.apiBase
+import { apiFetch } from '~/utils/apiFetch';

-const { data: pagesData } = await useFetch<ApiPagesType[]>(`${apiBase}/pages/?ordering=order`)
-const { scrollToAnchor, scrollToTop } = useAnchorScroll({
-    toTop: {
-        scrollOptions: {
-            behavior: 'smooth',
-            offsetTop: 0,
-        }
-    },
-})
+const { data: pagesData } = await apiFetch<ApiPagesType[]>(`pages/?ordering=order`)
 const route = useRoute()
 </script>
 <template>
@ -24,7 +15,7 @@ const route = useRoute()
            <div class="menu">
                <template v-for="item in pagesData">
                    <NuxtLink :to="item.external_link || ((route.name == 'index' ? '' : '/') + `#${item.slug}`)"
-                        :target="item.external_link ? '_blank' : '_self'" @click="scrollToAnchor(item.slug)">
+                        :target="item.external_link ? '_blank' : '_self'">
                        {{ item.menu_title }}
                    </NuxtLink>
                </template>
--- a/components/modal.vue
+++ b/components/modal.vue
@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { getColorNameFromRal } from '@/components/ral'
 import type { ralTypes } from '@/components/ral'
+import { apiFetch } from '~/utils/apiFetch';

 const config = useRuntimeConfig()
 const apiBase = config.public.apiBase
-const { data: calculatorData } = await useFetch<ApiCalcType>(`${apiBase}/calculator/5/`)
+const { data: calculatorData } = await apiFetch<ApiCalcType>(`calculator/5/`)
 const isModalOpen = useState('modal_open', () => false)

 const lamelle_height = useState<number>('lamelle_height')
@ -22,6 +23,7 @@ const toggleModal = () => {
    modal_data.phone = undefined
    modal_data.name = undefined
    modal_state.show_form = false
+    modal_state.show_status = null
    isModalOpen.value = !isModalOpen.value
 }
 type modalDataType = {
@ -39,7 +41,8 @@ const modal_form = reactive({
    errors: [],
 })
 const modal_state = reactive({
-    show_form: false
+    show_form: false,
+    show_status: null as null | 'loading' | 'success' | 'error',
 })
 const openForm = () => {
    modal_state.show_form = !modal_state.show_form
@ -66,26 +69,29 @@ const validate = () => {
        return
    }
 }
-const submit = (e: any) => {
+const submit = async (e: any) => {
    goal('submit_form', modal_data)
-    fetch(`${apiBase}/custom_request/`, {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({
-            name: modal_data.name || `ref from site ${new Date}`,
-            phone: modal_data.phone,
-            email: modal_data.email,
-            fence_info: [
-                ...Object.values(total_txt.value).map(el => el.join('\n')),
-                total_colors.value.join('\n')
-            ].join('\n\n'),
+    modal_state.show_status = 'loading'
+    try {
+        const res = await fetch(`${apiBase}/custom_request/`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                name: modal_data.name || `ref from site ${new Date}`,
+                phone: modal_data.phone,
+                email: modal_data.email,
+                fence_info: [
+                    ...Object.values(total_txt.value as object).map(el => el.join('\n')),
+                    total_colors.value.join('\n')
+                ].join('\n\n'),
+            })
        })
-    })
-    modal_data.phone = undefined
-    modal_data.name = undefined
-    toggleModal()
+        modal_state.show_status = 'success'
+    } catch (error) {
+        modal_state.show_status = 'error'
+    }
 }
 const roubleSign = new Intl.NumberFormat('ru-RU', {
    style: 'currency',
@ -123,7 +129,7 @@ const total_txt = computed(() => {
        lam_quad_extra: discountValue * lamelles_block * lam_count * lamelle_height.value * extra_m,
    }
    // console.log(prices)
-    const extra = {
+    const extra = extra_section.value ? {
        pillar: !remove_pillar.value && {
            txt: `Дополнительная секция, столб, 1 шт`,
            value: prices.pillar * 1
@ -132,8 +138,7 @@ const total_txt = computed(() => {
            txt: `Блок ламелей с направляющей, 1 шт`,
            value: prices.lam_quad_extra * 1
        },
-
-    }
+    } : {}
    const regular = {
        pillar: !remove_pillar.value && {
            txt: `Столб, ${(1 + sections)} шт`,
@ -164,14 +169,29 @@ const total_txt = computed(() => {
 const goal = (target: string, params: object) => {
    const nuxtApp = useNuxtApp()
    if (nuxtApp.$metrika) {
-        nuxtApp.$metrika.reachGoal(target, params || {})
+        (nuxtApp.$metrika as any).reachGoal(target, params || {})
    }
 }
+
+const modalStatus = {
+    'loading': ["mdi:circle-arrows", 'Отправляем данные'],
+    'success': ["mdi:check-circle-outline", 'Данные отправлены'],
+    'error': ["mdi:close-circle-outline", 'Ошибка отправки'],
+}
 </script>
 <template>
    <div v-if="isModalOpen" class="modal-backdrop" @click.self="toggleModal">
        <div class="modal">
-            <template v-if="modal_state.show_form">
+            <span class="modal-close" @click="toggleModal">
+                <Icon name="mdi:close" />
+            </span>
+            <div class="modal-status" v-if="modal_state.show_status" :class="[modal_state.show_status]">
+                <div class="modal-status-icon">
+                    <Icon :name="modalStatus[modal_state.show_status][0]" />
+                </div>
+                <div class="modal-status-text">{{ modalStatus[modal_state.show_status][1] }}</div>
+            </div>
+            <template v-else-if="modal_state.show_form">
                <h2>Оставьте контакты для связи </h2>
                <form @submit.prevent="submit" ref="form">
                    <input type="text" placeholder="Ваше имя" v-model="modal_data.name" @keyup="validate" />
@ -203,7 +223,7 @@ const goal = (target: string, params: object) => {
                    </template>
                </div>
                <div class="flex gap-4 justify-center">
-                    <button class="not-prose" @click="openForm">Отправить расчет на e-mail</button>
+                    <button class="not-prose" @click="openForm">Отправить расчет на <nobr>e-mail</nobr></button>
                </div>
            </template>
        </div>
--- a/error.vue
+++ b/error.vue
@ -3,10 +3,11 @@ const config = useRuntimeConfig()
 const apiBase = config.public.apiBase
 import '@/assets/main.scss'

+import { apiFetch } from './utils/apiFetch';
 import type { NuxtError } from '#app'
 import og_img from '/og_img.png'

-const { data: seoData } = await useFetch<ApiKpType>(`${apiBase}/kp/2`)
+const { data: seoData } = await apiFetch<ApiKpType>(`kp/2`)
 useSeoMeta({
    title: seoData.value?.title,
    ogTitle: seoData.value?.title,
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@ -49,7 +49,6 @@ export default defineNuxtConfig({
    "nuxt-icon",
    "nuxt-svgo",
    '@tresjs/nuxt',
-    'nuxt-anchorscroll',
    '@nuxtjs/robots',
    '@artmizu/yandex-metrika-nuxt',
  ],
--- a/package.json
+++ b/package.json
@ -10,8 +10,8 @@
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
-    "@artmizu/yandex-metrika-nuxt": "^1.0.4",
    "@monogrid/gainmap-js": "^3.0.5",
+    "@artmizu/yandex-metrika-nuxt": "^1.0.4",
    "@nuxt/image": "^1.7.0",
    "@nuxtjs/robots": "^3.0.0",
    "@nuxtjs/tailwindcss": "^6.12.0",
@ -23,7 +23,6 @@
    "imagemin-pngquant": "^10.0.0",
    "marked": "^12.0.2",
    "nuxt": "^3.11.2",
-    "nuxt-anchorscroll": "^1.0.3",
    "nuxt-icon": "^0.6.10",
    "nuxt-svgo": "^4.0.1",
    "sass": "^1.77.4",
--- a/pages/index.vue
+++ b/pages/index.vue
@ -1,13 +1,13 @@
 <script setup lang="ts">
 const config = useRuntimeConfig()
-const apiBase = config.public.apiBase
 const imgBase = config.public.imgBase

+import { apiFetch } from '~/utils/apiFetch';
 import { marked } from 'marked';

 import og_img from '/og_img.png'

-const { data: seoData } = await useFetch<ApiKpType>(`${apiBase}/kp/1`)
+const { data: seoData } = await apiFetch<ApiKpType>(`kp/1`)
 useSeoMeta({
    title: seoData.value?.title,
    ogTitle: seoData.value?.title,
@ -17,10 +17,10 @@ useSeoMeta({
    // twitterCard: 'summary_large_image',
 })

-const { data: pagesData } = await useFetch<ApiPagesType[]>(`${apiBase}/pages/?ordering=order`)
+const { data: pagesData } = await apiFetch<ApiPagesType[]>(`pages/?ordering=order`)

-const { data: reviewsData } = await useFetch<ApiReviewsType[]>(`${apiBase}/review/`)
-const { data: calculatorData } = await useFetch(`${apiBase}/calculator/5/`)
+const { data: reviewsData } = await apiFetch<ApiReviewsType[]>(`review/`)
+const { data: calculatorData } = await apiFetch(`calculator/5/`)

 const about = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'about')
 const reviews = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'clients')
@ -36,13 +36,13 @@ 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 => { 
+    Object.entries(calculatorData.value || {}).map(item => {
        c = c.replaceAll(`[${item[0]}]`, roubleSign.format(item[1]))
    })
    return marked.parse(c)
 })

-const { data: advData } = await useFetch<ApiAdvantageType[]>(`${apiBase}/advantage/`)
+const { data: advData } = await apiFetch<ApiAdvantageType[]>(`advantage/`)
 </script>
 <template>
    <div>
@ -69,14 +69,16 @@ const { data: advData } = await useFetch<ApiAdvantageType[]>(`${apiBase}/advanta
        </div>
        <div class="siteblock siteblock_imgbg bg-slate-500"
            :style="[{ backgroundImage: `url(${[imgBase, reviews?.image].join('/')})` }]" v-if="reviews">
-            <NuxtImg :src="[imgBase, reviews?.image].join('/')" class="invisible" alt="отзыв" title="" format="webp" loading="lazy" />
+            <NuxtImg :src="[imgBase, reviews?.image].join('/')" class="invisible" alt="отзыв" title="" format="webp"
+                loading="lazy" />
        </div>
        <div class="siteblock bg-white" :id="reviews?.slug" v-if="reviews">
            <div class="container">
                <template v-for="item in reviewsData?.slice(0, 3)">
                    <div class="review">
                        <div class="review-image">
-                            <NuxtImg :src="[imgBase, item.image].join('/')" :alt="item.text" title="" format="webp" loading="lazy" />
+                            <NuxtImg :src="[imgBase, item.image].join('/')" :alt="item.text" title="" format="webp"
+                                loading="lazy" />
                        </div>
                        <div class="review-content">
                            {{ item.comment }}
@ -109,7 +111,7 @@ const { data: advData } = await useFetch<ApiAdvantageType[]>(`${apiBase}/advanta
                <LazyCalcModels />
            </Suspense>
        </div>
-        <div class="siteblock bg-white" :id="delivery?.slug" v-if="deliveryText">
+        <div class="siteblock bg-white siteblock_content" :id="delivery?.slug" v-if="deliveryText">
            <div class="container">
                <div class="prose col-span-12 xl:col-span-6">
                    <span v-html="deliveryText[0]"></span>
--- a/plugins/scroll.ts
+++ b/plugins/scroll.ts
@ -0,0 +1,7 @@
+export default defineNuxtPlugin((nuxtApp) => {
+    nuxtApp.$router.options.scrollBehavior = (to, from, savedPosition) => {
+        if (to.hash) {
+            return { el: to.hash, behavior: 'smooth', }
+        }
+    }
+})
--- a/public/texture/Grass004_2K-PNG/Grass004.png
+++ b/public/texture/Grass004_2K-PNG/Grass004.png
--- a/public/texture/Grass004_2K-PNG/Grass004_2K-PNG.mtlx
+++ b/public/texture/Grass004_2K-PNG/Grass004_2K-PNG.mtlx
@ -1,42 +0,0 @@
-<?xml version="1.0"?>
-<materialx version="1.38" fileprefix="./">
-  <standard_surface ypos="-1.879310" name="Grass004_2K_PNG_StandardSurface" type="surfaceshader" xpos="6.159420">
-    <input name="specular" type="float" value="0" />
-    <input name="coat" type="float" value="1" />
-    <input name="coat_color" type="color3" value="1, 1, 1" />
-    <input name="base" type="float" value="1" />
-    <input name="base_color" type="color3" nodename="Grass004_2K_PNG_Color" />
-    <input name="normal" type="vector3" nodename="normalmap" />
-    <input name="coat_normal" type="vector3" nodename="normalmap" />
-    <input name="specular_roughness" type="float" nodename="Grass004_2K_PNG_Roughness" />
-    <input name="coat_roughness" type="float" nodename="Grass004_2K_PNG_Roughness" />
-  </standard_surface>
-  <surfacematerial ypos="0.000000" name="Grass004_2K_PNG" type="material" xpos="8.695652">
-    <input name="surfaceshader" type="surfaceshader" nodename="Grass004_2K_PNG_StandardSurface" />
-    <input name="displacementshader" type="displacementshader" nodename="displacement" />
-  </surfacematerial>
-  <tiledimage ypos="-3.103448" name="Grass004_2K_PNG_Color" type="color3" xpos="3.623188">
-    <input colorspace="srgb_texture" name="file" type="filename" value="Grass004_2K-PNG_Color.png" />
-    <input name="uvtiling" type="vector2" value="1.0, 1.0" />
-  </tiledimage>
-  <tiledimage ypos="5.163793" name="Grass004_2K_PNG_Displacement" type="float" xpos="3.623188">
-    <input name="file" type="filename" value="Grass004_2K-PNG_Displacement.png" />
-    <input name="uvtiling" type="vector2" value="1.0, 1.0" />
-  </tiledimage>
-  <displacement ypos="1.879310" name="displacement" type="displacementshader" xpos="6.159420">
-    <input name="displacement" type="float" nodename="Grass004_2K_PNG_Displacement" />
-    <input name="scale" type="float" value="1.0" />
-  </displacement>
-  <tiledimage ypos="0.879310" name="Grass004_2K_PNG_NormalGL" type="vector3" xpos="1.086957">
-    <input name="file" type="filename" value="Grass004_2K-PNG_NormalGL.png" />
-    <input name="uvtiling" type="vector2" value="1.0, 1.0" />
-  </tiledimage>
-  <normalmap ypos="3.586207" name="normalmap" type="vector3" xpos="3.623188">
-    <input name="in" type="vector3" nodename="Grass004_2K_PNG_NormalGL" />
-    <input name="scale" type="float" value="1.0" />
-  </normalmap>
-  <tiledimage ypos="-0.413793" name="Grass004_2K_PNG_Roughness" type="float" xpos="3.623188">
-    <input name="file" type="filename" value="Grass004_2K-PNG_Roughness.png" />
-    <input name="uvtiling" type="vector2" value="1.0, 1.0" />
-  </tiledimage>
-</materialx>
--- a/public/texture/Grass004_2K-PNG/Grass004_2K-PNG.usdc
+++ b/public/texture/Grass004_2K-PNG/Grass004_2K-PNG.usdc
--- a/public/texture/Grass004_2K-PNG/Grass004_2K-PNG_AmbientOcclusion.png
+++ b/public/texture/Grass004_2K-PNG/Grass004_2K-PNG_AmbientOcclusion.png
--- a/public/texture/Grass004_2K-PNG/Grass004_2K-PNG_Color.png
+++ b/public/texture/Grass004_2K-PNG/Grass004_2K-PNG_Color.png
--- a/public/texture/Grass004_2K-PNG/Grass004_2K-PNG_Displacement.png
+++ b/public/texture/Grass004_2K-PNG/Grass004_2K-PNG_Displacement.png
--- a/public/texture/Grass004_2K-PNG/Grass004_2K-PNG_NormalDX.png
+++ b/public/texture/Grass004_2K-PNG/Grass004_2K-PNG_NormalDX.png
--- a/public/texture/Grass004_2K-PNG/Grass004_2K-PNG_NormalGL.png
+++ b/public/texture/Grass004_2K-PNG/Grass004_2K-PNG_NormalGL.png
--- a/public/texture/Grass004_2K-PNG/Grass004_2K-PNG_Roughness.png
+++ b/public/texture/Grass004_2K-PNG/Grass004_2K-PNG_Roughness.png
--- a/utils/apiFetch.ts
+++ b/utils/apiFetch.ts
@ -0,0 +1,10 @@
+export async function apiFetch<T>(path: string) {
+    const config = useRuntimeConfig()
+    const apiBase = config.public.apiBase
+    const headers = new Headers()
+    headers.set('Referer', config.public.baseUrl)
+    return useFetch<T>(`${apiBase}/${path}`, {
+        baseURL: config.public.baseUrl,
+        headers
+    })
+}