【Axure交互教程】购物车结算效果

作品名称：滑动拼图验证登录效果

作品编号：Case010

软件版本：Axure9

作品类型：交互案例

今天我们制作的是移动端的购物车结算效果，主要涉及的是中继器的使用，全选以及数量的计算。

原型预览链接（附源文件下载链接）：http://daisyaxure.com/demo/Case010

效果预览：

一、中继器数据绑定

准本元件

1.拖入一个中继器元件，命名为「商品列表」，样式列表中设置布局为垂直，间距为10，填充数据如下：

2.双击进入中继器，拖入下图中的所有元件，右键将所有元件设为组合，命名为「商品卡片」；商品小计作为计数的辅助元件，右键设置为不可见。

添加交互

给中继器「商品列表」添加【项目载入时】的交互，将「商品卡片」中的元件与样式面板中的数据集进行绑定。

1.添加动作，选择【设置文本】，目标「商品名称」设置为【文本】变量值为【[[Item.ProductName]]】；

3.继续添加动作，选择【设置图片】，目标「商品图片」设置default图片为【值】【[[Item.Picture]]】；

设置完成后

二、计数器

准备元件

1.拖入一个减少的按钮和一个文本框，分别右键点击【交互样式】-【禁用】，设置颜色为灰色，右键这两个元件设置为组合，命名为「remove」；

2.同样拖入一个增加的按钮和一个文本框，右键这两个元件设置为组合，命名为「add」；

3.拖入一个文本框，隐藏边框，命名为「商品数量」。

交互分析

1.点击增加按钮「add」，文本框「商品数量」的值+1

2.点击减少按钮「remove」，文本框「商品数量」的值-1

3.「商品数量」的值为1时，减少按钮「remove」不可点击

4.「商品数量」的数值可手动输入，当输入的数值小于1时，失去焦点时，数字自动变为1。

添加交互

1.给组合「add」添加【单击时】【设置文本】，目标「商品数量」为【[[Target.text+1]]】；

2.给组合「remove」添加【单击时】【设置文本】，目标「商品数量」为【[[Target.text-1]]】；

3.给文本框「商品数量」添加【文本改变时】的交互：

添加情形1，【元件文字】【当前】【==】【1】时，添加动作【禁用】「remove」；

添加情形2，【元件文字】【当前】【>】【1】时，添加动作【启用】「remove」。

这里需要做个判断，「商品数量」数值最小为1，所以当「商品数量」值为1 时，需要禁用减少按钮「add」；因为「商品数量」是可以直接输入数字的文本框，所以数值的判断应该加在「商品数量」上。

4.给文本框「商品数量」添加【失去焦点时】的交互，当【元件文字】【当前】【<】【1】时，添加动作【设置文本】「当前」为【1】，目的是当我们输入里小于1 的数字时，数量会自动变成1。

三、全选/取消全选的效果

准备元件

制作底部工具栏

拖入制作好的单选按钮，命名为「全选按钮」；
拖入一个文本标签，命名为「总价」；
拖入一个文本标签，命名为「选中数量计数」，右键设置为不可见。

交互分析

中继器里含有3条数据，这里我们使用一个文本「选中数量计数」来辅助我们完成全选效果；中继器「商品列表」中的「单选按钮」状态为选中时，设置「选中数量计数」数值+1；「单选按钮」状态为取消选中时，设置「选中数量计数」数值-1；并且当「选中数量计数」累计数值为3时，设置选中「全选按钮」。

添加交互

1.双击中继器「商品列表」，给「单选按钮」添加动作【单击时】，【设置选中】【当前】效果为【切换】；

2.给「单选按钮」添加动作【选中时】，【设置文本】目标为「选中数量计数」值为【[[Target.text+1]]】；

继续添加【选中时】的交互，这时候我们需要启用情形，并且添加一个情形2，给情形2添加条件，【元件文字】「选中数量计数」【==】【3】时，添加动作【设置选中】「全选按钮」为【真】；

3.同样的给「单选按钮」添加动作【取消选中时】，【设置文本】目标为「选中数量计数」值为【[[Target.text-1]]】；添加动作【设置选中】「全选按钮」为【假】；

4.给「全选按钮」添加动作【单击时】，【设置选中】【当前】效果为【切换】；

5.继续添加【单击时】的交互，这时候我们需要启用情形，并且添加一个情形2，给情形2添加条件，如果【选中状态】「当前」【==】【值】【真】时，【设置选中】「单选按钮」效果为【真】；继续添加情形【选中状态】「当前」【==】【值】【假】时，【设置选中】「单选按钮」效果为【假】

完成上述步骤，全选/取消全选的效果就完成了，请注意多个情形下的条件设置。

四、总价数值的计算

交互分析

影响「总价」数值变化的有单选按钮/全选按钮的选中状态以及商品数量值的变化，这里我们需要借助文本标签「商品小计」来实现，「商品小计」的数值为每条数据中的商品价格与数量的乘积。

添加交互

1.给「商品小计」设置【载入时】的交互，添加动作【设置文本】【当前】值为【[[Item.Price*number]]】

2.给「商品数量」添加【文本改变时】的交互，需要做「单选按钮」选中状态的判断，只有选中时，「商品数量」的增减才会影响「总价」的数值，但是无论「单选按钮」是否被选中，「商品数量」的变化时都需要记录「商品小计」的值。

商品数量的值为：【￥[[(Target.text.slice(1)-subtotal+Item.Price*num).toFixed(2)]]】

这里我们要用此时总价的值先减去商品小计初始的值，再去累加商品数量乘以价格的值才是准确的，不然会重复计算。

slice(start,end) 用途：从当前文本对象中截取从指定起始位置开始到终止位置之前的字符串。参数：start为被截取部分的起始位置，该数值可为负数；end为被截取部分的终止位置，该数值可为负数。该参数可省略，省略该参数则由起始位置截取至文本对象结尾。

toFixed(decimalPoints)用途：将一个数字转为保留指定位数的小数，小数位数超出指定位数时进行四舍五入。decimalPoints为保留位数，这里我们需要保留到小数点后2为，所以数值为2.

上述我们已经做了文本的限制，加上单选按钮的选中状态，全部情形及交互如下：

3.给「单选按钮」添加【选中时】的交互，【设置文本】目标为「总价」，值为【￥[[(Target.text.slice(1)+Item.Pricenum).toFixed(2)]]】；给「单选按钮」添加【取消选中时】的交互，【设置文本】目标为「总价」，值为【￥[[(Target.text.slice(1)-Item.Pricenum).toFixed(2)]]】

4.因为取消全选时，总价的值应该为0，所以最后还需要给「全选按钮」的情形3添加一个【设置文本】的动作，目标为「总价」，值为【￥0.00】

添加完成后就完成整个交互了，如果还有不清楚的地方，可在文章开头点击预览链接中的下载按钮，下载源文件查看交互细节。

更多高保真原型及交互案例请访问：http://daisyaxure.com