基于jQuery实现在线选座之高铁版

前端技术 2023/09/01 JavaScript

效果图展示：

查看演示  源码下载

除了电影院在线选座，我们还会接触到飞机机舱选座，当然也有汽车票火车票选座的。假如有一天买火车票也提供在线选座，那么今天我来给大家介绍下如何使用jQuery选座插件完成高铁列车座位布置、选座、不同等级座位计价等操作。

HTML

和上一篇文章一样：jQuery在线选座订座（影院篇），我们使用相同的html结构，左侧显示位置布局图，右侧显示选座相关信息。

相关CSS代码请下载DEMO源码查看，本文不再详述。

<div class=\"container\"> 
 <div id=\"seat-map\"> 
 <div class=\"front\">01车</div> 
 </div> 
 <div class=\"booking-details\"> 
 <h3> 选座信息：</h3> 
 <ul id=\"selected-seats\"></ul> 
 <p>票数: <span id=\"counter\"></span></p> 
 <p>总计: ￥<span id=\"total\">0</span></p> 
  
 <button class=\"checkout-button\">确定购买</button> 
 <div id=\"legend\"></div> 
 </div> 
</div>

jQuery

重点来关注jQuery代码，我们还是使用在线选座插件：jQuery Seat Charts。首先安排高铁车厢座位布局，我假设在01号车厢内有一等座和二等座若干，中间通过出入口通道隔开，大致布局如下：

map: [ //座位图 
 \'ff__ff\', 
 \'ff__ff\', 
 \'______\', 
 \'eee_ee\', 
 \'eee_ee\', 
 \'eee_ee\', 
 \'eee_ee\', 
 \'eee_ee\', 
 \'eee_ee\' 
],

上面的代码f表示的是一等座，e表示的是二等座，符号\"_\"表示过道。

然后我们要定义座位类型的相关属性：

seats: { //定义座位属性 
 f: { 
 price : 100, 
 classes : \'first-class\', 
 category: \'一等座\' 
 }, 
 e: { 
 price : 40, 
 classes : \'economy-class\', 
 category: \'二等座\' 
 }  
},

上面的代码定义了一等座和二等座的价格、类别名称以及对应的css样式。他们可以在后面通过data()方法调用。

接下来我们用naming来定义座位图的行列信息，如下top设置为true则表示显示顶部横坐标（行），columns和rows分别用来定义横坐标（行）和纵坐标（列）的值，getLabel用来返回座位信息，如：01A表示01排A座。

naming : { //定义行列等信息 
 top : true, 
 columns: [\'A\', \'B\', \'C\', \'\', \'D\',\'F\'], 
 rows: [\'01\',\'02\',\'\',\'03\',\'04\',\'05\',\'06\',\'07\',\'08\',\'09\'], 
 getLabel : function (character, row, column) { 
 return row+column; 
 } 
},

然后我们使用legend来定义图例，对应图例关联的元素是#legend，并对座位类型定义对应的样式。

legend : { //定义图例 
 node : $(\'#legend\'), 
 items : [ 
 [ \'f\', \'available\', \'一等座\' ], 
 [ \'e\', \'available\', \'二等座\'], 
 [ \'f\', \'unavailable\', \'已售出\'] 
 ]  
},

最后在外面点击（click）座位图中的位置时，根据当前座位的状态做出不同的处理，包括计算票数和金额总计等，可以参照影院篇的说明。

click: function () { 
 if (this.status() == \'available\') {//可选座 
 $(\'<li>\'+this.data().category+\'<br/>01车\'+this.settings.label+\'号<br/>￥\'+this.data().price+\'</li>\') 
 .attr(\'id\', \'cart-item-\'+this.settings.id) 
 .data(\'seatId\', this.settings.id) 
 .appendTo($cart); 
 //更新票数 
 $counter.text(sc.find(\'selected\').length+1); 
 //计算总计金额 
 $total.text(recalculateTotal(sc)+this.data().price); 
 return \'selected\'; 
 } else if (this.status() == \'selected\') {//已选中 
 $counter.text(sc.find(\'selected\').length-1); 
 $total.text(recalculateTotal(sc)-this.data().price); 
 //删除已预订座位 
 $(\'#cart-item-\'+this.settings.id).remove(); 
 return \'available\'; 
 } else if (this.status() == \'unavailable\') {//已售出 
 //已售出 
 return \'unavailable\'; 
 } else { 
 return this.style(); 
 } 
},

最后，我们使用get()和status()方法设置已经售出不可选的座位。

//已售出不可选座 

sc.get([\'01_A\', \'04_A\', \'07_B\', \'07_F\']).status(\'unavailable\');

值得一提的是，当网站购票非常频繁时需要注意及时刷新座位图，如果座位已经被抢占了则不可选。我们可以使用ajax进行异步请求，并且设置每隔10秒钟运行一次，可以参照如下代码：

setInterval(function() { 
 $.ajax({ 
 type : \'get\', 
 url : \'book.php\', 
 dataType : \'json\', 
 success : function(response) { 
 //遍历所有座位 
 $.each(response.bookings, function(index, booking) { 
 //将已售出的座位状态设置为已售出 
 sc.status(booking.seat_id, \'unavailable\'); 
 }); 
 } 
 }); 
}, 10000); //每10秒

以上就是本文介绍基于jQuery实现在线选座之高铁版，希望大家喜欢。

本文地址：https://www.stayed.cn/item/2562

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案