115 lines
3.6 KiB
Vue
115 lines
3.6 KiB
Vue
<script setup lang="ts">
|
|
import { SplideSlide } from '@splidejs/vue-splide'
|
|
import {
|
|
getComponentContainer,
|
|
getComponentGroup,
|
|
} from '#layers/utils/dataUtil'
|
|
import type { Splide as SplideType } from '@splidejs/splide'
|
|
import type { PageDataTemplateComponents } from '#layers/types/api/pageData'
|
|
import type { OperateGroupItem } from '#layers/types/api/resourcesData'
|
|
|
|
interface Props {
|
|
components: PageDataTemplateComponents
|
|
pageVerTmplSeq: number
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
const pageDataStore = usePageDataStore()
|
|
const { getResourcesData } = useResourcesData()
|
|
const { locale } = useI18n()
|
|
const { sendLog, useAnalyticsLogDataDirect } = useAnalytics()
|
|
|
|
const { pageData } = storeToRefs(pageDataStore)
|
|
|
|
const backgroundData = computed(() =>
|
|
getComponentGroup(props.components, 'background')
|
|
)
|
|
const mainTitleData = computed(() =>
|
|
getComponentGroup(props.components, 'mainTitle')
|
|
)
|
|
|
|
// const buttonListData = ref(
|
|
// getComponentGroupAry(slideData?.value[0], 'buttonList')
|
|
// )
|
|
|
|
const { data: slideData } = await useAsyncData(
|
|
`gr-board-01-resources-${pageData.value?.page_seq}-${pageData.value?.page_ver}-${props.pageVerTmplSeq}`,
|
|
async () => {
|
|
if (!pageData.value?.page_seq || !pageData.value?.page_ver) {
|
|
return []
|
|
}
|
|
|
|
const operateGroupList = await getResourcesData({
|
|
pageSeq: pageData.value.page_seq,
|
|
pageVer: pageData.value.page_ver,
|
|
pageVerTmplSeq: props.pageVerTmplSeq,
|
|
langCode: locale.value,
|
|
})
|
|
|
|
console.log('operateGroupList', operateGroupList)
|
|
|
|
const bannerList = getComponentContainer(operateGroupList, 'bannerList', {
|
|
hasGroup: true,
|
|
minLength: 4,
|
|
}) as OperateGroupItem[]
|
|
|
|
return bannerList
|
|
},
|
|
{
|
|
default: () => [],
|
|
server: false,
|
|
}
|
|
)
|
|
|
|
const onArrowClick = (direction, targetIndex) => {
|
|
const arrowGroupAry = getComponentGroupAry(props.components, 'arrow')
|
|
const logTracking = arrowGroupAry?.[direction === 'prev' ? 0 : 1]
|
|
sendLog(locale.value, useAnalyticsLogDataDirect(logTracking, 1))
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<section class="relative py-[80px] md:py-[120px]">
|
|
<WidgetsBackground v-if="backgroundData" :resources-data="backgroundData" />
|
|
<div class="section-content px-0">
|
|
<WidgetsMainTitle
|
|
v-if="mainTitleData"
|
|
:resources-data="mainTitleData"
|
|
class="title-md"
|
|
/>
|
|
<BlocksSlideDefault
|
|
v-if="slideData"
|
|
:slide-item-length="slideData?.length"
|
|
:pagination="false"
|
|
class="mt-[24px] md:mt-[48px]"
|
|
@arrow-click="onArrowClick"
|
|
>
|
|
<SplideSlide v-for="(item, index) in slideData" :key="index">
|
|
<div class="slide-inner border-line">
|
|
<BlocksVisualContent
|
|
:resources-data="getComponentGroup(item, 'imgList')"
|
|
:page-ver-tmpl-seq="props.pageVerTmplSeq"
|
|
object-fit="cover"
|
|
:alt="getComponentGroup(item, 'subTitle')?.display?.text"
|
|
/>
|
|
</div>
|
|
</SplideSlide>
|
|
</BlocksSlideDefault>
|
|
<!-- <WidgetsButtonList
|
|
v-if="buttonListData"
|
|
:resources-data="buttonListData"
|
|
:page-ver-tmpl-seq="props.pageVerTmplSeq"
|
|
class="mt-[40px] md:mt-[56px]"
|
|
/> -->
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.section-container {
|
|
@apply before:hidden md:before:block before:content-[''] before:absolute before:top-0 before:left-0 before:w-[104px] before:h-full before:bg-gradient-to-l from-transparent to-[rgba(0,0,0,0.7)]
|
|
after:hidden md:after:block after:content-[''] after:absolute after:top-0 after:right-0 after:w-[104px] after:h-full after:bg-gradient-to-r from-transparent to-[rgba(0,0,0,0.7)];
|
|
}
|
|
</style>
|