baoshi-was/resources/views/store/deliveryAppointment/_selectDate.blade.php

<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <div class="text-center font-weight-bold">预约时间</div>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div v-for="capacity in capacities" :style="{width:(100/capacities.length)+'%'}" class="container">
                        <div class="row">
                            <div class="col-12 text-center">@{{ capacity.date }}</div>
                        </div>
                        <div class="row border border-2 rounded" v-for="period in capacity.period" style="min-height: 50px;"
                             :class="[period.isAvailable ? 'cursor-pointer text-dark bg-info' : 'opacity bg-secondary',
                             selectDate.date==capacity.date && selectDate.time==period.index ? 'box-shadow-dark' : '']" @click="selectPeriod(capacity.date,period.index,period.isAvailable)">
                            <div class="col-12 m-auto text-center">@{{ period.time }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="col-12 btn btn-success" @click="submitAppointment()">@{{ btnName }}</button>
            </div>
        </div>
    </div>
</div>