本篇文章介绍如何用Axure制作购票选座模板，作者提供了详细的流程操作，让我们一起来学习吧，希望能对你有所帮助。

购票选座是指在购买电影、演唱会、体育赛事等活动的门票时，顾客可以在购票过程中自主选择自己喜欢的座位位置。

这种购票方式通常通过在线平台或手机应用实现，顾客可以在座位图上查看场馆的座位分布情况，并根据自己的喜好和需求选择心仪的座位。

今天作者就教大家在Axure中如何制作高保真购票选座的原型模板。

一、效果展示选择座位：点击可选座位，可以选择对应座位；再次点击已选座位，可以取消选择该座位购票限制：可以规定一次最多选择的座位数，案例中是5次座位明细：选择座位后，下方会出现已选座位的明细，可以左右拖动查看，也可以点击关闭按钮取消选中该座位计算金额：可以设置不同区域的座位为不同的价格，选择座位后计算出需要支付的总额推荐座位：没有选择座位时，可以选择推荐座位，根据选择的人数，选择对应的座位随机座位：每次进入时，随机生成可选、已售、不可售的座位

原型地址：

二、制作教程1. 选择座位

我们要先用中继器制作出作为表，中继器里面需要放在一个动态面板，动态面板里有3个state（分别命名为可选、不可售、已售），里面分别放置可选、已售、不可售3种图标素材。

中继器布局为网格分布，案例种是水平布局，每行项目数为10，大家也可以根据自身需要设置。

中继器表格里面有三列，no列填写对应座位的信息几排几列；state列填写状态，不可售状态填写不可售，已售填写已售，可选填写可选或者不填即可；price列填写对应座位的金额：

在中继器每项加载时，我们用设置面板状态的交互，设置动态面板进入到和state同样的页面即可。

然后我们用2根垂直线和水平线，将最佳观影区圈起来，用矩形和数字，将排数显示出来，如下图所示效果：

鼠标单击可选里面的图标时，我们用更新行的交互，将中继器当前行state的值更新为已选：

鼠标单击已选里面的图标时，我们用更新行的交互，将中继器当前行state的值更新为可选：

这样就可以点击选中和取消选中座位了。

2. 购票限制

一般的app会有购票限制，一次只能选中购买多少张票这样，所以我们这里也做一个限制，限制一次最多只能选择5个座位。

这里我们首先要增加一个隐藏文本，用于记录已选座位数。

在中继器每项加载第一行的时候，我们用设置文本的交互，将选中数设置为0，这相当于重置的操作，如果state列的值为选中，那我们就设置选中数为它原来的数+1，这样就可以记录选中了多少个。

然后我们回到鼠标单击可选里面的图标时的交互，这里我们要增加一个条件，就是如果选中数小于5，案例中是5，当然我们也可以增加一个文本，用来控制最大选中数。

将文本变成变量，后续修改文本就可以控制最大选中数了，这个条件成立，我们才用更新行，否则我们就用显示的交互，将提示的元件显示出来。

这里提示元件用矩形制作就可以了，如果想固定定在页面中部，也可以转为动态面板固定在中部。

3. 座位明细

在下方我们用中继器来制作一个座位明细，里面包含一个矩形背景，两个文本标签，分别对应座位号和价格，一个删除按钮，如下图所示：

中继器表格里no和price两列，分别对应座位号和价格。

在中继器每项加载时，将no列和price列的值分别设置到座位号和价格的文本标签里。

然后我们这里的值，要通过前面座位中继器传递过来。

首先我们在加载第一行的时候，要做一个还原的处理，我们可以先用标记行的交互标记座位明细中继器的所有行，然后用删除行的交互将所有行删除。

如果state里的值等于选中，我们就用添加行的交互，将该行no列和price列的值设置添加到座位明细中继器里。

鼠标单击座位明细中继器里的删除按钮时，我们用更新行的交互，将座位中继器里对应的行的state列的值更新为未选。