price from 1c

components/footer.vue

@@ -8,11 +8,19 @@ import yt from '@/assets/icons/youtube.svg'
 const icons = {
   'simple-icons:vk': vk,
   'simple-icons:telegram': tg,
-    'simple-icons:youtube': yt,
+  'simple-icons:youtube': yt
 }
 
-const { data: footerData } = await fetchData<Footer[]>(`footer/?ordering=small_text`, true)
+const { data: footerData } = await fetchData<Footer[]>(
-const { data: socialNetworkData } = await fetchData<SocialNetwork[]>(`social_network/`, true)
+  `footer`,
+  { ordering: 'small_text' },
+  true
+)
+const { data: socialNetworkData } = await fetchData<SocialNetwork[]>(
+  `social_network`,
+  {},
+  true
+)
 </script>
 <template>
   <div>
@@ -26,7 +34,9 @@ const { data: socialNetworkData } = await fetchData<SocialNetwork[]>(`social_net
         <div class="col-span-12 lg:col-span-6 xl:col-span-6 mb-12 lg:mb-0">
           <template v-for="item in footerData">
             <div class="footer-text" v-if="!item.small_text">
-                            <template v-for="p in item.text.replace(/\r\n/g, '\n').split('\n')">
+              <template
+                v-for="p in item.text.replace(/\r\n/g, '\n').split('\n')"
+              >
                 <p v-if="p.trim().length">{{ p }}</p>
               </template>
             </div>
@@ -35,11 +45,16 @@ const { data: socialNetworkData } = await fetchData<SocialNetwork[]>(`social_net
         <div class="col-span-12 xl:col-span-3">
           <div class="footer-text footer-text-social" v-if="socialNetworkData">
             <template v-for="item in socialNetworkData">
-                            <a :class="['footer-icon', { 'footer-icon-big': !item.icon }]" :href="item.link"
+              <a
-                                target="_blank">
+                :class="['footer-icon', { 'footer-icon-big': !item.icon }]"
+                :href="item.link"
+                target="_blank"
+              >
                 <template v-if="item.icon">
-                                    <component :is="icons[(item.icon.trim() as keyof typeof icons)]"
+                  <component
-                                        v-if="icons.hasOwnProperty(item.icon.trim())" />
+                    :is="icons[(item.icon.trim() as keyof typeof icons)]"
+                    v-if="icons.hasOwnProperty(item.icon.trim())"
+                  />
                   <Icon :name="item.icon" v-else />
                 </template>
                 <span class="footer-icon-text">{{ item.name }}</span>

components/header.vue

@@ -4,7 +4,7 @@ import k_logo from '@/assets/LOGO.svg'
 const { fetchData } = useApiFetch()
 const route = useRoute()
 
-const { data, status, error } = await fetchData<Menu[]>(`menu/`)
+const { data, status, error } = await fetchData<Menu[]>(`menu`)
 const menu = computed(() => {
     const menu = data.value?.find(el => el.type == 1)
     return (menu?.pages || []).sort((a, b) => a.order - b.order)

composables/api.ts

@@ -5,13 +5,14 @@ export function useApiFetch() {
     const apiBase = config.public.apiBase
     const prefix = config.public.apiPrefix
     
-    const fetchData = <T>(path: string, global = false) => {
+    const fetchData = <T>(path: string, queryParams: Record<string, any> = {}, global = false) => {
         const headers = new Headers()
         headers.set('Referer', config.public.baseUrl)
 
-        return useFetch<T>(`${apiBase}/${global ? 'gb' : prefix}/${path}`, {
+        return useFetch<T>(`${apiBase}/${global ? 'gb' : prefix}/${path}/`, {
             baseURL: config.public.baseUrl,
             headers,
+            query: queryParams, 
             onResponseError({ response }) {
                 console.log(response.status)
                 console.log(response.url)

error.vue

@@ -7,7 +7,7 @@ const { fetchData } = useApiFetch()
 
 import og_img from '/og_img.png'
 
-const { data: seo } = await fetchData<Seo[]>(`seo/`)
+const { data: seo } = await fetchData<Seo[]>(`seo`)
 useSeoMeta({
     title: seo.value && seo.value[0].title,
     ogTitle: seo.value && seo.value[0].title,

index.d.ts

@@ -62,11 +62,9 @@ type DiscountType = {
     max_quantitt?: number
     percent: number
 }
-type ApiCalcType = {
+type CalcItem = {
     id: number
     title: string
-    pillar: string
+    slug: string
-    pillar_base: string
+    base: number
-    lamelles_block: string
-    discount: DiscountType[]
 }

pages/index.vue

@@ -7,9 +7,10 @@ import { marked } from 'marked'
 
 import og_img from '/og_img.png'
 
-const { data: seo } = await fetchData<Seo[]>(`seo/`)
+const { data: seo } = await fetchData<Seo[]>(`seo`)
-const { data: menu_raw, status: menu_status } = await fetchData<Menu[]>(`menu/`)
+const { data: menu_raw, status: menu_status } = await fetchData<Menu[]>(`menu`)
-const { data: review } = await fetchData<Review[]>(`review/`)
+const { data: review } = await fetchData<Review[]>(`review`)
+const { data: calc_data } = await fetchData<CalcItem[]>(`calculator`)
 
 useSeoMeta({
   title: seo.value && seo.value[0].title,
@@ -30,6 +31,14 @@ const delivery = computed(() =>
     ?.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>
@@ -99,7 +108,7 @@ const delivery = computed(() =>
               <ModelScene type="bench" />
             </div>
             <div class="col-span-full xl:col-span-4 prose">
-              <span v-html="marked.parse(page.content || '')"></span>
+              <span v-html="setCalcData(page.content || '')"></span>
             </div>
           </div>
         </div>
@@ -120,7 +129,7 @@ const delivery = computed(() =>
         <div class="siteblock bg-white" :id="page.slug">
           <div class="container gap-4">
             <div class="col-span-full xl:col-span-8">
-              <span v-html="marked.parse(page.content || '')"></span>
+              <span v-html="setCalcData(page.content || '')"></span>
             </div>
             <div class="col-span-full xl:col-span-4 prose">
               <ModelScene type="table" />

utils/roubleSign.ts

@@ -0,0 +1,4 @@
+export default new Intl.NumberFormat('ru-RU', {
+    style: 'currency',
+    currency: 'RUB',
+});