<!DOCTYPE HTML> <html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"> <meta charset="utf-8"> <head th:include="include :: header"></head> <style type="text/css"> .ibox {background: #1ab394;} </style> <body class="gray-bg"> <div class="container-div"> <div class="row"> <div class="tabs-container"> <ul class="nav nav-tabs" style="padding-top:10px" > <li th:each="date, stat:${localDateList}" class="" th:classappend="${stat.index == 0} ? 'active' : '' "> <a data-toggle="tab" th:id="'tab0-'+${stat.index}" th:href="'tab-'+${stat.index}" aria-expanded="true" th:text="${date}"></a></li> </ul> </div> <div class="tab-content" style="margin-top: 30px;overflow: hidden"> <div id="tab1-0" class="tab-pane active"></div> <div id="tab1-1" class="tab-pane"></div> <div id="tab1-2" class="tab-pane"></div> <div id="tab1-3" class="tab-pane"></div> <div id="tab1-4" class="tab-pane"></div> <div id="tab1-5" class="tab-pane"></div> <div id="tab1-6" class="tab-pane"></div> </div> </div> </div> </div> <div th:include="include :: footer"></div> <script th:inline="javascript"> let prefix = ctx+"reservation"; let date = $("#tab0-0").text(); $(function () { load(); }) function load(date, index) { if ($.common.isEmpty(date)) { date = $("#tab0-0").text(); } if ($.common.isEmpty(index)) { index = 0; } let option = { url: prefix+"/reservation", type: 'get', dataType: "json", data: { localDate: date, warehouseCode: [[${warehouseCode}]] }, success: function (result) { $("#tab1-"+index).empty(); for (let i=0; result.data.length;i++) { let html = "<div class=\"col-sm-2\"><div class=\"ibox\"><a onclick='add(\""+result.data[i].beginTime+"\",\""+result.data[i].endTime+"\")'> <div class=\"ibox-content2"; if (!result.data[i].flag) { html += " disable-order\">"; } else { html += "\">\n" } html += "<p>"+result.data[i].beginTime+"-"+result.data[i].endTime+"</p>\n" + "预约到达时间<div><span>当前已预约人数:</span><div class=\"stat-percent\">"+result.data[i].number+"/"+result.data[i].reservationsNumber+"</div>\n" + "</div></div></a></div></div>"; $("#tab1-"+index).append(html); } } } $.ajax(option); } function add(date1, date2) { let url = prefix+"/add/"+[[${warehouseCode}]]+"/"+date+"/"+date1+"/"+date2; $.modal.open("预约", url); } $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { e.target // newly activated tab e.relatedTarget // previous active tab let date = e.target.innerText; load(date); }) </script> </body> </html>