src/main/resources/templates/receipt/reservation/view.html

<!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>