編輯導語：當我們在外賣平臺選購商品時，如果有購物車功能則會方便不少。不僅可以讓用戶有多種選擇，還能起到暫時收藏，方便下次購買的作用。今天，本文作者就使用Axure，教我們如何用中繼器做外賣訂單平臺中商品列表的購物車。

Hello，今天作者已外賣訂單平臺的購物車的案例，教大家如果用中繼器來實現一個自動計算總額的商品商品列表購物車。

原型演示地址：https://cty930.axshare.com/#g=1

開始教學了~~~~

一、材料準備

中繼器×1，圖片×1，加號按鈕×1，減號按鈕×1，結算按鈕×1，購物車圖標×1，文本×7，文本分別為商品名稱、商品介紹、銷售量、價格、數量、合計金額、配送費。

二、原件擺放

中繼器內原件擺放：將商品名稱、商品介紹、銷售量、價格、數量、圖片、加號按鈕和減號按鈕按下圖所示擺放。

中繼器外原件擺放：將購物車圖標、合計金額、配送費、結算按鈕如下圖擺放，并組合轉為動態面板，固定于底部，配送費改為根據需求設定。

三、中繼器表格設置

我們需要添加6列：

1. picture：代表商品圖片，我們右鍵或者復制粘貼圖片到表格即可；
2. name：商品名稱；
3. jieshao：商品介紹；
4. xiaoshouliang：商品的銷售量；
5. jiage：商品價格；
6. shuliang：用戶加入購物車的數量，因為一開是為0，所以全部填寫0。

填寫表格內數據即可，小提示，可以在excel里面填寫好再復制粘貼，能夠大大提高效率哦。

四、交互設計

設置中繼器內文本：在中繼器每項加載時，把中繼器表格內對應的數據，設置到對應的文本里，這里用設置文本的事件，讓數量文本=[[Item.shuliang]]；價格文本=￥[[Item.jiage]]，銷售量文本=月售[[Item.xiaoshouliang]]，商品介紹文本=[[Item.jieshao]]，商品名稱文本=[[Item.name]]。

設置中繼器內圖片：設置好文本后，我們就要設置商品圖片，這里用設置圖片的交互來完成，設置圖片的值為[[Item.picture]]。

設置減號按鈕是否顯示：其實這個邏輯很容易理解，當數量為0時，商品不能在減少，我們就隱藏減號按鈕，當商品數量不為0的時候就顯示，因為默認是顯示的，所以我們只需要設置當數量為0時，隱藏減號按鈕即可。

條件是數量文本=0時：

設置加/減號按鈕點擊時事件：如果點擊加號的時候，我們設置數量文本在原來的基礎上+1；點擊減號按鈕時，設置數量文本在原來的基礎上-1。

這里有的同學問這樣會不會減到負數，答案是不會的，因為減到數量為0時，減號按鈕就被隱藏了，具體請看上一步。

這里我們需要用更新行來更新表格的數據，有同學可能會問為什么不改文本，因為如果改文本下面就計算不了合計金額了，但是如果改表格數據，就能計算。

這里我們更新當前行，如果是加號按鈕，更新行為[[Item.shuliang+1]]；減號按鈕則為[[Item.shuliang-1]]。

設置合計金額時間：在中繼器每項加載時，我們需要判斷，如果是第一行的話我們先要設置合計金額為0元，然后每一行加載的時候，我們計算合計金額的值為合計金額原來的值（target.text）+該行的價格(item.jiage)*數量(item.shuliang)，這樣就可以計算出總額的值。

以上就是本期分享的全部內容，點下關注不迷路哦，謝謝閱讀。

本文由 @做產品但不是經理 原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。