IHG/pages/map/map.vue

<template>
	<view class="map">
		<MyNav title="IHG地图" bgColor="" :backIcon="false"></MyNav>
		<!-- 查询 -->
		<view class="search" v-if="true">
			<view class="search-top" style="padding: 16rpx 30rpx 0rpx;margin-bottom: 20rpx;">
				<view class="search-loupe" @click="search.openId=search.openId==-2?0:-2">
					<image style="width: 32rpx;height: 32rpx;" src="/static/icon/search02.png" mode=""></image>
				</view>
				<view class="search-area-all">
					<template v-for="(item, index) in search.content"  >
						<view v-if="index<2" :class="search.openId!=item.id?'search-area':'search-areaClick'" 
						:key="item.id" @click="openSelector(item.id)">
							<text>{{item.name}}</text>
							<image v-if="search.openId!=item.id" style="width: 16rpx;height: 10rpx;" src="/static/icon/down01.png"
								mode="">
							</image>
							<image v-else style="width: 16rpx;height: 10rpx;" src="/static/icon/up01.png"
								mode="">
							</image>
						</view>
					</template>
					<view :class="search.openId!=-1?'search-area':'search-areaClick'" @click="openSelector(-1)">
						<text>更多筛选</text>
						<image v-if="search.openId!=-1" style="width: 16rpx;height: 10rpx;" src="/static/icon/down01.png"
							mode="">
						</image>
						<image v-else style="width: 16rpx;height: 10rpx;" src="/static/icon/up01.png"
							mode="">
						</image>
					</view>
				</view>
				<image style=" flex: none; width: 52rpx;height: 46rpx;" src="/static/icon/vip.png" mode=""></image>
			</view>
			<view class="search-detail" style="z-index:9" v-if="search.openId==-2">
				<u-input placeholder="输入酒店/城市名称搜索酒店" border='none' :value="search.text" @input="syncSearchInput">
					<template slot="suffix" style='margin-right:40rpx;'>
						<u-image :showLoading="true" :showError='true' src="/static/icon/search.png" width="40rpx"
							height="32rpx" @click="confirmSearch"></u-image>
					</template>
				</u-input>
			</view>
			
				
			<template v-for="(item, index) in search.content">
				<view :key="item.id" class="search-detail" style="z-index: 9;" v-if="search.openId == item.id">
					<view class="search-detail-area">
						<view :class="{areaTitle:true, on: search.selected.includes(v.id)}" 
						v-for="(v,k) in item.sub" 
						:key="v.id" 
						@click="checked(v.id)">
							<view>
								{{v.name}}
							</view>
						</view>
					</view>
					<view class="search-detail-btn">
						<view class="search-detail-btn-left" @click="cancelSearch">
							<text>取消</text>
						</view>
						<view class="search-detail-btn-right" @click="confirmSearch">
							<text>确认</text>
						</view>
					</view>
				</view>
			</template>
			
		
			<!-- 筛选-->
			<view class="search-detail" style="z-index: 9;" v-if="search.openId==-1">
				<view class="partner">
					<template v-for="(item,index) in search.content">
						<view class="partner-top" v-if="index >= 2" @click="search.partner=item.id==search.partner?0:item.id" :key="item.id">
							<text>{{item.name}}</text>
							<image v-if="search.openId!=-1" style=" width: 20rpx; height: 12rpx; " src="/static/icon/up02.png"
								mode=""></image>
							<image v-else style=" width: 20rpx; height: 12rpx; " src="/static/icon/down02.png"
								mode=""></image>
						</view>
						<view class="partner-main" v-if="search.partner==item.id">
							<uni-data-checkbox multiple 
								:value="search.selected"
								@input="syncSelected"
								:localdata="item.sub"
								emptyText="无"
								:map="{text: 'name',value: 'id'}"
							/>
						</view>
					</template>
					<view class="search-detail-btn">
						<view class="search-detail-btn-left" @click="cancelSearch">
							<text>取消</text>
						</view>
						<view class="search-detail-btn-right" @click="confirmSearch">
							<text>确认</text>
						</view>
					</view>
				</view>

			</view>

		</view>
		<view class="address">
			<view style="height:1232rpx;">
				<hch-position ref="map" :markers="hotelList" @moveToMarkId="moveToMarkId"/>
			</view>
			<view class="address-nav" style="overflow-x: visible; height:318rpx;">
				<!-- 遮挡地图修正 
				<view class="address-nav-btn">
					<view class="" @click="goLocation">
						<image style="width: 84rpx;height: 84rpx;" src="/static/icon/location.png" mode=""></image>
					</view>
					<view class="" @click="goHotelList">
						<image style="width: 84rpx;height: 84rpx;" src="/static/icon/list.png" mode=""></image>
					</view>
				</view>
				-->
				<view id="switch-container"
					style="width: 100%; overflow-x: scroll; display: none;align-items: center;justify-content: space-between;">	
				</view>
				<!-- @scroll="bottomScroll" -->
				<scroll-view style="width: calc(100% + 16px);height:318rpx;white-space: nowrap;margin-left: -8px;z-index:10" 
					@scrolltolower="scrollTolower" 
					@scroll="bottomScroll"
					:scroll-x="true" 
					:scroll-left="scrolls.scrollX" 
					:scroll-with-animation="true"
					:show-scrollbar="false"
				>
					<view style="width: 8px;display: inline-block;"></view>
					<view class="address-detail" v-for="(item,index) in hotelList" :key="index">
						<view class="mark">
							<image style=""
								:src="item.bg_img" mode="aspectFill"></image>
						</view>
						<view class="inner">
							<view class="address-detail-main">
								<view class="address-detail-main-left">
									<text class="title">{{item.name}}</text>
									<view class="content" :style="{opacity: item.label?1:0}">
										<template v-if="item.label">
											<text v-for="(v,k) in item.label.split(',')" :key="k">{{v}}</text>
										</template>
									</view>
									<view class="bottom" :style="{opacity: item.min_price?1:0}">
										<text class="bottom-left">￥</text>
										<text class="bottom-right">{{item.min_price}}起</text>
									</view>
								</view>
								<view class="address-detail-main-right" @click="goBook(index)">
									<text>预订</text>
								</view>
							</view>
							<view class="address-detail-position">
								<image style="width: 18rpx;height: 22rpx;" src="/static/icon/address02.png" mode="">
								</image>
								<text style="margin-left:4rpx ;">{{item.distanceToMe}}km</text>
							</view>
						</view>
					</view>
					<view style="width: 1px;display: inline-block;"></view>
				</scroll-view>
				<view class="address-nav-button" @click="goLocation">
					<image style="width: 84rpx;height: 84rpx;" src="/static/icon/location.png" mode=""></image>
				</view>
				<view class="address-nav-button" @click="goHotelList">
					<image style="width: 84rpx;height: 84rpx;" src="/static/icon/list.png" mode=""></image>
				</view>
			</view>
		</view>

		<!-- 酒店列表 -->
		<view class="hotel-list" style="position: absolute;z-index:11;height:100%" v-if="!isShow">
			<view class="hotel-list-item" v-for="(item,index) in hotelList" :key="index" @click="goBook(item.id)">
				<view class="wrap">
					<view class="mark">
						<image style="width: 694rpx;height: 318rpx;border-radius: 10rpx;" :src="item.bg_img"
							mode=""></image>
					</view>
					<view class="inner">
						<view class="address-detail-main">
							<view class="address-detail-main-left">
								<text class="title">{{item.name}}</text>
								<view class="content" :style="{opacity: item.label?1:0}">
									<template v-if="item.label">
										<text v-for="(v,k) in item.label.split(',')" :key="k">{{v}}</text>
									</template>
								</view>
								<view class="bottom"  :style="{opacity: item.min_price?1:0}">
									<text class="bottom-left">￥</text>
									<text class="bottom-right">{{item.min_price}}起</text>
								</view>
							</view>
							<view class="address-detail-main-right" @click.stop="goBook(index)">
								<text>预订</text>
							</view>
						</view>
						<view class="address-detail-position">
							<image style="width: 18rpx;height: 22rpx;" src="/static/icon/address02.png" mode=""></image>
							<text style="margin-left:4rpx ;">{{item.distanceToMe}}km</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 触底 -->
			<view class="home-bottom">
				<uni-load-more :status="status" color="#CCCCCC" :content-text="contentText" />
			</view>
			<view class="return-btn" @click="returnBtn">
				<image style="width: 132rpx;height: 132rpx;border-radius: 50%;" src="/static/icon/return01.png" mode="">
				</image>
			</view>

		</view>
		<view style="height: 110rpx;"></view>
		<tab-bar></tab-bar>
	</view>
</template>

<script>
	import TabBar from '../../components/TabBar/tabbar.vue'
	import HchPosition from '../../components/hch-position/hch-position.vue'
	import MyNav from "@/components/my-nav/my-nav.vue"
	export default {
		components: {
			TabBar,
			HchPosition,
			MyNav
		},
		data() {
			return {
				scrolls:{scrollX: 0},
				hotelList:[],
				hotelListBase:[],
				//门店在地图上的标记 以下字段必填
				markers: [],
				//经纬度
				latitude:'',
				longitude:'',
				//暂无数据
				status: 'noMore',
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '——  已经到底啦  ——'
				},
				//是否展示地图
				isShow: true,
				value: [0],
				//搜索
				search:{
					content: {},
					text: "",
					openId:0,
					isSearch:false,
					selected:[],
					currentSelected:[],
					partner:0,
					checkedselected:[],
				},
				areaList: [],
				//激活指定table菜单
				isActive: 0,
				//展开搜索
				isopenSearch: false,
				//选择地区
				isSelectArea: true,
				//选择品牌
				isSelectBrand: true,
				//刷选
				isSelectSift: true,
				//是否展示合作伙伴
				isPartner: false,
				//是否展示加盟品牌
				isJoin: false,
				//滚动参数
				scrollData:{
					direct: -1,
					isScroll:false,
					spa: false,
					activeIndex:0
				},
				beginConfig:{
					hotel_id: 0
				}
			}
		},
		onLoad(e) {
			const {hotel_id,category_ids} = e;
			this.beginConfig.hotel_id = hotel_id;
			if(category_ids){
				this.search.currentSelected = category_ids.split(",")
				this.search.selected = Object.assign(this.search.currentSelected)
			}
			//获取经纬度
			this.getHotelCategory()
			uni.getSystemInfo({
				success:(res)=>{
					this.screenWidth = res.screenWidth
				}
			})
		},
		methods: {
			syncSearchInput(e){
				this.search.text = e
			},
			syncSelected(e){
				if(this.search.checkedselected.length > e.length){
					const resArr = this.$utils.arrayDiff(this.search.checkedselected, e)
					const tempSet = new Set(this.search.selected);
					resArr.forEach(i=>{
						tempSet.delete(i)
					})
					this.search.selected = Array.from(tempSet);
				}else{
					this.search.selected = Array.from(new Set([...this.search.selected, ...e]));
				}		
				this.search.checkedselected = e;
				console.log(this.search.selected)
			},
			checked(id) {
				if(this.search.selected.includes(id)){
					const tempSet = new Set(this.search.selected)
					tempSet.delete(id)
					this.search.selected = Array.from(tempSet)
				}else{
					this.search.selected.push(id)
				}
			},
			confirmSearch(){
				this.search.currentSelected = Object.assign(this.search.selected);
				this.getList();
				this.search.isSearch = true;
				this.search.openId = 0;
			},
			cancelSearch(){
				this.search.selected = Object.assign(this.search.currentSelected);
				this.search.openId = 0;
			},
			//打开选择器
			openSelector(id){
				if(this.search.openId == id){
					this.cancelSearch()
				}else{
					this.search.openId = id
				}
			},
			//获取筛选数据
			getHotelCategory(){
				this.$api.hotel.getHotelCategory().then(res=>{
					if(res.code !== 0) return;
					this.search.content = res.data;
					
					this.updated()
				})
			},
			goLocation(){
				let _this = this
				uni.getLocation({
					type: "gcj02", //返回可以用于wx.openLocation的经纬度
					success: function(res) {
						_this.latitude = res.latitude
						_this.longitude = res.longitude
						_this.$refs.map.goLocation(res.latitude,res.longitude)
					},
					fail: function(res) {
						console.log(res)
					}
				})
			},
			//在地图渲染更新完成时触发的方法
			updated() {
				let _this = this
				uni.getLocation({
					type: "gcj02", //返回可以用于wx.openLocation的经纬度
					success: function(res) {
						_this.latitude = res.latitude
						_this.longitude = res.longitude
						_this.getList(true)
						//获取酒店列表
					},
					fail: function(res) {
					}
				})
			},			
			space(lat1, lng1, lat2, lng2) {
			  var radLat1 = lat1 * Math.PI / 180.0;
			  var radLat2 = lat2 * Math.PI / 180.0;
			  var a = radLat1 - radLat2;
			  var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
			  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;
			  s = Math.round(s * 10000) / 10000;
			  return s;
			},
			//-------------------------------------
			requestHotelPage(tempobj){
				tempobj.page = tempobj.page + 1;
				this.$api.hotel.getHotelList({
					...tempobj,
				}).then(res => {
					const tempHotelList = res.data.data.map(item=>{
						item.logo = this.$utils.toHttps(item.logo);
						return {
							...item, 
							marker:{
								id:item.id,
								latitude: item.latitude,
								longitude: item.longitude,
								width:'34rpx',
								height:'40rpx',
								iconPath:'../../static/icon/late02.png' ,
								active: {
									width: '90rpx',
									height: '100rpx',
									iconPath: item.logo,
								},
								noActive:{
									width:'34rpx',
									height:'40rpx',
									iconPath:'../../static/icon/late02.png' ,
								},
								callout1: {
									content:item.name,
									borderRadius: 10,
									padding: 10,
									display: "ALWAYS",
								},
							}
						}
						this.hotelList.map(item=>{
							item.distanceToMe=this.space(this.latitude,this.longitude,item.latitude,item.longitude).toFixed(1);
							return item;
						})
						
					})
					this.hotelList.push(...tempHotelList)
					if(res.data.data.length >= 15){
						this.requestHotelPage(tempobj);
					}
				})
			},
			getList(islocal = false) {
				const tempobj = {type: 1,page: 1,};
				if(this.search.currentSelected.length){
					this.search.currentSelected.forEach((item,index) => {
						tempobj[`category_ids[${index}]`] = item
					})
				}
				if(this.latitude&&this.longitude){
					tempobj['latitude'] = this.latitude;
					tempobj['longitude'] = this.longitude;
				}
				if(this.search.text){
					tempobj['name'] = this.search.text;
				}
				this.$api.hotel.getHotelList({
					...tempobj,
				}).then(res => {
					this.hotelList = res.data.data.map(item=>{
						item.logo = this.$utils.toHttps(item.logo);
						return {
							...item, 
							marker:{
								id:item.id,
								latitude: item.latitude,
								longitude: item.longitude,
								width:'34rpx',
								height:'40rpx',
								iconPath:'../../static/icon/late02.png' ,
								active: {
									width: '90rpx',
									height: '100rpx',
									iconPath: item.logo,
								},
								noActive:{
									width:'34rpx',
									height:'40rpx',
									iconPath:'../../static/icon/late02.png' ,
								},
								callout1: {
									content:item.name,
									borderRadius: 10,
									padding: 10,
									display: "ALWAYS",
								},
							}
						}
					})
					if(res.data.data.length <= 0) return;
					this.hotelList.map(item=>{
						item.distanceToMe=this.space(this.latitude,this.longitude,item.latitude,item.longitude).toFixed(1);
						return item;
					})	
					// this.hotelList.sort((prev,next)=>{
					// 	return prev.distanceToMe-next.distanceToMe;
					// })
					if(islocal){
						this.$refs.map.goLocation(this.latitude,this.longitude)
					}
					setTimeout(()=>{
						if(!this.beginConfig.hotel_id){
							this.$refs.map.markertap({markerId: this.hotelList[0].id},true,this.search.isSearch)
							this.beginConfig.hotel_id = 0
							this.search.isSearch = false
						}else{	
							this.localToMark(this.beginConfig.hotel_id);
							// this.$refs.map.markertap({markerId: this.beginConfig.hotel_id})	
							this.beginConfig.hotel_id = 0
						}
					}, 300)
					if(res.data.data.length >= 15){
						this.requestHotelPage(tempobj)
					}
				})
			},
			//去预定页面
			goBook(index) {
				if(!this.$store.getters.userInfo){
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return;
				}
				const hotel = this.hotelList[index];

				uni.navigateTo({
					url: `/pages/map/hotel-book/index?hotel_id=${hotel.id}&latitude=${hotel.latitude}&longitude=${hotel.longitude}&name=${hotel.name}&address=${hotel.address}`
				})
			},
			//返回上一级
			returnBtn() {
				this.isShow = !this.isShow
			},
			//打开酒店列表
			goHotelList() {
				this.isShow = !this.isShow
			},
			//是否展示加盟品牌
			selectJoin() {
				this.isJoin = !this.isJoin
			},
			//是否展示合作伙伴
			selectPartner() {
				this.isPartner = !this.isPartner
			},
			//合作伙伴刷选
			change(e) {
			},
			//展开筛选选择
			openSift() {
				this.isSelectSift = !this.isSelectSift
			},
			//下面酒店位移
			moveToMarkId(markId){
				this.hotelList.forEach((item,index) => {
					if(markId == item.id){
						this.scrollData.spa = true;
						this.scrolls.scrollX = (256 * index) - (this.screenWidth-256)/2 + 'px';
						setTimeout(()=>{
							this.scrollData.spa = false
						},500)
						return;
					} 
				})
			},
			localToMark(markId){
				// this.moveToMarkId(markId)
				this.$refs.map.markertap({markerId: markId}, true)
			},
			bottomScroll(e){
				if(this.scrollData.spa) return;
				const moveX  = e.detail.scrollLeft;
				this.scrollData.activeIndex = Math.floor((moveX + this.screenWidth) / 256) - 1;
				if(this.$refs.map.isActiveMarker == this.hotelList[this.scrollData.activeIndex].id) return;
				this.$refs.map.markertap({markerId: this.hotelList[this.scrollData.activeIndex].id}, false)
				this.scrollData.spa = true;
				setTimeout(()=>{
					this.scrollData.spa = false;
				}, 10)
			}, 
			moveToTabX(e){
				console.log(this.scrolls.scrollX)
				this.scrollData.spa = true;
				this.scrolls.scrollX = (256 * this.scrollData.activeIndex+1) - (this.screenWidth-256)/2 + 'px';
				
				console.log(this.scrolls.scrollX)
				setTimeout(()=>{
					this.scrollData.spa = false;
				}, 500)
			},
			scrollTolower(){
				this.$refs.map.markertap({markerId: this.hotelList[this.hotelList.length-1].id}, false)
				this.scrollData.spa = true;
				setTimeout(()=>{
					this.scrollData.spa = false;
				}, 10)
			}
		},
	}
</script>

<style lang="scss" src="./map.scss" scoped></style>