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

Revisions

  1. akccakcctw revised this gist Nov 29, 2023. 1 changed file with 23 additions and 25 deletions.
    48 changes: 23 additions & 25 deletions pc_poi_template.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    // 設計稿
    // https://www.figma.com/file/2ub8C0cs5Iqs1MPciHjF6b/3-3-POI-Page?type=design&node-id=8218-58231&mode=dev
    export const poiTemplate = {
    export const poiTemplatePc = {
    'configKey': 'poi_page_template_data',
    'name': 'poi_page_template_data',
    'description': 'POI page template 樣板',
    @@ -131,51 +131,49 @@ export const poiTemplate = {
    items: [

    {
    component: 'BlueHeader', // component 點擊後，emit 點擊事件及 data 出來
    component: 'BlueContainer', // component 點擊後，emit 點擊事件及 data 出來
    data: {
    title: '精選門票與行程',
    more_text: '查看更多',
    cat_main_keys: [],
    cat_keys: [],
    city_keys: [],
    },
    },
    {
    component: 'ProductList', // pc: carousel, mobile: slider (看要定一個 component 還是兩個)
    data: {
    id_list: [
    '28863',
    '28925',
    '29762',
    '133316',
    ],
    },
    items: [
    {
    component: 'ProductList', // pc: carousel, mobile: slider
    data: {
    cat_main_keys: [],
    cat_keys: [],
    city_keys: [],
    },
    },
    ],
    },
    ],
    },
    {
    component: 'ProductListGroup',
    items: [
    {
    component: 'BlueHeader', // component 點擊後，emit 點擊事件及 data 出來
    component: 'BlueContainer', // component 點擊後，emit 點擊事件及 data 出來
    data: {
    title: '最佳交通方式',
    more_text: '查看更多',
    cat_main_keys: [],
    cat_keys: [],
    city_keys: [],
    },
    },
    {
    component: 'ProductList', // pc: carousel, mobile: slider (看要定一個 component 還是兩個)
    data: {
    id_list: [
    '28863',
    '28925',
    '29762',
    '133316',
    ],
    },
    items: [
    {
    component: 'ProductList', // pc: carousel, mobile: slider
    data: {
    cat_main_keys: [],
    cat_keys: [],
    city_keys: [],
    },
    },
    ],
    },
    ],
    },
  2. akccakcctw revised this gist Nov 29, 2023. 1 changed file with 56 additions and 46 deletions.
    102 changes: 56 additions & 46 deletions mweb_poi_template.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    // 設計稿
    // https://www.figma.com/file/2ub8C0cs5Iqs1MPciHjF6b/3-3-POI-Page?type=design&node-id=8238-69354&mode=dev
    export const poiTemplate = {
    export const poiTemplateMobile = {
    'configKey': 'poi_page_template_data',
    'name': 'poi_page_template_data',
    'description': 'POI page template 樣板',
    @@ -161,62 +161,74 @@ export const poiTemplate = {
    component: 'ProductListGroup',
    items: [
    {
    component: 'BlueHeader',
    component: 'BlueContainer',
    data: {
    title: '精選門票與行程',
    more_text: '查看更多',
    cat_main_keys: [],
    cat_keys: [],
    city_keys: [],
    },
    },
    {
    component: 'ProductList',
    data: {
    id_list: ['28863', '28925', '29762', '133316'],
    },
    items: [
    {
    component: 'ProductList',
    data: {
    cat_main_keys: [],
    cat_keys: [],
    city_keys: [],
    },
    },
    ],
    },
    ],
    },
    {
    component: 'ProductListGroup',
    items: [
    {
    component: 'BlueHeader',
    component: 'BlueContainer',
    data: {
    title: '最佳交通方式',
    more_text: '查看更多',
    cat_main_keys: [],
    cat_keys: [],
    city_keys: [],
    },
    },
    {
    component: 'ProductList',
    data: {
    id_list: ['28863', '28925', '29762', '133316'],
    },
    items: [
    {
    component: 'ProductList',
    data: {
    cat_main_keys: [],
    cat_keys: [],
    city_keys: [],
    },
    },
    ],
    },
    ],
    },
    {
    component: 'ProductListGroup',
    items: [
    {
    component: 'BlueHeader',
    component: 'BlueContainer',
    data: {
    title: '必訪美食推薦',
    more_text: '查看更多',
    cat_main_keys: [],
    cat_keys: [],
    city_keys: [],
    },
    },
    {
    component: 'ProductList',
    data: {
    id_list: ['28863', '28925', '29762', '133316'],
    },
    items: [
    {
    component: 'ProductList',
    data: {
    cat_main_keys: [],
    cat_keys: [],
    city_keys: [],
    },
    },
    ],
    },
    ],
    },
    @@ -381,51 +393,49 @@ export const poiTemplate = {
    component: '',
    items: [
    {
    component: 'BlueHeader', // component 點擊後，emit 點擊事件及 data 出來
    component: 'BlueContainer', // component 點擊後，emit 點擊事件及 data 出來
    data: {
    title: '精選門票與行程',
    more_text: '查看更多',
    cat_main_keys: [],
    cat_keys: [],
    city_keys: [],
    },
    },
    {
    component: 'ProductList', // pc: carousel, mobile: slider (看要定一個 component 還是兩個)
    data: {
    id_list: [
    '28863',
    '28925',
    '29762',
    '133316',
    ],
    },
    items: [
    {
    component: 'ProductList', // pc: carousel, mobile: slider
    data: {
    cat_main_keys: [],
    cat_keys: [],
    city_keys: [],
    },
    },
    ]
    },
    ],
    },
    {
    component: '',
    items: [
    {
    component: 'BlueHeader', // component 點擊後，emit 點擊事件及 data 出來
    component: 'BlueContainer', // component 點擊後，emit 點擊事件及 data 出來
    data: {
    title: '最佳交通方式',
    more_text: '查看更多',
    cat_main_keys: [],
    cat_keys: [],
    city_keys: [],
    },
    },
    {
    component: 'ProductList', // pc: carousel, mobile: slider (看要定一個 component 還是兩個)
    data: {
    id_list: [
    '28863',
    '28925',
    '29762',
    '133316',
    ],
    },
    items: [
    {
    component: 'ProductList', // pc: carousel, mobile: slider
    data: {
    cat_main_keys: [],
    cat_keys: [],
    city_keys: [],
    },
    },
    ],
    },
    ],
    },
  3. akccakcctw revised this gist Nov 23, 2023. 2 changed files with 12 additions and 30 deletions.
    21 changes: 6 additions & 15 deletions mweb_poi_template.js
    View file
    Original file line number Diff line number Diff line change
    @@ -20,25 +20,16 @@ export const poiTemplate = {
    layout: 'mobile',
    image_list: [
    {
    component: 'Image',
    data: {
    url: 'https://placehold.co/600x400/EEE/31343C',
    alt: '600x400 圖片',
    },
    url: 'https://placehold.co/600x400/EEE/31343C',
    alt: '600x400 圖片',
    },
    {
    component: 'Image',
    data: {
    url: 'https://placehold.co/600x400/EEE/31343C',
    alt: '600x400 圖片',
    },
    url: 'https://placehold.co/600x400/EEE/31343C',
    alt: '600x400 圖片',
    },
    {
    component: 'Image',
    data: {
    url: 'https://placehold.co/600x400/EEE/31343C',
    alt: '600x400 圖片',
    },
    url: 'https://placehold.co/600x400/EEE/31343C',
    alt: '600x400 圖片',
    },
    ],
    },
    21 changes: 6 additions & 15 deletions pc_poi_template.js
    View file
    Original file line number Diff line number Diff line change
    @@ -41,25 +41,16 @@ export const poiTemplate = {
    layout: 'desktop', // mobile
    image_list: [
    {
    component: 'Image',
    data: {
    url: 'https://placehold.co/600x400/EEE/31343C',
    alt: '600x400 圖片',
    },
    url: 'https://placehold.co/600x400/EEE/31343C',
    alt: '600x400 圖片',
    },
    {
    component: 'Image',
    data: {
    url: 'https://placehold.co/600x400/EEE/31343C',
    alt: '600x400 圖片',
    },
    url: 'https://placehold.co/600x400/EEE/31343C',
    alt: '600x400 圖片',
    },
    {
    component: 'Image',
    data: {
    url: 'https://placehold.co/600x400/EEE/31343C',
    alt: '600x400 圖片',
    },
    url: 'https://placehold.co/600x400/EEE/31343C',
    alt: '600x400 圖片',
    },
    ],
    },
  4. akccakcctw revised this gist Nov 23, 2023. 1 changed file with 22 additions and 22 deletions.
    44 changes: 22 additions & 22 deletions pc_poi_template.js
    View file
    Original file line number Diff line number Diff line change
    @@ -36,33 +36,33 @@ export const poiTemplate = {
    },
    items: [
    {
    component: '圖片燈箱（組）',
    component: 'ImagesViewer',
    data: {
    layout: 'desktop', // mobile
    },
    items: [
    {
    component: 'Image',
    data: {
    url: 'https://placehold.co/600x400/EEE/31343C',
    alt: '600x400 圖片',
    image_list: [
    {
    component: 'Image',
    data: {
    url: 'https://placehold.co/600x400/EEE/31343C',
    alt: '600x400 圖片',
    },
    },
    },
    {
    component: 'Image',
    data: {
    url: 'https://placehold.co/600x400/EEE/31343C',
    alt: '600x400 圖片',
    {
    component: 'Image',
    data: {
    url: 'https://placehold.co/600x400/EEE/31343C',
    alt: '600x400 圖片',
    },
    },
    },
    {
    component: 'Image',
    data: {
    url: 'https://placehold.co/600x400/EEE/31343C',
    alt: '600x400 圖片',
    {
    component: 'Image',
    data: {
    url: 'https://placehold.co/600x400/EEE/31343C',
    alt: '600x400 圖片',
    },
    },
    },
    ],
    ],
    },
    },
    {
    component: 'LayoutList',
  5. akccakcctw revised this gist Nov 23, 2023. 1 changed file with 22 additions and 22 deletions.
    44 changes: 22 additions & 22 deletions mweb_poi_template.js
    View file
    Original file line number Diff line number Diff line change
    @@ -15,33 +15,33 @@ export const poiTemplate = {
    },
    items: [
    {
    component: '圖片燈箱（組）',
    component: 'ImagesViewer',
    data: {
    layout: 'mobile',
    },
    items: [
    {
    component: 'Image',
    data: {
    url: 'https://placehold.co/600x400/EEE/31343C',
    alt: '600x400 圖片',
    image_list: [
    {
    component: 'Image',
    data: {
    url: 'https://placehold.co/600x400/EEE/31343C',
    alt: '600x400 圖片',
    },
    },
    },
    {
    component: 'Image',
    data: {
    url: 'https://placehold.co/600x400/EEE/31343C',
    alt: '600x400 圖片',
    {
    component: 'Image',
    data: {
    url: 'https://placehold.co/600x400/EEE/31343C',
    alt: '600x400 圖片',
    },
    },
    },
    {
    component: 'Image',
    data: {
    url: 'https://placehold.co/600x400/EEE/31343C',
    alt: '600x400 圖片',
    {
    component: 'Image',
    data: {
    url: 'https://placehold.co/600x400/EEE/31343C',
    alt: '600x400 圖片',
    },
    },
    },
    ],
    ],
    },
    },
    {
    component: 'ContentCard',
  6. akccakcctw revised this gist Nov 23, 2023. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    用來記錄及同步 POI page template 格式
  7. akccakcctw revised this gist Nov 23, 2023. No changes.
  8. akccakcctw revised this gist Nov 23, 2023. 2 changed files with 524 additions and 2 deletions.
    524 changes: 524 additions & 0 deletions mweb_poi_template.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,524 @@
    // 設計稿
    // https://www.figma.com/file/2ub8C0cs5Iqs1MPciHjF6b/3-3-POI-Page?type=design&node-id=8238-69354&mode=dev
    export const poiTemplate = {
    '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: '圖片燈箱（組）',
    data: {
    layout: 'mobile',
    },
    items: [
    {
    component: 'Image',
    data: {
    url: 'https://placehold.co/600x400/EEE/31343C',
    alt: '600x400 圖片',
    },
    },
    {
    component: 'Image',
    data: {
    url: 'https://placehold.co/600x400/EEE/31343C',
    alt: '600x400 圖片',
    },
    },
    {
    component: 'Image',
    data: {
    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: 'BlueHeader',
    data: {
    title: '精選門票與行程',
    more_text: '查看更多',
    cat_main_keys: [],
    cat_keys: [],
    city_keys: [],
    },
    },
    {
    component: 'ProductList',
    data: {
    id_list: ['28863', '28925', '29762', '133316'],
    },
    },
    ],
    },
    {
    component: 'ProductListGroup',
    items: [
    {
    component: 'BlueHeader',
    data: {
    title: '最佳交通方式',
    more_text: '查看更多',
    cat_main_keys: [],
    cat_keys: [],
    city_keys: [],
    },
    },
    {
    component: 'ProductList',
    data: {
    id_list: ['28863', '28925', '29762', '133316'],
    },
    },
    ],
    },
    {
    component: 'ProductListGroup',
    items: [
    {
    component: 'BlueHeader',
    data: {
    title: '必訪美食推薦',
    more_text: '查看更多',
    cat_main_keys: [],
    cat_keys: [],
    city_keys: [],
    },
    },
    {
    component: 'ProductList',
    data: {
    id_list: ['28863', '28925', '29762', '133316'],
    },
    },
    ],
    },
    ],
    },

    // 旅遊攻略
    {
    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: 'BlueHeader', // component 點擊後，emit 點擊事件及 data 出來
    data: {
    title: '精選門票與行程',
    more_text: '查看更多',
    cat_main_keys: [],
    cat_keys: [],
    city_keys: [],
    },
    },
    {
    component: 'ProductList', // pc: carousel, mobile: slider (看要定一個 component 還是兩個)
    data: {
    id_list: [
    '28863',
    '28925',
    '29762',
    '133316',
    ],
    },
    },
    ],
    },
    {
    component: '',
    items: [
    {
    component: 'BlueHeader', // component 點擊後，emit 點擊事件及 data 出來
    data: {
    title: '最佳交通方式',
    more_text: '查看更多',
    cat_main_keys: [],
    cat_keys: [],
    city_keys: [],
    },
    },
    {
    component: 'ProductList', // pc: carousel, mobile: slider (看要定一個 component 還是兩個)
    data: {
    id_list: [
    '28863',
    '28925',
    '29762',
    '133316',
    ],
    },
    },
    ],
    },
    ],
    },
    ],
    },
    {
    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': [],
    };
    2 changes: 0 additions & 2 deletions POI_desktop_template_data_sample.js → pc_poi_template.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,5 @@
    // 設計稿
    // https://www.figma.com/file/2ub8C0cs5Iqs1MPciHjF6b/3-3-POI-Page?type=design&node-id=8218-58231&mode=dev
    // gist
    // https://gist.github.com/akccakcctw/2261febc790abdb1333d6f94f62f95f7
    export const poiTemplate = {
    'configKey': 'poi_page_template_data',
    'name': 'poi_page_template_data',
  9. akccakcctw revised this gist Nov 23, 2023. 1 changed file with 49 additions and 53 deletions.
    102 changes: 49 additions & 53 deletions POI_desktop_template_data_sample.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,7 @@
    // 設計稿
    // https://www.figma.com/file/2ub8C0cs5Iqs1MPciHjF6b/3-3-POI-Page?type=design&node-id=8218-58231&mode=dev
    //
    // gist
    // https://gist.github.com/akccakcctw/2261febc790abdb1333d6f94f62f95f7
    export const poiTemplate = {
    'configKey': 'poi_page_template_data',
    'name': 'poi_page_template_data',
    @@ -25,7 +26,7 @@ export const poiTemplate = {
    },
    items: [
    {
    component: 'MainTitle',
    component: 'Title',
    data: {
    text: '富士山',
    },
    @@ -126,71 +127,66 @@ export const poiTemplate = {
    {
    component: 'LayoutList',
    props: {
    padding_x: 0,
    padding_y: 7,
    gap: 10,
    },
    items: [
    {
    component: 'Title',
    data: {
    text: '富士山推薦玩樂',
    },
    },
    {
    component: 'ProductListGroup',
    items: [

    {
    component: 'Title',
    component: 'BlueHeader', // component 點擊後，emit 點擊事件及 data 出來
    data: {
    text: '富士山推薦玩樂',
    title: '精選門票與行程',
    more_text: '查看更多',
    cat_main_keys: [],
    cat_keys: [],
    city_keys: [],
    },
    },
    {
    component: '',
    items: [
    {
    component: 'BlueHeader', // component 點擊後，emit 點擊事件及 data 出來
    data: {
    title: '精選門票與行程',
    more_text: '查看更多',
    cat_main_keys: [],
    cat_keys: [],
    city_keys: [],
    },
    },
    {
    component: 'ProductList', // pc: carousel, mobile: slider (看要定一個 component 還是兩個)
    data: {
    id_list: [
    '28863',
    '28925',
    '29762',
    '133316',
    ],
    },
    },
    ],
    component: 'ProductList', // pc: carousel, mobile: slider (看要定一個 component 還是兩個)
    data: {
    id_list: [
    '28863',
    '28925',
    '29762',
    '133316',
    ],
    },
    },
    ],
    },
    {
    component: 'ProductListGroup',
    items: [
    {
    component: 'BlueHeader', // component 點擊後，emit 點擊事件及 data 出來
    data: {
    title: '最佳交通方式',
    more_text: '查看更多',
    cat_main_keys: [],
    cat_keys: [],
    city_keys: [],
    },
    },
    {
    component: '',
    items: [
    {
    component: 'BlueHeader', // component 點擊後，emit 點擊事件及 data 出來
    data: {
    title: '最佳交通方式',
    more_text: '查看更多',
    cat_main_keys: [],
    cat_keys: [],
    city_keys: [],
    },
    },
    {
    component: 'ProductList', // pc: carousel, mobile: slider (看要定一個 component 還是兩個)
    data: {
    id_list: [
    '28863',
    '28925',
    '29762',
    '133316',
    ],
    },
    },
    ],
    component: 'ProductList', // pc: carousel, mobile: slider (看要定一個 component 還是兩個)
    data: {
    id_list: [
    '28863',
    '28925',
    '29762',
    '133316',
    ],
    },
    },
    ],
    },
  10. akccakcctw created this gist Nov 23, 2023.
    278 changes: 278 additions & 0 deletions POI_desktop_template_data_sample.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,278 @@
    // 設計稿
    // https://www.figma.com/file/2ub8C0cs5Iqs1MPciHjF6b/3-3-POI-Page?type=design&node-id=8218-58231&mode=dev
    //
    export const poiTemplate = {
    '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: 'MainTitle',
    data: {
    text: '富士山',
    },
    },
    {
    component: 'LayoutList',
    data: {
    direction: 'horizontal',
    },
    items: [
    {
    component: '圖片燈箱（組）',
    data: {
    layout: 'desktop', // mobile
    },
    items: [
    {
    component: 'Image',
    data: {
    url: 'https://placehold.co/600x400/EEE/31343C',
    alt: '600x400 圖片',
    },
    },
    {
    component: 'Image',
    data: {
    url: 'https://placehold.co/600x400/EEE/31343C',
    alt: '600x400 圖片',
    },
    },
    {
    component: 'Image',
    data: {
    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_x: 0,
    padding_y: 7,
    gap: 10,
    },
    items: [
    {
    component: 'ProductListGroup',
    items: [
    {
    component: 'Title',
    data: {
    text: '富士山推薦玩樂',
    },
    },
    {
    component: '',
    items: [
    {
    component: 'BlueHeader', // component 點擊後，emit 點擊事件及 data 出來
    data: {
    title: '精選門票與行程',
    more_text: '查看更多',
    cat_main_keys: [],
    cat_keys: [],
    city_keys: [],
    },
    },
    {
    component: 'ProductList', // pc: carousel, mobile: slider (看要定一個 component 還是兩個)
    data: {
    id_list: [
    '28863',
    '28925',
    '29762',
    '133316',
    ],
    },
    },
    ],
    },
    {
    component: '',
    items: [
    {
    component: 'BlueHeader', // component 點擊後，emit 點擊事件及 data 出來
    data: {
    title: '最佳交通方式',
    more_text: '查看更多',
    cat_main_keys: [],
    cat_keys: [],
    city_keys: [],
    },
    },
    {
    component: 'ProductList', // pc: carousel, mobile: slider (看要定一個 component 還是兩個)
    data: {
    id_list: [
    '28863',
    '28925',
    '29762',
    '133316',
    ],
    },
    },
    ],
    },
    ],
    },
    ],
    },
    {
    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': [],
    };