153 lines
4.2 KiB
Vue
153 lines
4.2 KiB
Vue
<script setup lang="ts">
|
|
import type {
|
|
PageDataResourceGroup,
|
|
PageDataResourceGroupBtnInfo,
|
|
} from '#layers/types/api/pageData'
|
|
import type { ButtonType } from '#layers/types/components/button'
|
|
|
|
interface Props {
|
|
resourcesData: PageDataResourceGroup[]
|
|
pageVerTmplSeq: number
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
const { locale } = useI18n()
|
|
const modalStore = useModalStore()
|
|
const scrollStore = useScrollStore()
|
|
const breakpoints = useResponsiveBreakpoints()
|
|
const { sendLog, useAnalyticsLogDataDirect } = useAnalytics()
|
|
const { tm } = useI18n()
|
|
const device = useDevice()
|
|
|
|
const buttonList = computed<PageDataResourceGroup[]>(
|
|
() => props.resourcesData ?? []
|
|
)
|
|
|
|
const getButtonType = (btnInfo?: PageDataResourceGroupBtnInfo): ButtonType => {
|
|
const btnType = btnInfo?.detail?.btn_type
|
|
const target = btnInfo?.detail?.action?.link_target
|
|
|
|
if (btnType === 'URL' && target) {
|
|
return target === '_blank' ? 'external' : 'internal'
|
|
}
|
|
|
|
if (btnType === 'DOWNLOAD') return 'download'
|
|
|
|
return 'action'
|
|
}
|
|
|
|
const isRunButtonVisible = (btnInfo: PageDataResourceGroupBtnInfo): boolean => {
|
|
if (breakpoints.value?.isDesktop) return true
|
|
|
|
const marketType = btnInfo?.detail?.market_type
|
|
|
|
switch (marketType) {
|
|
case 'pc':
|
|
return false
|
|
case 'google_play':
|
|
return device.isAndroid
|
|
case 'app_store':
|
|
return device.isApple
|
|
default:
|
|
return true
|
|
}
|
|
}
|
|
|
|
const downloadZip = async (url: string, osType: number) => {
|
|
if (osType === 1 && breakpoints.value?.isMobile) {
|
|
modalStore.handleOpenAlert({ contentText: tm('Alert_Download_PC') })
|
|
return
|
|
}
|
|
|
|
const fileUrl = getResourceHost(url)
|
|
|
|
try {
|
|
const res = await $fetch(fileUrl, {
|
|
method: 'GET',
|
|
responseType: 'blob',
|
|
timeout: 10000,
|
|
})
|
|
|
|
const blob = new Blob([res as BlobPart], { type: 'application/zip' })
|
|
const blobUrl = URL.createObjectURL(blob)
|
|
const pathPart = fileUrl.split('/').pop()
|
|
const a = document.createElement('a')
|
|
|
|
a.href = blobUrl
|
|
a.download = pathPart ?? 'download.zip'
|
|
a.click()
|
|
|
|
// 메모리 정리
|
|
URL.revokeObjectURL(blobUrl)
|
|
|
|
modalStore.handleOpenAlert({ contentText: tm('Alert_Download_Success') })
|
|
} catch (err) {
|
|
console.error(err)
|
|
modalStore.handleOpenAlert({ contentText: tm('Alert_Download_Error') })
|
|
}
|
|
}
|
|
|
|
const handleButtonClick = (button: PageDataResourceGroup) => {
|
|
// 로그
|
|
sendLog(locale.value, useAnalyticsLogDataDirect(button, props.pageVerTmplSeq))
|
|
|
|
const btnDetail = button.btn_info?.detail
|
|
|
|
switch (btnDetail?.btn_type) {
|
|
case 'POP':
|
|
modalStore.handleOpenContent({
|
|
contentTitle: btnDetail?.title,
|
|
tabInfo: btnDetail?.tab_info,
|
|
})
|
|
return
|
|
case 'ANCHOR':
|
|
scrollStore.scrollToAnchor(btnDetail?.page_ver_tmpl_name_en ?? '')
|
|
return
|
|
case 'MOV':
|
|
modalStore.handleOpenYoutube({ youtubeUrl: btnDetail.url ?? '' })
|
|
return
|
|
case 'DOWNLOAD':
|
|
downloadZip(btnDetail?.file_path ?? '', btnDetail?.os_type ?? 0)
|
|
return
|
|
default:
|
|
return
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
v-if="buttonList.length"
|
|
class="flex flex-wrap justify-center gap-3 md:gap-4"
|
|
>
|
|
<template v-for="(button, index) in buttonList" :key="index">
|
|
<template v-if="button.btn_info?.detail?.btn_type === 'RUN'">
|
|
<BlocksButtonLauncher
|
|
v-if="isRunButtonVisible(button.btn_info)"
|
|
type="duplication"
|
|
:platform="button.btn_info?.detail?.market_type"
|
|
:background-color="getColorCodeFromData(button.btn_info, 'btn')"
|
|
:text-color="getColorCodeFromData(button.btn_info, 'txt')"
|
|
@click="handleButtonClick(button)"
|
|
>
|
|
{{ button.btn_info?.txt_btn_name }}
|
|
</BlocksButtonLauncher>
|
|
</template>
|
|
|
|
<AtomsButton
|
|
v-else
|
|
:type="getButtonType(button.btn_info)"
|
|
:href="button.btn_info?.detail?.action?.url"
|
|
:target="button.btn_info?.detail?.action?.link_target"
|
|
:background-color="getColorCodeFromData(button.btn_info, 'btn')"
|
|
:text-color="getColorCodeFromData(button.btn_info, 'txt')"
|
|
:disabled="button.btn_info?.detail?.btn_type === 'DEACTIVE'"
|
|
@click="handleButtonClick(button)"
|
|
>
|
|
{{ button.btn_info?.txt_btn_name }}
|
|
</AtomsButton>
|
|
</template>
|
|
</div>
|
|
</template>
|