ihotel-h5/pages/order_room/order_room.vue

<template>
	<view class="content">
		<!-- 背景图 -->
		<view class="index_bg">
			<view class="welcome"><image class="welcome_img" src="../../static/index/welcome.png"></image></view>
		</view>
		<!-- 第一层标题 -->
		<view class="touming_bg">
			<view class="touming_title">墨轩湖姬子公寓（南昌交通学院）</view>
			<view class="touming_txt">尊敬的老师，您辛苦了，欢迎入住！</view>
		</view>
		<!-- 第二层表单 -->
		<view class="two_item">
			<view class="two_all">
				<view class="select-time" @click="openCalendar">
					<view class="select-time-one">
					  <text class="select-list">周四入住</text>
					  <text class="select-list-time">07月21日</text>
					</view>
					<view class="select-center">
						<view class="select-line1"></view>
						<view class="select-circle">1晚</view>
						<view class="select-line2"></view>
					</view>
					<view class="select-time-one">
					  <text class="select-list">周五离店</text>
					  <text class="select-list-time">07月22日</text>
					</view>
					<uni-calendar ref="calendar" class="uni-calendar--hook" :clear-date="true" :date="info.date" :insert="info.insert" :lunar="info.lunar" :startDate="info.startDate"
					:endDate="info.endDate" :range="info.range" @confirm="confirm" @close="close"/>
				</view>
				<view class="form_bg">
					<view class="form_title">01户型</view>
					<!-- 自定义表单校验 -->
					<!-- <uni-forms ref="customForm" :rules="customRules" :modelValue="customFormData">
						<uni-forms-item label="姓名" required name="name">
							<uni-easyinput v-model="customFormData.name" placeholder="请输入姓名" />
						</uni-forms-item>
						<uni-forms-item label="年龄" required name="age">
							<uni-easyinput v-model="customFormData.age" placeholder="请输入年龄" />
						</uni-forms-item>
						<uni-forms-item label="兴趣爱好" required name="hobby">
							<uni-data-checkbox v-model="customFormData.hobby" multiple :localdata="hobbys" />
						</uni-forms-item>
					</uni-forms> -->
				</view>
			</view>
			<button style="margin-bottom: 0rpx;" type="primary" @click="submit('customForm')">提交</button>
		</view>
		
		<!-- 第三层订房 -->
		<view class="room-list">
			<!-- 房型列表 -->
			<view class="room-kuang">
				<view class="room-xinxi" v-for="(item,index) in room" :key="index">
					<image class="room-image" src="../../static/index/room_image.svg"></image>
					<view class="room-name">{{item.name}}</view>
					<view class="room-mark">{{item.mark1}} {{item.mark2}} {{item.mark3}}</view>
					<view class="room-icon">
						<image src="../../static/index/index_wifi.svg" style="width: 22rpx;height: 22rpx;"></image>
						<image src="../../static/index/index_kongtiao.svg" style="width: 20rpx;height: 20rpx;margin-left: 10rpx;"></image>
						<image src="../../static/index/index_nosmoking.svg" style="width: 22rpx;height: 22rpx;margin-left: 10rpx;"></image>
						<image src="../../static/index/index_lock.svg" style="width: 23rpx;height: 23rpx;margin-left: 10rpx;"></image>
					</view>
					<view class="before-price"><strike>{{item.before_price}}</strike></view>
					<view class="room-price">{{item.price}}</view>
					<view class="room-button" @click="navigateToOrderRoom"><text>订</text></view>
					<view class="room-line"  v-if="index<(room.length-1)"></view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showCalendar: false,
				info: {
					lunar: true,
					range: true,
					insert: false
				},
			}
		},
		onLoad() {
			
		},
		methods: {
			openCalendar() {
				this.$refs.calendar.open()
			},
			close(){
				console.log('弹窗关闭');
			},
			confirm(e) {
				console.log('confirm 返回:', e)
			},
		}
	}
</script>

<style>
	@import url("./css/order_room.css");
</style>