編輯導(dǎo)語(yǔ)：當(dāng)我們?cè)谕赓u(mài)平臺(tái)選購(gòu)商品時(shí)，如果有購(gòu)物車(chē)功能則會(huì)方便不少。不僅可以讓用戶有多種選擇，還能起到暫時(shí)收藏，方便下次購(gòu)買(mǎi)的作用。今天，本文作者就使用Axure，教我們?nèi)绾斡弥欣^器做外賣(mài)訂單平臺(tái)中商品列表的購(gòu)物車(chē)。

Hello，今天作者已外賣(mài)訂單平臺(tái)的購(gòu)物車(chē)的案例，教大家如果用中繼器來(lái)實(shí)現(xiàn)一個(gè)自動(dòng)計(jì)算總額的商品商品列表購(gòu)物車(chē)。

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

開(kāi)始教學(xué)了~~~~

一、材料準(zhǔn)備

中繼器×1，圖片×1，加號(hào)按鈕×1，減號(hào)按鈕×1，結(jié)算按鈕×1，購(gòu)物車(chē)圖標(biāo)×1，文本×7，文本分別為商品名稱(chēng)、商品介紹、銷(xiāo)售量、價(jià)格、數(shù)量、合計(jì)金額、配送費(fèi)。

二、原件擺放

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

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

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

我們需要添加6列：

1. picture：代表商品圖片，我們右鍵或者復(fù)制粘貼圖片到表格即可；
2. name：商品名稱(chēng)；
3. jieshao：商品介紹；
4. xiaoshouliang：商品的銷(xiāo)售量；
5. jiage：商品價(jià)格；
6. shuliang：用戶加入購(gòu)物車(chē)的數(shù)量，因?yàn)橐婚_(kāi)是為0，所以全部填寫(xiě)0。

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

四、交互設(shè)計(jì)

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

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

設(shè)置減號(hào)按鈕是否顯示：其實(shí)這個(gè)邏輯很容易理解，當(dāng)數(shù)量為0時(shí)，商品不能在減少，我們就隱藏減號(hào)按鈕，當(dāng)商品數(shù)量不為0的時(shí)候就顯示，因?yàn)槟J(rèn)是顯示的，所以我們只需要設(shè)置當(dāng)數(shù)量為0時(shí)，隱藏減號(hào)按鈕即可。

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

設(shè)置加/減號(hào)按鈕點(diǎn)擊時(shí)事件：如果點(diǎn)擊加號(hào)的時(shí)候，我們?cè)O(shè)置數(shù)量文本在原來(lái)的基礎(chǔ)上+1；點(diǎn)擊減號(hào)按鈕時(shí)，設(shè)置數(shù)量文本在原來(lái)的基礎(chǔ)上-1。

這里有的同學(xué)問(wèn)這樣會(huì)不會(huì)減到負(fù)數(shù)，答案是不會(huì)的，因?yàn)闇p到數(shù)量為0時(shí)，減號(hào)按鈕就被隱藏了，具體請(qǐng)看上一步。

這里我們需要用更新行來(lái)更新表格的數(shù)據(jù)，有同學(xué)可能會(huì)問(wèn)為什么不改文本，因?yàn)槿绻奈谋鞠旅婢陀?jì)算不了合計(jì)金額了，但是如果改表格數(shù)據(jù)，就能計(jì)算。

這里我們更新當(dāng)前行，如果是加號(hào)按鈕，更新行為[[Item.shuliang+1]]；減號(hào)按鈕則為[[Item.shuliang-1]]。

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

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

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

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