百度智能小程序 公積金查詢模板

page-fund 公積金查詢模板

解釋: 針對公積金場景的政務(wù)服務(wù)模板，包含賬戶信息、對賬單、繳存提取明細等頁面，以及金額脫敏、列表展開/收起等功能，可根據(jù)實際業(yè)務(wù)需求使用。

示例

前提條件

• 已完成小程序創(chuàng)建。
• 已下載并安裝百度小程序開發(fā)者工具（簡稱 IDE）。

使用說明

• 本示例為小程序前端代碼，可直接在模擬器和真機預(yù)覽。
• 模板中使用的是測試數(shù)據(jù)，開發(fā)者需要從接口中獲取真實的數(shù)據(jù)。
• 頁面模板功能從開發(fā)者工具 v2.25.1-rc 版本開始支持。
• 該模版使用了 es6 語法，需要開啟開發(fā)者工具的增強編譯，操作步驟參看開啟說明；同時也需開啟上傳代碼時樣式自動補全。

使用方式

方式一 【 NPM 】

1. 在小程序根目錄執(zhí)行下方命令，下載頁面模板的 npm 包：

   npm i @smt-ui-template/page-fund
   

2. 將 /node_modules/@smt-ui-template/page-fund 下的 @smt-ui-template-page-fund 文件夾拷貝到當前小程序合適的目錄下 （如pages）:

   .
   ├── project.swan.json
   ├── app.json
   ├── app.js
   ├── pages
       └── @smt-ui-template-page-fund    // 模板文件
   

3. 在小程序根目錄的 app.json 中配置模板頁面的 path 路徑，查看效果，如：

   {
       "pages": [
           ...
           "pages/@smt-ui-template-page-fund/pages/index/index",
           "pages/@smt-ui-template-page-fund/pages/access/index",
           "pages/@smt-ui-template-page-fund/pages/billinfo/index",
           "pages/@smt-ui-template-page-fund/pages/detail/index"
           ...
       ]
   }
   

4. 為了方便在開發(fā)者工具中查看模板頁的效果，可以設(shè)置模板頁為小程序預(yù)覽的首頁。詳情請見自定義編譯文檔。
   

方式二 【 開發(fā)者工具-頁面模板 】

1. 打開開發(fā)者工具，點擊 ”頁面模板“，在下方找到 ”公積金查詢模板“，選中該模板后點擊右下角 ”立即使用”，填寫相關(guān)信息點擊右下角 ”完成“ 按鈕。
2. 使用開發(fā)者工具的編輯器或者選擇自己熟悉的編輯器對模板進行二次開發(fā)。

頁面內(nèi)容

模板包含4個頁面：首頁、賬戶信息頁、對賬單頁面和繳存明細頁面。

首頁

頁面路徑：index/index

展示用戶賬戶基本信息、最近的繳存提取記錄和對賬單、繳存信息等詳細信息入口。

賬戶信息頁

頁面路徑：billinfo/index

展示用戶的身份信息、繳存單位、個人編號、繳存基數(shù)、繳存比例、繳存額等信息。

對賬單頁面

頁面路徑：billinfo/index

展示用戶繳納公積金以來所有年度的對賬單詳細信息，包含繳存數(shù)、提取數(shù)、結(jié)轉(zhuǎn)數(shù)、利息等數(shù)據(jù)。

繳存明細頁

頁面路徑：access/index

展示用戶繳納公積金以來所有年度的繳存、提取明細記錄。

NPM 依賴