hotelorder_student_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">江西省宜春市靖安县墨轩湖大道1号</text>
			<image class="uni-phone" @click="telphone()" 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="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 v-if="item.h_type.indexOf('标准') !== -1" class="room-image" src="../../static/index/std.jpg" @click="inputDialogToggle(item.id)"></image> -->
					<image v-if="item.h_type.indexOf('标准') !== -1" class="room-image" src="../../static/index/std.jpg" @click="inputDialogToggle(item.h_type)">
					</image>
					<image v-else-if="item.h_type.indexOf('高级') !== -1" class="room-image" src="../../static/index/adv.jpg"
						@click="inputDialogToggle(item.h_type)"></image>
					<image v-else="item.h_type.indexOf('豪华') !== -1" class="room-image" src="../../static/index/lux.jpg"
						@click="inputDialogToggle(item.h_type)"></image>
					<view class="room-name">{{ item.h_type }}</view>
					<view class="room-mark">描述：配置1.5米双人床一张</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.price}}</strike></view> -->
					<view class="room-price">¥{{ item.price }}</view>
					<view class="room-button" :class="{'room-button2': item.number === 0}">
						<text v-if="item.number == 0">已满</text>
						<text v-else @click="navigateToOrderRoom(item.number, item.id, item.h_type, item.price)">订</text>
					</view>
					<view class="room-line" v-if="index < (roomType.length - 1)"></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>
		<a :href="'https://chtech.ncjti.edu.cn/hotelReservation/zhotel/appcode.action?card_number=' + cardNumber" id="shouquanId"></a>
	</view>
</template>

<script>
	// 导入qq地图图片
	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: ''
				},
				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: '0791-82293574', //电话
				latitude: '', // 默认当前纬度
				longitude: '',
				scale: 12, // 默认16
				markers: [],
				markerHeight: 30,
				xuzhu_type: [], // 办理续住判断条件
				xuzhu_panduan: [], // 办理续住判断条件赋值
				tui_type: [], // 办理退房判断条件
				tui_panduan: [], // 办理退房判断条件赋值
				dai_type: [], // 办理入住判断条件
				dai_panduan: [], // 办理入住判断条件赋值
				order_txt: '', //订房事故时信息
				cardNumber: ''
			}
		},
		onLoad(options) {
			// console.log('index.options:', options.card_number);
			if (!options.hasOwnProperty("card_number")) {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})

				setTimeout(() => {
					uni.hideLoading();
				}, 1500)
				return;
			}

			var cardNumber = options.card_number;
			if (this.$utils.isEmpty(cardNumber)) {
				uni.showToast({
					title: '未获取用户信息',
					duration: 1500
				});
				return;
			}

			var cardNumber_store = this.$utils.getEncryptedData('cardNumber');
			if (!this.$utils.isEmpty(cardNumber) && !this.$utils.isEmpty(cardNumber_store)) {
				if (cardNumber !== cardNumber_store) {
					uni.showToast({
						title: '用户不合法',
						duration: 1500
					})
					return;
				}
				// 存储用户卡号
				this.$utils.storeEncryptedData('cardNumber', cardNumber);
				this.cardNumber = cardNumber;
			}

			this.startDate = this.$utils.getDate(new Date()).fullDate2
			this.endDate = this.$utils.getDate(new Date(), 1).fullDate2
		},
		mounted() {

		},
		onReady() {
			const that = this;
			that.$nextTick(() => {
				that.showCalendar = true
			})
			// TODO 模拟请求异步同步数据
			setTimeout(() => {
				const now = new Date();
				// console.log('date:'+getDate(new Date()).fullDate)
				// console.log('startDate:'+getDate(new Date()).fullDate)
				// console.log('startWeek:'+getDate(new Date()).eWeek)
				var arrDate = that.$utils.getDateComponents(now, 'date', 'time', 'weekday_cn', 'monthday_cn');
				var arrDate_1 = that.$utils.getDateComponents(that.$utils.addDaysToDate(now, 1), 'date', 'time', 'weekday_cn', 'monthday_cn');
				var arrDate_6 = that.$utils.getDateComponents(that.$utils.addDaysToDate(now, 6), 'date', 'time', 'weekday_cn', 'monthday_cn');

				that.info.date = arrDate.date
				that.info.startDate = arrDate.date
				that.info.endDate = arrDate_6.date
				that.infoXu.date = arrDate.date
				that.infoXu.startDate = arrDate.date
				that.infoXu.endDate = arrDate_6.date
				that.startTime = arrDate.monthday_cn
				that.endTime = arrDate_1.monthday_cn
				that.startWeek = arrDate.weekday_cn
				that.endWeek = arrDate_1.weekday_cn
			}, 30)

			//   wx请求获取位置权限
			that.getAuthorize()
				.then(() => {
					//   同意后获取
					that.getLocationInfo();
				})
				.catch(() => {
					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();
					// 	});
				});
			// 获取用户信息
			this.getUserInfo()
			// 获取房型
			this.getRoomType()
		},

		methods: {
			// 房型接口
			getRoomType() {
				let that = this
				that.roomType = []
				// ?startDate=" + that.startDate.substring(0, 10) + "&endDate=" + that.endDate.substring(0, 10)
				that.$myRequest({
					url: '/hotelReservation/zhotel/apphouse_list.action',
				}).then(res => {
					if (res.data.code === 200) {
						let data = res.data.data;
						data.forEach(item => {
							if (item.number > 0) {
								that.roomType.push(item)
							}
						});
					} else {
						uni.showToast({
							title: '未获得房型'
						})
					}
				});
			},
			// 获取用户信息openid，没有则弹出进行授权
			getUserInfo() {
				var that = this;
				that.$myRequest({
					url: '/hotelReservation/zhotel/appuser.action?card_number=' + that.cardNumber,
				}).then(res => {
					if (res.data.code === 200) {
						if (that.$utils.isEmpty(res.data.data.openid)) {
							uni.showModal({
								title: '授权提示',
								content: '获取个人信息',
								success(res) {
									if (res.confirm) {
										// 获取超链接元素
										var link = document.getElementById('shouquanId');
										// 触发点击事件
										link.click();
									} else if (res.cancel) {
										uni.showToast({
											title: '用户取消授权'
										})
									}
								}
							})
						}
					// } else {
					// 	uni.showToast({
					// 		title: res.data.message
					// 	})
					}
				});
			},
			// // 房型详情接口
			getRoomTypeInfo(id) {
				let _self = this
				_self.typeText = ''
				_self.img = []
				// this.$axios.get(`/hotelReservation/zhotel/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('获取房型详情失败')
				// 	}
				// });
				if (id === 1) {
					_self.typeText = '描述标准型'
					_self.img = ['../../static/index/std.jpg', '../../static/index/std.jpg', '../../static/index/std.jpg']
				} else if (id === 2) {
					_self.typeText = '描述高级型'
					_self.img = ['../../static/index/adv.jpg', '../../static/index/adv1.jpg', '../../static/index/adv2.jpg']
				} else {
					_self.typeText = '描述豪华型'
					_self.img = ['../../static/index/lux.jpg', '../../static/index/lux1.jpg', '../../static/index/lux2.jpg']
				}
			},
			// 订单列表
			getOrderPage() {
				let _self = this
				_self.xuzhu_type = []
				_self.tui_type = []
				_self.dai_type = []
				this.$axios.get("/hotelReservation/zhotel/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: "../ruzhuxuzhi/ruzhuxuzhi",
				});
			},
			// 跳转到公寓详情
			navigateToXiangqing() {
				uni.navigateTo({
					url: "../gongyujieshao/gongyujieshao",
				});
			},
			// 订房间 
			navigateToOrderRoom(enableNum, id, typeName, price) {
				// console.log(enableNum, id, typeName, price);
				let _self = this
				_self.roomType = []
				if (enableNum >= 1) {
					uni.navigateTo({
						url: "../order_room/order_room?roomTypeId=" + id + "&enableStartTime=" + _self.startDate + "&enableEndTime=" + _self.endDate +
							"&startTime=" + _self.startTime + "&endTime=" + _self.endTime + "&ruzhu_num=" + _self.ruzhu_num + "&typeName=" + typeName +
							"&freeRoom=" + enableNum + "&price=" + price
					});
				}
				this.getRoomType()
			},
			//办理入住跳转
			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: "../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: "../my_orderlist/my_orderlist?Inv=3"
						})
					} else if (this.tui_panduan.length < 1) {
						this.msgType = type
						this.$refs.popup_tui.open()
					}
				}, 150)
			},
			// 户型详情弹窗
			inputDialogToggle(h_type) {
				this.$refs.popup.open()
				if (h_type.indexOf('标准') !== -1) {
					this.getRoomTypeInfo(1)
				} else if (h_type.indexOf('高级') !== -1) {
					this.getRoomTypeInfo(2)
				} else {
					this.getRoomTypeInfo(3)
				}
			},
			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) {
				var before = e.range.before;
				var after = e.range.after;
				this.info.selected = [{
						date: before,
						info: '到店'
					},
					{
						date: after,
						info: '离店'
					}
				];
				if (before !== '' && after === '') {
					this.startWeek = '周' + e.lunar.ncWeek.substring(2, 3)
				} else if (before !== '' && after !== '') {
					if ((new Date(after).getTime()) == (new Date(before).getTime())) {
						uni.showToast({
							title: '不能选同一天',
							icon: 'error',
							duration: 1500
						});
						return;
					}
					if ((new Date(after).getTime()) < (new Date(before).getTime())) {
						var temp = before;
						before = after;
						after = temp;
					}
					this.endWeek = '周' + e.lunar.ncWeek.substring(2, 3)
					this.startTime = before.substring(5, 7) + '月' + before.substring(8, 10) + '日'
					this.endTime = after.substring(5, 7) + '月' + after.substring(8, 10) + '日'
					this.startDate = before + ' 14:00:00'
					this.endDate = after + ' 12:00:00'
					this.ruzhu_num = parseInt(((new Date(after).getTime()) - (new Date(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() {
				var that = this;
				uni.makePhoneCall({
					phoneNumber: that.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>