mini-shater/pages/index.vue

<script setup lang="ts">
const { fetchData } = useApiFetch()
const config = useRuntimeConfig()
const imgBase = config.public.imgBase

import { marked } from 'marked'

import og_img from '/og_img.png'

const { data: seo } = await fetchData<Seo[]>(`seo`)
const { data: menu_raw, status: menu_status } = await fetchData<Menu[]>(`menu`)
const { data: review } = await fetchData<Review[]>(`review`)
const { data: calc_data } = await fetchData<CalcItem[]>(`calculator`)

useSeoMeta({
  title: seo.value && seo.value[0].title,
  ogTitle: seo.value && seo.value[0].title,
  description: seo.value && seo.value[0].content,
  ogDescription: seo.value && seo.value[0].content,
  ogImage: config.public.baseUrl + og_img
})

const pages = computed(() => {
  const menu = menu_raw.value?.find(el => el.type == 1)
  return (menu?.pages || []).sort((a, b) => a.order - b.order)
})

const delivery = computed(() =>
  pages.value
    .find(el => el.slug == 'delivery')
    ?.content.split('[col]')
    .map(el => marked.parse(el || ''))
)

const setCalcData = (txt: string) => {
  let c = txt
  ;(calc_data.value || []).map(item => {
    c = c.replaceAll(`[${item.slug}]`, roubleSign.format(item.base))
  })
  return marked.parse(c)
}
</script>
<template>
  <div>
    <template v-for="page in pages" :key="page.slug">
      <template v-if="page.slug == 'about'">
        <div class="siteblock bg-white" :id="page.slug">
          <div class="container">
            <h1 class="siteblock-title">{{ page.title }}</h1>
            <div class="siteblock-content">
              <div class="siteblock-text">
                <span v-html="marked.parse(page.content || '')"></span>
              </div>
            </div>
            <div class="siteblock-image">
              <NuxtImg
                :src="[imgBase, page.image].join('/')"
                :alt="page.title"
                title=""
                format="webp"
              />
            </div>
          </div>
        </div>
      </template>
      <template v-if="page.slug == 'review'">
        <div
          class="siteblock siteblock_imgbg bg-slate-500"
          :style="[
            { backgroundImage: `url(${[imgBase, page.image].join('/')})` }
          ]"
        >
          <NuxtImg
            :src="[imgBase, page.image].join('/')"
            :alt="page.title"
            format="webp"
            loading="lazy"
          />
        </div>
        <div class="siteblock bg-white">
          <div class="container" :id="page.slug">
            <template v-for="item in review?.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>
      </template>
      <template v-if="page.slug == 'advantages'">
        <div class="siteblock bg-white" :id="page.slug">
          <div class="container gap-4">
            <div class="col-span-full xl:col-span-8">
              <ModelScene type="bench" />
            </div>
            <div class="col-span-full xl:col-span-4 prose">
              <span v-html="setCalcData(page.content || '')"></span>
            </div>
          </div>
        </div>
      </template>
      <template v-if="page.slug == 'more'">
        <div
          class="siteblock siteblock_imgbg bg-slate-500"
          :style="[
            { backgroundImage: `url(${[imgBase, page.image].join('/')})` }
          ]"
        >
          <NuxtImg
            :src="[imgBase, page.image].join('/')"
            format="webp"
            loading="lazy"
          />
        </div>
        <div class="siteblock bg-white" :id="page.slug">
          <div class="container gap-4">
            <div class="col-span-full xl:col-span-8 prose">
              <span v-html="setCalcData(page.content || '')"></span>
            </div>
            <div class="col-span-full xl:col-span-4">
              <ModelScene type="table" />
            </div>
          </div>
        </div>
      </template>
      <template v-if="page.slug == 'delivery'">
        <div
          class="siteblock siteblock_imgbg bg-slate-500"
          :style="[
            { backgroundImage: `url(${[imgBase, page.image].join('/')})` }
          ]"
        >
          <NuxtImg
            :src="[imgBase, page.image].join('/')"
            format="webp"
            loading="lazy"
          />
        </div>
        <div
          class="siteblock bg-white siteblock_content"
          :id="page.slug"
          v-if="delivery"
        >
          <div class="container">
            <div class="prose col-span-12 xl:col-span-6">
              <span v-html="delivery[0]"></span>
            </div>
            <div class="prose col-span-12 xl:col-span-6">
              <span v-html="delivery[1]"></span>
            </div>
          </div>
        </div>
      </template>
    </template>
  </div>
</template>