高级交互教程：用表达式函数实现APP购物车优惠券逻辑

引言

这期文章作为产品设计专栏中的交互相关，分享如何利用函数表达式实现APP购物车计算与优惠券逻辑的高级交互设计，将基于墨刀素材广场一位产品经理“猿人”老师分享的，一个非常实用的高级交互原型案例为基础，拆解设计步骤并提供具体教程。

本文以墨刀高级交互功能演示操作步骤，如有其他原型设计工具也可找到对应功能进行操作。

一、变量绑定与设置

为了后续操作更清晰，首先将所有涉及的变量统一设置并绑定好：

1. 购物车数量：创建数字变量“总件数”，绑定页面左上角购物车数字和左下角购物车数字标注。
2. 加购数量：分别创建数字变量“数量1”“数量2”“数量3”，绑定每个商品对应的数字步进器默认值。
3. 现价金额：分别创建数字变量“价格1”“价格2”“价格3”，绑定对应商品的现价文本属性。
4. 原价金额：分别创建数字变量“价格4”“价格5”“价格6”，绑定对应商品被划线的原价文本属性。
5. 优惠价格：创建数字变量“优惠券”，绑定优惠券金额文本属性。
6. 优惠开关：创建布尔值变量“开关”，绑定开关状态，初始状态为True；
7. 节省金额：创建数字变量“节省”，绑定底部显示节省金额的文本属性。
8. 现价总计：创建数字变量“总计”，绑定左下角总价文本属性。
9. 原价总计：创建数字变量“原价总计”，绑定总计旁划线的原价文本属性。

至此，购物车涉及的15个数字变化的文本和开关都已绑定到变量，为后续的交互行为奠定基础。

二、自动计价与优惠券使用

购物车总价计算和优惠券使用涉及多种条件判断，我们可以将交互目标拆解如下：

总价计算：总计价格 = 每个商品加购数量 × 商品价格之和；原价同理。

优惠券判断：

• 当总价<优惠券金额（例如 18.8 元），自动关闭优惠券开关，点击开关无法启用，并提示用户；
• 当总价≥优惠券金额，打开开关时，总计金额和原价总计均减少优惠券金额。

详细的操作步骤如下：

1. 自动计算价格交互设置

利用已创建的变量，可以快速设置总价和原价总计：

• 为总计价格添加交互：

触发方式——载入时，交互行为——设置变量值：

将“总计”设为“数量1”*“价格1”+“数量2”*“价格2”+“数量3”*“价格3”-“优惠券”

• 为原价总计价格添加交互：

触发方式——载入时，交互行为——设置变量值：

将“原价总计”设为“数量1”*“价格4”+“数量2”*“价格5”+“数量3”*“价格6”-“优惠券”

Tips：为了方便描述，将减去优惠券的计算方式称为「有优惠券计算方式」，不减去优惠券的计算方式称为「无优惠券计算方式」。

2. 商品加购后的金额计算

以第一个商品为例，为数字步进器设置交互，触发方式——单击，其他同理：

• 自动计算商品数量：将“总件数”设为“数量1”+“数量2”+“数量3”

条件判断设置金额计算方式：

• 条件1：如果“开关”==true，则“总计”设为「有优惠券计算方式」，将“原价总计”设为「有优惠券计算方式」；
• 条件2：如果“开关”==false，则“总计”和“原价总计”使用「无优惠券计算方式」；
• 条件3：如果“总计”<“优惠券”，则将“开关”设为false；将“总计”设为「无优惠券计算方式」；
• 条件4：如果“原价总计”<“优惠券”，则将“开关”设为false；将“原价总计”设为「无优惠券计算方式」；

3. 总价少于优惠券自动禁用

一方面要满足用户打开和关闭开关对应的总计金额变化，另一方面需要对总计金额与优惠券大小做条件判断和禁用限制，对优惠券开关设置交互，触发方式——单击：

• 条件1：如果“开关”==false，则“总计”和“原价总计”使用「无优惠券计算方式」；
• 条件2：如果“开关”==true，则“总计”和“原价总计”使用「有优惠券计算方式」；
• 条件3：如果“总计”<“优惠券”，则打开浮层提示，将“开关”设为false，“总计”与“原价总计”使用「无优惠券计算方式」

这样可以保证用户操作开关时逻辑自洽，同时实现总价不足时自动禁用优惠券的效果。

三、其他几个简单交互

1. 节省金额自动计算

为实现节省价格随时保持原价总计减去总计的差额，可以为其设置交互，触发方式——载入时，交互行为——设置变量值：将“节省”设为“原价总计”-“总计”。

2. 删除缺货失效商品

对于缺货商品，可以通过单击删除来一键清除，这里涉及到了一个简单的交互行为“显示/隐藏”，具体操作为：

• 为“删除”文本设置交互，触发方式——单击，行为——显示/隐藏，目标元素——缺货整体组件。

结语

购物车交互虽然涉及多个变量、函数和条件判断，但通过巧妙的变量绑定与函数表达式设置，可以实现多种接近真实体验的动态交互效果。

掌握了这些高级功能后，不仅能够优化购物车操作体验，也能灵活应用到其他APP场景，如订单结算、优惠策略展示等。希望本教程能帮助大家更好地理解并运用函数表达式交互设计。