mns-mini-zabor/pages/index.vue

<script setup lang="ts">
const config = useRuntimeConfig()
const apiBase = config.public.apiBase
const imgBase = config.public.imgBase

import { marked } from 'marked';

import og_img from '/og_img.png'

const { data: seoData } = await useFetch<ApiKpType>(`${apiBase}/kp/1`, { baseURL: config.public.baseUrl, headers: useRequestHeaders(['referer']) })
useSeoMeta({
    title: seoData.value?.title,
    ogTitle: seoData.value?.title,
    description: seoData.value?.content,
    ogDescription: seoData.value?.content,
    ogImage: config.public.baseUrl + og_img,
    // twitterCard: 'summary_large_image',
})

const { data: pagesData } = await useFetch<ApiPagesType[]>(`${apiBase}/pages/?ordering=order`, { baseURL: config.public.baseUrl, headers: useRequestHeaders(['referer']) })

const { data: reviewsData } = await useFetch<ApiReviewsType[]>(`${apiBase}/review/`, { baseURL: config.public.baseUrl, headers: useRequestHeaders(['referer']) })
const { data: calculatorData } = await useFetch(`${apiBase}/calculator/5/`, { baseURL: config.public.baseUrl, headers: useRequestHeaders(['referer']) })

const about = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'about', { baseURL: config.public.baseUrl, headers: useRequestHeaders(['referer']) })
const reviews = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'clients', { baseURL: config.public.baseUrl, headers: useRequestHeaders(['referer']) })
const delivery = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'how_to', { baseURL: config.public.baseUrl, headers: useRequestHeaders(['referer']) })
const advantages = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'advantages', { baseURL: config.public.baseUrl, headers: useRequestHeaders(['referer']) })

const roubleSign = new Intl.NumberFormat('ru-RU', {
    style: 'currency',
    currency: 'RUB',
});

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]))
    })
    return marked.parse(c)
})

const { data: advData } = await useFetch<ApiAdvantageType[]>(`${apiBase}/advantage/`, { baseURL: config.public.baseUrl, headers: useRequestHeaders(['referer']) })
</script>
<template>
    <div>
        <div class="siteblock bg-white" :id="about?.slug" v-if="about">
            <div class="container">
                <h1 class="siteblock-title">{{ about?.title }}</h1>
                <div class="siteblock-content">
                    <div class="siteblock-text">
                        <span v-html="aboutText"></span>
                    </div>
                </div>
                <div class="siteblock-image">
                    <NuxtImg :src="[imgBase, about?.image].join('/')" alt="разные цвета забора" title=""
                        format="webp" />
                </div>
                <div class="feature">
                    <template v-for="item in advData">
                        <div class="feature-item">
                            <div class="feature-name">{{ item.title }}</div> {{ item.content }}
                        </div>
                    </template>
                </div>
            </div>
        </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" />
        </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" />
                        </div>
                        <div class="review-content">
                            {{ item.comment }}
                        </div>
                        <div class="review-title">
                            {{ item.text }}
                        </div>
                    </div>
                </template>
            </div>
        </div>
        <div class="siteblock bg-white" :id="advantages?.slug">
            <div class="container gap-4">
                <div class="col-span-full xl:col-span-8">
                    <ExpDiagram />
                </div>
                <div class="col-span-full xl:col-span-4 prose">
                    <span v-html="advantagesText"></span>
                </div>
            </div>
        </div>
        <div class="siteblock siteblock_imgbg bg-slate-500"
            :style="[{ backgroundImage: `url(${[imgBase, delivery?.image].join('/')})` }]">
            <NuxtImg :src="[imgBase, delivery?.image].join('/')" class="invisible" v-if="delivery"
                alt="коричневый забор" title="" format="webp" loading="lazy" />
        </div>
        <div class="siteblock siteblock_calc bg-white">
            <LazyCalcValues />
            <Suspense>
                <LazyCalcModels />
            </Suspense>
        </div>
        <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>
                </div>
                <div class="prose col-span-12 xl:col-span-6">
                    <span v-html="deliveryText[1]"></span>
                </div>
            </div>
        </div>
    </div>
</template>