seats
/
step3.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>剧场排座插件</title>
	<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
	<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
	<script src="plugin/jdialog/JDialog.min.js"></script>
	<script src="src/seat.js"></script>

</head>
<body>
	<div id="box">
		<h1>Step3：购票</h1>
		<h4 class="text-left" id="selected">已选座位：</h4>
	</div>

	<div class="container" style="margin-top: 10px;">

		<div class="form-inline">
			<button id="submit" class="btn btn-success">提交订单</button>
		</div>

	</div>

<script>
	try {
		var datas = JSON.parse(localStorage.getItem("seats"));
		var selected = JSON.parse(localStorage.getItem("selected"));
	} catch (e){}
	var seats = $.seats({
		box:"#box",
		hall_id : 10, //厅，如：5号厅
		thre_id : 20, //剧场，如：大地电影院中天广场沃尔玛店
		movie_id : 30, //场次ID
		step:3,
		maxTicketNumber : 5, //最多购票张数
		datas:datas,
		selected : selected || {},
		onSelected: function(seat) {
			var id = "selected_"+seat.row+"_"+seat.col;
			var $dd = $('<label class="label label-primary" style="margin-right: 10px;" id="'+id+'">'+seat.row+'排'+seat.col+'座</label>');
			var $close = $('<span aria-hidden="true" style="margin-left: 5px;">×</span>');
			$close.on("click", function(){
				$dd.remove();
				seats.unselect(seat.row, seat.col);
			});
			$dd.append($close);

			$("#selected").append($dd);
			console.log(seat);
			return true;
		},
		onUnselected : function(seat) {
			var id = "selected_"+seat.row+"_"+seat.col;
			$("#"+id).remove();
		},
		onerror : function(msg) {
			JDialog.msg({type:'error', content:msg, container:"#box"});
		}
	});

	$("#submit").on("click",function() {
		console.log(seats.getSelectedSeats());
		localStorage.setItem("selected", JSON.stringify(seats.getSelectedSeats()));
		JDialog.msg({type:'ok', content:"购票成功.", container:"#box"})
		setTimeout(function(){
			location.reload();
		}, 2000);
	});
</script>
</body>
</html>