H5停车场预订位置(电影院选座)前端后端

这个用的H5电影院选座的一个前端demo，前端链接http://www.helloweba.com/demo/seat/，效果还不错，

其实我最怕的是写这种界面，只要界面有了，后端很轻松。。。。。虚晃了一波。。。

他这个demo大家可以去下载。。。

我这里记录后端。。。。

几个数据分析一下，

首先是这个座位图，他有个参数是map，

其次是电影票价格，参数 price，

最后就是已售出的座位标记，参数sc.get().status('unavailable');

 

map: [  //座位图
			'aaaaaaaaaa',
            'aaaaaaaaaa',
            '__________',
            'aaaaaaaa__',
            'aaaaaaaaaa',
			'aaaaaaaaaa',
			'aaaaaaaaaa',
			'aaaaaaaaaa',
			'aaaaaaaaaa',
            'aa__aa__aa'
		],

//已售出的座位
	sc.get(['1_2', '4_4','4_5','6_6','6_7','8_5','8_6','8_7','8_8', '10_1', '10_2']).status('unavailable');

价格直接赋值。。

 

我们需要从服务器获取这三个参数，用来生成选座界面，当我们选中预定一个座位后，我们向数据库中更新一下不可利用的座位号，追加数据例如 ,5_1就是这样。

我们看一下数据库里存储格式，

座位数据字段map

 

aaaaaaaaaa,aaaaaaaaaa,__________,aaaaaaaa__,aaaaaaaaaa,aaaaaaaaaa,aaaaaaaaaa,aaaaaaaaaa,aaaaaaaaaa,aa__aa__aa

不可利用座位字段unable

 

 

5_10,4_8,4_7,4_6,5_6,6_5,7_3,4_2,8_6,5_3,1_1,10_1,6_1,5_1,10_10,7_7,8_4,8_2,8_8

价格字段price

 

 

5

前端获取数据库数据进行处理。。。

 

js脚本跟php交互

mysql省略，直接从get获取数据

 

<input type="hidden" id="c1_map" value="<?php echo $_GET["map"]; ?>">
<input type="hidden" id="d1_price" value="<?php echo $_GET["price"]; ?>">
<input type="hidden" id="e1_unable" value="<?php echo $_GET["unable"]; ?>">

<script type="text/javascript">
var price = $("#d1_price").val(); //订价
$(document).ready(function() {
	var $cart = $('#selected-seats'), //车位区
	$total = $('#total'); //总计金额
	var flag=1;//控制只能选择一个车位
	var row=0;//post排
	var label=0;//post列
	var maparray=$("#c1_map").val().split(",");//数据分割
	var sc = $('#seat-map').seatCharts({
		map: maparray,//座位图
		naming : {
			top : false,
			getLabel : function (character, row, column) {
				return column;
			}
		},
		legend : { //定义图例
			node : $('#legend'),
			items : [
				[ 'a', 'available',   '可选车位' ],
				[ 'a', 'unavailable', '已售出']
			]					
		},
		click: function () { //点击事件
			if (this.status() == 'available'&&flag==1) { //可选车位
				$('<li>'+(this.settings.row+1)+'排'+this.settings.label+'位</li>')
					.attr('id', 'cart-item-'+this.settings.id)
					.data('seatId', this.settings.id)
					.appendTo($cart);
				row=this.settings.row+1;
				label=this.settings.label;
				$total.text(recalculateTotal(sc)+price);
				flag=0;
				return 'selected';
			} else if (this.status() == 'selected'&&flag==0) { //已选中
					//更新数量
					//$counter.text(sc.find('selected').length-1);
					//更新总计
					$total.text(recalculateTotal(sc)-price);
						
					//删除已预订车位
					$('#cart-item-'+this.settings.id).remove();
					//可选车位
					flag=1;
					return 'available';
			} else if (this.status() == 'unavailable') { //已售出
				alert("该车位已售出，请重新选择");
				return 'unavailable';
			} else if (flag==0){
				alert("您已经选择了一个车位,需要重新选择请先取消当前选择");
				return 'available';
			}else {
				return this.style();
			}
		}
	});
	//已售出的车位
	var unablearray=$("#e1_unable").val().split(","); //数据分割
	sc.get(unablearray).status('unavailable');
	
	function send(){
			$.ajax({
				type:"POST",
				url:"_post.php",
				dataType:"json",
				data:{
					select: ","+row+"_"+label,
					position: row+"排"+label+"位",
					name: $("#a1_name").val(),
					id: $("#b1_id").val()
				},
				success:function(data){
					if(data.ok){
						alert("预约成功"+data.msg);
						window.setTimeout("location.href='null_success.php'", 100);
					}else{
						alert("预约失败,未知错误1");
					}
				},
				error:function(jqXHR){
					alert("预约失败,未知错误2");
				}
			});
	}
	$('#btn1').click(function () {
		send();//下单
	});

});
//计算总金额
function recalculateTotal(sc) {
	var total = 0;
	sc.find('selected').each(function () {
		total += price;
	});
			
	return total;
}
</script>

 

这样就完美了，
效果图

 

 

 

CSDN下载，传送门 https://download.csdn.net/download/xbw12138/11033787

完整版的链接 https://blog.csdn.net/xbw12138/article/details/89415241