74 lines
2.2 KiB
Vue
74 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import { SplideSlide } from '@splidejs/vue-splide'
|
|
import {
|
|
getComponentContainer,
|
|
getComponentGroupAry,
|
|
getComponentGroup,
|
|
hasComponentGroup,
|
|
} from '#layers/utils/dataUtil'
|
|
import type { PageDataTemplateComponents } from '#layers/types/api/pageData'
|
|
|
|
interface Props {
|
|
components: PageDataTemplateComponents
|
|
pageVerTmplSeq: string
|
|
}
|
|
|
|
const { locale } = useI18n()
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
const { sendLog, useAnalyticsLogDataDirect } = useAnalytics()
|
|
|
|
const slideData = computed(() => {
|
|
return getComponentContainer(props.components, 'group_sets')
|
|
})
|
|
|
|
const onArrowClick = direction => {
|
|
const arrowGroupAry = getComponentGroupAry(props.components, 'arrow')
|
|
const logTracking = arrowGroupAry?.[direction === 'prev' ? 0 : 1]
|
|
sendLog(locale.value, useAnalyticsLogDataDirect(logTracking, 1))
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<section class="section-container">
|
|
<BlocksSlideFade
|
|
v-if="slideData"
|
|
:arrows="true"
|
|
:pagination="true"
|
|
class="h-full"
|
|
@arrow-click="onArrowClick"
|
|
>
|
|
<SplideSlide v-for="(item, index) in slideData" :key="index">
|
|
<WidgetsBackground
|
|
v-if="hasComponentGroup(item, 'background')"
|
|
:resources-data="getComponentGroup(item, 'background')"
|
|
/>
|
|
<div class="section-content gap-3 md:gap-5">
|
|
<WidgetsSubTitle
|
|
v-if="hasComponentGroup(item, 'subTitle')"
|
|
:resources-data="getComponentGroup(item, 'subTitle')"
|
|
class="title-sm"
|
|
/>
|
|
<WidgetsMainTitle
|
|
v-if="hasComponentGroup(item, 'mainTitle')"
|
|
:resources-data="getComponentGroup(item, 'mainTitle')"
|
|
class="title-lg"
|
|
/>
|
|
<WidgetsDescription
|
|
v-if="hasComponentGroup(item, 'description')"
|
|
:resources-data="getComponentGroup(item, 'description')"
|
|
class="description-lg"
|
|
/>
|
|
<WidgetsButtonList
|
|
v-if="hasComponentGroup(item, 'buttonList')"
|
|
:resources-data="getComponentGroupAry(item, 'buttonList')"
|
|
:page-ver-tmpl-seq="Number(props.pageVerTmplSeq)"
|
|
class="mt-[28px] md:mt-[52px]"
|
|
/>
|
|
</div>
|
|
</SplideSlide>
|
|
</BlocksSlideFade>
|
|
</section>
|
|
</template>
|