賬單列表和詳情頁是用戶了解財務狀況與交易跟蹤的關鍵工具，有助于提高支付安全性、解決問題以及滿足法律和財務要求。本文教大家如何在Axure里制作一個賬單列表和詳情的原型模板，希望對你有所幫助。

賬單列表和詳情頁在支付系統中不僅是用戶了解財務狀況和跟蹤交易的關鍵工具，還有助于提高支付安全性、解決問題以及滿足法律和財務要求。因此，設計一個清晰、易用且功能豐富的賬單管理系統對于支付系統的成功運營和用戶滿意度至關重要。

今天作者就教大家如何在Axure里制作一個賬單列表和詳情的原型模板，本次教程主要是通過中繼器制作伸縮賬單和詳情頁。

一、效果展示

• 伸縮列表：可以按照月份展開或收起該月份的賬單
• 自動統計：根據每個月的賬單，自動統計出總支出和總收入的金額
• 查看詳情：點擊賬單，可以查看該賬單的詳情
• 數據維護：賬單數據在中繼器表格里維護

原型地址：https://liz8r8.axshare.com/#g=1

二、制作教程

我們需要制作三個頁面，第一個是賬單列表的頁面，第二個是賬單詳情的支付頁面，第三個是賬單詳情的收款頁面。

1. 賬單列表

賬單列表我們主要是通過中繼器制作的，主要元件包括圖片（頭像）和文本標簽（標題、時間、金額），具體樣式可以根據個人需要設置，擺放如下圖所示

中繼器表格我們以下幾列：

ID：訂單的唯一ID，后續用于在詳細頁里顯示對應的訂單詳情

picture：對應中繼器里的圖片元件，右鍵導入圖片即可

type：對應標題，填了文字內容接口，例如掃碼-給張三

price：對應價格，如果是收入用+表示，如果是支出用-號表示

datetime：收款的具體時間

中繼器每項加載時，我們要把中繼器表格里的值設置到對應的元件里，如果是axure10的話，直接點擊連接按鈕，選擇對應元件即可；如果是axure8、9，就要設置文本和設置圖片的交互，將值設置到對應的元件里。

這樣賬單列表主題的內容我們就完成了。

接下來我們制作展開和收起效果，這里我們用到動態面板，里面包含兩個狀態，展開和未展開。未展開包括文本標簽、背景矩形和箭頭制作而成，這三個我們組合命名為統計組合。如下圖所示：

已展開狀態我們除了需要統計組合外，我們還要把剛剛制作好的賬單中繼器放在里面，箭頭方向調整為向上。

鼠標點擊展開狀態里的統計組合時，我們用設置面板狀態的交互，將面板設置到未展開的狀態，如果下方有其他元件，或者多個組合組成的頁面，我們要勾選推動或拉起下方元件。

鼠標點擊未展開狀態里的統計組合時也是一樣，我們用設置面板狀態的交互，將面板設置到展開的狀態。

接下來我們只做統計支出和收入的合計數，我們先新增支出和收入兩個文本標簽用于記錄和統計，默認值為0。

中繼器每項加載時，如果price列的值少于0，就是只支出值，我們用設置文本的交互，將支出的文本設置為它原來的值+price列的值。

然后我們想讓列表里支出的金額變成黑色文本，我們用設置文本里富文本的交互，將他設置為黑色即可。

如果price列的值大于0，就是只收入值，我們用設置文本的交互，將收入的文本設置為它原來的值+price列的值。

在加載到最后一行的時候，我們用設置文本的交互，將收入和支出的總值設置到統計的文本里即可。

因為動態面板有兩個狀態，所以另外一個統計收入和支出也是一樣的方法獲取即可。

鼠標單擊賬單時，我們要根據price值來判斷，如果price的值小于0，就是打開支付頁面，否則就打開收入頁面。在打開頁面之前，我們要把ID列的訂單號的值，設置到全局變量里保存。

完成后，我們將上面的動態面板根據需求復制粘貼，修改中繼器表格里面的賬單數據，這樣我們就完成了伸縮賬單列表的頁面了。

2. 賬單詳情支付頁面

這個頁面我們也是用中繼器來制作，因為中繼器表格里能保存很多信息，主要元件包括圖片和文本標簽，如小圖所示擺放，你們也可以根據需要增加或減少賬單詳情的信息。

中繼器表格里如下：

jiaoyidanhao：這個就是和前面賬單中繼器里的ID值對應；

pic圖片：和前面賬單中繼器里的pic值對應；

name：和前面賬單中繼器里的type值對應；

price：和前面賬單中繼器里的price值對應；

datetime：和前面賬單中繼器里的price值對應；

前面幾列的內容其實和賬單列表中繼器里的是一樣的，這里只填寫支出部分的數據。

后面幾列是支付狀態、類型、收款單位、收款機構、清算機構等內容，填寫完成即可。

中繼器每項加載時，我們要把中繼器表格里的值設置到對應的元件里，如果是axure10的話，直接點擊連接按鈕，選擇對應元件即可；如果是axure8、9，就要設置文本和設置圖片的交互，將值設置到對應的元件里。

最后我們要根據全局變量的值，就是前面傳過來的訂單ID，顯示對應行的內容。所以在中繼器載入時，我們用篩選的交互，對中繼器進行篩選，篩選條件為jiaoyidanhao列的值等于全局變量dingdanID。

這樣我們就完成賬單詳情支付頁面了。

3. 賬單詳情收入頁面

其實收入頁面和支付頁面的原理是一樣的，只不過顯示的內容不同，所以我們要分開兩個頁面來制作。

主要元件包括圖片和文本標簽，如小圖所示擺放，你們也可以根據需要增加或減少賬單詳情的信息。

中繼器表格里如下：

jiaoyidanhao：這個就是和前面賬單中繼器里的ID值對應；

pic圖片：和前面賬單中繼器里的pic值對應；

name：和前面賬單中繼器里的type值對應；

price：和前面賬單中繼器里的price值對應；

datetime：和前面賬單中繼器里的price值對應；

前面幾列的內容其實和賬單列表中繼器里的是一樣的，這里只填寫收入部分的數據。

后面幾列是支付狀態、支付賬號、支付機構、清算機構、收款時間等內容，填寫完成即可。

中繼器每項加載時，我們要把中繼器表格里的值設置到對應的元件里，如果是axure10的話，直接點擊連接按鈕，選擇對應元件即可；如果是axure8、9，就要設置文本和設置圖片的交互，將值設置到對應的元件里。

最后我們也是根據全局變量的值，就是前面傳過來的訂單ID，顯示對應行的內容。所以在中繼器載入時，我們用篩選的交互，對中繼器進行篩選，篩選條件為jiaoyidanhao列的值等于全局變量dingdanID。

這樣我們就完成了賬單列表和賬單詳情頁面原型模板的制作了，下次使用也很方便，我們只需要在中繼器表格里填寫好對應內容，即可自動生成交互效果。

那以上就是本期教程的全部內容，感興趣的同學們可以動手試試哦，感謝您的閱讀，我們下期見。