支付寶小程序 行業(yè)·定制公交

• 定制巴士小程序模板是城市公交定制服務(wù)在支付寶小程序的實現(xiàn)案例模板，提供了通用的頁面，組件，與基礎(chǔ)的交互跳轉(zhuǎn)邏輯，方便各城市 ISV 快速接入巴士定制業(yè)務(wù)，節(jié)約開發(fā)時間與成本。

使用說明

• 本示例為純客戶端代碼，可直接在模擬器和在真機預(yù)覽。
• 部分頁面暫不支持調(diào)試，如遇此類不支持頁面，請在 web IDE > 模擬器 > 頁面路徑，切換頁面使用。
• 更多使用詳情請參見 代碼市場。

前提條件

• 完成 開發(fā)者入駐 與 小程序創(chuàng)建。
• 安裝最新版 IDE，點擊下載。

使用步驟

1. 點擊 下載 文件包。
2. 打開 IDE 相關(guān)的內(nèi)容目錄，關(guān)聯(lián)已有 APPID。
3. 通過 IDE 真機預(yù)覽。

頁面內(nèi)容

本項目共包含 14 個頁面，分別是：首頁、搜索頁、搜索結(jié)果頁、個人頁面、車票列表頁、車票詳情頁、找站點頁、更改站點頁、發(fā)起定制頁、定制線路頁、線路詳情頁、訂單確認頁、乘車指南頁、服務(wù)協(xié)議頁。

1. 首頁

文件路徑：pages/index

• 搜索功能模塊
• 最近行程模塊
• 推薦線路模塊

2. 搜索頁

文件路徑：pages/search

目的地搜索結(jié)果列表展示。

3. 搜索結(jié)果頁

文件路徑：pages/search-result

目標線路定制線路狀態(tài)列表頁。

4. 個人頁面

文件路徑：pages/my

• 展示基礎(chǔ)的用戶信息。
• 提供定制路線模塊入口。

5. 車票列表頁

文件路徑：pages/tickets

包含待出行與全部車票兩個tab合集列表。

6. 車票詳情頁

文件路徑：pages/tickets-detail

• 車票詳情信息
• 乘車二維碼

7. 找站點頁

文件路徑：pages/find-station

• 線路站點信息
• 地圖線路定位展示

8. 更改站點頁

文件路徑：pages/change-station

• 地圖線路定位展示
• 更改上車、下車地點功能

9. 發(fā)起定制頁

文件路徑：pages/customize

• 錄入線路客戶基本信息

10. 定制線路頁

文件路徑：pages/custom-route

• 展示線路成行狀態(tài)列表, 可發(fā)起、參與定制線路

11. 線路詳情頁

文件路徑：pages/route-detail

• 線路站點信息
• 提交訂單功能

12. 訂單確認頁

文件路徑：pages/order-confirm

• 訂單日期選擇
• 訂單線路信息
• 票價明細
• 購票功能

13. 乘車指南頁

文件路徑：pages/myguide

指南信息

14. 服務(wù)協(xié)議頁

文件路徑：pages/myservice

協(xié)議信息

自定義 UI 組件

本項目共包含七個自定義 UI 組件，分別是：站點路線展示組件、包含線路信息與站點展示的地圖組件、包含在卡片中的線路信息組件、文本域列表組件、車票卡片組件、附帶購票跳轉(zhuǎn)功能的車票卡片組件、用戶線路選擇組件。

1. 站點路線展示組件

文件路徑：components/bus-stagement

• 站點列表展示
• 收攏，展開線路功能

2. 包含線路信息與站點展示的地圖組件

文件路徑：components/map

• 基礎(chǔ)地圖展示
• 線路描線
• 站點展示

3. 包含在卡片中的線路信息組件

文件路徑：components/route

• 基礎(chǔ)線路信息
• 起始點信息

4. 文本域列表組件

文件路徑：components/textarea-item

適配 UI 的文本域組件再封裝。

5. 車票卡片組件

文件路徑：components/ticket

• 車票基礎(chǔ)信息
• 包含待出行、已出行等等車票狀態(tài)

6. 附帶購票跳轉(zhuǎn)功能的車票卡片組件

文件路徑：components/ticket-sale

在開票卡片的基礎(chǔ)上附有購票跳轉(zhuǎn)功能。

7. 用戶線路選擇組件

文件路徑：components/user-route

• 起點終點展示
• 站點更改