<template>
	<view>
		<view class="hotel-order">
			<view class="o-head">
				<view class="o-timer flex">
					<view class="time-item">5月20日 周六</view>
					<view class="time-split">
						<view>1晚</view>
						<image style="width: 66rpx;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1622098352000_930.png" mode="widthFix"></image>
					</view>
					<view class="time-item">5月23日 周日</view>
				</view>
				<view class="room-name">藏韵高级双床房</view>
				<view class="room-remark">含早 | 1.5m大床 | 24㎡ |  有窗</view>
				<view class="big-title">
					<text class=" f12">订房必知</text>
				</view>
				<view class="rule">
					<text class="king">此房间支持免费取消， </text>
					<text>订单需要等待酒店或供应商确认后生效，订单确认结果我们将会通知推送到您的微信，请您在下单时同意结果订阅，以便您能正常收到消息。</text>
				</view>
			</view>
			<view class="form">
				<view class="form-items">
					<view class="label">房间数量</view>
					<view class="val">
						<u-number-box size="28" :min="1" :max="100" v-model="order.roomCount"></u-number-box>
					</view>
				</view>
				<view class="form-items">
					<view class="label">住客姓名</view>
					<view class="val">
						<input type="text" v-model="order.userName" placeholder="若是多人,输入代表人员即可" />
					</view>
				</view>
				<view class="form-items">
					<view class="label">联系电话</view>
					<view class="val">
						<input type="text" v-model="order.userName" placeholder="输入电话号码" />
					</view>
				</view>
				<view class="form-items">
					<view class="label">预计到店</view>
					<view class="val flex">
						<view style="flex: 1;" class="f14">14:00</view>
						<u-icon name="arrow" color="#D9D9D9" size="20" />
					</view>
				</view>
			</view>
			<view class="empty-block"></view>
			<view style="padding:50rpx 40rpx">
				<view class="big-title">
					<text>费用明细</text>
				</view>
				<view class="form" style="margin:40rpx 0;padding: 0;">
					<view class="form-items">
						<view class="label">
							在线支付
						</view>
						<view class="val f14 regular" style="text-align: right;">
							<text style="margin-right: 30rpx;">2间房</text>
							<text class="red">￥5666</text>
						</view>
					</view>
					<view class="form-items" style="border-bottom: none;">
						<view class="label">
							房费明细
						</view>
					</view>
					<view class="flex f12 grey">
						<view style="flex:1">
							<text style="margin-right: 30rpx;">2021-05-27</text>
							<text>含早</text>
						</view>
						<view style="text-align: right;">2间 × ¥1416.5</view>
					</view>
					<view class="flex f12 grey" style="margin-top: 40rpx;">
						<view style="flex:1">
							<text style="margin-right: 30rpx;">2021-05-28</text>
							<text class="red">不含早</text>
						</view>
						<view style="text-align: right;">2间 × ¥1416.5</view>
					</view>
				</view>
				
			</view>
			<view class="empty-block"></view>
			<view style="padding:50rpx 40rpx">
				<view class="big-title">
					<text>重要提醒</text>
				</view>
				<view class="sheshi">
					<view class="she-title">入离时间</view>
					<view class="she-content">
						<text>入住时间：14:00以后；离店时间：12:00以前</text>
					</view>
				</view>
				<view class="sheshi">
					<view class="she-title">宠物政策</view>
					<view class="she-content">
						<text>允许携带宠物，酒店可能收取额外费用</text>
					</view>
				</view>
				<view class="sheshi">
					<view class="she-title">酒店提示</view>
					<view class="she-content">
						<text>疫情期间，请佩戴好口罩。住宿提供方支持中国（含港澳台）及外国客人入住</text>
					</view>
				</view>
				<view class="sheshi">
					<view class="she-title">儿童政策</view>
					<view class="she-content">
						<text>不接受18岁以下客人单独入住。每房间可有1名儿童使用现有床铺。不可加床</text>
					</view>
				</view>
			</view>
		</view>
		<view class="opera-box">
			<view class="box flex">
				<view class="price">
					<text class="f11">￥</text>
					<text>5666</text>
				</view>
				<view class="sum-detail">共计 2万·2间房</view>
				<u-button :ripple="true" :hair-line="false" :custom-style="btnStyle">立即购买</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				order: {
					roomCount:1,
					userName:''
				},
				btnStyle:{
					height:"80rpx",
					lineHeight:"80rpx",
					borderRadius:"16rpx",
					background:"#111",
					color:"#FFF",
					fontSize:"28rpx",
					fontWeight:"600",
					width:'193rpx',
				}
			}
		},
		created() {
			uni.setNavigationBarTitle({
				title: "九寨沟星宇国际大酒店",
			});
		},
	}
</script>

<style>
	.hotel-order{
		color: #111111;
		margin-bottom: 160rpx;
	}
	.opera-box{
		background-color: #FFF;
		padding: 20rpx 45rpx 40rpx 45rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 5;
	}
	.opera-box .box{
		height: 100rpx;
		background: #FFFFFF;
		box-shadow: 0px 10rpx 30rpx 0px rgba(36, 36, 36, 0.2);
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		padding: 0 10rpx 0 36rpx;
	}
	.opera-box .box .price{
		font-size: 40rpx;
		font-weight: 500;
		color: #D91818;
		margin-right: 20rpx;
	}
	.opera-box .box .sum-detail{
		font-size: 24rpx;
		flex: 1;
		font-weight: 500;
		color: #6E6E6E;
	}
	.hotel-order .red{
		color:#D91818 !important
	}
	.hotel-order .grey{
		color:#6E6E6E !important
	}
	.hotel-order .form{
		margin-top: 60rpx;
		padding:0 45rpx;
	}
	.hotel-order .form .form-items{
		margin-bottom: 40rpx;
		display: flex;
		align-items: center;
		padding-bottom: 36rpx;
		border-bottom:1px solid #f5f5f5;
		font-size: 28px;
		font-weight: 500;
	}
	.hotel-order .form .form-items:last-child{
		border-bottom: none;
	}
	.hotel-order .form .form-items .label{
		font-size: 28rpx;
		font-weight: 600;
		margin-right: 60rpx;
		flex-shrink: 0;
	}
	.hotel-order .form .form-items .val{
		flex:1;
	}
	.hotel-order .sheshi{
		margin-top: 50rpx;
	}
	.hotel-order .sheshi .she-title{
		font-size: 28rpx;
		font-weight: 800;
	}
	.hotel-order .sheshi .she-content{
		margin-top: 24rpx;
	}
	.hotel-order .sheshi .she-content text{
		
		font-size: 24rpx;
		font-weight: 500;
		color: #4A4A4A;
		line-height: 40rpx;
		margin-right: 24rpx;
	}
	.hotel-order .form .form-items .val input{
		border:none;
		padding: 0;
		margin: 0;
		outline: none;
		height: 38rpx;
		line-height: 38rpx;
		font-size: 28rpx;
		font-weight: 500;
		width: 100%;
	}
	
	.hotel-order .king {
		color: #DFBE6E !important;
	}
	.hotel-order .f12 {
		font-size:24rpx !important;
	}
	.f11 {
		font-size:22rpx !important;
	}
	.hotel-order .f14 {
		font-size:28rpx !important;
	}
	.hotel-order .regular {
		font-weight: 500 !important;
	}
	.hotel-order .flex{
		display: flex;
		align-items: center;
	}
	.hotel-order .empty-block{
		height: 20rpx;
		background: #ECF1F4;
	}
	.hotel-order .flex-wrap{
		flex-wrap: wrap;
	}
	.hotel-order .o-head{
		padding: 45rpx;
		background: #FFFFFF;
		box-shadow: 0px 2rpx 15rpx 0px rgba(76, 76, 76, 0.13);
		border-radius: 0px 0px 60rpx 60rpx;
	}
	.hotel-order .o-head .o-timer{
		height: 100rpx;
		background: #ECF1F4;
		border-radius: 20rpx;
		padding: 0 40rpx;
	}
	.hotel-order .o-head .o-timer .time-item{
		font-size: 32rpx;
		font-weight: 800;
		flex:1;
	}
	.hotel-order .o-head .o-timer .time-item:last-child{
		text-align: right;
	}
	.hotel-order .o-head .o-timer .time-split{
		font-size: 24rpx;
		font-weight: 400;
		text-align: center;
	}
	.hotel-order .o-head .room-name{
		font-size: 32rpx;
		font-weight: bold;
		margin-top: 40rpx;
		margin-bottom: 10rpx;
	}
	.hotel-order .o-head .room-remark{
		font-size: 28rpx;
		font-weight: 500;
		padding-bottom:30rpx;
		margin-bottom: 30rpx;
		border-bottom: 1px solid #E7E7E7;
	}
	.hotel-order .o-head .rule{
		font-size: 22rpx;
		font-weight: 500;
		color: #6E6E6E;
		margin-top: 18rpx;
	}
	.hotel-order .big-title {
		position: relative;
	}
	
	.hotel-order .big-title::before {
		display: block;
		width: 71rpx;
		height: 12rpx;
		background: #DFBE6E;
		border-radius: 4rpx;
		content: ' ';
	
		position: absolute;
		left: 0;
		bottom: 6rpx;
		z-index: 1;
	}
	.hotel-order .big-title text {
		font-size: 34rpx;
		font-weight: bold;
		color: #1F1F1F;
		position: relative;
		z-index: 2;
	}
</style>
