mini-shater/pages/index.vue

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

import { marked } from 'marked'

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`)

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>
    <Seo />
    <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>