Files
your-gold/components/section/InvestmentZone.vue

182 lines
5.8 KiB
Vue

<template>
<UiContainer class="space-25-75">
<h2 class="h2-bold-bounded">
<span
v-for="(item, index) in component.front_section_lang[0].data.main_title"
:key="index"
:class="[
item.highlight
? 'text-accent-green-light dark:text-accent-green-dark'
: '',
'inline',
]"
>
{{ item.text }}
<span
v-if="
index !== component.front_section_lang[0].data.main_title.length - 1
"
/>
</span>
</h2>
<div class="space-25-55-75">
<p>{{ component.front_section_lang[0].data.main_description }}</p>
<h4 class="h4-uppercase-bold-inter">
{{ component.front_section_lang[0].data.section_title }}
</h4>
</div>
<!-- products -->
<div class="space-25-55-75 flex flex-col items-center">
<div
:class="[
'sm:mx-[50px] md:mx-0 xl:mx-[92px] flex items-stretch',
itemCount === 1 ? 'justify-center' : 'justify-between gap-2',
]"
>
<Product v-for="product in productStore.productList" :key="product.id" :product="product" />
</div>
<nuxt-link :to="{ name: `id-slug___${$i18n.locale}`, params: { id: menuStore.getShopMenu()?.id, slug: menuStore.getShopMenu()?.front_menu_lang.at(0)?.link_rewrite } }">
<UiButtonArrow type="fill" :arrow="true">
{{ $t("eshop") }}
</UiButtonArrow>
</nuxt-link>
</div>
<!-- calculator-block -->
<div
class="flex flex-col xl:flex-row items-stretch gap-6 sm:gap-2 pt-5 sm:p-0 space-25-55"
>
<div class="flex flex-col space-y-[55px] sm:justify-between">
<div class="space-25-55">
<p>{{ component.front_section_lang[0].data.section_description }}</p>
<h4 class="h4-uppercase-bold-inter">
{{ component.front_section_lang[0].data.info_title }}
</h4>
<p>{{ component.front_section_lang[0].data.info_description }}</p>
</div>
<h4 class="h4-uppercase-bold-inter">
{{ component.front_section_lang[0].data.cta_title }}
</h4>
</div>
<!-- calculator -->
<div
class="w-full md:min-w-[680px] p-[25px] md:p-[50px] border border-button rounded-2xl block"
>
<h2 class="h2-bold-bounded text-center mb-10 sm:mb-20">
{{ component.front_section_lang[0].data.calculator_title }}
</h2>
<div class="mb-14 flex flex-col gap-8 sm:gap-14">
<div class="flex flex-col gap-4">
<div class="flex justify-between">
<p>{{ $t("monthly_savings") }}</p>
<p class="text-accent-green-light dark:text-accent-green-dark font-bold">
{{ formater.price(store.monthlySavings) }}
</p>
</div>
<input v-model="store.monthlySavings" type="range" :max="store.getMaxAmount" :min="store.getMinAmount" class="w-full accent-button cursor-pointer" @change="store.getCalculator()">
</div>
<div class="flex flex-col gap-4">
<div class="flex justify-between">
<p>{{ $t("storage_period_years") }}</p>
<p
class="text-accent-green-light dark:text-accent-green-dark font-bold"
>
{{ store.storagePeriod }}
</p>
</div>
<input v-model="store.storagePeriod" type="range" max="20" class="w-full accent-button cursor-pointer" @change="store.getCalculator()">
</div>
</div>
<div
class="flex flex-col items-start sm:flex-row gap-6 sm:gap-1 justify-between sm:items-center"
>
<div class="">
<p>{{ $t("expected_savings_value") }}</p>
<h2
class="h2-bold-bounded text-accent-green-light dark:text-accent-green-dark"
>
{{ formater.price(store.totalInvestment) }}
</h2>
</div>
<nuxt-link :to="{ name: `id-slug___${$i18n.locale}`, params: { id: menuStore.getInvestmentCalculatorMenu()?.id, slug: menuStore.getInvestmentCalculatorMenu()?.front_menu_lang.at(0)?.link_rewrite } }">
<UiButtonArrow :arrow="true" type="fill" class="mx-auto sm:m-0">
{{ component.front_section_lang[0].data.button }}
</UiButtonArrow>
</nuxt-link>
</div>
</div>
</div>
</UiContainer>
</template>
<script lang="ts" setup>
import Product from './Product.vue'
defineProps<{
component: {
id: number
name: string
img: string[]
component_name: string
is_no_lang: boolean
page_name: string
front_section_lang: {
data: {
main_title: {
text: string
highlight: boolean
}[]
main_description: string
section_title: string
section_description: string
info_title: string
info_description: string
cta_title: string
calculator_title: string
button: string
}
id_front_section: number
id_lang: number
}[]
}
}>()
const store = useStore()
const menuStore = useMenuStore()
const { $session } = useNuxtApp()
const itemCount = ref(4)
const productStore = useProductStore()
const formater = useFormater(useNuxtApp())
async function updateItemCount() {
const width = window.innerWidth
if (width >= 1800) itemCount.value = 5
else if (width >= 1600) itemCount.value = 4
else if (width >= 1200) itemCount.value = 3
else if (width >= 640) itemCount.value = 2
else itemCount.value = 1
}
watch(itemCount, async () => {
await productStore.getList(itemCount.value)
})
watch($session.cookieData, async () => {
await productStore.getList(itemCount.value)
})
onMounted(async () => {
await updateItemCount()
window.addEventListener('resize', updateItemCount)
})
onBeforeUnmount(() => {
window.removeEventListener('resize', updateItemCount)
})
</script>