smart-tourism/smart-ui-app/pages/shop/hotel/detail.vue

<template>
	<view class="page">
		<u-swiper :list="item.imgs" :effect3d="true" :height="300"></u-swiper>
		<view class="item">
			<view class="name">{{ item.name }}</view>
			<view class="address">
				<view class="dz">{{ item.addres }}</view>
				<view class="dh" @click="dh()">导航</view>
			</view>
			<view class="">
				<map
					style="width: 100%; height: 100px;margin-top: 20px;border-radius:5px;"
					:latitude="item.lat"
					:longitude="item.lng"
					:markers="[{ latitude: item.lat, longitude: item.lng }]"
				></map>
			</view>
		</view>
		<view class="item">
			<view class="title">
				<image src="../../../static/lo.png" class="lo" mode="widthFix"></image>
				<view class="hd">预订房间</view>
			</view>
			<view class="r_item" v-for="(it, index) in item.rooms" :key="index">
				<image :src="ip + it.pic" mode="aspectFill" class="pic"></image>
				<view class="con">
					<view class="title omit">{{ it.title }}</view>
					<view class="ms">
						<text class="rmb">¥{{ it.price }}</text>
						<text>起</text>
					</view>
					<view class="ms">还剩13间房</view>
					<view class="btn" @click="popup(it)">预订</view>
				</view>
				<view class="clear"></view>
			</view>
		</view>
		<!--预订房间-->
		<u-popup v-model="popup_show" :mask-close-able="false" mode="center" border-radius="14" width="90%" height="auto" :closeable="true">
			<view class="u-popup">
				<view class="tttt" style="font-weight: bolder;">预订房间</view>
				<u-steps :list="numList" mode="number" :current="0" active-color="#c74547" style="margin: 20px 0px 20px 0px;"></u-steps>
				<view class="form_group hr">
					<view class="lable">房型</view>
					<input :value="book.room + '(¥' + book.price + '起)'" :disabled="true" />
				</view>
				<view class="form_group hr">
					<view class="lable">姓名</view>
					<input placeholder="请输入姓名" v-model="book.name" />
				</view>
				<view class="form_group hr">
					<view class="lable">手机号</view>
					<input type="number" placeholder="请输入手机号" v-model="book.phone" />
				</view>
				<view class="form_group">
					<view class="lable">入住日期</view>
					<input placeholder="请选择入住日期" v-model="book.day" :disabled="true" @click="show = true" />
					<text class="day" v-if="book.days">{{ book.days }}天</text>
					<u-calendar v-model="show" mode="range" :start-text="'入住'" :end-text="'退房'" @change="change" max-date="2050" :min-date="min_date"></u-calendar>
				</view>
				<button class="btn" @click="add()">确认</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			ip: this.$http.urls.ip,
			numList: [{ name: '资料填写' }, { name: '酒店确认' }, { name: '登记入住' }],
			item: {}, //酒店信息
			book: {}, //预订房间
			min_date: this.$util.getDate('day'),
			popup_show: false,
			show: false
		};
	},
	onLoad(e) {
		this.$http.request({
			url: this.$http.urls.hotelDetail,
			data: { shopId: 30 },
			success: res => {
				this.item = res.data.data;
				this.item.imgs = []; //轮播图
				this.item.showPictures = this.item.showPictures.split(',');
				this.item.showPictures.forEach(item => {
					this.item.imgs.push({ image: this.ip + item });
				});
			}
		});
	},
	methods: {
		//导航
		dh() {
			uni.openLocation({
				latitude: Number(this.item.lat),
				longitude: Number(this.item.lng),
				address: this.item.addres,
				success: res => {},
				fail: error => {
					console.log(error);
				}
			});
		},
		change(e) {
			this.book.day = e.startMonth + '-' + e.startDay + ' 至 ' + e.endMonth + '-' + e.endDay;
			this.book.min = e.startDate;
			this.book.max = e.endDate;
			this.book.days = this.$util.getDaysBetween(e.startDate, e.endDate);
		},
		popup(item) {
			this.book = {};
			this.book.room = item.title;
			this.book.price = item.price;
			this.book.roomId = item.id;
			this.popup_show = true;
		},
		add() {
			let rule = [
				{ name: 'name', checkType: 'notnull', errorMsg: '请输入你的姓名' },
				{ name: 'phone', checkType: 'notnull', errorMsg: '请输入你的手机号' },
				{ name: 'day', checkType: 'notnull', errorMsg: '请选择入住日期' }
			];
			if (!this.$verify.check(this.book, rule)) {
				uni.showModal({ content: this.$verify.error, showCancel: false });
				return;
			}
			this.book.memberId = this.$getUser().memberId;
			this.$http.request({
				method: 'POST',
				url: this.$http.urls.hotelBook,
				data: this.book,
				success: res => {
					uni.showToast({ title: '操作成功' });
					this.popup_show = false;
				}
			});
		}
	}
};
</script>
<style lang="scss">
.page {
	padding: 12px;
	.item {
		margin-top: 10px;
		padding: 10px;
		border-radius: 5px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		.name {
			font-size: 20px;
			font-weight: bold;
			border-bottom: 1px solid #f2e6e6;
			padding: 0px 10px 10px 10px;
		}
		.address {
			color: $dar2;
			padding: 10px;
			.dz {
				width: 87%;
				float: left;
			}
			.dh {
				width: 13%;
				float: left;
				color: #03a9f4;
				text-align: right;
			}
		}
		.title {
			font-size: 20px;
			font-weight: bold;
			color: #333;
			.lo {
				width: 150px;
			}
			.hd {
				position: absolute;
				left: 35px;
				margin-top: -36px;
			}
		}
		.r_item {
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0);
			.btn {
				float: right;
				margin-top: -54px;
				padding: 5px 25px;
				border-radius: 20px;
				background-color: orange;
				margin-right: -34px;
			}
		}
	}
	.day {
		position: absolute;
		color: orange;
		right: 12px;
	}
}
</style>