本文詳細(xì)講解了購(gòu)物車金額的實(shí)時(shí)求和，一起來(lái)看看~

本文涉及到：點(diǎn)擊“購(gòu)物車圖標(biāo)”增減購(gòu)物商品數(shù)量；多次點(diǎn)擊購(gòu)物車圖標(biāo)，只增加數(shù)量，不重復(fù)添加條目。在我的上一篇教程《中繼器使用場(chǎng)景（一）》中有具體操作辦法，在此不做贅述。

Axure中的一個(gè)難題：中繼器數(shù)據(jù)實(shí)時(shí)求和

先看一下運(yùn)用在購(gòu)物車實(shí)景操作中的效果，下方GIF圖：大家重點(diǎn)看“最下端的金額”變化，根據(jù)商品的多少、數(shù)量的多少，實(shí)時(shí)對(duì)數(shù)據(jù)求和。

為了講解清晰，我將高保真原型的邏輯提煉成簡(jiǎn)單的部件，GIF圖展現(xiàn)如下：

首先，我們準(zhǔn)備如下元件

每個(gè)元件解釋如下：

1、商品列表中繼器（goods list），包含：購(gòu)物車圖標(biāo)（shopping）、商品名稱（name）、商品價(jià)格（price）、商品數(shù)量（shuliang），其中商品數(shù)量（shuliang）不綁定元件賦值，只存在數(shù)據(jù)集中。

各項(xiàng)目賦值及初始值情況如下圖：注意￥符號(hào)的擺放位置。

2、購(gòu)物車列表中繼器（shoppinglist），包含：商品名稱（name）、商品價(jià)格（price）、商品數(shù)量（shuliang），增加數(shù)量的“+”號(hào)（add），減少數(shù)量的“-”號(hào)（minus），每項(xiàng)的金額小計(jì)（xiaoji）。

各項(xiàng)目賦值及初始值情況如下圖：其中展示數(shù)量的元件，即在加減號(hào)中間的那個(gè)元件，必須是文本框，此步非常重要。注意￥符號(hào)的擺放位置。

3、過(guò)渡計(jì)算用的中繼器（temp）：此元件，在項(xiàng)目調(diào)試完畢后，設(shè)置為隱藏，在教程中，為了講解，未做隱藏。包含商品名稱（name2）該項(xiàng)不綁定元件賦值，只存在數(shù)據(jù)集中。提取購(gòu)物車列表中繼器shoppinglist中的小計(jì)項(xiàng)目xiaoji2。

各項(xiàng)目賦值及初始值情況如下圖：

4、將各行“小計(jì)”金額數(shù)字脫離中繼器，取出數(shù)值用的矩形，命名為number。特別注意：此處必須是矩形，不能用文本框，具體原因，后續(xù)會(huì)講解到。此步非常重要，此元件，在項(xiàng)目調(diào)試完畢后，設(shè)置為隱藏。在教程中，為了講解，未做隱藏。

5、將上一步矩形number中的數(shù)值，轉(zhuǎn)變?yōu)閿?shù)組的文本框，命名為numbergroup。特別注意，與上一步相反，此處必須是文本框，不能為矩形，具體原因，后續(xù)會(huì)講解到。此步非常重要，此元件，在項(xiàng)目調(diào)試完畢后，設(shè)置為隱藏。在教程中，為了講解，未做隱藏。

6、將上一步文本框numbergroup中的數(shù)值，進(jìn)行數(shù)字的第一步提取，一共準(zhǔn)備三個(gè)文本框，分別命名為1、2、3，這些元件，在項(xiàng)目調(diào)試完畢后，設(shè)置為隱藏，在教程中，為了講解，未做隱藏。

7、將上一步文本框1、2、3中的數(shù)值，進(jìn)行數(shù)字的第二步提取。一共準(zhǔn)備三個(gè)文本框，分別命名為1-1、2-2、3-3，這些元件，在項(xiàng)目調(diào)試完畢后，設(shè)置為隱藏，在教程中，為了講解，未做隱藏。

8、合計(jì)金額用的文本框totalmoney，擺放位置在購(gòu)物車列表中繼器下方，單獨(dú)存在，不放在中繼器中。

接下來(lái)，我們說(shuō)思路：

在商品列表中繼器goods list中點(diǎn)擊購(gòu)物車圖標(biāo) →在購(gòu)物車列表中繼器shoppinglist中產(chǎn)生小計(jì)的金額 →通過(guò)過(guò)渡計(jì)算用的中繼器temp，將小計(jì)金額單獨(dú)提取出來(lái)? →? 中繼器內(nèi)不能直接求和，將小計(jì)金額的數(shù)字分離出中繼器即矩形number? ?→? 因?yàn)榉蛛x出來(lái)的是帶格式的無(wú)法分割的文本，要轉(zhuǎn)換為數(shù)組 文本框numbergroup? →? 將數(shù)組分成單個(gè)的數(shù)字? ?→? 將數(shù)字相加。

大功告成。

接下來(lái)，開(kāi)始添加交互

1、在商品列表中繼器goods list中的購(gòu)物車圖標(biāo)添加交互，截圖如下：

交互解釋：

Case 1、Case3的交互解釋參看《中繼器使用場(chǎng)景（一）》的具體講解，在此不做贅述。主要功能就是實(shí)現(xiàn)當(dāng)除了第一次點(diǎn)擊購(gòu)物車以外，以后的重復(fù)點(diǎn)擊，在購(gòu)物車列表中只增加數(shù)量，而不重復(fù)添加條目，同時(shí)因?yàn)閿?shù)量增加了，小計(jì)金額不斷增加

所以 Case3的交互多了一個(gè)更新項(xiàng)目，為購(gòu)物車列表shoppinglist計(jì)算小計(jì)金額：“xiaoji”一項(xiàng)的函數(shù)為：[[(Item.price*Item.shuliang).toFixed(2)]]，意思為：價(jià)格×數(shù)量。

然后將結(jié)果四舍五入保留兩位小數(shù)，toFixed()，在實(shí)際預(yù)覽時(shí)，有時(shí)保留兩位小數(shù)，有時(shí)沒(méi)有，誰(shuí)知道怎么回事，不影響結(jié)果，無(wú)所謂，大家知道意思就行了。

Case2交互解釋如下：

條件：if “[[Item.shuliang]]” == “1”，旨在界定是第一次點(diǎn)擊購(gòu)物車圖標(biāo)，解釋參看《中繼器使用場(chǎng)景（一）》的具體講解

第一步，在購(gòu)物車列表中繼器shopping中添加一行新數(shù)據(jù)，具體對(duì)應(yīng)數(shù)據(jù)綁定如下，其中“xiaoji”一項(xiàng)的函數(shù)為：[[(Item.price*Item.shuliang).toFixed(2)]]，函數(shù)意思在上文做了說(shuō)明，不做贅述。

第二步：在過(guò)渡計(jì)算用中繼器temp中添加一行新數(shù)據(jù)，具體對(duì)應(yīng)數(shù)據(jù)綁定如下：

解釋：將購(gòu)物車列表頁(yè)中繼器shopping list中的小計(jì)項(xiàng)單獨(dú)提出來(lái)。

• 重點(diǎn)1：注意name2的綁定。
• 重點(diǎn)2：xiaoji2的函數(shù)形式[[Item.price*Item.shuliang.toFixed(2)]]￥，注意￥的擺放位置，這個(gè)日后要做分割數(shù)組的標(biāo)志，非常重要。這個(gè)￥符號(hào)，可以為任何符號(hào)，但是一定要寫(xiě)在[[]]外面，并且寫(xiě)在末尾，后續(xù)具體解釋，此步非常重要。

寫(xiě)到這一步，我們來(lái)看看交互效果GIF，注意過(guò)渡計(jì)算temp中的數(shù)值，￥符號(hào)的位置。

另外，大家在演示時(shí)，會(huì)發(fā)現(xiàn)你們的原型購(gòu)物車列表中的數(shù)量在＞1時(shí)，過(guò)渡計(jì)算用的中繼器temp數(shù)據(jù)不更新，不像我的gif演示時(shí)的效果，那是因?yàn)檫€有后續(xù)的交互未添加，不要著急。因?yàn)檫€沒(méi)有到算總和的時(shí)候，所以我先把總計(jì)部分的元件蓋住了。

第三步，將過(guò)渡計(jì)算用中繼器temp中的數(shù)據(jù)，脫離出中繼器，非常關(guān)鍵。

解釋：設(shè)置用于提取數(shù)字的矩形number的文字==[[LVAR1]]，而這個(gè)局部變量LVAR1=元件temp，一定注意在局部變量類型框里，一定選擇“元件”，這樣就將數(shù)字全部脫離中繼器。一定要注意提取數(shù)字的number元件必須是矩形，而不能是文本框，如果是文本框的話，將不能提取出數(shù)字，而是顯示代碼[object Object]，意思是一個(gè)對(duì)象。

我們來(lái)看交互效果GIF：另外，大家在演示時(shí)，會(huì)發(fā)現(xiàn)你們的原型購(gòu)物車列表中的數(shù)量在＞1時(shí)，過(guò)渡計(jì)算用的中繼器temp數(shù)據(jù)不更新，不像我的gif演示時(shí)的效果，那是因?yàn)檫€有后續(xù)的交互未添加，不要著急。

第四步：number中的數(shù)據(jù)，轉(zhuǎn)化為數(shù)組，非常關(guān)鍵。

解釋：存放數(shù)組文本框numbergroup的文字為[[LVAR1.split(‘￥’)]]，局部變量LVAR1=number的元件文字，split(‘separator’,limit)這個(gè)函數(shù)的意思是，將當(dāng)前文本對(duì)象中與分隔字符相同的字符轉(zhuǎn)為“,”，形成多組字符串，并返回從左開(kāi)始的指定組數(shù)。

參數(shù)：separator為分隔字符，分隔字符可以為空，為空時(shí)將分隔每個(gè)字符為一組；limit為返回組數(shù)的數(shù)值，該參數(shù)可以省略，省略該參數(shù)則返回所有字符串組。

[[LVAR1.split(‘￥’)]]意思即為將矩形number中的 ￥ 字符轉(zhuǎn)換為“,”并將所有的字符全部分組即形成類似（1,2,3）這種并排數(shù)組數(shù)組形式。

一定注意：numbergroup元件必須是文本框，而不能是矩形，如果是矩形的話，只是把“￥”換成“,”形成帶回車格式，上下排放的數(shù)字。在Axure對(duì)于有回車格式的字符串，是無(wú)法進(jìn)行截取的，這樣就不能將所有數(shù)字分開(kāi)。

我們來(lái)看交互效果GIF：另外，大家在演示時(shí)，會(huì)發(fā)現(xiàn)你們的原型購(gòu)物車列表中的數(shù)量在＞1時(shí)，過(guò)渡計(jì)算用的中繼器temp數(shù)據(jù)不更新，不像我的gif演示時(shí)的效果，那是因?yàn)檫€有后續(xù)的交互未添加，不要著急。

第五步：設(shè)置總計(jì)totalmoney文字為￥[[LVAR1+LVAR2+LVAR3]]，這個(gè)我們一會(huì)兒再講。

到這里，商品列表中繼器goods list里的交互就做完了。

在購(gòu)物車列表中繼器shoppinglist中，添加交互

1. 在增加數(shù)量的按鈕“+”上添加交互

解釋：

第一步：每次點(diǎn)擊時(shí)，更新本行數(shù)據(jù)中的數(shù)量列shuliang加1??[[Item.shuliang+1]]。

第二步：因?yàn)閿?shù)量改變了，所以小計(jì)金額也要更新，所用函數(shù)及公式，前面已經(jīng)詳述，不再贅述。

2. 在減少數(shù)量的按鈕“—”上添加交互

（1）條件：if “[[Item.shuliang]]” > “1”時(shí)的交互

解釋：

第一步：每次點(diǎn)擊時(shí)，更新本行數(shù)據(jù)中的數(shù)量列shuliang減1?[[Item.shuliang-1]]。

第二步：因?yàn)閿?shù)量改變了，所以小計(jì)金額也要更新，所用函數(shù)及公式，前面已經(jīng)詳述，不再贅述。

（2）條件：Else if “[[Item.shuliang]]” == “1”時(shí)的交互

第一步：商品數(shù)量是1時(shí)，每次點(diǎn)擊減號(hào)時(shí)，數(shù)值不再更新，意思即不能出現(xiàn)0和負(fù)數(shù)；不能出現(xiàn)0，是因?yàn)?，?shí)際操作中，如果所選商品數(shù)量為0，即表示刪除產(chǎn)品，會(huì)有單獨(dú)刪除產(chǎn)品的交互。負(fù)數(shù)就不用解釋了，商品數(shù)量不能為負(fù)，所以更新本行數(shù)據(jù)中的數(shù)量列shuliang為 [[Item.shuliang]]本身，或直接寫(xiě)1也可以

第二步：因?yàn)閿?shù)量改變了，所以小計(jì)金額也要更新，所用函數(shù)及公式，前面已經(jīng)詳述，不再贅述。

3. “+”與“—”之間的顯示數(shù)量的文本框shuliang上添加交互

第一步，當(dāng)文本改變時(shí)，更新過(guò)渡計(jì)算用中繼器temp中相應(yīng)數(shù)據(jù)。

更新條件：[[Item.name==TargetItem.name2]] 找到同條數(shù)據(jù)，靠name來(lái)識(shí)別。

更新列：xiaoji2,所用函數(shù)及公式，前面已經(jīng)詳述，不再贅述，注意￥的擺放位置[[(Item.price*Item.shuliang).toFixed(2)]]￥

第二步，將過(guò)渡計(jì)算用中繼器中temp中的數(shù)據(jù)，脫離出中繼器，存放在矩形number中非常關(guān)鍵。所用函數(shù)及公式，前面已經(jīng)詳述，不再贅述。

第三步：number中的數(shù)字，轉(zhuǎn)化為數(shù)組，存放在文本框numbergroup中，非常關(guān)鍵。所用函數(shù)及公式，前面已經(jīng)詳述，不再贅述。

我們來(lái)看交互效果GIF：現(xiàn)在大家在演示時(shí)，過(guò)渡計(jì)算用的中繼器temp數(shù)據(jù)已經(jīng)實(shí)時(shí)更新了。

第四步：設(shè)置總計(jì)totalmoney文字為￥[[LVAR1+LVAR2+LVAR3]]。這個(gè)我們一會(huì)兒再講。

到這里，購(gòu)物車列表中繼器shoppinglist里的交互就做完了。

開(kāi)始拆數(shù)字

在數(shù)組文本框numbergroup中，加入交互動(dòng)作。

解釋：當(dāng)文本框中有數(shù)組出現(xiàn)時(shí)，即文本改變時(shí)。

第一步：設(shè)置用于進(jìn)一步分解數(shù)組的文本框1等于numbergroup的文本，即1==[[this.text]]。

第二步：設(shè)置用于進(jìn)一步分解數(shù)組的文本框2等于文本框1的部分文本，即[[LVAR1.slice(LVAR1.indexOf(‘,’)+1)]]。

LVAR1局部變量代表文本框1的文字。

slice(start,end)用途：從當(dāng)前文本對(duì)象中截取從指定起始位置開(kāi)始到終止位置之前的字符串。參數(shù)：start為被截取部分的起始位置，end為被截取部分的終止位置，省略該參數(shù)則由起始位置截取至文本對(duì)象結(jié)尾。

indexOf(‘searchValue’)用途：從左至右獲取查詢字符串在當(dāng)前文本對(duì)象中首次出現(xiàn)的位置。參數(shù)：searchValue為查詢的字符串。

[[LVAR1.slice(LVAR1.indexOf(‘,’)+1)]]整體的意思為，截取文本框1的部分文字，位置為第一個(gè)逗號(hào)’,’后面的所有文字。

第三步：設(shè)置用于進(jìn)一步分解數(shù)組的文本框3等于文本框2的部分文本，即[[LVAR2.slice(LVAR2.indexOf(‘,’)+1)]]。

LVAR2局部變量代表文本框2的文字，函數(shù)及意義同上，不再贅述。

要特別注意上面三個(gè)步驟，一定要一條一條寫(xiě)，既不能都寫(xiě)在一條里，上下位置也不能亂，因?yàn)槲谋究?是基于文本框1得來(lái)的，文本框3是基于文本框2得來(lái)的，這個(gè)順序很重要。

大家看一下演示效果GIF，具體看文本框1、2、3的變化。

到這里，數(shù)組文本框numbergroup里的交互就做完了

進(jìn)一步拆數(shù)字

分別在文本框1、2、3中加入交互動(dòng)作，交互動(dòng)作動(dòng)一樣。

以文本框1為例：在文本改變時(shí)，設(shè)置文本框1-1的文字為[[this.text.slice(0,this.text.indexOf(‘,’))]]。

[[this.text.slice(0,this.text.indexOf(‘,’))]]的意思是，截取文本框1的一部分文字，起始位置0即第一個(gè)字符，終止位置為第一個(gè)逗號(hào)之前的這部分文字。

將這個(gè)交互分別復(fù)制到文本框2、3中，我們來(lái)看一下交互效果GIF：

到這里，所有的數(shù)據(jù)都分離成功了。

開(kāi)始求和，匯總數(shù)字

剛才我們?cè)僦v商品列表頁(yè)中繼器goods list點(diǎn)擊購(gòu)物車圖標(biāo)時(shí)的交互，和購(gòu)物車列表頁(yè)中繼器shoppinglist點(diǎn)擊數(shù)量文本框shuliang文字變化時(shí)的交互時(shí)，都有一個(gè)設(shè)置總計(jì)totalmoney文字為￥[[LVAR1+LVAR2+LVAR3]]的交互沒(méi)有講，這個(gè)就是最后的匯總步驟。

注意￥符號(hào)位置。

回到上述交互中，將LVAR1、LVAR2、LVAR3局部變量分別代表文本框1-1、2-2、3-3。

這樣就達(dá)到了匯總數(shù)據(jù)，接下來(lái)GIF圖效果，重點(diǎn)看總計(jì)部分。

將紅色標(biāo)注的元件隱藏后，就是如下效果：

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

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