客车网上订票系统项目--在线预约、个人中心我的订单
1、今日完成任务：
（1）点击预约下单购票与数据库关联。
（2）前端个人中心我的订单编辑。
2、核心代码
订票与数据库关联order.php：
<?php //预定进入界面 session_start(); //需要判读一下有没有进行登录 如果有登录进行显示下面的页面 如果没有登录则进入登录界面 if(!isset($_SESSION["userAccount"])){ //存储一下当前url 用于登录成功之后跳回 $_SESSION["userUrl"]=$_SERVER['REQUEST_URI']; header("location:login.php"); die();//下面的代码不在执行 } require_once 'function.php'; $id=$_GET['id']; //显示对应车票列表 $sql="select * from ticketInfo where ticketStatus=1 and id=$id;"; $rows=sel($sql); //乘客信息 $sqlPsgs="select * from passengers;"; $rowsPsgs=sel($sqlPsgs); //新加乘客信息 $Name=$_GET['name']; $Card=$_GET['card']; $Tel=$_GET['tel']; ?> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>预定-客车网上售票系统</title> <link rel="stylesheet" type="text/css" href="css/base.css"/> <link rel="stylesheet" type="text/css" href="css/others.css"/> </head> <body> <!--头部--> <div class="header"> <div class="container clear"> <div class="left"><a href="index.html"><img src="img/logo_pc.png"/></a></div> <div class="right clear"> <ul class="nav left clear"> <li><a href="index.html">首页</a></li> <li class="active"><a href="ticketsOnline.html">在线订票</a></li> <li><a href="newsList.html">新闻公告</a></li> <li><a href="leftMessage.html">留言中心</a></li> <li><a href="userInfo.html">个人中心</a></li> </ul> <div class="right btns-links"> <a href="login.html">登录</a> <a href="register.html">注册</a> </div> </div> </div> </div> <!--预定--> <div class="order-box"> <div class="container clear"> <div class="left order-info"> <div class="ticket-info"> <h3>车票信息</h3> <table class="ticket-content" border="0" cellspacing="" cellpadding=""> <tr> <th>起始站</th> <th>到达站</th> <th>发车时间</th> <th>车次</th> <th>价格</th> </tr> <tr> <td><?php echo $rows[0]["startPosition"]?></td> <td><?php echo $rows[0]["endPosition"]?></td> <td> <p><?php echo explode(" ", $rows[0]['startTime'])[0]?></p> <p><?php echo explode(" ", $rows[0]['startTime'])[1]?></p> </td> <td><?php echo $rows[0]["carName"]?></td> <td style="color: red;">￥<?php echo $rows[0]["ticketPrice"]?></td> </tr> </table> </div> <!-- <form action="payment.php?id=<?php echo $id;?>" method="post"> --> <div class="ticket-info"> <h3>填写乘客信息</h3> <?php if($rowsPsgs){?> <div class="passengers-item"> <?php foreach ($rowsPsgs as $key=>$value){?> <label data-id="<?php echo $rowsPsgs[$key]["passengersId"]?>" data-card="<?php echo $rowsPsgs[$key]["passengersCard"]?>" data-tel="<?php echo $rowsPsgs[$key]["passengersTel"]?>" data-name="<?php echo $rowsPsgs[$key]["passengersName"]?>"><input type="checkbox" name="" id="<?php echo $rowsPsgs[$key]["passengersId"]?>" value="" /><?php echo $rowsPsgs[$key]["passengersName"]?></label> <?php }?> </div> <?php }?> <table class="ticket-content ticket-content-passengers" border="0" cellspacing="" cellpadding=""> <tr> <th>姓名</th> <th>证件类型</th> <th>证件号码</th> <th>手机号</th> <th>操作</th> </tr> <?php if(isset($Name)){?> <!-- <tr> <td><input style="width: 100px;" type="text" name="passengers-name" id="passengers-name" value="<?php echo $Name;?>" /></td> <td> <select name="cardType"> <option value="sfz">身份证</option> </select> </td> <td><input type="text" name="passengers-card" id="passengers-card" value="<?php echo $Card;?>" /></td> <td><input type="text" name="passengers-tel" id="passengers-tel" value="<?php echo $Tel;?>" /></td> <td><a href="javascript:;" onclick="passengers_del(this,1)">删除</a></td> </tr> --> <?php }?> </table> <span class="add-btn" onclick="passengers_add('添加','orderpassengers-add.php?id=<?php echo $id;?>',600,450)">+添加乘客</span><span style="color:gray;font-size:12px;">(每个订单最多可选择3位乘客)</span> </div> <div class="ticket-info submit-box"> <p>注意 : 由于车站实名购票要求，请确保会员以及乘客的身份证信息真实有效。请携带与乘车人信息一致的身份证前往车站乘车， 购买半价票的旅客检票需携带户口本， 以免耽误你的行程。</p> <input type="submit" class="submit" name="submit" id="submit" onclick="submit('payment.php?id=<?php echo $id;?>')" value="提交订单" /> </div> <!-- </form> --> </div> <div class="right tips-info"> <div class="tips-box"> <h3>购票须知</h3> <div class="tips-content"> <p>1.网页端目前仅支持购买售卖全价票。</p> <p>2.支付成功会及时短信通知您购票结果；您也可以到订单中心查看出票情况。如果购票未成功，您的资金将在1-7个工作日内全额原路退至原支付账户。</p> <p>3.请提前至少30分钟，凭取票短信或订单详情中显示的“取票号”、“取票密码”等信息及取票人身份证件前往出发车站取票。</p> <p>4.服务费包含支付手续费、技术接入费、短信费等费用；出票成功、乘客自主线下窗口退票服务费不退还。因车站原因停售班次，联系巴士管家在线客服核实信息后，服务费将会退还至原账户，退还时间3-7个工作日。</p> </div> </div> </div> </div> </div> <!--优势--> <div class="register-advantage"> <div class="container"> <ul class="clear"> <li class="clear"> <div class="advantage-img left"><img src="img/icon_pinpaibaozheng.png"/></div> <div class="left"> <h4>品牌保证</h4> <p>提供正规的购票服务</p> </div> </li> <li class="clear"> <div class="advantage-img left"><img src="img/icon_kuaisufankui.png"/></div> <div class="left"> <h4>快速反馈</h4> <p>第一时间短信通知</p> </div> </li> <li class="clear"> <div class="advantage-img left"><img src="img/icon_fangbiankuaijie.png"/></div> <div class="left"> <h4>方便快捷</h4> <p>车站直接取票上车</p> </div> </li> <li class="clear"> <div class="advantage-img left"><img src="img/icon_zhifufangbian.png"/></div> <div class="left"> <h4>支付方便</h4> <p>支付宝微信</p> </div> </li> </ul> </div> </div> <!--底部--> <div class="register-footer"> <p>客车网上售票系统官方电话 400-100-1234 0371-1234567 客车网上售票信息公示</p> <p>客车网上售票系统 Copyright©2020-2030 版权所有 XXXXXX网络科技有限公司 豫ICP备15030935号-1</p> </div> <script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script> <script src="layer/layer.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ $("label input").prop("checked",false); //点击添加乘客信息 $("label input").change(function(e){ var dataId=$(this).parent().attr("data-id"); var dataCard=$(this).parent().attr("data-card"); var dataTel=$(this).parent().attr("data-tel"); var dataName=$(this).parent().attr("data-name"); if($(this).is(':checked')){ var newRow='<tr data-id="'+dataId+'"><td>'+ '<input style="width: 100px;" type="text" name="passengers-name" id="passengers-name" value="'+dataName+'" />'+ '</td><td><select name="cardType"><option value="sfz">身份证</option></select></td>'+ '<td><input type="text" name="passengers-card" id="passengers-card" value="'+dataCard+'" /></td>'+ '<td><input type="text" name="passengers-tel" id="passengers-tel" value="'+dataTel+'" /></td>'+ '<td><a href="javascript:;" onclick="passengers_del(this,1)">删除</a></td></tr>'; if($(".ticket-content-passengers tr").length<4){ $(".ticket-content tr:last").after(newRow); }else{ alert("最多只能买3张"); $(this).prop("checked",false); } }else{ for(var i=1;i<$(".ticket-content-passengers tr").length;i++){ if($(".ticket-content-passengers tr").eq(i).attr("data-id")==dataId){ $(".ticket-content-passengers tr").eq(i).remove(); break; } } } }); /* $(".add-btn").click(function(){ var newRow="<tr><td>"+ '<input style="width: 100px;" type="text" name="passengers-name" id="passengers-name" value="" />'+ '</td><td><select name="cardType"><option value="sfz">身份证</option></select></td>'+ '<td><input type="text" name="passengers-card" id="passengers-card" value="" /></td>'+ '<td><input type="text" name="passengers-tel" id="passengers-tel" value="" /></td>'+ '<td><a href="javascript:;">删除</a></td></tr>'; if($(".ticket-content-passengers tr").length<4){ $(".ticket-content tr:last").after(newRow); }else{ alert("最多只能买3张"); } }); */ }); //删除乘客信息 function passengers_del(obj,id){ layer.confirm("确认要删除吗？",function(){ $(obj).parents("tr").remove(); layer.msg('已删除!',{icon:1,time:1000}); for(var i=0;i<$("label").length;i++){ if($("label").eq(i).attr("data-id")==$(obj).parents("tr").attr("data-id")){ $("label").eq(i).find('input').prop("checked",false); break; } } }); } //添加乘客 //添加成功信息 function layer_show(title,url,w,h){ layer.open({ title:title, type: 2, area: [w+"px", h+"px"], fixed: false, //不固定 maxmin: true, close:true, content: url }); } function passengers_add(title,url,w,h){ layer_show(title,url,w,h); } //提交 function submit(url){ var num=$(".ticket-content-passengers tr").length-1; if(num==0){ layer.alert("请填写乘客信息"); return false; } //存储一下 用户id 车票id==>url 乘客id var aPId=new Array(); for(var i=0;i<$('label').length;i++){ if($('label').eq(i).find("input").is(":checked")){ aPId.push($('label').eq(i).attr("data-id")); } } //此处请求后台程序，下方是成功后的前台处理…… window.location.href=url+"&num="+num+"&arr="+aPId; } </script> </body> </html>
前端个人中心我的订单:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>未完成订单-客车网上售票系统</title> <link rel="stylesheet" type="text/css" href="css/base.css"/> <link rel="stylesheet" type="text/css" href="css/userInfo.css"/> </head> <body> <!--头部--> <div class="header"> <div class="container clear"> <div class="left"><a href="index.html"><img src="img/logo_pc.png"/></a></div> <div class="right clear"> <ul class="nav left clear"> <li><a href="index.html">首页</a></li> <li><a href="ticketsOnline.html">在线订票</a></li> <li><a href="newsList.html">新闻公告</a></li> <li><a href="leftMessage.html">留言中心</a></li> <li class="active"><a href="userInfo.html">个人中心</a></li> </ul> <div class="right btns-links"> <a href="login.html">登录</a> <a href="register.html">注册</a> </div> </div> </div> </div> <!--个人中心--> <div class="userInfo-box"> <div class="container clear"> <div class="left w18"> <ul> <li> <h3>资料设置</h3> <a href="userInfo.html">个人资料</a> <a href="passengers.html">常用旅客</a> <!--<a href="editPass.html">修改密码</a>--> </li> <li> <h3>我的订单</h3> <a href="orderUnfinished.html">未完成订单</a> <a href="">未出行订单</a> <a href="">历史订单</a> </li> </ul> </div> <div class="right w80"> <div class="userInfo-ctn orderUnfished-box"> <h3>未完成订单</h3> <form action="" method="post" class="search-form"> <span>购票时间：</span> <span>从</span><input type="date" name="startDate" id="" value="" /> <span>到</span><input type="date" name="endDate" id="" value="" /> <input type="submit" name="submit" id="submit" class="submit" value="筛选" /> </form> <div class="orderUnfished-content"> <table border="0" cellspacing="" cellpadding=""> <tr> <td colspan="3">预定时间：2020-07-28 17:18:18</td> <td colspan="3">订单号：BO010702007</td> </tr> <tr> <td colspan="2">郑州--->周口</td> <td><p>2020.9.10</p><p>12:00:00</p></td> <td style="color: red;">￥60</td> <td> <p>车票状态</p> <p>已取消</p> </td> <td> <a href="ticketsOnline.html">重新购买</a><br /> <a href="orderDetail.html">查看详情</a> </td> </tr> </table> <table border="0" cellspacing="" cellpadding=""> <tr> <td colspan="3">预定时间：2020-07-28 17:18:18</td> <td colspan="3">订单号：BO010702007</td> </tr> <tr> <td colspan="2">郑州--->周口</td> <td><p>2020.9.10</p><p>12:00:00</p></td> <td style="color: red;">￥60</td> <td> <p>车票状态</p> <p>已取消</p> </td> <td> <a href="javascript:;">重新购买</a><br /> <a href="javascript:;">查看详情</a> </td> </tr> </table> </div> </div> </div> </div> </div> <!--优势--> <div class="register-advantage"> <div class="container"> <ul class="clear"> <li class="clear"> <div class="advantage-img left"><img src="img/icon_pinpaibaozheng.png"/></div> <div class="left"> <h4>品牌保证</h4> <p>提供正规的购票服务</p> </div> </li> <li class="clear"> <div class="advantage-img left"><img src="img/icon_kuaisufankui.png"/></div> <div class="left"> <h4>快速反馈</h4> <p>第一时间短信通知</p> </div> </li> <li class="clear"> <div class="advantage-img left"><img src="img/icon_fangbiankuaijie.png"/></div> <div class="left"> <h4>方便快捷</h4> <p>车站直接取票上车</p> </div> </li> <li class="clear"> <div class="advantage-img left"><img src="img/icon_zhifufangbian.png"/></div> <div class="left"> <h4>支付方便</h4> <p>支付宝微信</p> </div> </li> </ul> </div> </div> <!--底部--> <div class="register-footer"> <p>客车网上售票系统官方电话 400-100-1234 0371-1234567 客车网上售票信息公示</p> <p>客车网上售票系统 Copyright©2020-2030 版权所有 XXXXXX网络科技有限公司 豫ICP备15030935号-1</p> </div> </body> </html>
订单详情页：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>订单详情-客车网上售票系统</title> <link rel="stylesheet" type="text/css" href="css/base.css"/> <link rel="stylesheet" type="text/css" href="css/userInfo.css"/> </head> <body> <!--头部--> <div class="header"> <div class="container clear"> <div class="left"><a href="index.html"><img src="img/logo_pc.png"/></a></div> <div class="right clear"> <ul class="nav left clear"> <li><a href="index.html">首页</a></li> <li><a href="ticketsOnline.html">在线订票</a></li> <li><a href="newsList.html">新闻公告</a></li> <li><a href="leftMessage.html">留言中心</a></li> <li class="active"><a href="userInfo.html">个人中心</a></li> </ul> <div class="right btns-links"> <a href="login.html">登录</a> <a href="register.html">注册</a> </div> </div> </div> </div> <!--个人中心--> <div class="userInfo-box"> <div class="container clear"> <div class="left w18"> <ul> <li> <h3>资料设置</h3> <a href="userInfo.html">个人资料</a> <a href="passengers.html">常用旅客</a> <!--<a href="editPass.html">修改密码</a>--> </li> <li> <h3>我的订单</h3> <a href="orderUnfinished.html">未完成订单</a> <a href="">未出行订单</a> <a href="">历史订单</a> </li> </ul> </div> <div class="right w80"> <!--车票信息--> <div class="ticket-info"> <h3 class="clear"> <span>订单状态：已取消</span> <span>预订时间：2020-7-29 10:00:00</span> <span>订单号：BO00010101</span> </h3> <table class="ticket-content" border="0" cellspacing="" cellpadding=""> <tr> <th>起始站</th> <th>到达站</th> <th>发车时间</th> <th>车次</th> <th>价格</th> </tr> <tr> <td>郑州</td> <td>周口</td> <td><p>2020.9.10</p><p>12:00:00</p></td> <td>ZZ0001</td> <td style="color: red;">￥100</td> </tr> </table> </div> <!--乘客信息--> <div class="ticket-info"> <h3 class="clear"> <span>乘客信息</span> </h3> <table class="ticket-content" border="0" cellspacing="" cellpadding=""> <tr> <th>乘客姓名</th> <th>乘客类型</th> <th>证件号</th> <th>手机号</th> </tr> <tr> <td>小米</td> <td>成人</td> <td>112727199110100712</td> <td>13690902892</td> </tr> <tr> <td>小米</td> <td>成人</td> <td>112727199110100712</td> <td>13690902892</td> </tr> </table> </div> <!--支付金额--> <div class="ticket-info"> <h3 class="clear"> <span>支付金额</span> </h3> <table class="ticket-content" border="0" cellspacing="" cellpadding=""> <tr> <td><span style="color: red;">100元</span>(成人票50元x2人)</td> </tr> </table> </div> </div> </div> </div> <!--优势--> <div class="register-advantage"> <div class="container"> <ul class="clear"> <li class="clear"> <div class="advantage-img left"><img src="img/icon_pinpaibaozheng.png"/></div> <div class="left"> <h4>品牌保证</h4> <p>提供正规的购票服务</p> </div> </li> <li class="clear"> <div class="advantage-img left"><img src="img/icon_kuaisufankui.png"/></div> <div class="left"> <h4>快速反馈</h4> <p>第一时间短信通知</p> </div> </li> <li class="clear"> <div class="advantage-img left"><img src="img/icon_fangbiankuaijie.png"/></div> <div class="left"> <h4>方便快捷</h4> <p>车站直接取票上车</p> </div> </li> <li class="clear"> <div class="advantage-img left"><img src="img/icon_zhifufangbian.png"/></div> <div class="left"> <h4>支付方便</h4> <p>支付宝微信</p> </div> </li> </ul> </div> </div> <!--底部--> <div class="register-footer"> <p>客车网上售票系统官方电话 400-100-1234 0371-1234567 客车网上售票信息公示</p> <p>客车网上售票系统 Copyright©2020-2030 版权所有 XXXXXX网络科技有限公司 豫ICP备15030935号-1</p> </div> </body> </html>
