<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="yes" name="apple-touch-fullscreen"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,maximum-scale=1, minimum-scale=1, user-scalable=no"> <title>我的预约</title> <link rel="stylesheet" href="css/common.css"> <link rel="stylesheet" href="css/style.css"> </head> <body style="background-color: #f6f6f6"> <div class="box"> <div class="yuyueTop"> <div class="head_left"> <img src="image/head.png"> <b class="uesr_name">王小五</b> </div> <div class="study_right"> <b class="study_num">0</b> <i>已用学时</i> </div> </div> <div class="yuyueMenu"> <ul> <li class="yuyue_cur"> <b>全部</b> </li> <li><b>待学车</b></li> <li><b>待点评</b></li> <li><b>已点评</b></li> </ul> </div> <div class="yuyue_box"> <!--全部--> <div class="yuyue-content"> <div class="yuyueList"> <div class="yList_top"> <b>待学车</b> <i>2018-06-21</i> </div> <div class="yList_info"> <img src="image/head.png" class="yu_user_head"/> <div class="yu_user_info"> <b class="user_name">张教练</b> <i class="user_fun">自动挡C2</i> </div> <div class="yu_date"> <b class="yu_week">周四</b> <i class="yu_times">08:00~09:00</i> </div> </div> <div class="yuyue_btn"> <b class="click_yuyue">取消预约</b> </div> </div> <div class="yuyueList"> <div class="yList_top"> <b>待点评</b> <i>2018-06-21</i> </div> <div class="yList_info"> <img src="image/head.png" class="yu_user_head"/> <div class="yu_user_info"> <b class="user_name">张教练</b> <i class="user_fun">自动挡C2</i> </div> <div class="yu_date"> <b class="yu_week">周四</b> <i class="yu_times">08:00~09:00</i> </div> </div> <div class="yuyue_btn"> <b class="click_yuyue">去评价</b> </div> </div> <div class="yuyueList"> <div class="yList_top"> <b>已点评</b> <i>2018-06-21</i> </div> <div class="yList_info"> <img src="image/head.png" class="yu_user_head"/> <div class="yu_user_info"> <b class="user_name">张教练</b> <i class="user_fun">自动挡C2</i> </div> <div class="yu_date"> <b class="yu_week">周四</b> <i class="yu_times">08:00~09:00</i> </div> </div> <div class="yuyue_btn"> <b class="click_yuyue">查看评价</b> </div> </div> </div> <!--待学车--> <div class="yuyue-content hide"> 222 </div> <!--待点评--> <div class="yuyue-content hide"> 333 </div> <!--已点评--> <div class="yuyue-content hide"> 444 </div> </div> <div class="no_yuyue"> <img src="image/no_yuyue.png"> </div> <div class="btn_yuyue"> <img src="image/btn_yuyue.png"> </div> </div> <!--弹跳框--> <div class="full_bg"></div> <div class="yu_tan"> <div class="yu_tan_box"> <img src="image/tan_car1.png" class="tan_car"/> <h1 class="tan_text">是否确认取消预约?</h1> <h2 class="btn_qr">确认</h2> </div> <div class="cancel"></div> </div> <!--ceshi--> <input type="hidden" value="601" class="yu_time"/> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="js/common.js"></script> <script type="text/javascript" src="js/study_car.js"></script> <script> $(function(){ var num = $('.yuyue-content').children(); console.log(num.length); if(num.length==0){ $('.no_yuyue').show(); $('.btn_yuyue').show(); }else{ $('.no_yuyue').hide(); $('.btn_yuyue').hide(); } $('.yList_top').each(function(){ var colorHtml=$(this).children('b').html(); if(colorHtml=="待学车"){ $(this).children('b').css("color","#53a6fa"); } }); $('.click_yuyue').click(function(){ var con_text=$(this).html().trim(); if(con_text=="取消预约"){ var yu_time=$('.yu_time').val(); if(yu_time==60){ tankuang(); }else{ $('.tan_car').attr("src","image/tan_car2.png"); $('.tan_car').css({"width":"4.97rem","height":"2.88rem"}); $('.tan_text').html("抱歉,已过取消预约时间无法取消"); tankuang(); $('.btn_qr').click(function(){ $("html").css("overflow","auto"); $("body").css("overflow","auto"); $(".full_bg").hide(); $(".yu_tan").hide(); }); } }else if(con_text=="去评价"){ alert("去评价"); }else{ alert("查看评价"); } }); }); $(function(){ function get(url/*后台的地址*/,obj/*后台需要的数据*/){ var promise = new Promise(function(resolve, reject){ $.ajax({ url:url, data:obj, success:function(res){ resolve(res); }, failure:function(err){ reject(err); } }) });//等一下发嗯 return promise; } var $div_li =$(".yuyueMenu ul li"); $div_li.click(function(){ $(this).addClass("yuyue_cur") .siblings().removeClass("yuyue_cur"); var index = $div_li.index(this); $("div.yuyue_box > div").eq(index).show().siblings().hide(); /*get('http://127.0.0.1:8000',{ type:1, time:'2017-09-08' }).then(function (value) { console.log(value); var list = [ {time:'2018-06-21',teach_name:'张教练',car_type:'自动挡',date:'周四',range_time:'08:00 - 12:00'}, {time:'2018-06-21',teach_name:'张教练',car_type:'自动挡',date:'周四',range_time:'08:00 - 12:00'}, {time:'2018-06-21',teach_name:'张教练',car_type:'自动挡',date:'周四',range_time:'08:00 - 12:00'}, {time:'2018-06-21',teach_name:'张教练',car_type:'自动挡',date:'周四',range_time:'08:00 - 12:00'}, {time:'2018-06-21',teach_name:'张教练',car_type:'自动挡',date:'周四',range_time:'08:00 - 12:00'}, ]; var str = ''; for(var i=0;i<list.length;i++){ str += '<div class="yuyueList">\n' + ' <div class="yList_top">\n' + ' <b>待学车</b>\n' + ' <i>'+i.time+'</i>\n' + ' </div>\n' + ' <div class="yList_info">\n' + ' <img src="image/head.png" class="yu_user_head"/>\n' + ' <div class="yu_user_info">\n' + ' <b class="user_name">'+i.name+'</b>\n' + ' <i class="user_fun">'+i.car_type+'</i>\n' + ' </div>\n' + ' <div class="yu_date">\n' + ' <b class="yu_week">'+i.date+'</b>\n' + ' <i class="yu_times">'+i.range_time+'</i>\n' + ' </div>\n' + ' </div>\n' + ' <div class="yuyue_btn">\n' + ' <b class="click_yuyue">取消预约</b>\n' + ' </div>\n' + ' </div>\n'+ '</div>'; } $('.yuyue_box').html(str); }).catch(function (err) { //这个是失败的回调 console.log(err); });*/ }); }); </script> </body> </html>