Skip to content

Instantly share code, notes, and snippets.

@akccakcctw

akccakcctw/README.md

Last active November 29, 2023 07:36
Show Gist options
  • Save akccakcctw/2261febc790abdb1333d6f94f62f95f7 to your computer and use it in GitHub Desktop.
Save akccakcctw/2261febc790abdb1333d6f94f62f95f7 to your computer and use it in GitHub Desktop.
Download ZIP
POI ViewBuilder Template (pc / mweb)
Raw
README.md

用來記錄及同步 POI page template 格式

Raw
mweb_poi_template.js
// 設計稿
// https://www.figma.com/file/2ub8C0cs5Iqs1MPciHjF6b/3-3-POI-Page?type=design&node-id=8238-69354&mode=dev
export const poiTemplateMobile = {
'configKey': 'poi_page_template_data',
'name': 'poi_page_template_data',
'description': 'POI page template 樣板',
'cacheTtl': 60,
'configSchema': {},
'defaultVariant': {
'layout': {
version: '1.3.0',
component: 'LayoutList',
data: {
direction: 'vertical',
},
items: [
{
component: 'ImagesViewer',
data: {
layout: 'mobile',
image_list: [
{
url: 'https://placehold.co/600x400/EEE/31343C',
alt: '600x400 圖片',
},
{
url: 'https://placehold.co/600x400/EEE/31343C',
alt: '600x400 圖片',
},
{
url: 'https://placehold.co/600x400/EEE/31343C',
alt: '600x400 圖片',
},
],
},
},
{
component: 'ContentCard',
props: {
margin_top: '-10',
},
items: [
{
component: 'Breadcrumbs',
data: {
items: [
{
name: '首頁',
url: 'www.kkday.com',
},
{
name: '日本',
url: 'www.kkday.com',
},
{
name: '東京',
url: 'www.kkday.com',
},
{
name: '富士山',
},
],
},
},
{
component: 'LayoutList',
data: {
direction: 'vertical',
},
props: {
gap: 6,
padding_x: 7,
padding_y: 6,
},
items: [
{
component: 'LayoutList',
data: {
direction: 'vertical',
},
props: {
gap: 4,
},
items: [
{
component: 'Title',
data: {
text: '富士山',
},
},
{
component: 'Paragraph',
data: {
text: '富士山是日本一座橫跨靜岡縣和山梨縣的活火山，位於東京西南方約80公里處，主峰海拔3776公尺，2002年8月，經日本國土地理院重新測量後，為3775.63公尺，是日本國內的最高峰。 富士山頂於冬季積雪，直至次年6、7月才會融化，在管理上屬於本州地區的富士箱根伊豆國立公園範圍內。富士山是日本一座橫跨靜岡縣和山梨縣的活火山，位於東京西南方約80公里處，主峰海拔3776公尺，2002年8月，經日本重國土地理院重新測量後',
modal_title: '景點介紹',
more_text: '更多', // {{lang@POIPg_POIDescMoreBtn}} dynamic data 傳入
limit: '', // 限制行數或字數，超過的部分顯示 「...更多」
},
},
],
},
{
component: 'Divider',
},
{
component: 'LayoutList',
data: {
direction: 'vertical',
},
items: [
{
component: 'IconWithText',
props: {
gap: 4,
},
data: {
icon: 'dsToken@ic_clock_line',
text: '開放時間(當地時間)：08:30 - 22:00',
},
},
{
component: 'IconWithText',
props: {
gap: 4,
},
data: {
icon: 'dsToken@ic_location_line',
text: '418-0112 日本富士宮市靜岡縣北山',
},
},
],
},
],
},
{
component: 'Title',
props: {
padding_top: 6,
padding_x: 7,
},
data: {
text: '富士山推薦玩樂',
},
},
{
component: 'LayoutList',
data: {
direction: 'vertical',
},
props: {
padding_x: 7,
padding_y: 7,
padding_bottom: 6,
gap: 8,
},
items: [
{
component: 'ProductListGroup',
items: [
{
component: 'BlueContainer',
data: {
title: '精選門票與行程',
more_text: '查看更多',
cat_main_keys: [],
cat_keys: [],
city_keys: [],
},
items: [
{
component: 'ProductList',
data: {
cat_main_keys: [],
cat_keys: [],
city_keys: [],
},
},
],
},
],
},
{
component: 'ProductListGroup',
items: [
{
component: 'BlueContainer',
data: {
title: '最佳交通方式',
more_text: '查看更多',
cat_main_keys: [],
cat_keys: [],
city_keys: [],
},
items: [
{
component: 'ProductList',
data: {
cat_main_keys: [],
cat_keys: [],
city_keys: [],
},
},
],
},
],
},
{
component: 'ProductListGroup',
items: [
{
component: 'BlueContainer',
data: {
title: '必訪美食推薦',
more_text: '查看更多',
cat_main_keys: [],
cat_keys: [],
city_keys: [],
},
items: [
{
component: 'ProductList',
data: {
cat_main_keys: [],
cat_keys: [],
city_keys: [],
},
},
],
},
],
},
],
},
// 旅遊攻略
{
component: 'LayoutList',
props: {
padding_x: 7,
padding_y: 6,
gap: 7,
},
items: [
{
component: 'Title',
data: {
text: '旅遊攻略',
},
},
{
component: 'GuideList', // pc: carousel, mobile: slider
items: [
{
component: 'GuideItem',
data: {
display_title: '2023/03/16',
display_sub_title: '交通攻略',
image_url: 'https://image.kkday.com/v2/image/get/s1.kkday.com/campaign_2800/20230509024557_Hdub3/jpg',
description: '關西地區鐵路周遊券JR PASS攻略》使用範圍/常見問題/價格比較！省錢遊遍京阪神良/和歌山/姬路城',
},
},
{
component: 'GuideItem',
data: {
display_title: '2023/03/16',
display_sub_title: '交通攻略',
image_url: 'https://image.kkday.com/v2/image/get/s1.kkday.com/campaign_2800/20230509024557_Hdub3/jpg',
description: '關西地區鐵路周遊券JR PASS攻略》使用範圍/常見問題/價格比較！省錢遊遍京阪神良/和歌山/姬路城',
},
},
],
},
],
},
// FAQ
{
component: 'LayoutList',
props: {
padding_x: 7,
padding_y: 6,
gap: 7,
},
items: [
{
component: 'Title',
props: {
padding_y: 4,
},
data: {
text: '富士山常見問題',
},
},
{
componnent: 'Faq',
items: [
{
component: 'CollapseHTMLCard',
data: {
display_title: '富士山附近有哪些餐廳？？',
body: `富士山餐廳以近到遠排序：<ul><li>(0.06 公里) Imo-pi-pi</li> <li>(0.18 公里) Suzukien Asakusa Honten</li> <li>(0.21 公里) 拉面-Yoroi屋</li> <li>(0.20 公里) 花月堂（浅草本店）</li> <li>(0.15 公里) Yoshinoya'</li></ul>`,
},
},
{
component: 'CollapseHTMLCard',
data: {
display_title: '富士山附近有哪些餐廳？？',
body: `富士山餐廳以近到遠排序：<ul><li>(0.06 公里) Imo-pi-pi</li> <li>(0.18 公里) Suzukien Asakusa Honten</li> <li>(0.21 公里) 拉面-Yoroi屋</li> <li>(0.20 公里) 花月堂（浅草本店）</li> <li>(0.15 公里) Yoshinoya'</li></ul>`,
},
},
],
},
],
},
],
},
{
component: 'LayoutList',
data: {
direction: 'vertical',
},
props: {
gap: 7,
padding_x: 0,
padding_y: 7,
},
items: [
{
component: 'LayoutList',
data: {
direction: 'horizontal',
},
items: [
{
component: 'LayoutList',
props: {
gap: 5,
},
items: [
{
component: 'Section', // 包含背景顏色的區塊
props: {
gap: 3, // dsToken@spacing_3
padding: 6,
border_radius: 'lg', // dsToken@radius_lg
},
items: [
{
component: 'SectionTitle',
data: {
text: '景點介紹',
},
},
],
},
{
component: 'Section',
props: {
gap: 4,
padding: 6,
border_radius: 'lg',
},
items: [
],
},
],
},
],
},
],
},
// 商品列表區塊
{
component: 'LayoutList',
props: {
padding_x: 0,
padding_y: 7,
gap: 10,
},
items: [
{
component: 'ProductListGroup',
items: [
{
component: 'Title',
data: {
text: '富士山推薦玩樂',
},
},
{
component: '',
items: [
{
component: 'BlueContainer', // component 點擊後，emit 點擊事件及 data 出來
data: {
title: '精選門票與行程',
more_text: '查看更多',
cat_main_keys: [],
cat_keys: [],
city_keys: [],
},
items: [
{
component: 'ProductList', // pc: carousel, mobile: slider
data: {
cat_main_keys: [],
cat_keys: [],
city_keys: [],
},
},
]
},
],
},
{
component: '',
items: [
{
component: 'BlueContainer', // component 點擊後，emit 點擊事件及 data 出來
data: {
title: '最佳交通方式',
more_text: '查看更多',
cat_main_keys: [],
cat_keys: [],
city_keys: [],
},
items: [
{
component: 'ProductList', // pc: carousel, mobile: slider
data: {
cat_main_keys: [],
cat_keys: [],
city_keys: [],
},
},
],
},
],
},
],
},
],
},
{
component: 'LayoutList',
props: {
padding_y: 7,
gap: 7,
},
items: [
{
component: 'Title',
data: {
text: '旅遊攻略',
},
},
{
component: 'GuideList', // pc: carousel, mobile: slider
items: [
{
component: 'GuideItem',
data: {
display_title: '2023/03/16',
display_sub_title: '交通攻略',
image_url: 'https://image.kkday.com/v2/image/get/s1.kkday.com/campaign_2800/20230509024557_Hdub3/jpg',
description: '關西地區鐵路周遊券JR PASS攻略》使用範圍/常見問題/價格比較！省錢遊遍京阪神良/和歌山/姬路城',
},
},
{
component: 'GuideItem',
data: {
display_title: '2023/03/16',
display_sub_title: '交通攻略',
image_url: 'https://image.kkday.com/v2/image/get/s1.kkday.com/campaign_2800/20230509024557_Hdub3/jpg',
description: '關西地區鐵路周遊券JR PASS攻略》使用範圍/常見問題/價格比較！省錢遊遍京阪神良/和歌山/姬路城',
},
},
],
},
],
},
{
component: 'LayoutList',
props: {
padding_y: 7,
gap: 7,
},
items: [
{
component: 'Title',
props: {
padding_y: 4,
},
data: {
text: '富士山常見問題',
},
},
{
componnent: 'Faq',
items: [
{
component: 'CollapseHTMLCard',
data: {
display_title: '富士山附近有哪些餐廳？？',
body: `富士山餐廳以近到遠排序：<ul><li>(0.06 公里) Imo-pi-pi</li> <li>(0.18 公里) Suzukien Asakusa Honten</li> <li>(0.21 公里) 拉面-Yoroi屋</li> <li>(0.20 公里) 花月堂（浅草本店）</li> <li>(0.15 公里) Yoshinoya'</li></ul>`,
},
},
{
component: 'CollapseHTMLCard',
data: {
display_title: '富士山附近有哪些餐廳？？',
body: `富士山餐廳以近到遠排序：<ul><li>(0.06 公里) Imo-pi-pi</li> <li>(0.18 公里) Suzukien Asakusa Honten</li> <li>(0.21 公里) 拉面-Yoroi屋</li> <li>(0.20 公里) 花月堂（浅草本店）</li> <li>(0.15 公里) Yoshinoya'</li></ul>`,
},
},
],
},
],
},
],
},
},
'cases': [],
};
Raw
pc_poi_template.js
// 設計稿
// https://www.figma.com/file/2ub8C0cs5Iqs1MPciHjF6b/3-3-POI-Page?type=design&node-id=8218-58231&mode=dev
export const poiTemplatePc = {
'configKey': 'poi_page_template_data',
'name': 'poi_page_template_data',
'description': 'POI page template 樣板',
'cacheTtl': 60,
'configSchema': {},
'defaultVariant': {
'layout': {
'version': '1.3.0',
'component': 'LayoutList',
'items': [
// hero 區塊
{
component: 'LayoutList',
data: {
direction: 'vertical',
},
props: {
gap: 7,
padding_x: 0,
padding_y: 7,
},
items: [
{
component: 'Title',
data: {
text: '富士山',
},
},
{
component: 'LayoutList',
data: {
direction: 'horizontal',
},
items: [
{
component: 'ImagesViewer',
data: {
layout: 'desktop', // mobile
image_list: [
{
url: 'https://placehold.co/600x400/EEE/31343C',
alt: '600x400 圖片',
},
{
url: 'https://placehold.co/600x400/EEE/31343C',
alt: '600x400 圖片',
},
{
url: 'https://placehold.co/600x400/EEE/31343C',
alt: '600x400 圖片',
},
],
},
},
{
component: 'LayoutList',
props: {
gap: 5,
},
items: [
{
component: 'Section', // 包含背景顏色的區塊
props: {
gap: 3, // dsToken@spacing_3
padding: 6,
border_radius: 'lg', // dsToken@radius_lg
},
items: [
{
component: 'SectionTitle',
data: {
text: '景點介紹',
},
},
{
component: 'Paragraph',
data: {
text: '富士山是日本一座橫跨靜岡縣和山梨縣的活火山，位於東京西南方約80公里處，主峰海拔3776公尺，2002年8月，經日本國土地理院重新測量後，為3775.63公尺，是日本國內的最高峰。 富士山頂於冬季積雪，直至次年6、7月才會融化，在管理上屬於本州地區的富士箱根伊豆國立公園範圍內。富士山是日本一座橫跨靜岡縣和山梨縣的活火山，位於東京西南方約80公里處，主峰海拔3776公尺，2002年8月，經日本重國土地理院重新測量後',
modal_title: '景點介紹',
more_text: '更多', // {{lang@POIPg_POIDescMoreBtn}} dynamic data 傳入
limit: '', // 限制行數或字數，超過的部分顯示 「...更多」
},
},
],
},
{
component: 'Section',
props: {
gap: 4,
padding: 6,
border_radius: 'lg',
},
items: [
{
component: 'IconWithText',
props: {
gap: 4,
},
data: {
icon: 'dsToken@ic_clock_line',
text: '{{lang@}}', // 開放時間(當地時間)：08:30 - 22:00
},
},
],
},
],
},
],
},
],
},
// 商品列表區塊
{
component: 'LayoutList',
props: {
padding_y: 7,
gap: 10,
},
items: [
{
component: 'Title',
data: {
text: '富士山推薦玩樂',
},
},
{
component: 'ProductListGroup',
items: [
{
component: 'BlueContainer', // component 點擊後，emit 點擊事件及 data 出來
data: {
title: '精選門票與行程',
more_text: '查看更多',
cat_main_keys: [],
cat_keys: [],
city_keys: [],
},
items: [
{
component: 'ProductList', // pc: carousel, mobile: slider
data: {
cat_main_keys: [],
cat_keys: [],
city_keys: [],
},
},
],
},
],
},
{
component: 'ProductListGroup',
items: [
{
component: 'BlueContainer', // component 點擊後，emit 點擊事件及 data 出來
data: {
title: '最佳交通方式',
more_text: '查看更多',
cat_main_keys: [],
cat_keys: [],
city_keys: [],
},
items: [
{
component: 'ProductList', // pc: carousel, mobile: slider
data: {
cat_main_keys: [],
cat_keys: [],
city_keys: [],
},
},
],
},
],
},
],
},
{
component: 'LayoutList',
props: {
padding_y: 7,
gap: 7,
},
items: [
{
component: 'Title',
data: {
text: '旅遊攻略',
},
},
{
component: 'GuideList', // pc: carousel, mobile: slider
items: [
{
component: 'GuideItem',
data: {
display_title: '2023/03/16',
display_sub_title: '交通攻略',
image_url: 'https://image.kkday.com/v2/image/get/s1.kkday.com/campaign_2800/20230509024557_Hdub3/jpg',
description: '關西地區鐵路周遊券JR PASS攻略》使用範圍/常見問題/價格比較！省錢遊遍京阪神良/和歌山/姬路城',
},
},
{
component: 'GuideItem',
data: {
display_title: '2023/03/16',
display_sub_title: '交通攻略',
image_url: 'https://image.kkday.com/v2/image/get/s1.kkday.com/campaign_2800/20230509024557_Hdub3/jpg',
description: '關西地區鐵路周遊券JR PASS攻略》使用範圍/常見問題/價格比較！省錢遊遍京阪神良/和歌山/姬路城',
},
},
],
},
],
},
{
component: 'LayoutList',
props: {
padding_y: 7,
gap: 7,
},
items: [
{
component: 'Title',
props: {
padding_y: 4,
},
data: {
text: '富士山常見問題',
},
},
{
componnent: 'Faq',
items: [
{
component: 'CollapseHTMLCard',
data: {
display_title: '富士山附近有哪些餐廳？？',
body: `富士山餐廳以近到遠排序：<ul><li>(0.06 公里) Imo-pi-pi</li> <li>(0.18 公里) Suzukien Asakusa Honten</li> <li>(0.21 公里) 拉面-Yoroi屋</li> <li>(0.20 公里) 花月堂（浅草本店）</li> <li>(0.15 公里) Yoshinoya'</li></ul>`,
},
},
{
component: 'CollapseHTMLCard',
data: {
display_title: '富士山附近有哪些餐廳？？',
body: `富士山餐廳以近到遠排序：<ul><li>(0.06 公里) Imo-pi-pi</li> <li>(0.18 公里) Suzukien Asakusa Honten</li> <li>(0.21 公里) 拉面-Yoroi屋</li> <li>(0.20 公里) 花月堂（浅草本店）</li> <li>(0.15 公里) Yoshinoya'</li></ul>`,
},
},
],
},
],
},
],
},
},
'cases': [],
};
@guanhuawang7788
Copy link

這個搬進 props?

direction: 'vertical'

@akccakcctw
Copy link
Author

這個搬進 props?

direction: 'vertical'

可以對焦一下 props 和 data 用途

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment