public/demo/my_yuyue_coach.html

<!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">
    <style>
        .yuyueMenu li{
            width: 20%;
        }
        .yu_tan .yu_tan_box .tan_text{
            width: 100%;
        }
        .yuyueList{
            margin-bottom: 0.2666666667rem;
        }
    </style>
</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>
            <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>
                    <b class="click_jindu">查看进度</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 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="60" 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=="开始学车"){
                tankuang();
                $('.btn_qr').click(function(){
                    $("html").css("overflow","auto");
                    $("body").css("overflow","auto");
                    $(".full_bg").hide();
                    $(".yu_tan").hide();
                });

            }else if(con_text=="学车完毕"){
                $('.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>