地图筛选，参数跳转功能

components/hch-position/hch-position.vue

@@ -121,11 +121,7 @@
 			},
 			//生成图片
 			generateImg(imgUrl){
-				if(this.painter.wait != 0) return new Promise();
-				// this.painter.show = false;
-				// this.painter.base.views[1].src = "https://zhengda.oss-cn-chengdu.aliyuncs.com/golf/images/15.png";
 				this.painter.base.views[1].src = imgUrl;
-				// this.painter.show = true;
 				this.painter.wait = 1;
 				
 				return new Promise(resolve=>{
@@ -145,19 +141,20 @@
 			},
 			//	点击标记点时触发，e.detail = {markerId}
 			markertap(e, mode = true) {
-				if(this.isActiveMarker === e.markerId || this.isMarkering) return;	
+				if(this.isActiveMarker === e.markerId || this.isMarkering) return;
 				this.isMarkering = true;
 				setTimeout(()=>{
 					this.isMarkering = false
 				}, 200)
 				this.markersIn.forEach((item,index) => {
-					if(e.markerId === item.id){
+					if(e.markerId == item.id){
 						this.isActiveMarker = item.id;
 						item.iconPath = "";
 						item.width="34rpx";
 						item.height = "46rpx";
 						this.latitude = item.latitude
 						this.longitude = item.longitude
+						if(this.painter.wait != 0) return;
 						this.generateImg(item.active.iconPath).then(()=>{
 							// if(this.isActiveMarker != item.id) return;
 							item.width = item.active.width;

main.js

@@ -6,6 +6,7 @@ import uView from "uview-ui";
 // vuex store
 import store from './store'
 import mixin from './utils/mixin'
+import tools from './utils/tools'
 let mpShare = require('uview-ui/libs/mixin/mpShare.js');
 Vue.mixin(mpShare)
 // Vue.prototype.$store = store
@@ -13,6 +14,11 @@ Vue.use(uView);
 Vue.mixin(mixin)
 
 Vue.config.productionTip = false
+
+Vue.prototype.$utils = {
+	...tools
+}
+
 App.mpType = 'app'
 const app = new Vue({
 	store,

pages/map/map.scss

@@ -26,6 +26,7 @@ page {
 		background-color: #f9f9f9;
 		padding: 32rpx 30rpx;
 		padding-bottom: 200rpx;
+		margin-top: 150rpx;
 
 		.hotel-list-item {
 			width: 100%;

pages/map/map.vue

@@ -56,10 +56,10 @@
 					</view>
 				</view>
 				<view class="search-detail-btn">
-					<view class="search-detail-btn-left">
+					<view class="search-detail-btn-left" @click="cancelSearch">
 						<text>取消</text>
 					</view>
-					<view class="search-detail-btn-right" @click="toSearchList">
+					<view class="search-detail-btn-right" @click="toSearchList()">
 						<text>确认</text>
 					</view>
 				</view>
@@ -74,10 +74,10 @@
 					</view>
 				</view>
 				<view class="search-detail-btn">
-					<view class="search-detail-btn-left">
+					<view class="search-detail-btn-left" @click="cancelSearch">
 						<text>取消</text>
 					</view>
-					<view class="search-detail-btn-right" @click="toSearchList">
+					<view class="search-detail-btn-right" @click="toSearchList()">
 						<text>确认</text>
 					</view>
 				</view>
@@ -118,10 +118,10 @@
 					</view>
 
 					<view class="search-detail-btn">
-						<view class="search-detail-btn-left">
+						<view class="search-detail-btn-left" @click="cancelSearch">
 							<text>取消</text>
 						</view>
-						<view class="search-detail-btn-right" @click="toSearchList">
+						<view class="search-detail-btn-right" @click="toSearchList()">
 							<text>确认</text>
 						</view>
 					</view>
@@ -148,9 +148,15 @@
 				<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;" 
-					@scroll="bottomScroll"  @scrolltolower="scrollTolower"
-				 :scroll-x="true" :scroll-left="scrolls.scrollX" :scroll-with-animation="true">
+					@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">
@@ -267,47 +273,6 @@
 				//是否展示地图
 				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: "",
@@ -339,11 +304,23 @@
 				isJoin: false,
 				//滚动参数
 				scrollData:{
-					spa: false
+					direct: -1,
+					isScroll:false,
+					spa: false,
+					activeIndex:0
 				},
+				beginConfig:{
+					first: true,
+					hotel_id: 0
+				}
 			}
 		},
-		onLoad() {
+		onLoad(e) {
+			const {hotel_id,category_ids} = e;
+			this.beginConfig.hotel_id = hotel_id;
+			if(category_ids){
+				this.search.isActiveIds = category_ids.split(",")
+			}
 			//获取经纬度
 			this.getHotelCategory()
 			uni.getSystemInfo({
@@ -364,9 +341,6 @@
 										
 					this.updated()
 				})
-			},
-			getArround(){
-				
 			},
 			goLocation(){
 				let _this = this
@@ -393,9 +367,8 @@
 						_this.latitude = res.latitude
 						_this.longitude = res.longitude
 						_this.$refs.map.goLocation(res.latitude,res.longitude)
-						_this.toSearchList(_this.latitude,_this.longitude)
+						_this.toSearchList()
 						//获取酒店列表
-						_this.getList()
 					},
 					fail: function(res) {
 					}
@@ -410,24 +383,40 @@
 					 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  // 单位千米
+			  return s;
 			},
 			//-------------------------------------
 			//菜单index切换
 			checked(id,categoreName) {
 				this.search[categoreName] = id;
 			},
-			toSearchList(latitude, longitude){
-				this.search.isActiveIds = [this.search.area,this.search.brand,...this.search.coop,...this.search.league]
-				this.getList({latitude: latitude, longitude: longitude});
+			toSearchList(param={}){
+				if(this.beginConfig.first){
+					this.beginConfig.first = false;
+					this.getList(param);
+					return;
+				}
+				this.isSelectArea = true
+				this.isSelectBrand = true
+				this.isSelectSift = true
+				this.search.isActiveIds = [...this.search.coop,...this.search.league]
+				this.search.area && this.search.isActiveIds.push(this.search.area)
+				this.search.brand && this.search.isActiveIds.push(this.search.brand)
+				this.getList(param);
 			},
 			getList(param={}) {
+				const tempobj = {};
+				if(this.search.isActiveIds.length){
+					tempobj['category_ids[0]'] = this.search.isActiveIds;
+				}
 				this.$api.hotel.getHotelList({
 					page: 1,
-					// 'category_ids[0]':this.search.isActiveIds,
+					...tempobj,
 					...param
 				}).then(res => {
+					
 					this.hotelList = res.data.data.map(item=>{
+						item.logo = this.$utils.toHttps(item.logo);
 						return {
 							...item, 
 							marker:{
@@ -456,6 +445,7 @@
 							}
 						}
 					})
+					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;
@@ -463,11 +453,15 @@
 					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})	
+						if(this.beginConfig.hotel_id==0){
+							this.$refs.map.markertap({markerId: this.hotelList[0].id})	
+						}else{	
+							this.localToMark(this.beginConfig.hotel_id);
+							// this.$refs.map.markertap({markerId: this.beginConfig.hotel_id})	
+							this.beginConfig.hotel_id = 0
+						}
 					}, 300)
-
 				})
 			},
 			//去预定页面
@@ -521,6 +515,11 @@
 				this.isSelectBrand = true
 				this.isSelectArea = true
 			},
+			cancelSearch(){
+				this.isSelectSift = true
+				this.isSelectBrand = true
+				this.isSelectArea = true
+			},
 			//下面酒店位移
 			moveToMarkId(markId){
 				this.hotelList.forEach((item,index) => {
@@ -534,17 +533,31 @@
 					} 
 				})
 			},
+			localToMark(markId){
+				// this.moveToMarkId(markId)
+				this.$refs.map.markertap({markerId: markId}, true)
+			},
 			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.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;

setting.js

@@ -1,7 +1,7 @@
 /**
  * Created by JianJia.Zhou<jianjia.zhou> on 2022/3/18.
  */
-const IS_DEV = process.env.NODE_ENV === 'development1'
+const IS_DEV = process.env.NODE_ENV === 'development'
 // const URL = 'https://t9.9026.com'
 const URL = 'https://ihg.9026.com'
 

utils/tools.js

@@ -0,0 +1,13 @@
+/**
+ * http转https
+ */
+const toHttps = (url)=>{
+	if(url.indexOf('http')>-1 && url.indexOf('https') == -1){
+		url = url.replace('http', 'https');
+	}
+	return url;
+}
+
+export default {
+	toHttps
+}