支付寶小程序 行業(yè)·支付寶信用卡還款

本快速示例是一個(gè)模仿“支付寶信用卡還款功能” 的簡易小程序，簡化信用卡還款流程，只囊括了最主要的還款流程：用戶查看信用卡列表，前往看信用卡詳情，輸入還款金額，操作還款，查看還款結(jié)果。

使用說明

• 本示例為純客戶端代碼，無需配置后端代碼，可直接在模擬器和在真機(jī)預(yù)覽。
• 更多詳細(xì)信息可參見 代碼市場。

前提條件

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

使用步驟

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

頁面內(nèi)容

本項(xiàng)目共包含三個(gè)頁面，分別是：還款列表頁、還款詳情頁、還款結(jié)果頁。

1. 還款列表頁

文件路徑：pages/card-home

還款列表頁是小程序的首頁，展示了近七日已知待還總金額和信用卡列表，列表內(nèi)包含信用發(fā)卡銀行、尾號信息、還款時(shí)間及金額數(shù)目等信息。

2. 還款詳情頁

文件路徑：pages/card-detail

還款詳情頁展示了還款時(shí)單個(gè)具體信用卡的還款信息：發(fā)卡銀行、尾號、未還金額、到期還款日、還款金額等。用戶還可以在此頁面內(nèi)輸入金額并操作還款。

3. 還款結(jié)果頁

文件路徑：pages/repayment-result

還款結(jié)果頁呈現(xiàn)了付款成功后，返回給用戶的界面提示。

自定義 UI 組件

本項(xiàng)目共包括四個(gè)自定義 UI 組件，分別是：聚合還款總金額、信用卡頭部信息、還款金額輸入框、還款結(jié)果狀態(tài)步驟。

1. 聚合還款總金額

頁面路徑：components/flip-numbers

聚合還款總金額 flip-number 組件用于在還款列表頁復(fù)用，主要實(shí)現(xiàn)以下功能：

• 解析傳入的還款總金額數(shù)目， 將數(shù)字分離成單個(gè)字符，用于生成數(shù)字陣列
• 將數(shù)字矩陣的各數(shù)字位初始化為 0，再賦值，獲得滾動(dòng)效果。

2. 信用卡頭部信息

頁面路徑：components/header-info

信用卡頭部信息 header-info 組件用于在還款詳情頁復(fù)用，展示不同信用卡的詳情，包含發(fā)卡銀行信息、持卡人信息等。

3. 還款金額輸入框

頁面路徑：components/pay-input

還款金額輸入框 pay-input 組件用于在還款詳情頁復(fù)用，提供還款時(shí)輸入金額的操作。

4. 還款結(jié)果狀態(tài)步驟

頁面路徑：components/steps

還款結(jié)果狀態(tài)步驟 step 組件用于在還款結(jié)果頁復(fù)用，提示信用卡還款的當(dāng)前所處狀態(tài)及接下來的狀態(tài)。