122 lines
5.1 KiB
Vue
122 lines
5.1 KiB
Vue
<script setup lang="ts">
|
|
const config = useRuntimeConfig()
|
|
const apiBase = config.public.apiBase
|
|
|
|
import { marked } from 'marked';
|
|
|
|
import og_img from '/og_img.png'
|
|
|
|
const { data: seoData } = await useFetch<ApiKpType>(`${apiBase}/kp/1`)
|
|
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`)
|
|
|
|
const { data: reviewsData } = await useFetch<ApiReviewsType[]>(`${apiBase}/review/`)
|
|
const { data: calculatorData } = await useFetch(`${apiBase}/calculator/5/`)
|
|
|
|
const about = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'about')
|
|
const reviews = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'clients')
|
|
const delivery = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'delivery')
|
|
const advantages = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'advantages')
|
|
|
|
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/`)
|
|
</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="[apiBase, 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(${[apiBase, reviews?.image].join('/')})` }]" v-if="reviews">
|
|
<NuxtImg :src="[apiBase, 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="[apiBase, 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(${[apiBase, delivery?.image].join('/')})` }]">
|
|
<NuxtImg :src="[apiBase, 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" :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> |