可滑动日期的场地申请

Posted 2021-03-25 tenfly

先上图

 

 

 

　　<header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title" id="site_name">预约情况</h1>
    </header>
    
    <div class="mui-content">
        <div id="selectTime"></div>
        
        <div id="weekDay"></div>

        <div id="siteInfo" style="width:100%"></div>

        <button class="btn">预约</button>
    </div>

　　　　#selectTime {
            display:inline-block;
            width: 100%;
            height:40px;
            line-height: 40px;
            white-space: nowrap;
            box-shadow: 0 1px 2px rgba(0,0,0,.1);
            overflow-x: scroll;
            overflow-y: hidden;
            -webkit-backface-visibility: hidden;
            -webkit-perspective: 1000;
            -webkit-overflow-scrolling: touch;
            text-align: justify;
            padding: 0px 5px;
            box-sizing: border-box;
        }
        #selectTime a{
            text-decoration: none;
            margin-right: 10px;
            padding:5px;
        }
        #selectTime::-webkit-scrollbar{
            display: none;
        }
        #weekDay {
            width:40px;
            height:40px;
            border-radius:50%;
            margin:12px 0 0 12px;
            text-align:center;
            line-height:40px;
            background:rgba(255,128,128,1);
            color:white;
            box-shadow:3px 3px 5px black;
        }
        .weekDaySelected {
            font-size:20px;
            font-weight:bold;
            color:rgba(255,128,128,1);
        }
        table tr td {
            padding:10px;
        }
        .siteName {
            height:60px;
            background:#C2C2C2;
            border-radius:6px;
            text-align:center;
        }
        .time {
            width:40%;
            height:40px;
            background:rgba(255,128,172,1);
            border-radius:6px;
            text-align:center;
            color:white;
        }
        .reason {
            height:40px;
            background:rgba(113,184,255,1);
            border-radius:6px;
            text-align:right;
            color:white;
        }
       
        .a_fontColor {
            color:#999999;
        }    
        .btn {
            width:90%;
            height:50px;
            background:rgba(38,153,251,1);
            color:white;
            border-radius:6px;
            display:block;
            margin:50px auto;
            font-size:18px;  
        }

/**************************************************截取url参数**************************************************/

    var siteID = getUrlData().id;//场地类型
    var siteName = decodeURI(getUrlData().name);//场地名称
    function getUrlData() {
        var url = window.location.search;  
        url = url.substring(1); 
        var dataObj = {};
        if (url.indexOf(‘&‘) > -1) {
            url = url.split(‘&‘);
            for (var i = 0; i < url.length; i++) {
                var arr = url[i].split(‘=‘);
                dataObj[arr[0]] = arr[1];
            }
        }
        else {
            url = url.split(‘=‘);
            dataObj[url[0]] = url[1];
        }
        return dataObj;
    }

    /**************************************************初始化加载数据**************************************************/
    
    var initTime = new Date();//时间
    var client_width = window.innerWidth || document.documentElement.clientinnerWidth || document.body.clientinnerWidth;//可视界面宽度

    get_month_day();//加载日期
    getSite();//加载对应日期数据
   
    //加载日期
    function get_month_day() {
        var year = initTime.getFullYear();
        var month = initTime.getMonth() + 1;
        var day = initTime.getDate();
        
        $("#selectTime").append(‘<a onclick="goPre()">&lt&ltGO</a>‘);
        for (var i = 1; i <= getDaysInMonth(year, month) ; i++) {

            var newDate = new Date().setDate(i - 1);
            var weekDay = new Date(newDate).getDay();
            if (i == day)
                var li = ‘<a class="weekDaySelected">‘ + month + ‘-‘ + i + ‘</a>‘;
            else
                var li = ‘<a class="a_fontColor" onclick="a_click(this)">‘ + month + ‘-‘ + i + ‘</a>‘;
            $("#selectTime").append(li);
        }
        //计算，使初始化加载的日期在中间位置
        var width = $(".weekDaySelected").width(); //a标签（日期）所占宽度
        var marginLeft = $(".weekDaySelected").offset().left; //a标签（日期）距离窗口左边的距离
        $("#selectTime").scrollLeft(marginLeft - client_width / 2 + width / 2);

        $("#selectTime").append(‘<a onclick="goNext()">GO&gt&gt</a>‘);
    }

    //加载数据
    function getSite() {
        
        var year = initTime.getFullYear();
        var month = initTime.getMonth() + 1 < 10 ? "0" + (initTime.getMonth() + 1) : initTime.getMonth() + 1;
        var day = initTime.getDate() < 10 ? "0" + initTime.getDate() : initTime.getDate();
        var STime = year + "-" + month + "-" + day + " 00:00:00";
        var ETime = year + "-" + month + "-" + day + " 23:59:59";
        var week_day = initTime.getDay();

        /******************************************
            console.log("当前时间:" + initTime);
            console.log("当前年份:" + year);
            console.log("当前月份:" + month);
            console.log("当前天数:" + day);
            console.log("当前周几:" + week_day);
            console.log("开始时间:" + STime);
            console.log("结束时间:" + ETime);
        ******************************************/

        //当前选中日期为星期几
        switch (week_day) {
            case 0: week_day = "日"; break;
            case 1: week_day = "一"; break;
            case 2: week_day = "二"; break;
            case 3: week_day = "三"; break;
            case 4: week_day = "四"; break;
            case 5: week_day = "五"; break;
            case 6: week_day = "六"; break;
        }
        $("#weekDay").html(week_day);

        //当前选中日期数据
        $.ajax({
            url: config.url() + "/WorkCenter/ajax/getdata.ashx?type=siteApplication&r=" + Math.random(),
            dataType: ‘json‘,
            type: ‘post‘,
            data: { siteID: siteID, STime: STime, ETime: ETime },//场地id，开始时间，结束时间
            xhrFields: {
                withCredentials: true
            },
            success: function (res) {
                var table = ‘<table width="100%" style="border-collapse:separate; border-spacing:15px;" id="siteList">‘ +
                                    ‘<tr><td colspan="2" class="siteName"></td></tr>‘ +
                                ‘</table>‘;
                $("#siteInfo").append(table);
                if (res.length > 0) {
                    for (var i = 0; i < res.length; i++) {
                        var sHou = new Date(res[i].StartTime).getHours() < 10 ? "0" + new Date(res[i].StartTime).getHours() : new Date(res[i].StartTime).getHours();
                        var sMin = new Date(res[i].StartTime).getMinutes() < 10 ? "0" + new Date(res[i].StartTime).getMinutes() : new Date(res[i].StartTime).getMinutes();
                        var startTime = sHou + ":" + sMin;
                        var eHou = new Date(res[i].EndTime).getHours() < 10 ? "0" + new Date(res[i].EndTime).getHours() : new Date(res[i].EndTime).getHours();
                        var eMin = new Date(res[i].EndTime).getMinutes() < 10 ? "0" + new Date(res[i].EndTime).getMinutes() : new Date(res[i].EndTime).getMinutes();
                        var endTime = eHou + ":" + eMin;
                        var row = ‘<tr><td class="time">‘ + startTime + ‘-‘ + endTime + ‘</td><td class="reason">‘ + res[i].SiteScheduleName + ‘</td></tr>‘;
                        $("#siteList").append(row);
                    }
                    $(".siteName").html(siteName);
                }
                else {
                    $(".siteName").html("暂无预约");
                } 
            }
        })
    }

    /**************************************************调用方法**************************************************/
    
    //计算本月天数
    function getDaysInMonth(year, month) {
        //本来标准时间的month应该为当前month-1，这里就使用当前month作为标准时间的month
        month = parseInt(month);
        //转化为标准时间后为下一个月的数据，设置day为0表示上个月最后一天，这样就切换到了所求月份的最后一天
        var temp = new Date(year, month, 0);
        return temp.getDate();
    }

    //加载上个月数据
    function goPre() {
        initTime = new Date(initTime.setDate(1));
        initTime = new Date(initTime.setMonth(initTime.getMonth() - 1));
        $("#siteInfo").hide().show(500);
        $("#selectTime").empty();
        $("#siteInfo").empty();
        get_month_day();//加载日期
        getSite();//加载对应日期数据
       
    }
    //加载下个月数据
    function goNext() {
        initTime = new Date(initTime.setDate(1));
        initTime = new Date(initTime.setMonth(initTime.getMonth() + 1));
        $("#siteInfo").hide().show(500);
        $("#selectTime").empty();
        $("#siteInfo").empty();
        get_month_day();//加载日期
        getSite();//加载对应日期数据
       
    }
    //本月切换日期
    //选中后不再触发点击事件
    function a_click(obj) {
        var selectTime = $(obj).text();
        var Time = initTime.getFullYear() + "-" + selectTime;
        initTime = new Date(Time);
        //为上一个选中日期添加选中事件，移除现在选中日期的默认样式并添加选中样式，为上一个选中日期添加默认样式
        $("#selectTime .weekDaySelected").attr("onclick", "a_click(this);");
        $("#selectTime .weekDaySelected").removeClass("weekDaySelected").addClass("a_fontColor");
        $(obj).removeClass("a_fontColor").addClass("weekDaySelected");
        //加载数据的时候，页面会闪动，用动画效果来平滑过渡
        $("#siteInfo").hide().show(500);
        $("#siteInfo").empty();
        getSite();
        //为避免事件中途因意外停止，在点击事件完成后再移除现在选中日期的点击事件
        $(obj).removeAttr("onclick");
    }