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>
			<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">
		    <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">
		    <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">
				<text>请先订房</text>
			</view>
		</uni-popup>
		<!-- 第三层订房 -->
		<view class="room-list">
			<!-- 选择住房日期 -->
			<view class="select-time" @click="openCalendar">
				<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>
			<uni-popup ref="popup_picker" :mask-click="true">
				<view class=popup_bg_picker>
					<!-- <text class="popup_title">取消</text>
					<text class="popup_error" style="margin-left: 272px;" @click="popup_pickerClose">确定</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>
			</uni-popup>
			<!-- 房型列表 -->
			<view class="room-kuang">
				<view class="room-xinxi" v-for="(item,index) in roomType" :key="index">
					<image class="room-image" :src="item.masterImage" @click="inputDialogToggle(item.id)"></image>
					<view class="room-name">{{item.typeName}}</view>
					<view class="room-mark">{{item.typeShortDesc}}</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.usualPrice}}</strike></view>
					<view class="room-price">¥{{item.discountPrice}}</view>
					<view class="room-button" :class="{'room-button2': item.enableNum == 0}">
						<text v-if="item.enableNum==0">已满</text>
						<text v-else @click="navigateToOrderRoom(item.enableNum,item.id,item.typeName)">订</text>
					</view>
					<view class="room-line"  v-if="index<(roomType.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" class="swiper-img"></image>
						</view>
					</swiper-item>
				</swiper>
				<text class="popup_title2">便利设施</text>
				<view class="popup_txt">{{typeText}}</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>
			
	</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 AMap from "../../lib/qqmap-wx-jssdk.js"
	export default {
		data() {
			return {
				showCalendar: false,
				info: {
					lunar: true,
					range: true,
					insert: true,
					selected: [],
					startDate:'',
					date:'',
					endDate:''
				},
				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:'0791-82293574',//电话
				latitude: '', // 默认当前纬度
				longitude:'',
				scale: 12, // 默认16
				markers: [],
				markerHeight: 30,
				xuzhu_type:[],// 办理续住判断条件
				xuzhu_panduan:[]// 办理续住判断条件赋值
			}
		},
		onLoad() {
			this.startDate = getDate(new Date()).fullDate2
			this.endDate =  getDate(new Date(),1).fullDate2
			this.getRoomType()
		},
		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('startWeek:'+getDate(new Date()).eWeek)
				this.info.date = getDate(new Date()).fullDate
				this.info.startDate = getDate(new Date()).fullDate
				this.info.endDate =  getDate(new Date(),6).fullDate
				this.infoXu.date = getDate(new Date()).fullDate
				this.infoXu.startDate = getDate(new Date()).fullDate
				this.infoXu.endDate =  getDate(new Date(),6).fullDate
				this.startTime = getDate(new Date()).fullTime
				this.endTime = getDate(new Date(),1).fullTime
				this.startWeek = getDate(new Date()).sWeek
				this.endWeek = getDate(new Date(),1).eWeek
			}, 1)
			
			//   wx请求获取位置权限
			this.getAuthorize()
				.then(() => {
					//   同意后获取
					this.getLocationInfo();
				})
				.catch(() => {
					const that = this;
					uni.getLocation({
						type: "gcj02",
						success: function(res) {
							// 暂时
							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: {
			
			// 房型接口
			getRoomType() {
			  let _self = this
			  _self.roomType = []
			  this.$axios.get("/ihotel/roomType/list?startDate="+this.startDate.substring(0,10)+"&endDate="+this.endDate.substring(0,10)).then(res => {
				res = res.data
				if (res.success) {
					// console.log(res)
				  res.data.forEach(data => {
					if (data.flag !== '-1') {
					  _self.roomType.push(data)
					}
				  })
				} else {
				  console.log('获取房型失败')
				}
			  });
			},
			// 房型详情接口
			getRoomTypeInfo(id) {
			  let _self = this
			  _self.typeText=''
			  _self.img=[]
			  this.$axios.get(`/ihotel/roomType/info/${id}`).then(res => {
				res = res.data
				if (res.success) {
					// console.log(res)
					_self.typeText=res.data.typeDesc
					_self.img=res.data.typeImage.split(',')
					// console.log(_self.img)
				} else {
				  console.log('获取房型详情失败')
				}
			  });
			},
			// 订单列表
			getOrderPage() {
			  let _self = this
			  _self.xuzhu_type=[]
			  this.$axios.get("/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)
					  // console.log(_self.xuzhu_type)
					}
				  })
				} else {
				  console.log('获取订单列表失败')
				}
			  });
			},
			
			// 跳转到入住须知
			navigateToXuzhi(){
				uni.navigateTo({
				  url: "../ruzhuxuzhi/ruzhuxuzhi",
				});
			},
			// 跳转到公寓详情
			navigateToXiangqing(){
				uni.navigateTo({
				  url: "../gongyuxiangqing/gongyuxiangqing",
				});
			},
			// 订房间 
			navigateToOrderRoom(enableNum,id,typeName) {
				let _self = this
				_self.roomType = []
				this.$axios.get("/ihotel/hotelOrder/user/order/confirm?startTime="+this.startDate.substring(0,10)+"&endTime="+this.endDate.substring(0,10)+'&roomTypeId='+id).then(res => {
					res = res.data
					if (res.success) {
						// console.log(res)
					  this.payMount=res.data.totalAmount
					  this.freeRoom=res.data.freeNum
					  this.ruzhu_num=res.data.nums
					  if (enableNum>=1){
							uni.navigateTo({
							  url: "../order_room/order_room?roomTypeId="+id +"&enableStartTime="+this.startDate+"&enableEndTime="+this.endDate+"&startTime="+this.startTime+"&endTime="+this.endTime+"&typeName="+typeName+"&payMount="+this.payMount+"&freeRoom="+this.freeRoom+'&ruzhu_num='+this.ruzhu_num,
							});
						}
						this.getRoomType()
					} else {
					  alert(res.message)
					}
				});
				
				
			},
			//办理入住跳转
			navigateToDairuzhu(){
				uni.navigateTo({
					url: "../my_orderlist/my_orderlist?Inv=2",
				})
			},
			//办理退房
			navigateToTuifang(){
				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)
							}
						})
					}
					if(this.xuzhu_panduan.length>1) {
						uni.navigateTo({
							url:"../my_orderlist/my_orderlist?Inv=3"
						})
					}else if(this.xuzhu_panduan.length<1) {
						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:"../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()
			},
			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!=''){
					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 +' 14:00:00'
				this.endDate =  e.range.after +' 12:00:00'
				this.ruzhu_num=parseInt(((new Date(e.range.after).getTime())-(new Date(e.range.before).getTime()))/1000/60/60/24)
				if(this.endDate !=' 12:00:00') {
					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 ,
				}) // 传参带入号码即可
			},
			
			//   初次位置授权
			getAuthorize() {
				return new Promise((resolve, reject) => {
					uni.authorize({
						scope: "scope.userLocation",
						success: () => {
							resolve(); // 允许授权
						},
						fail: () => {
							reject(); // 拒绝授权
						},
					});
				});
			},
			// 确认授权后，获取用户位置
			getLocationInfo() {
				const that = this;
				uni.getLocation({
					type: "gcj02",
					success: function(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));
							}
						}
						console.log("纬度", lat);
						that.distance = that.getMapDistance(lat,long,'28.788671','115.387261');
						console.log(that.distance)
						that.markers = [{
							id: "",
							latitude: res.latitude,
							longitude: res.longitude,
							iconPath: "../../static/img/phone.png",
							width: that.markerHeight, //宽
							height: that.markerHeight, //高
						}, ];
					},
				});
			},
			// 拒绝授权后，弹框提示是否手动打开位置授权
			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) {
				// console.log(this.Rad(lat1))
				// console.log(this.Rad(lng1))
				// console.log(this.Rad(lat2))
				// console.log(this.Rad(lng2))
				// console.log(this.Rad(28.678651))
				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>