121 lines
3.3 KiB
Vue
121 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
import type {
|
|
PageDataResourceGroup,
|
|
PageDataResourceGroupBtnInfo,
|
|
} from '#layers/types/api/pageData'
|
|
import type { ButtonType } from '#layers/types/components/button'
|
|
|
|
interface ButtonListProps {
|
|
resourcesData: PageDataResourceGroup[]
|
|
pageVerTmplSeq: number
|
|
}
|
|
|
|
const props = defineProps<ButtonListProps>()
|
|
|
|
const { gameData } = useGameDataStore()
|
|
const { locale } = useI18n()
|
|
const { sendLog, useAnalyticsLogDataDirect } = useAnalytics()
|
|
|
|
const BUTTON_TYPE_MAP = {
|
|
URL: {
|
|
_self: 'internal' as const,
|
|
_blank: 'external' as const,
|
|
},
|
|
DOWNLOAD: 'download' as const,
|
|
} as const
|
|
const DEFAULT_BUTTON_TYPE: ButtonType = 'action'
|
|
|
|
const getButtonType = (btnInfo: PageDataResourceGroupBtnInfo): ButtonType => {
|
|
const btnType = btnInfo?.detail?.btn_type
|
|
const btnTarget = btnInfo?.detail?.action?.link_target
|
|
|
|
if (btnType === 'URL' && btnTarget) {
|
|
return BUTTON_TYPE_MAP.URL[btnTarget] || DEFAULT_BUTTON_TYPE
|
|
}
|
|
|
|
if (btnType === 'DOWNLOAD') {
|
|
return BUTTON_TYPE_MAP.DOWNLOAD
|
|
}
|
|
|
|
return DEFAULT_BUTTON_TYPE
|
|
}
|
|
|
|
const getButtonBackgroundImage = (
|
|
btnInfo: PageDataResourceGroupBtnInfo
|
|
): string => {
|
|
const marketType = btnInfo?.detail?.market_type
|
|
const marketImageMap: Record<string, string> = {
|
|
google_play: '/images/common/btn_logo-google.svg',
|
|
app_store: '/images/common/btn_logo-app.svg',
|
|
pc: '/images/common/btn_logo-pc.svg',
|
|
}
|
|
|
|
if (marketType && marketImageMap[marketType]) {
|
|
return marketImageMap[marketType]
|
|
}
|
|
|
|
return ''
|
|
}
|
|
|
|
const handleButtonClick = (
|
|
btnInfo: PageDataResourceGroupBtnInfo,
|
|
index: any
|
|
) => {
|
|
sendLog(
|
|
locale.value,
|
|
useAnalyticsLogDataDirect(props.resourcesData[index], props.pageVerTmplSeq)
|
|
)
|
|
|
|
const marketType = btnInfo?.detail?.market_type
|
|
if (marketType) {
|
|
const url = gameData?.market_json[marketType]?.url
|
|
window.open(url, '_blank')
|
|
return
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
v-if="props.resourcesData?.length"
|
|
class="flex flex-wrap justify-center gap-3 md:gap-4"
|
|
>
|
|
<AtomsButton
|
|
v-for="(button, index) in props.resourcesData"
|
|
:key="index"
|
|
:type="getButtonType(button.btn_info)"
|
|
:target="button.btn_info?.detail?.action?.link_target"
|
|
:href="button.btn_info?.detail?.action?.url"
|
|
:rel="button.btn_info?.detail?.action?.rel"
|
|
:background-color="
|
|
getColorCode({
|
|
colorName: button.btn_info?.color_name_btn,
|
|
colorCode: button.btn_info?.color_code_btn,
|
|
})
|
|
"
|
|
:text-color="
|
|
getColorCode({
|
|
colorName: button.btn_info?.color_name_txt,
|
|
colorCode: button.btn_info?.color_code_txt,
|
|
})
|
|
"
|
|
:disabled="button.btn_info?.disabled"
|
|
:class="button.btn_info?.detail?.market_type ? 'btn-market' : ''"
|
|
:style="{
|
|
backgroundImage: `url(${getButtonBackgroundImage(button.btn_info)})`,
|
|
}"
|
|
@click="handleButtonClick(button.btn_info, index)"
|
|
>
|
|
{{ button.btn_info?.txt_btn_name }}
|
|
</AtomsButton>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
:deep(.btn-market) {
|
|
@apply flex items-start bg-[16px_50%] bg-[length:auto_28px] bg-no-repeat
|
|
min-w-[113px] pt-[22px] pl-[44px] pr-[22px] text-[11px]
|
|
md:min-w-[150px] md:pt-[30px] md:pl-[64px] md:pr-[28px] md:text-[12px] md:bg-[20px_50%] md:bg-[length:auto_40px];
|
|
}
|
|
</style>
|