ihotel-h5/pages/index/index.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="uni-ka" style="margin-top: -40px;margin-bottom:0px;">
			<text class="uni-title">墨轩湖姬子公寓（南昌交通学院）</text>
			<text class="uni-sub-title">2021年装修 | 智能门锁 | 房间wifi | 免费停车</text>
			<text class="uni-extra" @click="navigateToXiangqing">设施/详情＞</text>
			<text class="uni-body">宜春市靖安县北高速路口什么路899号</text>
			<image class="uni-phone" @click="telphone(phone)" src="../../static/index/index_phone.svg"></image>
			<image class="uni-map" @click="mapDaohang" src="../../static/index/index_map.svg"></image>
			<br><text class="uni-body2">距离我520km</text>
		</view>
		<!-- 第二层工具 -->
		<view class="item-list">
		  <view class="item-list-one" @click="navigateToXuzhi">
		    <image src="../../static/index/index_xuzhi.svg" class="img-btn"></image>
		    <text class="list-txt">入住须知</text>
		  </view>
		  <view class="item-list-one" @click="navigateToDairuzhu">
		    <image src="../../static/index/index_ruzhu.svg" class="img-btn"></image>
		    <text class="list-txt">办理入住</text>
		  </view>
		  <view class="item-list-one" @click="navigateToXuzhu">
		    <image src="../../static/index/index_xuzhu.svg" class="img-btn"></image>
		    <text class="list-txt">办理续住</text>
		  </view>
		  <view class="item-list-one" @click="navigateToTuifang">
		    <image src="../../static/index/index_tuifang.svg" class="img-btn"></image>
		    <text class="list-txt">办理退房</text>
		  </view>
		</view>
		<!-- 第三层订房 -->
		<view class="room-list">
			<!-- 选择住房日期 -->
			<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" :selected="info.selected" 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" @change="change" @confirm="confirm" @close="close"/>
			</view>
			<!-- 房型列表 -->
			<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" @click="inputDialogToggle"></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: 30rpx;height: 30rpx;"></image>
						<image src="../../static/index/index_kongtiao.svg" style="width: 26rpx;height: 26rpx;margin-left: 10rpx;"></image>
						<image src="../../static/index/index_nosmoking.svg" style="width: 30rpx;height: 30rpx;margin-left: 10rpx;"></image>
						<image src="../../static/index/index_lock.svg" style="width: 30rpx;height: 30rpx;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>
		<!-- 房间样式弹窗页面 -->
		<uni-popup ref="popup" type="dialog" :mask-click="false">
			<view class="popup_bg">
				<text class="popup_title">户型详情</text>
				<text class="popup_error" @click="popupClose"></text>
				<!-- 轮播图 -->
				<swiper class="swiper" circular :indicator-dots="indicatorDots">
					<swiper-item v-for="(item, index) in img" :key="index">
						<view class="swiper-item">
							<image :src="item.srcUrl" class="swiper-img"></image>
						</view>
					</swiper-item>
				</swiper>
				<text class="popup_title2">便利设施</text>
				<view class="popup_txt">尤其是刚上线的产品，很难通过产品的内部体系来实现快速的用户增长，所以会更加依赖于分享来达到广泛的传播，获取目标用户。
所以监听用户的截图操作，提示用户进行分享，既缩短了以前分享截...</view>
			</view>
		</uni-popup>
		<!-- 办理续住弹窗页面 -->
		<uni-popup ref="popup_xuzhu" type="dialog" :mask-click="false">
			<view class="popup_bg_xu">
				<text class="popup_title">办理续住</text>
				<text class="popup_error" @click="popupXuzhuClose"></text>
				<text class="popup_xu_line"></text>
				<!-- 时间选择 -->
				<view class="select-time-xu" @click="openXuCalendar">
					<view class="select-time-one-xu">
					  <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-xu">
					  <text class="select-list">周五离店</text>
					  <text class="select-list-time">07月22日</text>
					</view>
					<uni-calendar ref="calendar_xu" :selected="info.selected" 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="confirmXu" @close="closeXu"/>
				</view>
				<text class="popup_xu_txt">注：办理续住最多7天，如超过7天需要重新预定</text>
				<!-- 支付框 -->
				<view class="fukuan">
					<view class="fu-price"><text style="font-size: 28rpx;">总计：</text>¥20.00</view>
					<view class="fu-zhifu">立即支付</view>
				</view>
			</view>
			
		</uni-popup>
			
	</view>
</template>

<script>
	/**
	 * 获取任意时间
	 */
	function getDate(date, AddDayCount = 0) {
		if (!date) {
			date = new Date()
		}
		if (typeof date !== 'object') {
			date = date.replace(/-/g, '/')
		}
		const dd = new Date(date)

		dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期

		const y = dd.getFullYear()
		const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
		const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
		return {
			fullDate: y + '-' + m + '-' + d,
			year: y,
			month: m,
			date: d,
			day: dd.getDay()
		}
	}
	// 导入图片
	import room1 from '../../static/index/swiper_img1.svg'
	import room2 from '../../static/index/swiper_img1.svg'
	export default {
		data() {
			return {
				showCalendar: false,
				info: {
					lunar: true,
					range: true,
					insert: false,
					selected: [],
					startDate:'',
					date:'',
					endDate:''
				},
				room:[
					{id:1,room_img:({ url: "../../static/index/room_image.svg" }),name:'01户型',before_price:'¥419',price:'¥0.00',mark1:'22m',mark2:'无早',mark3:'大床'},
					{id:2,room_img:'url(../../static/index/index_bg.svg)',name:'02户型',before_price:'¥419',price:'¥0.00',mark1:'22m',mark2:'无早',mark3:'大床'},
					{id:3,room_img:({ url: "../../static/index/room_image.svg" }),name:'01户型',before_price:'¥419',price:'¥0.00',mark1:'22m',mark2:'无早',mark3:'大床'},
					{id:4,room_img:'url(../../static/index/index_bg.svg)',name:'02户型',before_price:'¥419',price:'¥0.00',mark1:'22m',mark2:'无早',mark3:'大床'},
				],
				indicatorDots: true,//滚动图片提示条默认出现
				img:[
					{
						value: '1',
						srcUrl:room1,
						name: '图1'
					},
					{
						value: '2',
						srcUrl:room2,
						name: '图2'
					},
				],
				phone:'15079248859',//电话
			}
		},
		onLoad() {
			
		},
		onReady() {
			this.$nextTick(() => {
				this.showCalendar = true
			})
			// TODO 模拟请求异步同步数据
			setTimeout(() => {
				console.log('date:'+getDate(new Date()).fullDate)
				console.log('startDate:'+getDate(new Date()).fullDate)
				console.log('endDate:'+getDate(new Date(),6).fullDate)
				this.info.date = getDate(new Date()).fullDate
				this.info.startDate = getDate(new Date()).fullDate
				this.info.endDate =  getDate(new Date(),6).fullDate
				this.info.selected = [{
						date: getDate(new Date(),-3).fullDate,
						info: '打卡'
					},
					{
						date: getDate(new Date(),-2).fullDate,
						info: '签到',
						data: {
							custom: '自定义信息',
							name: '自定义消息头'
						}
					},
					{
						date: getDate(new Date(),-1).fullDate,
						info: '已打卡'
					}
				]
			}, 2000)
		},
		methods: {
			// 跳转到入住须知
			navigateToXuzhi(){
				uni.navigateTo({
				  url: "../ruzhuxuzhi/ruzhuxuzhi",
				});
			},
			// 跳转到公寓详情
			navigateToXiangqing(){
				uni.navigateTo({
				  url: "../gongyuxiangqing/gongyuxiangqing",
				});
			},
			// 订房间 
			navigateToOrderRoom() {
				uni.navigateTo({
				  url: "../order_room/order_room",
				});
			},
			//办理入住跳转
			navigateToDairuzhu(){
				uni.navigateTo({
					url: "../my_orderlist/my_orderlist?Inv=2",
				})
			},
			//办理退房
			navigateToTuifang(){
				uni.navigateTo({
					url:"../my_orderlist/my_orderlist?Inv=3"
				})
			},
			//户型详情弹窗
			inputDialogToggle() {
				this.$refs.popup.open()
			},
			popupClose() {
				this.$refs.popup.close()
			},
			//办理续住弹窗
			navigateToXuzhu(){
				this.$refs.popup_xuzhu.open()
			},
			popupXuzhuClose() {
				this.$refs.popup_xuzhu.close()
			},
			// 日期选择器弹窗
			openCalendar() {
				this.$refs.calendar.open()
			},
			close(){
				console.log('弹窗关闭');
			},
			confirm(e) {
				console.log('confirm 返回:', e)
				if(e.range.data.length<2){
					uni.showToast({
						icon:'none',
						title:'请选择时间范围'
					})
					return
				}
			},
			change(e) {
				console.log('1change 返回:', e)
				// 模拟动态打卡
				if (this.info.selected.length > 5) return
				this.info.selected.push({
					date: e.fulldate,
					info: '打卡'
				})
			},
			// 续住里日期选择器弹窗
			openXuCalendar() {
				this.$refs.calendar_xu.open()
			},
			closeXu(){
				console.log('弹窗关闭');
			},
			confirmXu(e) {
				console.log('confirm 返回:', e)
			},
			//拨打电话
			telphone(phone){
				uni.makePhoneCall({ 
					phoneNumber: phone ,
				}) // 传参带入号码即可
			},
			//地图导航
			mapDaohang(){
				uni.getLocation({
				    type: 'wgs84',
				    success: function (res) {
				        console.log('当前位置的经度：' + res.longitude);
				        console.log('当前位置的纬度：' + res.latitude);
				        let longitude=res.longitude
				         let latitude=res.latitude
				         let name=res.name//
				          let address=res.address//地址
				         wx.openLocation({
								latitude,
								longitude,
								name,
								address,
								scale:18//缩放比例
							})
				    }
				});
			}
		}
	}
</script>

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