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="isopenSearch = !isopenSearch">
					<image style="width: 32rpx;height: 32rpx;" src="/static/icon/search02.png" mode=""></image>
				</view>
				<view class="search-area-all">
					<view :class="isSelectArea?'search-area':'search-areaClick'" @click="openArea">
						<text>地区</text>
						<image v-if="isSelectArea" style="width: 16rpx;height: 10rpx;" src="/static/icon/down01.png"
							mode="">
						</image>
						<image v-if="!isSelectArea" style="width: 16rpx;height: 10rpx;" src="/static/icon/up01.png"
							mode="">
						</image>
					</view>
					<view :class="isSelectBrand?'search-area':'search-areaClick'" @click="openBrand">
						<text>品牌</text>
						<image v-if="isSelectBrand" style="width: 16rpx;height: 10rpx;" src="/static/icon/down01.png"
							mode="">
						</image>
						<image v-if="!isSelectBrand" style="width: 16rpx;height: 10rpx;" src="/static/icon/up01.png"
							mode="">
						</image>
					</view>
					<view class="search-area" :class="isSelectSift?'search-area':'search-areaClick'" @click="openSift">
						<text>更多筛选</text>
						<image v-if="isSelectSift" style="width: 16rpx;height: 10rpx;" src="/static/icon/down01.png"
							mode="">
						</image>
						<image v-if="!isSelectSift" 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" v-if="isopenSearch">
				<u-input placeholder="输入酒店/城市名称搜索酒店" border='none'>
					<template slot="suffix" style='margin-right:40rpx;'>
						<u-image :showLoading="true" :showError='true' src="/static/icon/search.png" width="40rpx"
							height="32rpx"></u-image>
					</template>
				</u-input>
			</view>
			<!-- 选择地区 -->
			<view class="search-detail" v-if="!isSelectArea">
				<view class="search-detail-area">
					<view class="areaTitle" v-for="(item,index) in search.content.area" :key="item.id" @click="checked(item.id,'area')">
						<view :class="{'active-area':search.area === item.id}">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="search-detail-btn">
					<view class="search-detail-btn-left">
						<text>取消</text>
					</view>
					<view class="search-detail-btn-right">
						<text>确认</text>
					</view>
				</view>
			</view>
			<!-- 选择品牌-->
			<view class="search-detail" v-if="!isSelectBrand">
				<view class="search-detail-area">
					<view class="areaTitle" v-for="(item,index) in search.content.brand" :key="item.id" @click="checked(item.id,'brand')">
						<view :class="{'active-area':search.brand === item.id}">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="search-detail-btn">
					<view class="search-detail-btn-left">
						<text>取消</text>
					</view>
					<view class="search-detail-btn-right">
						<text>确认</text>
					</view>
				</view>
			</view>
			<!-- 筛选-->
			<view class="search-detail" v-if="!isSelectSift">
				<view class="partner">
					<view class="partner-top" @click="selectPartner">
						<text>合作伙伴</text>
						<image v-if="isPartner" style=" width: 20rpx; height: 12rpx; " src="/static/icon/up02.png"
							mode=""></image>
						<image v-if="!isPartner" style=" width: 20rpx; height: 12rpx; " src="/static/icon/down02.png"
							mode=""></image>
					</view>
					<view class="partner-main" v-if="isPartner">
						<uni-data-checkbox multiple 
							v-model="value" 
							:localdata="search.content.coop" 
							emptyText="无"
							:map="{text: 'name',value: 'name'}"
							@change="change"
						/>
					</view>

					<view class="partner-top" style="border-top: none;" @click="selectJoin">
						<text>加盟品牌</text>
						<image v-if="isJoin" style=" width: 20rpx; height: 12rpx; " src="/static/icon/up02.png" mode="">
						</image>
						<image v-if="!isJoin" style=" width: 20rpx; height: 12rpx; " src="/static/icon/down02.png"
							mode=""></image>
					</view>
					<view class="partner-main" v-if="isJoin">
						<uni-data-checkbox multiple
							v-model="value" 
							:localdata="search.content.league" 
							emptyText="无"
							:map="{text: 'name',value: 'name'}"
							@change="change"
						/>
					</view>

					<view class="search-detail-btn">
						<view class="search-detail-btn-left">
							<text>取消</text>
						</view>
						<view class="search-detail-btn-right">
							<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-view style="width: calc(100% + 16px);height:318rpx;white-space: nowrap;margin-left: -8px;" 
					@scroll="bottomScroll"  @scrolltolower="scrollTolower"
				 :scroll-x="true" :scroll-left="scrolls.scrollX" :scroll-with-animation="true">
					<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">
										<text>{{item.label}}</text>
									</view>
									<view class="bottom" v-if="item.min_price">
										<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;" 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">
									<text>{{item.label}}</text>
								</view>
								<view class="bottom" v-if="item.min_price">
									<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],
				//合作伙伴
				partner: [{
					text: '足球',
					value: 0
				}, {
					text: '篮球',
					value: 1
				}, {
					text: '游泳',
					value: 2
				}, {
					text: '游泳',
					value: 3
				}, {
					text: '游泳',
					value: 4
				}, {
					text: '游泳',
					value: 5
				}, {
					text: '游泳',
					value: 6
				}, {
					text: '游泳',
					value: 7
				}, ],

				//品牌
				brandList: [{
					title: '谷歌'
				}, {
					title: '微软'
				}, {
					title: 'iphone'
				}, {
					title: '新希望'
				}, {
					title: '三江重工'
				}, {
					title: 'JavaScript'
				}],
				//地区
				search:{
					area: "",
					brand: "",
					coop: [],
					league: [],
					isActiveIds:[3,26],
					content: {
						area: [],
						brand: [],
						coop: [],
						league: [],
					}
				},
				areaList: [],
				//激活指定table菜单
				isActive: 0,
				//展开搜索
				isopenSearch: false,
				//选择地区
				isSelectArea: true,
				//选择品牌
				isSelectBrand: true,
				//刷选
				isSelectSift: true,
				//是否展示合作伙伴
				isPartner: false,
				//是否展示加盟品牌
				isJoin: false,
				//滚动参数
				scrollData:{
					spa: false
				},
			}
		},
		onLoad() {
			//获取经纬度
			this.updated()
			this.getHotelCategory()
			uni.getSystemInfo({
				success:(res)=>{
					this.screenWidth = res.screenWidth
				}
			})
		},
		methods: {
			//获取筛选数据
			getHotelCategory(){
				this.$api.hotel.getHotelCategory().then(res=>{
					if(res.code !== 0) return;
					this.search.content.area = res.data[0]?.sub;
					this.search.content.brand = res.data[1]?.sub;
					this.search.content.coop = res.data[2]?.sub;
				})
			},
			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)
						// //获取酒店列表
						// _this.getList()
					},
					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.$refs.map.goLocation(res.latitude,res.longitude)
						//获取酒店列表
						_this.getList()
					},
					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  // 单位千米
			},
			//-------------------------------------
			getList() {
				this.$api.hotel.getHotelList({
					page: 1
				}).then(res => {
					this.hotelList = res.data.data.map(item=>{
						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.sort((prev,next)=>{
						return prev.distanceToMe-next.distanceToMe;
					})
					console.log(this.hotelList[0].id)
					setTimeout(()=>{
						this.$refs.map.markertap({markerId: this.hotelList[0].id})	
					}, 300)

				})
			},
			//去预定页面
			goBook(index) {
				if(!this.$store.getters.userInfo){
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
				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) {
			},
			//菜单index切换
			checked(id,categoreName) {
				const tempSet = new Set(this.search.isActiveIds);
				tempSet.add(id);
				this.search[categoreName] = id;
				this.search.isActiveIds = Object.assign(Array.from(tempSet));
			},
			//展开地区选择
			openArea() {
				this.isSelectArea = !this.isSelectArea
				this.isSelectBrand = true
				this.isSelectSift = true
			},
			//展开品牌选择
			openBrand() {
				this.isSelectBrand = !this.isSelectBrand
				this.isSelectArea = true
				this.isSelectSift = true
			},
			//展开筛选选择
			openSift() {
				this.isSelectSift = !this.isSelectSift
				this.isSelectBrand = true
				this.isSelectArea = true
			},
			//下面酒店位移
			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;
					} 
				})
			},
			bottomScroll(e){
				if(this.scrollData.spa) return;
				const moveX  = e.detail.scrollLeft;
				const index = Math.floor((moveX + this.screenWidth) / 256) - 1;
				if(this.$refs.map.isActiveMarker == this.hotelList[index].id) return;
				this.$refs.map.markertap({markerId: this.hotelList[index].id}, false)
				this.scrollData.spa = true;
				setTimeout(()=>{
					this.scrollData.spa = false;
				}, 10)
			}, 
			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>