vue-homePage 包房预定

<template>
    <div class="page-home">
        <group>
            <group-title>就餐时间 <span class="time-tip">需提前两天预订</span></group-title>
            <cell title="请选择" :value="datetime" @click.native="showCalendar" is-link></cell>
        </group>

        <popup v-model="calendarOptions.show">
            <popup-header
                    left-text="取消"
                    right-text=""
                    title="请选择日期"
                    @on-click-left="dateCancel">
            </popup-header>
            <inline-calendar
                    ref="calendar"
                    @on-change="dateChanged"
                    class="inline-calendar-demo"
                    v-model="calendarOptions.value"
                    v-show="calendarOptions.show"
                    :show-last-month="false"
                    :show-next-month="false"
                    :start-date="startDate"
                    :return-six-rows="false"
                    :replace-text-list="calendarOptions.replaceTextList"
                    :render-function="calendarOptions.buildSlotFn"
                    :disable-past="true"
                    :disable-date-function="calendarOptions.disableDateFunction">
            </inline-calendar>
        </popup>
        <div v-show="false">
            <popup-picker
                    title="选择时间"
                    :data="timeOptions.available"
                    v-model="timeOptions.value"
                    placeholder="选择时间"
                    :show="timeOptions.show"
                    @on-hide="timeHide"
                    @on-show="timeShow">
            </popup-picker>
        </div>

        <group-title>请选择包房</group-title>
        <grid>
            <template v-for="room of roomOptions.rooms">
                <grid-item @click.native="chooseRoom(room)" :class="['room',{'room_active':roomOptions.selected == room.id}]" :label="room.name">
                    <icon slot="icon" name="chair" scale="3"></icon>
                </grid-item>
            </template>
        </grid>

        <group label-width="5em">
            <div class="meal-package" @click="showMenu"><icon name="package" scale="2.5"></icon> 查看套餐</div>
            <popup-picker title="选择套餐" :data="mealOptions.meals" v-model="mealOptions.selectedMeal" @on-hide="mealConfirm"></popup-picker>
            <popup-picker title="就餐人数" :data="mealOptions.people" v-model="mealOptions.number" @on-hide="peopleConfirm"></popup-picker>
        </group>

        <group title="联系方式">
            <x-input title="姓名" v-model="order.username" name="username"></x-input>
            <x-input title="手机号" v-model="order.mobile" keyboard="number" is-type="china-mobile"></x-input>
        </group>

        <box gap="10px 10px" class='businessTime'>
             <group-title >营业时间最晚9:30</group-title>
            <x-button @click.native="bookingRoom" :gradients="['#1D62F0', '#19D5FD']">预订包房</x-button>
        </box>

        <div v-transfer-dom>
            <popup v-model="mealOptions.show" height="100%" class="meal-page">
                <popup-header
                        left-text=""
                        right-text="关闭"
                        title="套餐信息"
                        @on-click-right="mealCancel">
                </popup-header>

                <div class="meal-content" v-for="(items,key) in mealOptions.mealPackages">
                    <button-tab class="button-tab" v-model="mealOptions.tab[key]">
                        <template v-for="(item, idx, j) in items">
                            <button-tab-item @on-item-click="mealOptions.tab[key] = j">{{key}}元{{idx}}套餐</button-tab-item>
                        </template>
                    </button-tab>
                    <template v-for="(item, idx, i) in items" v-if="i === mealOptions.tab[key]">
                        <x-table full-bordered style="background-color:#fff;">
                            <thead>
                                <tr>
                                    <th colspan="2">{{key}}元 {{idx}}套餐</th>
                                </tr>
                            </thead>
                            <tbody>
                            <template v-for="(meal,type) in item">
                                <template v-if="typeof meal === 'object'">
                                    <template v-for="detail,detailIdx in meal">
                                        <tr>
                                            <td v-if="detailIdx === 0" :rowspan="meal.length">{{type}}</td>
                                            <td>{{detail}}</td>
                                        </tr>
                                    </template>
                                </template>
                                <template v-else>
                                    <tr>
                                        <td width="30%">{{type}}</td>
                                        <td>{{meal}}</td>
                                    </tr>
                                </template>
                            </template>
                            </tbody>
                        </x-table>
                    </template>
                </div>
            </popup>
        </div>
    </div>

</template>

<script>
    import { Grid, GridItem, GroupTitle, InlineCalendar, Popup, PopupPicker, Group, Cell,
        PopupHeader, XInput, Box, XButton, Divider, ButtonTab, ButtonTabItem, XTable } from 'vux'

    export default {
        data() {
            return {
                calendarOptions:{
                    show: false,
                    value: '',
                    listValue: '',
                    replaceTextList: {'TODAY':'今'},
                    useCustomFn: false,
                    buildSlotFn: (line, index, data) => {
//                        return /8/.test(data.date) ? '<div style="font-size:12px;text-align:center;">订满</div>' : '<div style="height:19px;"></div>'
                    },
                    disablePast: true,
                    disableFuture: false,
                    disableWeekend: false,
                    disableDateFunction (date) {
                    //    if (date.formatedDate === '2018-1-16') {
                    //        return false
                    //    }
                    },
                },
                timeOptions:{
                    available: [['中午','晚饭']],
                    value: [],
                    show: false
                },
                roomOptions: {
                    rooms: {
                        room_1: {
                            id: 1,
                            name: '包房一 (1~6人)',
                            active: false,
                            people: [1,2,3,4,5,6]
                        },
                        room_2: {
                            id: 2,
                            name: '包房二 (7~16人)',
                            active: false,
                            people: [7,8,9,10,11,12,13,14,15,16]
                        }
                    },
                    selected: null,
                },
                order: {
                    date: '',
                    hour: '',
                    room_id: null,
                    room_name: null,
                    username: null,
                    mobile: null,
                    employee_id: null,
                    people: null,
                    meal: null
                },
                mealOptions: {
                    meals: [['1000元','1200元','1500元','1800元','2000元','2600元','3000元','4000元'],
                    ['A 套餐','B 套餐', 'C 套餐']],
                    selectedMeal: [],
                    number: [],
                    people: [],
                    show: false,
                    tab:{
                        '1000':0,
                        '1200':0,
                        '1500':0,
                        '1800':0,
                        '2000':0,
                        '2600':0,
                        '3000':0,
                        '4000':0
                    }
                },
            }
        },
        computed:{
            datetime() {
                return this.calendarOptions.value+' '+this.timeOptions.value
            },
            startDate() {
                const nowDate = new Date();
                nowDate.setDate(nowDate.getDate() + 2);
                var y = nowDate.getFullYear();
                var m = nowDate.getMonth() + 1;
                var d = nowDate.getDate();
                var startDate = y + "-" + m + "-" + d;
                console.log(startDate);
                return startDate;
            },
        },
        methods: {
            chooseRoom(room) {
                this.roomOptions.selected = room.id
                this.order.room_id = room.id
                this.order.room_name = room.name
                this.mealOptions.people = []
                this.mealOptions.people.push(room.people)
            },
            showCalendar() {
                this.calendarOptions.show = !this.calendarOptions.show
            },
            dateChanged(){
                this.timeOptions.show = true
            },
            dateCancel() {
                this.calendarOptions.show = false
            },
            timeShow() {
                this.calendarOptions.show = false
            },
            timeHide(confirm) {
                this.timeOptions.show = false
                if (confirm){
                    this.calendarOptions.show = false
                    this.order.date = this.calendarOptions.value
                    this.order.hour = this.timeOptions.value[0]
                }else {
                    this.calendarOptions.show = true
                }
            },
            bookingRoom() {
                let result = this.validate()
                if (result.code === 'error') {
                    this.$vux.toast.show({
                        text: result.msg,
                        type: 'text'
                    })
                    return false
                }

                this.$http.post('/zhongrong/api/booking-room',{ZhongrongRoomOrder:this.order}).then((response) => {
                    if (response.data.status == 1) {
                        this.$vux.toast.show({
                            text: '预订成功',
                            type: 'success'
                        })
                        setTimeout(() => {
                            this.$router.push({path:'/user'});
                        }, 1000)
                    } else {
                        this.$vux.toast.show({
                            text: response.data.message,
                            type: 'cancel'
                        })
                    }
                }).catch((error) => {
                    this.$vux.toast.show({
                        text: '预订错误:网络出现问题',
                        type: 'cancel'
                    })
                })
            },
            validate(){
                if (this.order.date === '' || this.order.hour === '') {
                    return { code : 'error', msg: '请选择时间'}
                }

                if (this.order.room_id === null) {
                    return { code : 'error', msg: '请选择包房'}
                }

                if (this.order.mobile === null) {
                    return { code : 'error', msg: '请输入手机号'}
                }

                if (this.order.username === null || this.order.username === '') {
                    return { code : 'error', msg: '请填写贵姓'}
                }

                if (this.order.meal === null || this.order.meal === '') {
                    return { code : 'error', msg: '请选择套餐'}
                }

                if (this.order. people === null || this.order.people === '') {
                    return { code : 'error', msg: '请选择人数'}
                }

                return {code :'success'}
            },
            showMenu() {
                this.$http.get('/zhongrong/api/get-meal-package').then((response) => {
                    if (response.data.status == 1) {
                        console.log(response.data)
                        this.$nextTick(() => {
                            this.mealOptions.mealPackages = response.data.data
                            this.mealOptions.show = true
                        })
                    } else {
                        this.$vux.toast.show({
                            text: '加载套餐信息失败',
                            type: 'cancel'
                        })
                    }
                }).catch((error) => {
                    this.$vux.toast.show({
                        text: '网络出现问题',
                        type: 'cancel'
                    })
                })
            },
            mealCancel(){
                this.mealOptions.show = false
            },
            mealConfirm(confirm) {
                if(confirm){
                    this.order.meal = this.mealOptions.selectedMeal.join(' ')
                }
            },
            peopleConfirm(confirm) {
                if(confirm){
                    this.order.people = this.mealOptions.number[0]
                }
            }
        },
        mounted(){
            this.order.employee_id = document.getElementById('employee-id').value
        },
        components: {
            Grid,
            GridItem,
            GroupTitle,
            InlineCalendar,
            Popup,
            PopupPicker,
            Group,
            Cell,
            PopupHeader,
            XInput,
            XButton,
            Box,
            Divider,
            ButtonTab,
            ButtonTabItem,
            XTable
        }
    }
</script>

<style lang="scss">
    .room{
        color: #242424;
    }
    .room_active {
        .weui-grid__label{
            color: #09bb07;
        }
        color: #09bb07;
    }

    .time-tip{
        float: right;
        color: #00b3ee;
    }
    .meal-package{
        line-height:2.5em;
        color: #00b3ee;
        text-align: center;

        > svg{
            vertical-align: sub;
        }
    }
    .meal-content{
        margin: 0px 10px 15px 10px;
    }
    .button-tab{
        margin: 15px 10px;
    }
</style>