支付寶小程序 行業(yè)·行業(yè)鏈路

本快速示例對多個行業(yè)服務(wù)鏈路通用組件做了通用性抽離，涵蓋了 ETC、公交、地鐵、醫(yī)保等多個行業(yè)方向，并拼接了服務(wù)開通頁 / 服務(wù)完成頁示例，方便服務(wù)行業(yè)內(nèi)部開發(fā)者快速搭建符合行業(yè)內(nèi)部設(shè)計規(guī)范的鏈路頁面。

使用說明

本示例為純客戶端代碼，可直接在模擬器和在真機(jī)預(yù)覽。

更多詳情請參見 代碼市場。

使用步驟

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

頁面內(nèi)容

本項目包括 7 個頁面，分別是：ETC 辦理開通頁面、自動繳費開通頁（一）、自動繳費開通頁（二）、公交領(lǐng)卡頁、醫(yī)保領(lǐng)卡頁、地鐵乘車結(jié)果頁（一）、地鐵乘車結(jié)果頁（二）。

1. ETC 辦理開通頁面

文件路徑：pages/etc

2. 自動繳費開通頁（一）

文件路徑： pages/auto-pay

3. 自動繳費開通頁（二）

文件路徑：pages/auto-pay-two

4. 公交領(lǐng)卡頁

文件路徑：pages/bus

5. 醫(yī)保領(lǐng)卡頁

文件路徑：pages/medicare

6. 地鐵乘車結(jié)果頁（一）

文件路徑：pages/subway-event

7. 地鐵乘車結(jié)果頁（二）

文件路徑：pages/subway-result

自定義 UI 組件

1. 通用 card 組件

頁面路徑：components/es/card

card 組件是包裹其它 UI 組件的骨架，用于自定義 card 標(biāo)題、自定義 hotTip 模塊、自定義底部加載更多按鈕。

2. 價值模塊 value-module

頁面路徑：components/es/value-module

value-module 模塊用于定義服務(wù)價值列表，icon 推薦尺寸為 48rpx * 48rpx。

3. 授權(quán)按鈕模塊 action-button

頁面路徑：components/es/action-button

action-button 用于定義同意/拒絕的行動點按鈕組，也可自定義協(xié)議位置及底部額外行動點。

4. 服務(wù)優(yōu)勢圖文展示模塊 advance-list

頁面路徑：components/es/advance-list

advance-list 用于展示服務(wù)優(yōu)勢列表 。

5. 用戶心智模塊 cert-service

頁面路徑：components/es/cert-service

cert-service 用于展示服務(wù)提供商。

6. 用戶評價模塊 evaluate

頁面路徑：components/es/evaluate

evaluate 可實現(xiàn)輪播展示用戶評價，提供跳轉(zhuǎn)評價列表頁的行動點。

7. 綠色能量模塊 green-energy

頁面路徑：components/es/green-energy

green-energy 可根據(jù)綠色能量克數(shù)展示不同的字體與圖標(biāo)大小。

8. 銀行運營卡片模塊 market-card

頁面路徑：components/es/market-card

market-card 是用于包裝各大行運營紅包的卡片模塊。

9. 操作行動點模塊 operation

頁面路徑：components/es/operation

operation 提供推薦行動點列表的按鈕。

10. 線路出口信息展示 passway

頁面路徑：components/es/passway

passway 可展示線路出口信息，提供關(guān)鍵行動點，如共享單車與網(wǎng)約車。

11. 線路出口信息展示 pay-info

頁面路徑：components/es/pay-info

pay-info 展示支付信息與乘車狀態(tài)。

12. 辦理步驟展示模塊 process

頁面路徑：components/es/process

process 可自定義簡單與復(fù)雜兩種步驟展示列表。

13. 問答模塊 question

頁面路徑：components/es/question

question 可展示用戶問答列表。

14. 線路模塊 routes

頁面路徑：components/es/routes

routes 可展示地鐵各站點線路信息。

15. 售后服務(wù)模塊 sale-after

頁面路徑：components/es/sale-after

sale-after 可展示售后服務(wù)信息、電子發(fā)票行動點。

16. 添加到桌面模塊 to-desktop

頁面路徑：components/es/to-desktop

to-desktop 提供了添加小程序到桌面的行動點。