<!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="/static/css/common.css"> <link rel="stylesheet" href="/static/css/style.css"> <link rel="stylesheet" href="/static/css/swiper.min.css"> <style> .btn_yuyue { margin-bottom: 1rem; } .yu_tan .yu_tan_box .tan_text { width: 6.533333rem; } </style> </head> <body style="background-color: #f6f6f6;"> <div class="box"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="day_list day_bg"> <b>周一</b> <i>06-25</i> </div> </div> <div class="swiper-slide"> <div class="day_list"> <b>周二</b> <i>06-26</i> </div> </div> <div class="swiper-slide"> <div class="day_list"> <b>周二</b> <i>06-26</i> </div> </div> <div class="swiper-slide"> <div class="day_list"> <b>周二</b> <i>06-26</i> </div> </div> <div class="swiper-slide"> <div class="day_list"> <b>周二</b> <i>06-26</i> </div> </div> <div class="swiper-slide"> <div class="day_list"> <b>周二</b> <i>06-26</i> </div> </div> <div class="swiper-slide"> <div class="day_list"> <b>周二</b> <i>06-26</i> </div> </div> <div class="swiper-slide"> <div class="day_list"> <b>周二</b> <i>06-26</i> </div> </div> <div class="swiper-slide"> <div class="day_list"> <b>周二</b> <i>06-26</i> </div> </div> <div class="swiper-slide"> <div class="day_list"> <b>周二</b> <i>06-26</i> </div> </div> <div class="swiper-slide"> <div class="day_list"> <b>周二</b> <i>06-26</i> </div> </div> <div class="swiper-slide"> <div class="day_list"> <b>周二</b> <i>06-26</i> </div> </div> <div class="swiper-slide"> <div class="day_list"> <b>周二</b> <i>06-26</i> </div> </div> <div class="swiper-slide"> <div class="day_list"> <b>周二</b> <i>06-26</i> </div> </div> <div class="swiper-slide"> <div class="day_list"> <b>周二</b> <i>06-26</i> </div> </div> </div> </div> <div class="yu_container"> <div class="time_list"> <b>06:00-07:00</b> <i></i> </div> <div class="time_list"> <b>07:00-08:00</b> <i></i> </div> <div class="time_list"> <b>08:00-09:00</b> <i></i> </div> <div class="time_list"> <b>09:00-10:00</b> <i></i> </div> <div class="time_list"> <b>10:00-11:00</b> <i></i> </div> <div class="time_list time_bor"> <b>11:00-12:00</b> <i></i> </div> <div class="time_list time_bor"> <b>12:00-13:00</b> <i></i> </div> <div class="time_list time_bor time_bg_icon"> <b>13:00-14:00</b> <i></i> </div> <div class="time_list time_bor"> <b>14:00-15:00</b> <i></i> </div> <div class="time_list time_bor"> <b>15:00-16:00</b> <i></i> </div> <div class="time_list time_bor"> <b>16:00-17:00</b> <i></i> </div> <div class="time_list time_bor"> <b>17:00-18:00</b> <i></i> </div> <div style="clear: both"></div> <div class="btn_yuyue" style="display: block;margin-top:3.73rem" id="btn_yuyue"> <img src="/static/image/btn_yuyue.png"/> </div> </div> </div> <!--弹跳框--> <div class="full_bg"></div> <div class="yu_tan" data-qr="1"> <div class="yu_tan_box"> <img src="/static/image/tan_car1.png" class="tan_car"/> <h1 class="tan_text">您确定要预约{$data.user_nickname}的课程吗</h1> <h2 class="btn_qr">确认</h2> </div> <div class="syudy_cancel"></div> </div> <script type="text/javascript" src="/static/js/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="/static/js/common.js"></script> <script type="text/javascript" src="/static/js/jquery.sliderPro.min.js"></script> <script src="/static/js/swiper.min.js"></script> <script type="text/javascript" src="/static/js/study_car.js"></script> <script> var swiper = new Swiper('.swiper-container', { slidesPerView: 7, pagination: { el: '.swiper-pagination', clickable: true, }, }); $('.day_list').click(function () { $(this).addClass('day_bg').parent().siblings().children().removeClass('day_bg'); }); $(function () { function get_ok_list(day) { $.ajax({ url: "/portal/tool/get_relax_time", type: "post", data: { day: day.replace(/(\d{4})(\d{2})(\d{2})/, "$1-$2-$3"), uid: {$id} }, success: function (res) { if (res.code == "1") { var date = new Date(); var year = date.getFullYear(); var mon = date.getMonth() + 1; var days = date.getDate(); var hour = date.getHours() + 3; var list = $('.time_list'); if (day == '' + year + check_num(mon) + check_num(days)) { var time_list = []; for (var i = 0; i < list.find('b').length; i++) { time_list.push(list.find('b')[i].innerHTML.split('-')); } var list = JSON.parse(res.data); for (var j = 0; j < time_list.length; j++) { if (parseInt(time_list[j][0]) < hour) { list[j] = "no"; } } var tiem_list = $('.time_list'); for (var i = 0; i < list.length; i++) { if (list[i] == "yes") { tiem_list[i].setAttribute('class', 'time_list time_bor'); } else { tiem_list[i].setAttribute('class', 'time_list'); } tiem_list[i].setAttribute("data-index", i); } } else { for (var i = 0; i < list.length; i++) { list[i].setAttribute('data-index', i); list[i].setAttribute('class', 'time_list time_bor'); } var list = JSON.parse(res.data); var tiem_list = $('.time_list'); for (var i = 0; i < list.length; i++) { if (list[i] == "yes") { tiem_list[i].setAttribute('class', 'time_list time_bor'); } else { tiem_list[i].setAttribute('class', 'time_list'); } tiem_list[i].setAttribute("data-index", i); } } } } }); } function check_num(num) { if (num < 10) { return "0" + num; } else { return num } } function checkToday() { } (function () { var date = new Date(); var year = date.getFullYear(); var mon = check_num(date.getMonth() + 1); var da = check_num(date.getDate()); var day = "" + year + mon + da; get_ok_list(day); })() var cells = $('.day_list'); var clen = cells.length; var currentFirstDate; var formatDate = function (date) { var year = date.getFullYear(); var month = (date.getMonth() + 1); if (month < 10) { month = "0" + month; } var day = date.getDate(); if (day < 10) { day = "0" + day; } var month_day = month + '-' + day; var week = ['周天', '周一', '周二', '周三', '周四', '周五', '周六'][date.getDay()]; return '<b>' + week + '</b>' + '<i data-day="' + year + '' + month + day + '">' + month_day + '</i>'; }; var addDate = function (date, n) { date.setDate(date.getDate() + n); return date; }; var setDate = function (date) { var week = date.getDay() - 1; date = addDate(date, week * +0); currentFirstDate = new Date(date); for (var i = 0; i < clen; i++) { cells[i].innerHTML = formatDate(i == 0 ? date : addDate(date, 1)); } }; setDate(new Date()); $('.day_list').click(function () { var day = $(this).children('i').attr('data-day'); get_ok_list(day); }); $('.yu_container .time_list').click(function () { if ($(this).hasClass('time_bor')) { if ($('.time_bg_icon').length < 3) { if ($(this).hasClass('time_bg_icon')) { $(this).removeClass('time_bg_icon'); } else { $(this).addClass('time_bg_icon'); } } else { if ($(this).hasClass('time_bg_icon')) { $(this).removeClass('time_bg_icon'); } else { layer.msg("选择的时间段不能超过3小时"); return; } } var list = $('.time_bg_icon'); var acvList = []; var boo = false; for (var i = 0; i < list.length; i++) { acvList.push(parseInt(list[i].getAttribute("data-index"))); } var degin = acvList[0]; for (var j = 0; j < acvList.length; j++) { if (acvList[j] != degin) { boo = true; break; } else { degin++; } } if (boo) { alert("请选择连续的时间段"); $(this).attr("class", "time_list time_bor"); } } }); var day1 = $('.day_bg i').text(); var week = $('.day_bg b').text(); var hour1 = $('.time_bg_icon b').text(); var data_day = $('.day_bg i').attr("data-day"); var data_index = $('.time_bg_icon').length == 0 ? null : $('.time_bg_icon').attr("data-index"); $("#btn_yuyue").click(function () { var list = $('.time_bg_icon'); var acvList = []; var boo = false; for (var i = 0; i < list.length; i++) { acvList.push(parseInt(list[i].getAttribute("data-index"))); } var degin = acvList[0]; for (var j = 0; j < acvList.length; j++) { if (acvList[j] != degin) { boo = true; break; } else { degin++; } } if (boo) { alert("请选择连续的时间段"); } else { var hour1 = $('.time_bg_icon b').text(); $('.tan_car').css({"width": "4.97rem", "height": "2.88rem"}); $('#time_duan').text(hour1); tankuang(); } }); $('.btn_qr').click(function () { var data_qr = $('.yu_tan').attr("data-qr"); var list = $('.time_bg_icon'); var acvList = []; var boo = false; for (var i = 0; i < list.length; i++) { acvList.push(parseInt(list[i].getAttribute("data-index"))); } var degin = acvList[0]; for (var j = 0; j < acvList.length; j++) { if (acvList[j] != degin) { boo = true; break; } else { degin++; } } if (data_qr == 1) { var data_days = $(".day_bg i").attr("data-day").replace(/(\d{4})(\d{2})(\d{2})/, "$1-$2-$3"); var weeks = $(".day_bg b").html(); $.ajax({ url: "{:url('yuyue_coach_do')}", type: "post", data: { day: data_days, week: weeks, begin: parseInt(list[0].getElementsByTagName('b')[0].innerHTML.split("-")[0]), end: parseInt(list[list.length - 1].getElementsByTagName('b')[0].innerHTML.split('-')[1]), id: {$id} }, success: function (res) { console.log(res); } }); $('.tan_text').html("恭喜您,预约成功"); tankuang(); $('.yu_tan').attr("data-qr", "2") } else if (data_qr == 2) { window.location.href = "/user/profile/percenter"; } }); $('.syudy_cancel').click(function () { var data_qr = $('.yu_tan').attr("data-qr"); if (data_qr == 1) { $("html").css("overflow", "auto"); $("body").css("overflow", "auto"); $(".full_bg").hide(); $(".yu_tan").hide(); } else if (data_qr == 2) { window.location.href = "/user/profile/percenter"; } }); }); </script> </body> </html>