jq实现预约时间表

62 阅读 0 评论 41 点赞

我是靠谱客的博主美好小兔子，最近开发中收集的这篇文章主要介绍jq实现预约时间表，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在这里插入图片描述实现效果如上图；

HTML部分

<div class="container-fluid">
        <div class="textCont">
            选择您需要的服务时间
        </div>
        <div class="appointmentColor">
            <ul>
                <li>
                    <p>预约已满</p>
                    <p class="enoughBook"></p>
                </li>
                <li>
                    <p>已为您预约</p>
                    <p class="aleradyBook"></p>
                </li>
                        
                <li>
                    <p>可预约</p>
                    <p class="canBook"></p>
                </li>
            </ul>
        </div>
        <div class="appointmentContent">
            <div class="top">
                <ul id="dateContainer">
                    
                </ul>
            </div>
            <div class="left">
                <ul id="periodContainer">
                    
                </ul>
            </div>
            <div class="right">
                <table class="myTable">
                    
                </table>
                <div class="nextContainer">
                    <button type="button" class="btn btn-success myButton" id="nextStep">下一步</button>
                </div>
            </div>
        </div>
    </div>

css内容

.textCont{
    font-size: 18px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.appointmentColor ul li{
    list-style: none;
    display: inline-block;
    float: right;
    width: 10%;
    text-align: center;
}
.canBook,.aleradyBook,.enoughBook{
    width: 70%;
    height: 6px;
    margin-left: 15%;
    margin-top: 2px;
}
.canBook{
    background-color: rgb(214, 108, 108);
}
.aleradyBook{
    background-color: red;
}
.enoughBook{
    background-color: gray;
}
.appointmentColor{
    overflow: hidden;
}
.top{
    overflow: hidden;
}
.top ul{
    display: flex;
    width: 100%;
    float: right;
    margin-top: 20px;
}
.top ul li{
    display:inline-block;
    flex-grow: 1;
    text-align: center;
}
.left{
    width:18%;
    text-align: center;
    float: left;
    margin-top:10px;
}
.left ul{
    height:100%;
}
.left ul li{
    height:45px;
    line-height: 3;
}
.right{
    float: left;
    width:79%;
    text-align: center;
    margin-top:10px;
}
.myTable{
    width:100%;
    height:100%;
    text-align: center;
}
.myTable tr{
    display:flex;
    height:45px;
    line-height:3;
}
.myTable td{
    width:25%;
    border:1px solid #eee;
    
}
.myTable .tdA{
    background-color: red;
    color:white;
}
.myTable .tdC{
    background-color: rgb(214, 108, 108);
    color:white;
}
.myTable .tdE{
    background-color: gray;
    color:black;
}

js部分


$('#dateContainer').empty();
var dateMap = new Map();
//日期显示
$(function() {
	var d = 4;//需要显示的预约天数
	//获取几天后（前）的日期以及周几
	function fun_date(aa) {
		var date1 = new Date(),
			time1 = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate(); //time1表示当前时间
			var date2 = new Date(date1);
			date2.setDate(date1.getDate() + aa);
			// var time2 = (date2.getMonth() + 1) + "月" + date2.getDate();
			var time2 = date2.getFullYear() + "-" + (date2.getMonth() + 1 >=10 ?(date2.getMonth() + 1) : '0'+(date2.getMonth() + 1)) + "-" + (date2.getDate() >=10 ? date2.getDate() : '0'+date2.getDate());
			var w = "";
			switch(date2.getDay()) {
				case 0:
					w = "周日"
					break;
				case 1:
					w = "周一"
					break;
				case 2:
					w = "周二"
					break;
				case 3:
					w = "周三"
					break;
				case 4:
					w = "周四"
					break;
				case 5:
					w = "周五"
					break;
				case 6:
					w = "周六"
					break;
				default:
					w = ""
			}
			var dd = {};
			dd.day = time2;
			dd.week = w
			return dd;
    }
	var str = '<li></li>'
	
	for(var i = 0; i < d; i++) {
		str += '<li>'+fun_date(i).day+'</li>';
		dateMap.set(fun_date(i).day,i);	
	}
	console.log(dateMap)
    $('#dateContainer').append(str);
	
})


$('#periodContainer').empty();
var thisTime = new Date().getFullYear() + "-" + (new Date().getMonth() + 1 >=10 ?(new Date().getMonth() + 1) : '0'+(new Date().getMonth() + 1)) + "-" + (new Date().getDate() >=10 ? new Date().getDate() : '0'+new Date().getDate());
domain();
function domain(){
	var timeLength =  {
		tableName: "OC_BOOKING_BY_DATE",
		lists: [
			{ fieldName: 'PERIOD_DATE', fieldType: 'data', connector: '>=', fieldValue: thisTime },
		]
	}
	$.ajax({
		url:orderTypesUrlFalse,
		type: "post",
		dataType: "json",
		contentType: 'application/json',
		data: JSON.stringify(timeLength),
		success: function (data) {
			if(data.success){
				var res = data.queryData.listData;
				if(res){
					//时间段显示
					var periodMap = new Map();
					var str = '';
					for(var i = 0,z = 0;i<res.length; i++){
						if(!periodMap.has(res[i].PERIOD_DATE_NAME)){
							str += '<li value="'+res[i].PERIOD_DATE_NAME+'">'+res[i].PERIOD_DATE_NAME+'</li>';
							periodMap.set(res[i].PERIOD_DATE_NAME,z++); 
						}
					}
					$('#periodContainer').append(str);
					var string = '';
					//空表格渲染
					for(var i = 0;i<periodMap.size; i++){
						string +='<tr>'
						for(var j = 0 ; j<4; j++){
							
							string += '<td οnclick="nexStepInfo(this)"></td>'
						}
						string += '</tr>'
					}
					$('.myTable').append(string);
					
					//可预约、不可预约状态的渲染
					for(var i = 0;i<res.length; i++){
						var pdn = res[i].PERIOD_DATE_NAME;
						var pd = res[i].PERIOD_DATE;
						var pn = res[i].PERIOD_NUMBER;
						var INpd = res[i].INPERIOD_NUMBER;
						var hang = periodMap.get(pdn);
						var lie = dateMap.get(pd);
						if(INpd < pn ){//可预约
							$(".myTable tr:eq("+hang+") td:eq("+lie+")").text('可预约');
							$(".myTable tr:eq("+hang+") td:eq("+lie+")").addClass('tdC');
							$(".myTable tr:eq("+hang+") td:eq("+lie+")").attr('PERIOD_DATE',pd);
							$(".myTable tr:eq("+hang+") td:eq("+lie+")").attr('PERIOD_DATE_NAME',pdn);
	
						}else{//不可预约
							$(".myTable tr:eq("+hang+") td:eq("+lie+")").text('不可预约');
							$(".myTable tr:eq("+hang+") td:eq("+lie+")").addClass('tdE');
							$(".myTable tr:eq("+hang+") td:eq("+lie+")").attr('PERIOD_DATE',pd);
							$(".myTable tr:eq("+hang+") td:eq("+lie+")").attr('PERIOD_DATE_NAME',pdn);
						}
					}
					//已为您预约状态的渲染
					alreadyBook(periodMap,dateMap);
					
				}
			}
			
		}
	});
}




var cusInfo = JSON.parse(sessionStorage.getItem('visitorInfo'));
function alreadyBook(periodMap,dateMap){
	var timeLength =  {
		tableName: "OC_OUTBOUND_CALL_TASK",
		lists: [
			{ fieldName: 'COMPANY_ERPID', fieldType: 'data', connector: '=', fieldValue: cusInfo.ORG_ERPID },
			{ fieldName: 'CONTACTS_ERPID', fieldType: 'data', connector: '=', fieldValue: cusInfo.C_ERPID },
		]
	}
	$.ajax({
		url:orderTypesUrlFalse,
		type: "post",
		dataType: "json",
		async:false,
		contentType: 'application/json',
		data: JSON.stringify(timeLength),
		success: function (data) {
			if(data.success){
				var res = data.queryData.listData;
				if(res){
					console.log(res)
					for(var i = 0;i<res.length; i++){
						var pdn = res[i].TASK_PERIOD;
						var pd = res[i].TASK_DATE;
						var hang = periodMap.get(pdn);
						var lie = dateMap.get(pd);
						$(".myTable tr:eq("+hang+") td:eq("+lie+")").text('已为您预约');
						$(".myTable tr:eq("+hang+") td:eq("+lie+")").removeAttr("class").addClass('tdA');
						
					}
					
					
				}
			}
			
		}
	});
}