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 @click="goJoin"  style=" flex: none; width: 52rpx;height: 46rpx;" src="/static/icon/vip.png" mode=""></image>
			</view>
			<view class="search-detail search-detail-input"    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="index >= 2 && 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:1300rpx;">
				<hch-position ref="map" :geo="geo" @moveToMarkId="moveToMarkId" @rendered="mapRendered"/>
			</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" -->
				<view style="width: calc(100% + 32rpx);margin-left: -16rpx;z-index:10">
					<scroll-hotel ref="scrollHotel" :hotelList="hotelList" @updateIndex="updateMapIndex" @goBook="goBook"/>
				</view>
				
				<view class="address-nav-button" @click="goLocation">
					<image style="width: 100rpx;height: 100rpx;" src="/static/icon/location.png" mode=""></image>
				</view>
				<view class="address-nav-button" @click="goHotelList">
					<image style="width: 100rpx;height: 100rpx;" src="/static/icon/list.png" mode=""></image>
				</view>
			</view>
		</view>

		<!-- 酒店列表 -->
		<view class="hotel-list" style="position: absolute;z-index:11;min-height:100%;padding-bottom: 80px;" 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" v-if="item.distanceToMe">
							<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: 100rpx;height: 100rpx;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"
	import scrollHotel from "./scrollHotel.vue"
	import dialogPanel from "@/components/dialogPanel/dialogPanel.vue"
	export default {
		components: {
			TabBar,
			HchPosition,
			MyNav,
			scrollHotel,
			dialogPanel
		},
		data() {
			return {
				//跳转h5,小程序,其他页面
				jump_type: '',
				jump_config: {},
				//加入会员广告配置
				advise: '',
				scrolls:{scrollX: 0},
				hotelList:[],
				hotelListBase:[],
				//门店在地图上的标记 以下字段必填
				markers: [],
				//经纬度
				geo:{
					latitude: 30.6034799,
					longitude: 104.1132550,
				},
				latitude: 30.6034799,
				longitude: 104.1132550,
				//暂无数据
				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:{
					isBegin: true,
					hotel_id: 0
				}
			}
		},
		onShow() {
			this.admin = this.$store.getters.userInfo
		},
		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)
			}
			console.log(hotel_id,category_ids)
			//获取经纬度
			this.getHotelCategory()
			
			//vip跳转
			this.advise = this.$store.getters.allset.add_member
			this.jump_type = this.advise.value.map_jump_type
			if (this.jump_type == 1) {
				this.jump_config = this.advise.value.map_h5_url
			} else if (this.jump_type == 2) {
				this.jump_config.appid = this.advise.value.map_appid
				this.jump_config.path = this.advise.value.map_path
			} else if (this.jump_type == 3) {
				this.jump_config = this.advise.value.map_other_path
			}
		},
		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;
			},
			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(){
				uni.getLocation({
					type: "gcj02", //返回可以用于wx.openLocation的经纬度
					success: (res) => {
						this.geo = {
							latitude: res.latitude + Math.random()/10000000,
							longitude: res.longitude
						}
					},
					fail: function(res) {
						console.log(res)
					}
				})
			},
			//在地图渲染更新完成时触发的方法
			updated() {
				uni.getLocation({
					type: "gcj02", //返回可以用于wx.openLocation的经纬度
					success: (res) => {
						this.geo = {
							latitude: res.latitude + Math.random()/10000000,
							longitude: res.longitude
						}
						this.getList(true)
						//获取酒店列表
					},
					fail: function(res) {
					}
				})
			},			
			//-------------------------------------
			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,
								iconPath: '../../static/icon/late02.png',
								activeIconPath: item.logo,
								width: '34rpx',
								height: '40rpx',
							}
						}
					})
					tempHotelList.map(item=>{
						item.distanceToMe=this.$utils.calcDistance(this.latitude,this.longitude,item.latitude,item.longitude).toFixed(1);
						return item;
					})
					this.hotelList.push(...tempHotelList)
					this.$refs.map.updateContent(tempHotelList, false);
					if(res.data.data.length >= 15){
						this.requestHotelPage(tempobj);
					}else if(this.beginConfig.hotel_id&&this.beginConfig.isBegin){
						let targetIndex = 0;
						
						for(const k in this.hotelList){
							if(this.hotelList[k].id == this.beginConfig.hotel_id){
								targetIndex = k;
								break;
							}
						}
						setTimeout(()=>{
							this.$refs.map.markertap(targetIndex, true, true);
						}, 1000)
					}
				})
			},
			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.geo.latitude&&this.geo.longitude){
					tempobj['latitude'] = this.geo.latitude;
					tempobj['longitude'] = this.geo.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,
								iconPath: '../../static/icon/late02.png',
								activeIconPath: item.logo,
								width: '34rpx',
								height: '40rpx',
							}
						}
					})
					this.hotelList.map((item,index)=>{
						item.distanceToMe = this.$utils.calcDistance(this.geo.latitude,this.geo.longitude,item.latitude,item.longitude).toFixed(1);
						return item;
					})
					this.$refs.map.updateContent(this.hotelList, true);
					if(res.data.data.length >= 15){
						this.requestHotelPage(tempobj)
					}else if(this.beginConfig.hotel_id&&this.beginConfig.isBegin){
						let targetIndex = 0;
						
						for(const k in this.hotelList){
							if(this.hotelList[k].id == this.beginConfig.hotel_id){
								targetIndex = k;
								break;
							}
						}
						setTimeout(()=>{
							this.$refs.map.markertap(targetIndex, true, true);
						}, 500)
					}
				})
			},
			mapRendered(){
				if((this.beginConfig.isBegin && !this.beginConfig.hotel_id)||this.search.isSearch){
					this.beginConfig.isBegin = false
					this.$refs.map.markertap(0,true,this.search.isSearch)
					this.search.isSearch = false
				}
			},
			//去预定页面
			goBook(index) {
				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(index){
				this.$refs.scrollHotel.setActiveIndex(index);
			},
			localToMark(markId,index){
				// this.moveToMarkId(markId)
				this.$refs.map.markertap({markerId: markId,index:index}, 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,index: this.scrollData.activeIndex}, false)
				this.scrollData.spa = true;
				setTimeout(()=>{
					this.scrollData.spa = false;
				}, 300)
			}, 
			updateMapIndex(index){
				this.$refs.map.markertap(index, false)
			},
			moveToTabX(e){
				this.scrollData.spa = true;
				this.scrolls.scrollX = (256 * this.scrollData.activeIndex+1) - (this.screenWidth-256)/2 + 'px';
				
				setTimeout(()=>{
					this.scrollData.spa = false;
				}, 500)
			},
			scrollTolower(index){
				this.$refs.map.markertap({index:index}, false)
				this.scrollData.spa = true;
				setTimeout(()=>{
					this.scrollData.spa = false;
				}, 10)
			},
			//获取当前页面路径
			getPageUrl() {
				const pages = getCurrentPages();
				if(pages.length==1){
					const currentPage = pages[0];
					let pageUrl = `/${currentPage.route}`;
					return pageUrl
				}else{
					const currentPage = pages[pages.length - 1];
					let pageUrl = `/${currentPage.route}`;
					return pageUrl
				}
			},
			
			// 跳转其他小程序
			jumpHAppID(id, urls) {
				if (id == 1) {
					const url = urls; // 跳转的外链
					const navtitle = 'H5'; // 这个标题是你自己可以设置的
					uni.navigateTo({
						// 跳转到webview页面
						url: `/pages/webview/webview?url=${url}&nav=${navtitle}`,
						success: () => {
							console.log('成功')
						},
						fail: (e) => {
							console.log(e, "失败")
						}
					});
				} else if (id == 2) {
					let _this = this
					let obj = urls;
					console.log(obj, '----->obj');
					wx.navigateToMiniProgram({
						appId: `${obj.appid}`, //appid
						path: `${obj.path}`, //path
						extraData: { //参数
							foo: 'bar'
						},
						// envVersion: 'develop', //开发版develop 开发版 trial   体验版 release 正式版 
						success(res) {
							let page = _this.getPageUrl()
							let user_id = ''
							if (_this.admin != null) {
								user_id = _this.admin.id
							} else {
								user_id = 0
							}
							_this.$api.my.userMemberAdd({
								user_id,
								page,
							}).then(res => {
								console.log(res.data);
							})
							// 打开成功
						},
						fail(e) {
							console.log(e, '失败')
						}
					})
				} else if (id == 3) {
					uni.redirectTo({
						url: urls,
						fail: (err) => {
							uni.reLaunch({
								url: urls
							})
						}
					})
				}
			},
			
			// 跳转其他小程序
			goJoin() {
				let _this = this
				this.jumpHAppID(this.jump_type, this.jump_config)
			},
			
		},
	}
</script>

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