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

<template>
	<view class="page">
		<u-swiper :list="item.imgs" :effect3d="true" :height="300"></u-swiper>
		<view class="hotel_item">
			<view class="name">{{ item.name }}</view>
			<view class="address">
				<view class="dz">{{ item.addres }}</view>
				<view class="dh" @click="dh()">导航</view>
			</view>
			<map class="map" :latitude="item.lat" :longitude="item.lng" :markers="[{ latitude: item.lat, longitude: item.lng }]"></map>
		</view>
		<view class="hotel_item" v-if="item.shopType == 2">
			<view class="v_title">
				<image src="../../static/lo.png" class="lo" mode="widthFix"></image>
				<view class="hd">预订房间</view>
			</view>
			<view v-if="item.rooms.length > 0 && item.enableFlag == 0">
				<view class="r_item" v-for="(it, index) in item.rooms" :key="index" @click="popup(it)">
					<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">{{ it.nums }}间房</view>
						<view class="btn">预订</view>
					</view>
					<view class="clear"></view>
				</view>
			</view>
			<view class="noLogin" v-else>
				<image class="u-error-icon" src="../../static/sj.png" mode="widthFix"></image>
				<view class="dll" style="border: 0px;padding-bottom: 20px;">暂无服务</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="calendar_show = true" />
					<text class="day" v-if="book.days">{{ book.days }}天</text>
					<u-calendar v-model="calendar_show" mode="range" :start-text="'入住'" :end-text="'退房'" @change="change" max-date="2050" :min-date="min_date"></u-calendar>
				</view>
				<view class="tk" style="background-color: #DCDFE6;color: #7d7d7d;">仅作基本的订房操作，实际情况以酒店方为准</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,
			calendar_show: false
		};
	},
	onLoad(e) {
		this.$http.request({
			url: this.$http.urls.hotelDetail,
			data: { shopId: e.shopId },
			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.book.openid = this.$getUser().openid;
			//订阅通知
			uni.requestSubscribeMessage({
				tmplIds: ['Lh41ftWaZxG8mycje0XQLpylac30ftS4nAXM28iwi8I', 'iEMHyeeuqs-MFa1J4QgT7n0mfnOb-h93oc21b1O3pK8'],
				complete: c => {
					this.$http.request({
						method: 'POST',
						url: this.$http.urls.hotelBook,
						data: this.book,
						success: res => {
							uni.showToast({ title: '操作成功' });
							this.popup_show = false;
							uni.redirectTo({
								url: '/pages/order/my'
							});
						}
					});
				}
			});
		}
	}
};
</script>
<style lang="scss">
.page {
	padding: 12px;
	.map {
		width: 100%;
		height: 100px;
		margin-top: 20px;
		border-radius: 5px;
	}
	.r_item {
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0);
		border-radius: 0px;
	}
	.day {
		position: absolute;
		color: orange;
		right: 12px;
	}
}
</style>