wx_mini_app/components/hotelBooking/hotelBooking.vue

<template>
<view class="pages">
    <div class="top-hotel-detail">
        <div style="font-size: 18px;">
            丁真精品酒店理塘总店 四川省甘孜州理塘县理塘路口
        </div>
        <div>
            商务大床房B
        </div>
        <div>
            入住{{`2019-12-12`}} 离店{{`2019-12-13`}} 共1晚
        </div>
    </div>
    <div>
        <div class="form-flex">
            <div>
                房间数
            </div>
            <div>
                <u-number-box v-model="form.roomNum" @change="valChange"></u-number-box>
                <u-icon name="arrow-right" color="#000" size="20"></u-icon>
            </div>
        </div>
        <div class="form-flex">
            <div>
                入住人
            </div>
            <div @click="handleToContacts">
                <template v-if="form.name!=''">{{ form.name }} {{ form.phone }}</template>
                <template v-else>请选择联系人</template>
                <u-icon name="arrow-right" color="#000" size="20"></u-icon>
            </div>
        </div>
        <div class="form-flex" style="margin-top:20px">
            <div>
                到店时间
            </div>
            <div @click="openTime">
                {{ form.time }}
                <u-icon name="arrow-right" color="#000" size="20"></u-icon>
            </div>
        </div>
        <div class="form-flex">
            <div>
                优惠券
            </div>
            <div @click="handleToCoupon">
                {{ form.coupon }}
                <u-icon name="arrow-right" color="#000" size="20"></u-icon>
            </div>
        </div>
        <div class="form-flex">
            <div>
                发票
            </div>
            <div @click="handleToBill">
                {{ form.bill }}
                <u-icon name="arrow-right" color="#000" size="20"></u-icon>
            </div>
        </div>
        <div class="form-flex">
            <div>
                备注
            </div>
            <div style="flex:1;">
                <u-input placeholder="请输入备注" v-model="form.remarks"></u-input>
                <u-icon name="arrow-right" color="#000" size="20"></u-icon>
            </div>
        </div>
    </div>
	<div class="bottom-submit">
		<div>
			<span style="color:rgb(0, 170 ,255)">338.00</span> 元 <span style="padding:3px 8px;border-radius:5px;border:1px solid rgb(0, 170 ,255);margin-left:5px;">明细</span>
		</div>
		<div>
			<u-button @click="submitHotel" type="primary">提交</u-button>
		</div>
	</div>
    <u-datetime-picker ref="datetimePicker" :show="show" v-model="nowTime" @confirm="confirmTime" mode="datetime"></u-datetime-picker>
</view>
</template>

<script>
export default {
    data() {
        return {
            form: {
                roomNum: 1, //房间数
                name: '', //入住人
                phone: '', //手机号
                time: '', //到店时间
                coupon: '', //优惠券
                bill: '', //发票
                remarks: '', //备注
            },
			nowTime:Number(new Date()),
            show: false,
            rules: {}
        }
    },
    filters: {
		//将时间戳格式化为yy-mm-dd hh:mm
        formatter(value) {
            if (!value) return ''
            const date = new Date(value)
            const formattedDate = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
            return formattedDate
        }
    },
    methods: {
        valChange(val) {
            console.log(val)
        },
        handleToContacts() {
            uni.navigateTo({
                url: '/components/contacts/contacts'
            })
        },
        openTime() {
            this.show = true
        },
        onReady() {
            
        },
        confirmTime(obj) {
			console.log(this);
            this.form.time = this.$options.filters.formatter(obj.value)
            this.show = false
        },
		handleToCoupon(){
			uni.navigateTo({
			    url: '/components/coupon/coupon'
			})
		},
		handleToBill(){
			uni.navigateTo({
			    url: '/components/bill/bill'
			})
		},
		submitHotel(){
			console.log('提交');
		}
    }
}
</script>

<style lang="scss" scoped>
.pages {
    width: 100%;
    height: 100vh;
    background: #f5f5f5;
}

.top-hotel-detail {
    width: 100%;
    height: 200px;
    background: #032c4f;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    color: #fff;
    padding: 20px;
    box-sizing: border-box;
}

.form-flex {
    display: flex;
    justify-content: space-between;
    height: 30px;
    align-items: center;
    padding: 20px;
    background: #fff;

    div:nth-child(2) {
        display: flex;
        align-items: center;
    }
}
.bottom-submit{
	width:100%;
	height:90px;
	background:#fff;
	position:fixed;
	padding: 20px;
	bottom:0;
	left:0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
}
</style>