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

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

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

開始教學了~~~~

一、材料準備

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

二、原件擺放

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

中繼器外原件擺放：將購物車圖標、合計金額、配送費、結(jié)算按鈕如下圖擺放，并組合轉(zhuǎn)為動態(tài)面板，固定于底部，配送費改為根據(jù)需求設(shè)定。

三、中繼器表格設(shè)置

我們需要添加6列：

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

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

四、交互設(shè)計

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

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

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

條件是數(shù)量文本=0時：

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

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

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

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

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

以上就是本期分享的全部內(nèi)容，點下關(guān)注不迷路哦，謝謝閱讀。

本文由 @做產(chǎn)品但不是經(jīng)理 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。