序:预约一个星期的数据,比如当天是19号,预约时间从明天开始计算,其实也可以从后端写计算好的数据返回,前端只负责渲染就行
图:
内容:
<head>
<meta charset="UTF-8">
<title>预约</title>
<script src="https://cdn.staticfile.org/jquery/3.4.0/jquery.min.js"></script>
<style>
:root{
--border-color:#ccc;
}
.date_picker{background-color:#fff;margin-bottom: 30px;}
.date_picker_tle{font-size:1.6em;font-weight: bold;text-align: center;margin-bottom: 15px;font-family: cursive;}
.date_picker_list{text-align:center;height:100px;overflow-x: auto;overflow-y: hidden;}
.date_picker_list::-webkit-scrollbar {width:3px;height:3px;}
.date_picker_list::-webkit-scrollbar-thumb {border-radius:5px;background:transparent;}
.date_picker_list::-webkit-scrollbar-track {border-radius:0;background:transparent;}
.date_picker_list .picker_list{display: grid;grid-template-rows: auto auto;grid-template-columns: auto auto auto auto auto auto auto;justify-content: center;font-family: cursive;font-size: .8em;}
.date_picker_list .picker_list .picker_col{display: grid;grid-auto-columns: auto auto;width:100%;height:100%;border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);border-right:1px solid var(--border-color);}
.date_picker_list .picker_list .picker_col:first-child{border-left:1px solid var(--border-color);}
.date_picker_list .picker_list .picker_item{align-content: center;padding:8px 6px;font-family: math;border-bottom:1px solid var(--border-color);cursor:pointer;}
.date_picker_list .picker_list .picker_click{line-height: 1.2;padding:10px 6px;align-content: center;cursor:pointer;}
.date_picker_list .picker_list .picker_active{color:#fff;background-color: #1b9aee;transition: all .2s ease-in-out;}
.date_picker_list .picker_list .picker_disable{color:#333;background-color: #dfe0e4;}
</style>
</head>
<body>
<div class="date_picker">
<p class="date_picker_tle">预约管理</p>
<div class="date_picker_list">
<div class="picker_list"></div>
</div>
</div>
<script>
// 预约列表
var month_num = ["01","02","03","04","05","06","07","08","09","10","11","12"];
var week_name = ["周日","周一","周二","周三","周四","周五","周六"];
var currentDate = new Date();
var currentYear = currentDate.getFullYear(); // 返回年份
var currentMonthIndex = currentDate.getMonth(); // 数组索引(0-11)
var currentDay = currentDate.getDate(); // 月中的第几天
var weekStartIndex = currentDate.getDay(); // 返回星期几(0-6)=> 周日,周一,周二,周三,周四,周五,周六
function weekList(data,userId) {
var setStr = "",weekDate = "";
for(var i=1; i <= 7; i++){
weekStartIndex++;
currentDay++;
if(weekStartIndex > 6){
weekStartIndex = 0
}
weekDate = currentYear+"-"+month_num[currentMonthIndex]+"-"+currentDay;
// 用户id ,当天次数
var uId = "",daySum = 0;
// 循环数据列表
for (let j = 0; j < data.length; j++) {
// 对应时间 =》递增次数,判断用户存在
if(data[j]["updated"] === weekDate){
daySum ++;
if(data[j]["user_id"] === userId){
uId = data[j]["user_id"];
}
}
}
if(uId){
// 已预约
setStr += "<div class=\"picker_col\">\n" +
" <div class='picker_item'>\n" +
" <div>"+week_name[weekStartIndex]+"</div>\n" +
" <div>"+month_num[currentMonthIndex]+"/"+currentDay+"</div>\n" +
" </div>\n" +
" <div class=\"picker_click picker_disable\">已预约</div>\n" +
" </div>";
}else{
if(daySum >= 3){
// 预约已满
setStr += "<div class=\"picker_col\">\n" +
" <div class='picker_item'>\n" +
" <div>"+week_name[weekStartIndex]+"</div>\n" +
" <div>"+month_num[currentMonthIndex]+"/"+currentDay+"</div>\n" +
" </div>\n" +
" <div class=\"picker_click picker_disable\">已满</div>\n" +
" </div>";
}else{
// 可预约
setStr += "<div class=\"picker_col\">\n" +
" <div class='picker_item'>\n" +
" <div>"+week_name[weekStartIndex]+"</div>\n" +
" <div>"+month_num[currentMonthIndex]+"/"+currentDay+"</div>\n" +
" </div>\n" +
" <div class=\"picker_click picker_active\" data-time='"+currentYear+"-"+month_num[currentMonthIndex]+"-"+currentDay+"'>可预约</div>\n" +
"</div>";
}
}
// console.log({"日期:":weekDate,"次数:":daySum,"userId:":uId});
}
$(".picker_list").html(setStr);
}
// 日期要换成当前日期往后几天的
var data = [{id: 1, user_id: '1641282484', updated: '2022-01-20'},
{id: 2, user_id: '1641282486', updated: '2022-01-21'},
{id: 3, user_id: '1641282486', updated: '2022-01-22'},
{id: 4, user_id: '1641282486', updated: '2022-01-23'},
{id: 5, user_id: '1641282488', updated: '2022-01-23'},
{id: 6, user_id: '1641282486', updated: '2022-01-23'}];
weekList(data,"1641282486");
</script>
</body>