中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

本篇文章介紹如何用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列的值更新為未選。

這里我們還需要考慮到左右拖動查看更多的問題，因為頁面只能顯示4張票，如果選擇了5張，我們就要增加一個左右拖動查看更多的效果。

這里我們用中繼器的項目數來判斷，如果大于等于5，在拖動時，我們就用移動事件，讓座位明細中繼器組合隨著鼠標水平移動，這里我們根據需要給他增加一個左右邊界

因為在重新選擇座位后，如果選擇小于4張，如果有拖動過，就要做一個還原，移動到0.0.的初始位置，所以在前面還原操作的時候，就是中繼器加載第一行的時候，我們要增加一個移動時間，將他移動的原來的位置

4. 計算金額

首先我們要增加一個支付按鈕的動態面板，有兩個狀態，一個是未選擇座位的狀態，文字為請選擇座位，第二個狀態是已選中座位，文字問總金額+確認座位。

我們要增加一個文本來計算已選座位的總金額，這里和上面記錄選中數的邏輯是一樣的。

在中繼器每項加載第一行的時候，我們用設置文本的交互，將總金額的文本設置為0，這相當于重置的操作，如果state列的值為選中，那我們就設置選中數為它原來的數+price列的價格，這樣就可以記錄總金額，然后在將總金額設置到已選座位的按鈕文本上就可以了。

加載到最后一行的時候，我們可以要判斷選中數，如果選中數為0，就是沒有選擇座位，就用設置面板狀態的交互，將按鈕設置到第一種未選擇座位的狀態，否則就設置到第二種已選擇座位的狀態。

5. 推薦座位

前面座位明細中繼器要組合放入按鈕動面板為已選座位的狀態。

然后在未選擇座位的狀態里面增加推薦座位5個小按鈕，我們用矩形制作即可。

鼠標單擊按鈕時，我們用更新行的交互，將符合條件的座位的state值更新為選中。

一般我們會選擇在推薦區域的并排的座位，案例中我們固定了推薦7排中部的座位

推薦1個座位的交互如下：

推薦多個座位時，我們用||將條件隔開即可，下面就是推薦5個座位的交互

6. 隨機座位

為了模擬實際情況，不同場次的座位情況不同，或者說就算同一個場次的座位情況也能分分鐘變化，所以我們做了一個隨機事件，讓座位的狀態可選、不可售、已售隨機出現。

首先我們在載入時，我們要先將所有行更新為未選的狀態，然后抽取一個隨機數，我們可以用設置文本的交互，抽取一個隨機數，抽到的這個隨機數就是已售座位的數量，我們可以用randow函數來抽取，案例中是抽取1-6個，你們也可以根據實際情況設置，因為下面有循環事件，抽取太多可能會卡頓哦

然后我們做一個循環事件，如果隨機數的值不等于0，我們先用隨機數，來抽取一個幾行幾列的值，然后用更新行的交互，將對應行state列的值更新為已售，更新完成之后，用設置文本的交互，將隨機數的值設置為它原來的值-1。

完成之后，我們用等待事件和觸發事件，等在1毫秒后觸發該事件鼠標單擊時，這樣相當于做了一個循環，隨機數會慢慢遞減一直到0。

如果隨機數等于0時，我們再次抽取兩組，座位不可售的座位，同樣是用設置文本的交互，利用random事件隨機出作為編號，然后用更新行的交互，將符合條件的座位的state值設置為不可售

然后復制這兩個事件，需要隨機多少個不可售作為就復制基礎，案例中是2次。

最后還需要考慮上面推薦座位的功能，因為上面推薦的座位時寫死的，所以這里我們要防止隨機事件將推薦的座位更新成已售或者不可售，所以我們用更新行的交互，將對應推薦的座位的state值更新為可選。

案例中寫的是更新為1，這是因為作為為了方便，因為前面設置面板狀態是根據值來的，只要不是已售和不可售，你輸入其他的值都會默認進入第一個狀態，就是可選的狀態。

這樣我們就完成了購票選座原型模板的制作了，后續我們也可以增加根據不同電影的來傳遞不同的值的交互，讓整個原型變得更加高保真。

那以上就是本期教程的全部內容，感興趣的同學們可以動手試試哦，感謝您的閱讀，我們下期見。