ihotel-h5/pages/index/index.vue

<template>
	<view class="content">
		<!-- 背景图 -->
		<view class="index_bg">
			<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
			  <swiper-item v-for="(item,index) in apartList.coverPicture" :key="index">
				<image class="welcome_img" :src="item.url"></image>
				<!-- <view class="swiper-item">1</view> -->
			  </swiper-item>
			</swiper>
			<!-- <view class="welcome" v-for="(item,index) in apartList.coverPicture" :key="index">
				<image class="welcome_img" :src="item.url"></image>
			</view> -->
		</view>
		<!-- 第一层公寓名称卡片 -->
		<view class="uni-ka" style="margin-top: -40px;margin-bottom:0px;">
			<text class="uni-title">{{apartList.name}}（南昌交通学院）</text>
			<text class="uni-sub-title">2021年装修 | 智能门锁 | 房间wifi | 免费停车</text>
			<text class="uni-extra" @click="navigateToXiangqing">设施/详情＞</text>
			<text class="uni-body">江西省宜春市靖安县墨轩湖大道1号</text>
			<image class="uni-phone" @click="telphone(phone)" src="../../static/index/index_phone.svg"></image>
			<a href="https://uri.amap.com/marker?position=115.387261,28.788671&name=南昌交通学院智慧公寓">
				<image class="uni-map" @click="mapDaohang('115.387261','28.788671')" src="../../static/index/index_map.svg"></image>
			</a>
			<!-- <br><text class="uni-body2">距离我{{distance}}km</text> -->
		</view>
		<!-- 第二层工具 -->
		<!-- <view class="item-list">
		  <view class="item-list-one" @click="navigateToXuzhi">
		    <image src="../../static/index/xuzhi.png" class="img-btn" height="100%" width="100%"></image>
			<text class="list-txt">入住须知</text>
		  </view>
		  <view class="item-list-one" @click="navigateToDairuzhu('warn')">
		    <image src="../../static/index/ruzhu.png" 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('warn')">
		    <image src="../../static/index/tuifang.png" class="img-btn"></image>
		    <text class="list-txt">办理退房</text>
		  </view>
		</view> -->
		<!-- 退房失败时弹框 -->
		<!-- <uni-popup ref="popup_tui" type="center" width="300rpx" height="300rpx" background-color="#fff">
			<view class="kuang_txt_tui">
				<text>请先订房</text>
			</view>
		</uni-popup> -->
		<uni-popup ref="popup_tui" type="dialog">
			<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="确定" content="请先订房!" @confirm="dialogConfirm"
				@close="dialogClose"></uni-popup-dialog>
		</uni-popup>
		
		<!-- 切换全日房和钟点房 -->
		<view class="select-type" v-if="roomtype==1" @click="changeType">
			<view class="allday">全日房</view>
			<view class="hourday_no">钟点房</view> 
		</view>
		<view class="select-type" v-else-if="roomtype==2" @click="changeType">
			<view class="allday2">全日房</view>
			<view class="hourday_no2">钟点房</view>
		</view>
		<!-- 第三层订房 -->
		<view class="room-list">
			<!-- 选择住房日期 -->
			<!-- 全日房 -->
			<view class="select-time" @click="openCalendar" v-if="roomtype==1">
				<view class="select-time-one">
				  <text class="select-list">{{startWeek}}入住</text>
				  <text class="select-list-time">{{startTime}}</text>
				</view>
				<view class="select-center">
					<view class="select-line1"></view>
					<view class="select-circle">{{ruzhu_num}}晚</view>
					<view class="select-line2"></view>
				</view>
				<view class="select-time-one">
				  <text class="select-list">{{endWeek}}离店</text>
				  <text class="select-list-time">{{endTime}}</text>
				</view>
			</view>
			<!-- 钟点房 -->
			<view class="select-time" v-else>
				<view class="hourtime">
					<uni-datetime-picker type="date" v-model="hourruzhu" @change="changezhong" :start="mindate" :end="info.endDate">
						入住时间
						<text class="select-list-time" style="margin-left: 26rpx;">{{hourruzhu}}</text>
						<image class="hour_right" src="../../static/index/hour_right.png"></image>
					</uni-datetime-picker>
					<view class="hour_line"></view>
				</view>
				
			</view>
			<!-- 全日房选择时间 -->
			<uni-popup ref="popup_picker" :mask-click="true">
				<!-- <view class=popup_bg_picker> -->
					<!-- <text class="popup_title">取消</text> -->
					
				<uni-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"/>
				<view style="height: 60px; background-color: #fff;">
					<view class="riliQueren" @click="popup_pickerClose">确定{{ruzhu_num}}晚</view>
				</view>
				<!-- </view> -->
			</uni-popup>
			<!-- 房型列表-->
			<view class="room-kuang">
				<view class="room-xinxi" v-for="(item,index) in roomType" :key="index">
					<image class="room-image" :src="item.roomPicture" @click="inputDialogToggle(item.id)"></image>
					<view style="padding-top: 10px;display: grid;width: 47%;">
						<text class="room-name">
							{{item.roomName}}
							<view class="room-time3" v-if="item.roomType==2">{{item.roomLiveTime}}小时</view>
						</text>
						<view class="room-icon">
							<image :src="item2.iconPath" v-for="(item2,index2) in item.roomConfigurationPicture" :key="index2" style="width: 30rpx;height: 30rpx;margin-left: 10rpx;"></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>
							<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> -->
						</view>
						<view class="room-time2" v-if="item.roomType==2">
						  <text class="zhongtime" v-for="(item3,index3) in apartList.hourTime.split(',')" :key="index3">{{item3}}</text>
						</view>
						<view class="shengyu-jian">剩余{{item.surplusCount}}间</view>
					</view>
					<view style="display: flex;align-items: end;flex: 1;margin-right: 5px;" v-if="item.roomType==1">
						<view class="room-price">¥{{item.roomPrice}}</view>
						<view class="room-button" :class="{'room-button2': item.houseStatus == 2}">
							<text v-if="item.houseStatus==2">已满</text>
							<text v-else-if="item.houseStatus==1" @click="navigateToOrderRoom(item.houseStatus,item.id,item.roomName,item)">订</text>
						</view>
					</view>
					
					<view v-if="item.roomType==2" style="display: grid;align-items: end;flex: 1;margin-right: 5px;">
						<view class="room-price2">¥{{item.roomPrice}}</view>
						<view class="room-buttonZ" :class="{'room-button2Z': item.houseStatus == 2}">
							<text v-if="item.houseStatus==2">已满</text>
							<text v-else-if="item.houseStatus==1" @click="navigateToOrderRoom(item.houseStatus,item.id,item.roomName,item)">订</text>
						</view>
					</view>
					<view class="room-line"  v-if="index<(roomType.length) && index>0"></view>
				</view>
			</view>
			
		</view>
		<!-- 订房时弹框 -->
		<!-- <uni-popup ref="popup_order" type="center" width="300rpx" height="300rpx" background-color="#fff">
			<view class="kuang_txt">
				<text>{{order_txt}}</text>
			</view>
		</uni-popup> -->
		<uni-popup ref="popup_order" type="dialog">
			<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="确定" :content="order_txt" @confirm="dialogConfirm"
				@close="dialogClose"></uni-popup-dialog>
		</uni-popup>
		<!-- 房间样式弹窗页面 -->
		<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" class="swiper-img"></image>
						</view>
					</swiper-item>
				</swiper>
				<text class="popup_title2">便利设施</text>
				<view class="popup_txt"><view class="popup_txt_in">{{typeText}}</view></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>
				</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>
		<uni-popup ref="popup_xu" :mask-click="true">
			<uni-calendar :selected="infoXu.selected" class="uni-calendar--hook" :clear-date="true" :date="infoXu.date" :insert="infoXu.insert" :lunar="infoXu.lunar" :startDate="infoXu.startDate"
			:endDate="infoXu.endDate" :range="infoXu.range" @change="changeXu"/>
		</uni-popup>
		<!-- 无可续住订单时办理续住弹窗页面 -->
		<uni-popup ref="popup_xuzhu_no" type="dialog">
			<uni-popup-dialog cancelText="关闭" confirmText="确定" content="请先订房"
				@close="dialogClose"></uni-popup-dialog>
		</uni-popup>
		
		<!-- 预订时判断是否有入住资格弹框 -->
		<uni-popup ref="popupRuzhu" :mask-click="false">
		  <view class="popup-content">
			<view class="popup-zige">免费入住资格筛选</view>
			<!-- 多选框组 -->
			 <!--" -->
			<radio-group v-model="selectedValue" @change="radioChange">
			  <radio v-for="(item, index) in options" :key="index" :value="item.name" :disabled="item.count == 0">
				{{ item.name }}
				<text style="margin-left: 30px;">{{item.count}}间</text>
			  </radio>
			</radio-group>
			<!-- 确认和取消按钮 -->
			<button @click="confirmSelection" class="xuanzesuccess">选择完成</button>
			<!-- <button class="xuanzesuccess2" v-else>选择完成</button> -->
			<!-- <button @click="quxiaoyuding" class="xuanzesuccess">取消</button> -->
			<view style="height: 20px;"></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天后的日期

		var a = new Array("日", "一", "二", "三", "四", "五", "六","日");  
		var week = new Date().getDay();    
		var week2 = new Date().getDay()+1;    
		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
		const h = dd.getHours() < 10 ? '0' + dd.getHours() : dd.getHours()
		const f = dd.getMinutes() < 10 ? '0' + dd.getMinutes() : dd.getMinutes()
		const s = dd.getSeconds() < 10 ? '0' + dd.getSeconds() : dd.getSeconds()
		return {
			fullDate: y + '-' + m + '-' + d,
			fullDate2: y + '-' + m + '-' + d+' '+h+':'+f+':'+s,
			fullTime: m + '月' + d + '日',
			year: y,
			month: m,
			date: d,
			day: dd.getDay(),
			sWeek:"周"+ a[week],
			eWeek:"周"+ a[week2]
		}
	}
	import {
		getroomtype,
		getroomtypeinfo,
		getorderpage,
		apartSet,
		getpayOpenId,
		ifyuding
	} from '../../utils/api_hotel.js'
	// 导入图片
	import AMap from "../../lib/qqmap-wx-jssdk.js"
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				showCalendar: false,
				info: {
					lunar: true,
					range: true,
					insert: true,
					selected: [],
					startDate:'',
					date:'',
					endDate:''
				},
				msgType: 'warn',
				distance: 0, //"距离"
				startTime:'',//默认到店日期
				endTime:'',//默认离店日期
				startDate:'',//默认到店日期接口数据
				endDate:'',//默认离店日期接口数据
				startWeek:'',// 默认入店日
				endWeek:'',// 默认离店
				payMount:0,//房间价格
				freeRoom:0,//房间剩余
				ruzhu_num:1,//入住夜晚数
				//续住里选择器
				infoXu: {
					lunar: true,
					range: true,
					insert: true,
					selected: [],
					startDate:'',
					date:'',
					endDate:''
				},
				roomType:[
				],
				typeText:'',//房型详细描述
				indicatorDots: true,//滚动图片提示条默认出现
				img:[],//轮播图里图片
				phone:'',//电话
				latitude: '', // 默认当前纬度
				longitude:'',
				scale: 12, // 默认16
				markers: [],
				markerHeight: 30,
				xuzhu_type:[],// 办理续住判断条件
				xuzhu_panduan:[],// 办理续住判断条件赋值
				tui_type:[],// 办理退房判断条件
				tui_panduan:[],// 办理退房判断条件赋值
				dai_type:[],// 办理入住判断条件
				dai_panduan:[],// 办理入住判断条件赋值
				order_txt:'',//订房事故时信息
				roomtype:1,//区分房型，1全日房 ;2钟点房
				hourruzhu:'',//钟点房入住时间
				mindate:new Date().toISOString().slice(0, 10),
				page:1,
				size:10,
				totalCount: 0,
				apartList:{},
				hourTime:'',//钟点房营业时间
				
				selectedValue: '', // 选中的值
				sourceId:'',
				options: [],
				xuanId:'',
				xuanroomName:'',
				itenxuan:{},//选中的数据
			}
		},
		onShow() {
			// this.getLocationInfo()
			this.getAllset()
		},
		onLoad() {
			this.getAllset()
			this.handleUrlCode()
		},
		
		mounted() {
			
		},
		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(),8).fullDate
				this.infoXu.date = getDate(new Date()).fullDate
				this.infoXu.startDate = getDate(new Date()).fullDate
				this.infoXu.endDate =  getDate(new Date(),8).fullDate
				this.startTime = getDate(new Date()).fullTime
				this.endTime = getDate(new Date(),1).fullTime
				this.hourruzhu= getDate(new Date()).fullDate
				this.startWeek = getDate(new Date()).sWeek
				this.endWeek = getDate(new Date(),1).eWeek
			}, 1)
			// this.getLocationInfo()
			//   wx请求获取位置权限
			this.getAuthorize()
				.then(() => {
					  同意后获取
					// this.getLocationInfo();
				})
				.catch(() => {
					// const that = this;
					// uni.getLocation({
					// 	type: "gcj02",
					// 	success: function(res) {
					// 		console.log(res,'经纬度22')
					// 		alert(res.latitude)
					// 		// 暂时
					// 		that.longitude = res.longitude;
					// 		that.latitude = res.latitude;
					// 		var long = 0;
					// 		var lat = 0;
					// 		//小数点保留六位  经度
					// 		if (that.longitude.toString().indexOf('.') > 0) {
					// 			const longlatsplit = that.longitude.toString().split('.');
					// 			if (longlatsplit.length >= 2) {
					// 				long = parseFloat(longlatsplit[0] === "" ? 0 : longlatsplit[0]) + parseFloat("." + longlatsplit[1].slice(0,6));
					// 			}
					// 		}
					// 		if (that.latitude.toString().indexOf('.') > 0) {
					// 			const longlatsplit1 = that.latitude.toString().split('.');
					// 			if (longlatsplit1.length >= 2) {
					// 				lat = parseFloat(longlatsplit1[0] === "" ? 0 : longlatsplit1[0]) + parseFloat("." + longlatsplit1[1].slice(0,6));
					// 			}
					// 		}
					// 		that.distance = that.getMapDistance(lat,long,'28.788671','115.387261');
					// 		that.markers = [{
					// 			id: "",
					// 			latitude: res.latitude,
					// 			longitude: res.longitude,
					// 			iconPath: "../../static/img/phone.png",
					// 			width: that.markerHeight, //宽
					// 			height: that.markerHeight, //高
					// 		}, ];
					// 	},
					// });
					//   不同意给出弹框，再次确认
					// this.openConfirm()
					// 	.then(() => {
					// 		this.getLocationInfo();
					// 	})
					// 	.catch(() => {
					// 		this.rejectGetLocation();
					// 	});
				});
		},
			
		methods: {
			// 截取 url中的code方法
			handleUrlCode() {
				var url = location.href; //获取打开的公众号的路径
				// alert(url)
				var theRequest = new Object();
				if (url.indexOf('?') != -1) {
					var str = url.substr(url.indexOf('?') + 1);
					var strs = str.split('&');
					for (var i = 0; i < strs.length; i++) {
						var items = strs[i].split('=');
						if(strs[i].split('=')[0]=='code'){
							var code=strs[i].split('=')[1]
							localStorage.setItem('code',code)
						}
						theRequest[strs[i].split('=')[0]] = strs[i].split('=')[1];
						theRequest[i] = strs[i].split('=')[1];
					}
				// alert(code+'p'+localStorage.getItem('code'))
				
				}
			},
			//获取支付openId
			getOpenId(){
				let _self = this
				// alert('p'+localStorage.getItem('code'))
				var data='?wxcode='+localStorage.getItem('code')
				// {
				// 	'wxcode':'061NSw100t8LAS1pXH0004UsUs1NSw1c'//
				// }
				getpayOpenId(data).then((res) => {
					if (res.success) {
						localStorage.setItem('openId2',res.message)
						// alert('openid时'+localStorage.getItem('openId2'))
					} else if(res.code=='500'){
						// uni.showModal({
						// 	content:res.message
						// })
					}
				}).catch((err) => {
					// uni.showModal({
					// 	content:err.message
					// })
				});
			},
			//公寓整体配置
			getAllset(){
				let _self = this
				_self.roomType = []
				apartSet().then((res) => {
					if (res.success) {
						this.apartList=res.data
						this.phone=this.apartList.phoneNumbr
						localStorage.setItem('liveTime',this.apartList.liveTime)
						localStorage.setItem('leaveTime',this.apartList.leaveTime)
						this.startDate = getDate(new Date()).fullDate+" "+this.apartList.liveTime
						this.endDate =  getDate(new Date(),1).fullDate+" "+this.apartList.leaveTime
						
						this.startTime = getDate(new Date()).fullTime
						this.endTime = getDate(new Date(),1).fullTime
						this.ruzhu_num=1
						this.startWeek = getDate(new Date()).sWeek
						this.endWeek = getDate(new Date(),1).eWeek
						this.hourruzhu= getDate(new Date()).fullDate
						
						this.hourTime=this.apartList.hourTime
						// alert('8')
						this.selectedValue=''
						this.sourceId=''
						this.getRoomType()
						return;
					} else {
						uni.showModal({
							content:"没有符合条件的数据！"
						})
					}
				}).catch((err) => {
					 //  uni.showModal({
						// content:err.message
					 //  })
				});
			},
			onReachBottom: function() {
				console.log('当前长度',this.roomType.length)
				
				if (this.roomType.length < this.totalCount) {
					wx.showLoading({
					   title: '加载中...',
					 })
					this.page = this.page + 1;
					this.getRoomType()
				} else {
				}
			},
			onPullDownRefresh: function() {
				this.page = 1;
				this.getRoomType();
			},
			//切换房型
			changeType(){
				if(this.roomtype==1){
					this.roomtype=2
					this.page = 1;
					this.startDate = getDate(new Date()).fullDate+" "+getDate(new Date()).fullDate2.substring(11,19)
					this.endDate =  getDate(new Date()).fullDate+" "+"23:59:00"
					this.hourruzhu = getDate(new Date()).fullDate.substring(5,7)+'月'+getDate(new Date()).fullDate.substring(8,10)+'日'
					this.getRoomType();
				}else if(this.roomtype==2){
					this.roomtype=1
					this.page = 1;
					this.startDate = getDate(new Date()).fullDate+" "+this.apartList.liveTime
					this.endDate =  getDate(new Date(),1).fullDate+" "+this.apartList.leaveTime
					this.getRoomType();
				}
				this.startTime = getDate(new Date()).fullTime
				this.endTime = getDate(new Date(),1).fullTime
				this.ruzhu_num=1
				this.startWeek = getDate(new Date()).sWeek
				this.endWeek = getDate(new Date(),1).eWeek
				this.hourruzhu= getDate(new Date()).fullDate
			},
			//钟点房选择日期
			changezhong(e){
				console.log(e,getDate(new Date()).fullDate,getDate(new Date()).fullDate<e,'l')
				this.hourruzhu=e
				if(getDate(new Date()).fullDate<e){
					this.startDate = e+" "+"00:00:00"
					this.endDate = e+" "+"23:59:00"
				}else{
					this.startDate = e+" "+getDate(new Date()).fullDate2.substring(11,19)
					this.endDate = e+" "+"23:59:00"
				}
				this.hourruzhu = e.substring(5,7)+'月'+e.substring(8,10)+'日'
				this.getRoomType();
			},
			// 房型接口
			getRoomType() {
			  let _self = this
			  var data="?page="+_self.page+"&size="+_self.size+"&type="+_self.roomtype+"&startTime="+_self.startDate+"&endTime="+_self.endDate
			  getroomtype(data).then((res) => {
			  	if (res.success) {
					this.totalCount = res.data.total
					// res.data.records.forEach(data => {
					// 	// if (data.houseStatus == '1') {//房间可订
					// 	  _self.roomType.push(data)
					// 	// }
					//   })
			  		if (this.page == 1) {
			  			_self.roomType = res.data.records
			  		} else {
			  			_self.roomType = [..._self.roomType, ...res.data.records]
			  		}
			  		uni.stopPullDownRefresh();
			  		uni.hideLoading()
			  	} else {
					uni.showModal({
						content:"没有符合条件的数据！"
					})
			  		// this.$message.warning('没有符合条件的数据！')
			  	}
			  }).catch((err) => {
				  // uni.showModal({
				  // 	content:err.message
				  // })
			  	// this.$message.error(err.message)
			  });
			},
			// 房型详情接口
			getRoomTypeInfo(id) {
			  let _self = this
			  _self.typeText=''
			  _self.img=[]
			  var data="?houseId="+id
			  getroomtypeinfo(data).then((res) => {
			  	if (res.success) {
					_self.typeText=res.data.introductory
					_self.img=res.data.housePicture.split(',')
			  		return;
			  	} else {
			  		this.$message.warning('没有符合条件的数据！')
			  	}
			  }).catch((err) => {
			  	this.$message.error(err.message)
			  });
			},
			// 订单列表
			getOrderPage() {
			  let _self = this
			  _self.xuzhu_type=[]
			  _self.tui_type=[]
			  _self.dai_type=[]
			  var data='?curPage=1&pageSize=100'
			  getorderpage(data).then((res) => {
			  	if (res.success) {
					console.log(res)
			  		res.data.list.forEach(data => {
						if (data.flag !== '-1') {
						  _self.xuzhu_type.push(data.orderStatu)
						  _self.tui_type.push(data.orderStatu)
						  _self.dai_type.push(data.orderStatu)
						  // console.log(_self.xuzhu_type)
						}
			  		})
			  		return;
			  	} else {
			  		this.$message.warning('没有符合条件的数据！')
			  	}
			  }).catch((err) => {
			  	this.$message.error(err.message)
			  });
			//   this.$axios.get("/hotel/ihotel-api/ihotel/hotelOrder/user/order/page?curPage=1&pageSize=100",
			//   {
			// 	  headers:{
			// 		  'user_token':localStorage.getItem('token')
			// 	  }
			//   }).then(res => {
			// 	res = res.data
			// 	if (res.success) {
			// 	  res.data.list.forEach(data => {
			// 		if (data.flag !== '-1') {
			// 		  _self.xuzhu_type.push(data.orderStatu)
			// 		  _self.tui_type.push(data.orderStatu)
			// 		  _self.dai_type.push(data.orderStatu)
			// 		  // console.log(_self.xuzhu_type)
			// 		}
			// 	  })
			// 	} else {
			// 	  console.log('获取订单列表失败')
			// 	}
			//   });
			},
			
			// 跳转到入住须知
			navigateToXuzhi(){
				uni.navigateTo({
				  url: "/pages/ruzhuxuzhi/ruzhuxuzhi",
				});
			},
			// 跳转到公寓详情
			navigateToXiangqing(){
				uni.navigateTo({
				  url: "/pages/gongyuxiangqing/gongyuxiangqing",
				});
			},
			// 订房间 
			navigateToOrderRoom(houseStatus,id,roomName,item) {
				this.xuanId=id
				this.xuanroomName=roomName
				this.itenxuan=item
				this.ifRuzhu()
				// let _self = this
				// _self.roomType = []
				// if (houseStatus==1){
				// 	uni.navigateTo({
				// 	  url: "/pages/order_room/order_room?roomTypeId="+id +"&enableStartTime="+this.startDate+"&enableEndTime="+this.endDate+"&startTime="+this.startTime+"&endTime="+this.endTime+"&typeName="+roomName+"&ruzhu_num="+this.ruzhu_num+"&roomArea="
				// 	  +item.roomArea+"&roomType="+item.roomType+"&roomConfiguration="+item.roomConfiguration+"&roomPrice="+item.roomPrice+'&surplusCount='+item.surplusCount+'&zhongTime='+this.apartList.hourTime+'&zhongshi='+item.roomLiveTime+'&source='+this.selectedValue,
				// 	});
				// }
				// this.getRoomType()
			},
			//订房前判断是否有入住资格
			ifRuzhu(){
				// alert('订房')
				this.options=[]
				let _self = this
				var data='?userId='+localStorage.getItem('usersId')+
				'&liveTime='+_self.startDate+'&leaveTime='+_self.endDate
				ifyuding(data).then((res) => {
					if (res.success) {
						_self.options=res.data
						console.log(_self.options,'iii')
						if(_self.options.length>0){
							_self.$refs.popupRuzhu.open();
						}else{
							_self.selectedValue=''
							_self.sourceId=''
							let temporaryObj = {
								roomTypeId:_self.xuanId,
								enableStartTime:_self.startDate,
								enableEndTime:_self.endDate,
								startTime:_self.startTime,
								endTime:_self.endTime,
								typeName:_self.xuanroomName,
								ruzhu_num:_self.ruzhu_num,
								roomArea:_self.itenxuan.roomArea,
								roomType:_self.itenxuan.roomType,
								roomConfiguration:_self.itenxuan.roomConfiguration,
								roomPrice:_self.itenxuan.roomPrice,
								surplusCount:_self.itenxuan.surplusCount,
								zhongTime:_self.apartList.hourTime,
								zhongshi:_self.itenxuan.roomLiveTime,
								source:_self.selectedValue,
								sourceId:_self.sourceId
							}
							//传参对象，使用encodeURIComponent编码
							let str = JSON.stringify(temporaryObj)
							//注意这里——————————————————————
							str = str.replace(/%/g, '%25')
							//这里———————————————————————————
							let query = encodeURIComponent(str)
							uni.navigateTo({
								url: "/pages/order_room/order_room?data="+query
							  // url: "/pages/order_room/order_room?roomTypeId="+_self.xuanId +"&enableStartTime="+_self.startDate+"&enableEndTime="+_self.endDate+"&startTime="+_self.startTime+"&endTime="+_self.endTime+"&typeName="+_self.xuanroomName+"&ruzhu_num="+_self.ruzhu_num+"&roomArea="
							  // +_self.itenxuan.roomArea+"&roomType="+_self.itenxuan.roomType+"&roomConfiguration="+_self.itenxuan.roomConfiguration+"&roomPrice="+_self.itenxuan.roomPrice+'&surplusCount='+_self.itenxuan.surplusCount+'&zhongTime='+_self.apartList.hourTime+'&zhongshi='+_self.itenxuan.roomLiveTime
							  // +'&source='+_self.selectedValue+'&sourceId='+_self.sourceId,
							});
						}
					} else if(res.code=='500'){
						uni.showModal({
						  title: '提示',
						  content: res.message,
						  success: function (res) {
						    if (res.confirm) {
								_self.selectedValue=''
								_self.sourceId=''
								let temporaryObj = {
									roomTypeId:_self.xuanId,
									enableStartTime:_self.startDate,
									enableEndTime:_self.endDate,
									startTime:_self.startTime,
									endTime:_self.endTime,
									typeName:_self.xuanroomName,
									ruzhu_num:_self.ruzhu_num,
									roomArea:_self.itenxuan.roomArea,
									roomType:_self.itenxuan.roomType,
									roomConfiguration:_self.itenxuan.roomConfiguration,
									roomPrice:_self.itenxuan.roomPrice,
									surplusCount:_self.itenxuan.surplusCount,
									zhongTime:_self.apartList.hourTime,
									zhongshi:_self.itenxuan.roomLiveTime,
									source:_self.selectedValue,
									sourceId:_self.sourceId
								}
								//传参对象，使用encodeURIComponent编码
								let str = JSON.stringify(temporaryObj)
								//注意这里——————————————————————
								str = str.replace(/%/g, '%25')
								//这里———————————————————————————
								let query = encodeURIComponent(str)
								uni.navigateTo({
									url: "/pages/order_room/order_room?data="+query
								});
						    } else if (res.cancel) {
								_self.selectedValue=''
								_self.sourceId=''
						    }
						  }
						});
					}
				}).catch((err) => {
					// alert(err)
					uni.showModal({
						content:err
					})
				});
			},
			radioChange(e){
				// console.log(e,'ll')
				for (let i = 0; i < this.options.length; i++) {
					if (this.options[i].name === e.detail.value) {
						this.selectedValue=this.options[i].source
						this.sourceId=this.options[i].sourceId
						break;
					}
				}
			},
			//订房选中流程
			  confirmSelection() {
				console.log('选中的值:', this.selectedValue);
				this.$refs.popupRuzhu.close()
				// alert('跳转')
				let temporaryObj = {
					roomTypeId:this.xuanId,
					enableStartTime:this.startDate,
					enableEndTime:this.endDate,
					startTime:this.startTime,
					endTime:this.endTime,
					typeName:this.xuanroomName,
					ruzhu_num:this.ruzhu_num,
					roomArea:this.itenxuan.roomArea,
					roomType:this.itenxuan.roomType,
					roomConfiguration:this.itenxuan.roomConfiguration,
					roomPrice:this.itenxuan.roomPrice,
					surplusCount:this.itenxuan.surplusCount,
					zhongTime:this.apartList.hourTime,
					zhongshi:this.itenxuan.roomLiveTime,
					source:this.selectedValue,
					sourceId:this.sourceId
				}
				//传参对象，使用encodeURIComponent编码
				let str = JSON.stringify(temporaryObj)
				//注意这里——————————————————————
				str = str.replace(/%/g, '%25')
				//这里———————————————————————————
				let query = encodeURIComponent(str)
				uni.navigateTo({
					url: "/pages/order_room/order_room?data="+query,
				  // url: "/pages/order_room/order_room?roomTypeId="+this.xuanId +"&enableStartTime="+this.startDate+"&enableEndTime="+this.endDate+"&startTime="+this.startTime+"&endTime="+this.endTime+"&typeName="+this.xuanroomName+"&ruzhu_num="+this.ruzhu_num+"&roomArea="
				  // +this.itenxuan.roomArea+"&roomType="+this.itenxuan.roomType+"&roomConfiguration="+this.itenxuan.roomConfiguration+"&roomPrice="+this.itenxuan.roomPrice+'&surplusCount='+this.itenxuan.surplusCount+'&zhongTime='+this.apartList.hourTime+'&zhongshi='+this.itenxuan.roomLiveTime+'&source='+this.selectedValue+'&sourceId='+_self.sourceId,
				});
			  },
			//取消预订
			quxiaoyuding(){
				this.selectedValue=''
				this.sourceId=''
				this.$refs.popupRuzhu.close()
				let temporaryObj = {
					roomTypeId:this.xuanId,
					enableStartTime:this.startDate,
					enableEndTime:this.endDate,
					startTime:this.startTime,
					endTime:this.endTime,
					typeName:this.xuanroomName,
					ruzhu_num:this.ruzhu_num,
					roomArea:this.itenxuan.roomArea,
					roomType:this.itenxuan.roomType,
					roomConfiguration:this.itenxuan.roomConfiguration,
					roomPrice:this.itenxuan.roomPrice,
					surplusCount:this.itenxuan.surplusCount,
					zhongTime:this.apartList.hourTime,
					zhongshi:this.itenxuan.roomLiveTime,
					source:this.selectedValue,
					sourceId:this.sourceId
				}
				//传参对象，使用encodeURIComponent编码
				let str = JSON.stringify(temporaryObj)
				//注意这里——————————————————————
				str = str.replace(/%/g, '%25')
				//这里———————————————————————————
				let query = encodeURIComponent(str)
				uni.navigateTo({
					url: "/pages/order_room/order_room?data="+query
				});
			},
			//办理入住跳转
			navigateToDairuzhu(type){
				this.dai_panduan=[]
				setTimeout(() => {
					this.getOrderPage()
				},1)
				setTimeout(() => {
					for (let i=0;i<this.dai_type.length;i++){
						this.dai_type.forEach(val => {
							if(val[i]==2) {
								this.dai_panduan.push(val)
							}
						})
					}
					if(this.dai_panduan.length>=1) {
						uni.navigateTo({
							url:"/pages/my_orderlist/my_orderlist?Inv=2"
						})
					}else if(this.dai_panduan.length<1) {
						this.msgType = type
						this.order_txt='请先订房！'
						this.$refs.popup_order.open()
					}
				},150)
			},
			//办理退房
			navigateToTuifang(type){
				this.tui_panduan=[]
				setTimeout(() => {
					this.getOrderPage()
				},1)
				setTimeout(() => {
					for (let i=0;i<this.tui_type.length;i++){
						this.tui_type.forEach(val => {
							if(val[i]==3) {
								this.tui_panduan.push(val)
							}
						})
					}
					if(this.tui_panduan.length>=1) {
						uni.navigateTo({
							url:"/pages/my_orderlist/my_orderlist?Inv=3"
						})
					}else if(this.tui_panduan.length<1) {
						this.msgType = type
						this.$refs.popup_tui.open()
					}
				},150)
			},
			//户型详情弹窗
			inputDialogToggle(id) {
				this.$refs.popup.open()
				this.getRoomTypeInfo(id)
			},
			popupClose() {
				this.$refs.popup.close()
			},
			//办理续住弹窗
			navigateToXuzhu(){
				this.xuzhu_panduan=[]
				setTimeout(() => {
					this.getOrderPage()
				},1)
				setTimeout(() => {
					for (let i=0;i<this.xuzhu_type.length;i++){
						this.xuzhu_type.forEach(val => {
							if(val[i]==3) {
								this.xuzhu_panduan.push(val)
							}
						})
					}
					console.log(this.xuzhu_panduan)
					if(this.xuzhu_panduan.length>1) {
						uni.navigateTo({
							url:"/pages/my_orderlist/my_orderlist?Inv=3"
						})
					}else if(this.xuzhu_panduan.length==1) {
						this.$refs.popup_xuzhu.open()
					}else if(this.xuzhu_panduan.length==0) {
						this.$refs.popup_xuzhu_no.open()
					}
				},150)
			},
			popupXuzhuClose() {
				this.$refs.popup_xuzhu.close()
			},
			// 不可续住关闭弹窗
			dialogClose(){
				this.$refs.popup_xuzhu_no.close()
			},
			// 日期选择器弹窗开启
			openCalendar() {
				this.$refs.popup_picker.open()
			},
			// 关闭全日房日历
			popup_pickerClose(){
				this.$refs.popup_picker.close()
			},
			change(e) {
				this.info.selected=[
					{
						date: e.range.before,
						info: '到店'
					},
					{
						date: e.range.after,
						info: '离店'
					}
				]
				if(e.range.before!=''&&e.range.after=='') {
					this.startWeek='周'+e.lunar.ncWeek.substring(2,3)
				} else if(e.range.before!=''&&e.range.after!=''){
					if((new Date(e.range.after).getTime())<(new Date(e.range.before).getTime())) {
						this.order_txt='离店日期不能小于到店日期'
						this.$refs.popup_order.open()
						this.info.selected=[]
					}else if(parseInt(((new Date(e.range.after).getTime())-(new Date(e.range.before).getTime()))/1000/60/60/24)>2){
						this.order_txt='预订时间不能超过两晚'
						this.$refs.popup_order.open()
						this.info.selected=[]
					}else if(parseInt(((new Date(e.range.after).getTime())-(new Date(e.range.before).getTime()))/1000/60/60/24)==2){
						this.order_txt='您此次申请了两晚，请注意若只住一晚可能会导致流程管理次数失效。'
						this.$refs.popup_order.open()
						this.endWeek='周'+e.lunar.ncWeek.substring(2,3)
						this.startTime=e.range.before.substring(5,7)+'月'+e.range.before.substring(8,10)+'日'
						this.endTime=e.range.after.substring(5,7)+'月'+e.range.after.substring(8,10)+'日'
						this.startDate = e.range.before +' '+this.apartList.liveTime
						this.endDate =  e.range.after +' '+this.apartList.leaveTime
						this.ruzhu_num=parseInt(((new Date(e.range.after).getTime())-(new Date(e.range.before).getTime()))/1000/60/60/24)
						if(this.endDate !=this.apartList.leaveTime) {
							this.getRoomType()
						}
					}else{
						this.endWeek='周'+e.lunar.ncWeek.substring(2,3)
						this.startTime=e.range.before.substring(5,7)+'月'+e.range.before.substring(8,10)+'日'
						this.endTime=e.range.after.substring(5,7)+'月'+e.range.after.substring(8,10)+'日'
						this.startDate = e.range.before +' '+this.apartList.liveTime
						this.endDate =  e.range.after +' '+this.apartList.leaveTime
						this.ruzhu_num=parseInt(((new Date(e.range.after).getTime())-(new Date(e.range.before).getTime()))/1000/60/60/24)
						if(this.endDate !=this.apartList.leaveTime) {
							this.getRoomType()
						}
					}
				}
				
			},
			// 续住里日期选择器弹窗
			openXuCalendar() {
				this.$refs.popup_xu.open()
			},
			changeXu(e) {
				console.log('1change 返回:', e)
				// 模拟动态打卡
				if (this.infoXu.selected.length > 5) return
				this.infoXu.selected.push({
					date: e.range.before,
					info: '到店'
				})
				this.infoXu.selected.push({
					date: e.range.after,
					info: '离店'
				})
			},
			//拨打电话
			telphone(phone){
				uni.makePhoneCall({ 
					phoneNumber: phone ,
				}) // 传参带入号码即可
			},
			
			//   初次位置授权//uni-app不可用
			getAuthorize() {
				return new Promise((resolve, reject) => {
					uni.authorize({
						scope: "scope.userLocation",
						success: () => {
							resolve(); // 允许授权
						},
						fail: () => {
							reject(); // 拒绝授权
						},
					});
				});
			},
			// 确认授权后，获取用户位置
			getLocationInfo() {
				uni.showToast({
					title: '获取',
					icon:'none'
				});
				const that = this;
				uni.getLocation({
					type: "gcj02",//gcj02，wgs84
					// geocode: true,
					// highAccuracyExpireTime: 100,
					success: function(res) {
						alert('location',res)
						// 暂时
						that.longitude = res.longitude; //118.787575;
						that.latitude = res.latitude; //32.05024;
						console.log("获取当前的用户经度", that.longitude);
						console.log("获取当前的用户纬度", that.latitude);
						var long = 0;
						var lat = 0;
						//小数点保留六位  经度
						if (that.longitude.toString().indexOf('.') > 0) {
							const longlatsplit = that.longitude.toString().split('.');
							if (longlatsplit.length >= 2) {
								long = parseFloat(longlatsplit[0] === "" ? 0 : longlatsplit[0]) + parseFloat("." + longlatsplit[1].slice(0,6));
							}
						}
						if (that.latitude.toString().indexOf('.') > 0) {
							const longlatsplit1 = that.latitude.toString().split('.');
							if (longlatsplit1.length >= 2) {
								lat = parseFloat(longlatsplit1[0] === "" ? 0 : longlatsplit1[0]) + parseFloat("." + longlatsplit1[1].slice(0,6));
							}
						}
						that.distance = that.getMapDistance(lat,long,'28.788671','115.387261');
						// alert(that.distance)
						that.markers = [{
							id: "",
							latitude: res.latitude,
							longitude: res.longitude,
							iconPath: "../../static/img/phone.png",
							width: that.markerHeight, //宽
							height: that.markerHeight, //高
						}, ];
					},
					fail: function (err) {
						uni.showModal({
							content:'获取地址失败，将导致部分功能不可用'+JSON.stringify(err),
						})
						// uni.showToast({
						// 	title: '获取地址失败，将导致部分功能不可用'+JSON.stringify(err),
						// 	icon:'none'
						// });
					}
				});
			},
			// 天地图获取经纬度
			// 拒绝授权后，弹框提示是否手动打开位置授权
			openConfirm() {
				return new Promise((resolve, reject) => {
					uni.showModal({
						title: "请求授权当前位置",
						content: "我们需要获取地理位置信息，为您推荐路线",
						success: (res) => {
							// if (res.confirm) { 
							// 	uni.openSetting().then((res) => {
							// 		if (res[1].authSetting["scope.userLocation"] === true) {
							// 			resolve(); // 打开地图权限设置
							// 		} else {
							// 			reject();
							// 			console.log('reject')
							// 		}
							// 	});
							// } else if (res.cancel) {
							// 	reject();
							// }
						},
					});
				});
			},
			
			// 彻底拒绝位置获取
			rejectGetLocation() {
				uni.showToast({
					title: "你拒绝了授权，无法获得周边信息",
					icon: "none",
					duration: 2000,
				});
			},
			//打开地图导航
			mapDaohang(lon,lat){
			},
			
			//进行经纬度转换为距离的计算
			Rad(d) {
				return d * Math.PI / 180.0; //经纬度转换成三角函数中度分表形式。
			},
			/*
			 计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度
			 默认单位km
			*/
			getMapDistance(lat1, lng1, lat2, lng2) {
				var radLat1 = this.Rad(lat1);
				var radLat2 = this.Rad(lat2);
				var a = radLat1 - radLat2;
				var b = this.Rad(lng1) - this.Rad(lng2);
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
					Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
				s = s * 6378.137; // EARTH_RADIUS;
				s = Math.round(s * 10000) / 10000; //输出为公里
				s=s.toFixed(2);
				return s;
			},
		}
	}
</script>

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