这个用的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