3fe842aebca0b61df3c60bf21ca2548b.php 13.1 KB
<?php if (!defined('THINK_PATH')) exit(); /*a:1:{s:46:"themes/simpleboot3/user/yuyue/yu_studycar.html";i:1534870182;}*/ ?>
<!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">
    <ul class="yu_menu">
        <li>
            <a href="<?php echo url('index'); ?>">
                <b class="yu_cur">按时间预约</b>
            </a>
        </li>
        <li>
            <a href="<?php echo url('yu_coach'); ?>">
                <b>按教练预约</b>
            </a>
        </li>
    </ul>
    <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 class="per_footer">
        <ul>
            <li>
                <a href="<?php echo url('user/yuyue/index'); ?>">
                    <span class="foot_img foot_img_2"></span>
                    <p class="foot_item foot_item_1">预约学车</p>
                </a>
            </li>
            <li class="foot_active">
                <a href="<?php echo url('user/profile/percenter'); ?>">
                    <span class="foot_img foot_img02_1"></span>
                    <p class="foot_item">个人中心</p>
                </a>
            </li>
        </ul>
    </div>

</div>

<!--弹跳框-->
<div class="full_bg"></div>
<div class="yu_tan">
    <div class="yu_tan_box">
        <img src="/static/image/tan_car1.png" class="tan_car"/>
        <h1 class="tan_text">您确定要预约08:00~09:00张教练的课程吗</h1>
        <h2 class="btn_qr">确认</h2>
    </div>
    <div class="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 type="text/javascript" src="/static/js/layer/layer.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) {
            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('-'));
                }
                for (var j = 0; j < time_list.length; j++) {
                    if (parseInt(time_list[j][0]) < hour) {
                        list[j].setAttribute('class', 'time_list');
                    } else {
                        list[j].setAttribute('class', 'time_list time_bor');
                    }
                    list[j].setAttribute('data-index', j);
                }
//                for (var i = 0; i < list.length; i++) {
//                    list[i].setAttribute('data-index', i);
//                    list[i].setAttribute('class', 'time_list time_bor');
//                }
            } else {
                for (var i = 0; i < list.length; i++) {
                    list[i].setAttribute('data-index', i);
                    list[i].setAttribute('class', 'time_list time_bor');
                }
            }
        }

        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) {
                    layer.msg("请选择连续的时间段");
                    $(this).attr("class","time_list time_bor");
                }
            }
        });
        $("#btn_yuyue").click(function () {
            var list = $('.time_bg_icon');
            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").replace(/(\d{4})(\d{2})(\d{2})/, "$1-$2-$3");
            var data_index = $('.time_bg_icon').length == 0 ? true : false;
            if (data_index) {
                layer.msg("请选择时间段!");
            } else {
                $.ajax({
                    url: "/user/yuyue/yueyue_do",
                    type: "post",
                    data: {
                        day: data_day,
                        week: week,
                        begin: parseInt(list[0].getElementsByTagName('b')[0].innerHTML.split("-")[0]),
                        end: parseInt(list[list.length - 1].getElementsByTagName('b')[0].innerHTML.split('-')[1])
                    }, success: function (res) {
                        console.log(res);
                        if (res.code == "1") {
                            window.location.href = "/user/yuyue/coach_list";
                        }
                    }
                })
            }
        });
    });
</script>
</body>
</html>