中继器使用场景（二）：购物车金额实时求和

本文涉及到：点击“购物车图标”增减购物商品数量；多次点击购物车图标，只增加数量，不重复添加条目。在我的上一篇教程《中继器使用场景（一）》中有具体操作办法，在此不做赘述。

Axure中的一个难题：中继器数据实时求和

先看一下运用在购物车实景操作中的效果，下方GIF图：大家重点看“最下端的金额”变化，根据商品的多少、数量的多少，实时对数据求和。

为了讲解清晰，我将高保真原型的逻辑提炼成简单的部件，GIF图展现如下：

首先，我们准备如下元件

每个元件解释如下：

1、商品列表中继器（goods list），包含：购物车图标（shopping）、商品名称（name）、商品价格（price）、商品数量（shuliang），其中商品数量（shuliang）不绑定元件赋值，只存在数据集中。

各项目赋值及初始值情况如下图：注意¥符号的摆放位置。

2、购物车列表中继器（shoppinglist），包含：商品名称（name）、商品价格（price）、商品数量（shuliang），增加数量的“+”号（add），减少数量的“-”号（minus），每项的金额小计（xiaoji）。

各项目赋值及初始值情况如下图：其中展示数量的元件，即在加减号中间的那个元件，必须是文本框，此步非常重要。注意¥符号的摆放位置。

3、过渡计算用的中继器（temp）：此元件，在项目调试完毕后，设置为隐藏，在教程中，为了讲解，未做隐藏。包含商品名称（name2）该项不绑定元件赋值，只存在数据集中。提取购物车列表中继器shoppinglist中的小计项目xiaoji2。

各项目赋值及初始值情况如下图：

4、将各行“小计”金额数字脱离中继器，取出数值用的矩形，命名为number。特别注意：此处必须是矩形，不能用文本框，具体原因，后续会讲解到。此步非常重要，此元件，在项目调试完毕后，设置为隐藏。在教程中，为了讲解，未做隐藏。

5、将上一步矩形number中的数值，转变为数组的文本框，命名为numbergroup。特别注意，与上一步相反，此处必须是文本框，不能为矩形，具体原因，后续会讲解到。此步非常重要，此元件，在项目调试完毕后，设置为隐藏。在教程中，为了讲解，未做隐藏。

6、将上一步文本框numbergroup中的数值，进行数字的第一步提取，一共准备三个文本框，分别命名为1、2、3，这些元件，在项目调试完毕后，设置为隐藏，在教程中，为了讲解，未做隐藏。

7、将上一步文本框1、2、3中的数值，进行数字的第二步提取。一共准备三个文本框，分别命名为1-1、2-2、3-3，这些元件，在项目调试完毕后，设置为隐藏，在教程中，为了讲解，未做隐藏。

8、合计金额用的文本框totalmoney，摆放位置在购物车列表中继器下方，单独存在，不放在中继器中。

接下来，我们说思路：

在商品列表中继器goods list中点击购物车图标 →在购物车列表中继器shoppinglist中产生小计的金额 →通过过渡计算用的中继器temp，将小计金额单独提取出来  →  中继器内不能直接求和，将小计金额的数字分离出中继器即矩形number   →  因为分离出来的是带格式的无法分割的文本，要转换为数组 文本框numbergroup  →  将数组分成单个的数字   →  将数字相加。

大功告成。

接下来，开始添加交互

1、在商品列表中继器goods list中的购物车图标添加交互，截图如下：

交互解释：

Case 1、Case3的交互解释参看《中继器使用场景（一）》的具体讲解，在此不做赘述。主要功能就是实现当除了第一次点击购物车以外，以后的重复点击，在购物车列表中只增加数量，而不重复添加条目，同时因为数量增加了，小计金额不断增加