1.支持中餐、晚餐不同时间段桌位预定

2.支持包厢，大厅等不同区域预定

本系统后台tp+vue

前端原生小程序

 

<!-- 导航栏 -->

<!-- <van-nav-bar title="{{canteen}}" title-class="navbar" /> -->

<van-nav-bar title="{{canteen}}" fixed title-class="navbar" placeholder custom-style="background:#f03d37;" />

<view class="index-header-tabs">

    <view class="index-header-tabs-left">

        <!-- <view class="index-header-tabs-item {{headerTabsIndex === 0 && 'active'}}" bindtap="onChangeHeadertabs" data-index="0">全部包间({{list.length}})</view>

        <view class="index-header-tabs-item {{headerTabsIndex === 1 && 'active'}}" bindtap="onChangeHeadertabs" data-index="1">空闲包间({{noDisabledList.length}})</view>

        <view class="index-header-tabs-item {{headerTabsIndex === 2 && 'active'}}" bindtap="onChangeHeadertabs" data-index="2">已定包间({{disabledList.length}})</view> -->

        <view class="index-header-tabs-item {{headerTabsIndex === 0 && 'active'}}" bindtap="onChangeHeadertabs" data-index="0">大厅</view>

        <view class="index-header-tabs-item {{headerTabsIndex === 1 && 'active'}}" bindtap="onChangeHeadertabs" data-index="1">包厢</view>

    </view>

    <view class="index-header-tabs-item-btn" bindtap="toShop">切换门店</view>

</view>

 

<view class="index-time" bindtap="filtrTime">

    <van-icon name="arrow-left" />

    <view class="index-time-text">

        <text>{{date}}</text>

        <van-icon name="arrow-down" />

    </view>

    <van-icon name="arrow" />

</view>

<view class="index-tabs" bindtap="filtrTime">

    <view class="index-tabs-item {{isDinner === 0 && 'active'}}" bindtap="setNoDinner">午餐 11:00</view>

    <view class="index-tabs-item {{isDinner === 1 && 'active'}}" bindtap="setDinner">晚餐 17:00</view>

</view>

<view class="index-menu-tabs">

    <view class="index-menu-tabs-item {{menuTabsIndex === 0 && 'active'}}" bindtap="onChangeMenutabs" data-index="0">全部包间({{list.length}})</view>

    <view class="index-menu-tabs-item {{menuTabsIndex === 1 && 'active'}}" bindtap="onChangeMenutabs" data-index="1">空闲包间({{noDisabledList.length}})</view>

    <view class="index-menu-tabs-item {{menuTabsIndex === 2 && 'active'}}" bindtap="onChangeMenutabs" data-index="2">已定包间({{disabledList.length}})</view>

</view>

<view class="index-list">

    <view class="index-list-item" wx:for="{{ [list, noDisabledList, disabledList][menuTabsIndex]}}" wx:key="index" id="{{index}}" bindtap="toCart">

        <view class="index-list-item-header {{item.state !== 1 && 'disabled'}}">

            <text>{{item.state === 1 ? '可预订':'已预定'}}</text>

            <text wx:if="{{item.state !== 1}}">11:00</text>

            <text>{{item.num}}/{{item.num}}人</text>

        </view>

        <view class="index-list-item-name">{{item.name}}</view>

        <view class="index-list-item-num">

            <block wx:if="{{item.state !== 1}}">

                <view>张先生：134****1234</view>

                <view>需要儿童座椅</view>

            </block>

            <block wx:else>

                <view>

                    <image style="width: 50rpx;height:50rpx" src="/images/seat-xz.png" mode="" />

                </view>

                <text>空闲中</text>

            </block>

        </view>

        <view class="index-list-item-footer">

            下单员：张三

        </view>

    </view>

</view>

 

<van-popup show="{{ showDate }}" position="bottom" bind:close="onClose">

    <van-datetime-picker type="date" value="{{currentDate}}" bind:confirm="onConfirm" bind:cancel="onCancel" min-date="{{minDate}}" max-date="{{maxDate}}" />

</van-popup>

<van-popup show="{{ showTime }}" position="bottom" bind:close="onClose1">

    <van-picker columns="{{ columns }}" show-toolbar bind:cancel="onCancel2" bind:confirm="onConfirm2" />

</van-popup>

<van-action-sheet show="{{ showAction }}" actions="{{ actions }}" cancel-text="取消" bind:close="onDinnerClose" bind:cancel="onDinnerClose" bind:select="onSelect" />