修正：投票模块和数据模块，除地图筛选功能以外

components/hch-position/hch-position.vue

@@ -31,30 +31,33 @@
 			lPainter
 		},
 		props: {
-			
 			markers: {
 				type: Array,
 				default: [{
-						id: 1,
-						latitude: 30.6034799,
-						longitude: 104.1132550,
-						// iconPath: "../../static/hch-position/门店.png",
-						width: '38rpx',
-						height: '40rpx',
-						joinCluster: true, // 指定了该参数才会参与聚合
-						callout: {
-							content: "门店1号店",
-							borderRadius: 10,
-							padding: 5,
-							display: "ALWAYS",
-							transform: "tranlateY(20px)"
-						}
+						marker:{
+							id: 1,
+							latitude: 30.6034799,
+							longitude: 104.1132550,
+							// iconPath: "../../static/hch-position/门店.png",
+							width: '38rpx',
+							height: '40rpx',
+							joinCluster: true, // 指定了该参数才会参与聚合
+							callout: {
+								content: "门店1号店",
+								borderRadius: 10,
+								padding: 5,
+								display: "ALWAYS",
+								transform: "tranlateY(20px)"
+							}
+						},
 					},
 				]
 			}
 		},
 		data() {
 			return {
+				isisMarkering: false,
+				isActiveMarker: 0,
 				latitude: 30.6034799,
 				longitude: 104.1132550,
 				mapStyle: 1, //个性化地图
@@ -63,29 +66,28 @@
 				painter:{
 					wait: 0,
 					base:{
-						width: '94rpx',
-						height: '110rpx',
-						radius: "100rpx",
+						width: '42px',
+						height: '48px',
 						views:[
 							{
 								type: 'image',
 								src: '../../static/icon/late02.png',
 								css: {
-									left: '0rpx',
-									top: '0rpx',
-									width: '90rpx',
-									height: '100rpx',
+									left: '0px',
+									top: '0px',
+									width: '42px',
+									height: '48px',
 								}
 							},
 							{
 								type: 'image',
 								src: '',
 								css: {
-									left: '10rpx',
-									top: '8rpx',
-									width: '70rpx',
-									height: '70rpx',
-									borderRadius: '30rpx'
+									left: '3.5px',
+									top: '2px',
+									width: '35px',
+									height: '35px',
+									borderRadius: '17.5px'
 								}
 							}
 						]
@@ -142,33 +144,38 @@
 				})
 			},
 			//	点击标记点时触发，e.detail = {markerId}
-			markertap(e) {
-				this.markersIn.forEach((item,index) => {			
-					if(e.markerId === item.id){		
+			markertap(e, mode = true) {
+				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){
+						this.isActiveMarker = item.id;
+						item.iconPath = "";
+						item.width="34rpx";
+						item.height = "46rpx";
+						this.latitude = item.latitude
+						this.longitude = item.longitude
 						this.generateImg(item.active.iconPath).then(()=>{
+							// if(this.isActiveMarker != item.id) return;
 							item.width = item.active.width;
 							item.height = item.active.height;
 							item.iconPath = this.painter.path;
 							item.isActive = true;
-							console.log(item.latitude,item.longitude)
-							this.latitude = item.latitude
-							this.longitude = item.longitude
 							this.$set(this.markersIn, index, item);
-							this.addMarkers()
 						})
-						return;
-					}else if(item.isActive){
+						this.isUpdate = false
+						mode&&this.$emit('moveToMarkId',e.markerId)
+					}else if(item.isActive||item.iconPath != item.noActive.iconPath){
 						item.width = item.noActive.width;
 						item.height = item.noActive.height;
 						item.iconPath = item.noActive.iconPath;
 						item.isActive = false;
 						this.$set(this.markersIn, index, item);
-						this.addMarkers()
 					}
-				})				
-				
-				this.isUpdate = false
-				this.$emit('moveToMarkId',e.markerId)
+				})
 			},
 			//点击定位标时触发，e.detail = {longitude, latitude}
 			anchorpointtap(e) {
@@ -184,99 +191,16 @@
 				})
 			},
 		},
-
-		onShow() {
-			this.markersIn = this.markers;
-		},
 		watch:{
 			'markers': {
 				handler(val,oldVal) {
-					this.markersIn = this.markers;
+					this.markersIn = this.markers.map(item=>{
+					    return item.marker;
+					})
 				},
-				// immediate: true
-			}
+			},
 		}
 	}
 </script>
 
-<style lang="scss" scoped>
-	.content {
-		text-align: center;
-		height: 400rpx;
-	}
-
-	.page-section {
-		z-index: 0;
-	}
-
-	.store-tips {
-		width: 600rpx;
-		height: 100rpx;
-		margin: 10rpx auto;
-		border-radius: 10rpx;
-		position: absolute;
-		top: 10rpx;
-		left: 50%;
-		transform: translate(-50%, 0);
-		z-index: 2;
-		overflow: hidden;
-
-		.store-des-box {
-			background: #fff;
-		}
-
-		.store-img {
-			width: 80rpx;
-			height: 80rpx;
-			border-radius: 10rpx;
-			margin: 10rpx;
-			float: left;
-		}
-
-		.store-des {
-			padding-top: 8rpx;
-			float: left;
-			line-height: 1;
-			font-size: 22rpx;
-			color: #666;
-			padding-left: 20rpx;
-
-			.store-name {
-				font-weight: 600;
-				color: deeppink;
-			}
-		}
-
-		.store-clear {
-			width: 30rpx;
-			height: 30rpx;
-			position: absolute;
-			top: 7rpx;
-			right: 7rpx;
-			margin: 30rpx;
-		}
-	}
-
-	.address-icon {
-		width: 38rpx;
-		height: 40rpx;
-		position: absolute;
-		top: 22%;
-		left: 50%;
-		z-index: 2;
-		margin-bottom: -20rpx;
-		margin-left: -20rpx;
-	}
-
-	.near-num {
-		padding: 10rpx 20rpx;
-		border-radius: 10rpx;
-		position: absolute;
-		top: 17%;
-		left: 50%;
-		z-index: 2;
-		font-size: 24rpx;
-		background: #fff;
-		transform: translate(-50%, 0);
-	}
-</style>
+<style lang="scss" src="./hch.scss" scoped></style>

components/hch-position/hch.scss

@@ -0,0 +1,79 @@
+	.content {
+		text-align: center;
+		height: 400rpx;
+	}
+
+	.page-section {
+		z-index: 0;
+	}
+
+	.store-tips {
+		width: 600rpx;
+		height: 100rpx;
+		margin: 10rpx auto;
+		border-radius: 10rpx;
+		position: absolute;
+		top: 10rpx;
+		left: 50%;
+		transform: translate(-50%, 0);
+		z-index: 2;
+		overflow: hidden;
+
+		.store-des-box {
+			background: #fff;
+		}
+
+		.store-img {
+			width: 80rpx;
+			height: 80rpx;
+			border-radius: 10rpx;
+			margin: 10rpx;
+			float: left;
+		}
+
+		.store-des {
+			padding-top: 8rpx;
+			float: left;
+			line-height: 1;
+			font-size: 22rpx;
+			color: #666;
+			padding-left: 20rpx;
+
+			.store-name {
+				font-weight: 600;
+				color: deeppink;
+			}
+		}
+
+		.store-clear {
+			width: 30rpx;
+			height: 30rpx;
+			position: absolute;
+			top: 7rpx;
+			right: 7rpx;
+			margin: 30rpx;
+		}
+	}
+
+	.address-icon {
+		width: 38rpx;
+		height: 40rpx;
+		position: absolute;
+		top: 22%;
+		left: 50%;
+		z-index: 2;
+		margin-bottom: -20rpx;
+		margin-left: -20rpx;
+	}
+
+	.near-num {
+		padding: 10rpx 20rpx;
+		border-radius: 10rpx;
+		position: absolute;
+		top: 17%;
+		left: 50%;
+		z-index: 2;
+		font-size: 24rpx;
+		background: #fff;
+		transform: translate(-50%, 0);
+	}

pages/index/active-detail/index.vue

@@ -13,26 +13,6 @@
 		<!--投票数  -->
 		<view class="vote">
 			<view class="vote-detail">
-				<!-- 原版
-				<view class="vote-detail-top">
-					<text style="width: 80rpx; height: 2rpx; background-color: rgba(204, 204, 204, .7); "></text>
-					<view class="vote-detail-top-main">
-						<text>
-							距活动结束：
-						</text>
-						<view class="time">
-							<text>还剩</text>
-							<view class="shijian">{{countdownh}}</view>
-							<text>时</text>
-							<view class="shijian">{{countdownm}}</view>
-							<text>分</text>
-							<view class="shijian">{{countdowns}}</view>
-							<text>秒</text>							
-						</view>
-					</view>
-					<text style="width: 80rpx; height: 2rpx; background-color: rgba(204, 204, 204, .7); "></text>
-				</view>
-				-->
 				<!-- 改版 -->
 				<view class="vote-detail-top-main1">
 					<view>
@@ -293,7 +273,7 @@
 						uni.redirectTo({
 							url: "/pages/index/index"
 						})
-					}
+					} 
 				})
 			},
 

pages/map/hotel-book/index.vue

@@ -59,7 +59,7 @@
 					</view>
 					<text>会员</text>
 				</view>
-				<view class="hotel-btn-left-text">
+				<view class="hotel-btn-left-text"  @click="goLocaltion">
 					<view style="width: 48rpx;height: 48rpx;display: flex;align-items: center;justify-content: center;">
 						<image style=" width: 44rpx;height: 44rpx;" src="/static/icon/home03.png" mode=""></image>
 					</view>
@@ -100,7 +100,8 @@
 				},
 				//指示点显示位置
 				current1: 0,
-				mode: 'dot'
+				mode: 'dot',
+				hotel:{},
 			}
 		},
 		onReady: function(res) {
@@ -109,6 +110,7 @@
 
 		onLoad(o) {
 			if (o.hotel_id) {
+				this.hotel = o;
 				this.hotel_id = o.hotel_id
 				this.getDetail()
 			}
@@ -223,6 +225,17 @@
 				uni.reLaunch({
 					url: '/pages/index/index'
 				})
+			},
+			goLocaltion(){
+				console.log(this.hotel)
+				uni.openLocation({
+					type: "gcj02",
+					latitude: parseFloat(this.hotel.latitude), // 纬度，浮点数，范围为90 ~ -90
+					longitude: parseFloat(this.hotel.longitude), // 经度，浮点数，范围为180 ~ -180。
+					scale: 6, // 地图缩放级别,整形值,范围从1~28。默认为最大
+				        name: this.hotel.name, // 位置名
+				        address: this.hotel.address, // 地址详情说明
+				})
 			}
 		}
 	}

pages/map/map.scss

@@ -0,0 +1,523 @@
+page {
+		height: 100%;
+	}
+
+	.map {
+		height: 100%;
+		background-color: #f9f9f9;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.return-btn {
+		position: fixed;
+		right: 0;
+		top: 927rpx;
+		z-index: 99;
+	}
+
+	.home-bottom {
+		height: 60rpx;
+		background-color: #f9f9f9;
+	}
+
+	.hotel-list {
+		width: 100%;
+		background-color: #f9f9f9;
+		padding: 32rpx 30rpx;
+		padding-bottom: 200rpx;
+
+		.hotel-list-item {
+			width: 100%;
+			margin-bottom: 20rpx;
+
+			.wrap {
+				width: 100%;
+				height: 318rpx;
+				position: relative;
+				box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.08);
+				border-radius: 10rpx;
+
+				.inner {
+					width: 100%;
+					height: 318rpx;
+					border-radius: 10rpx;
+					position: absolute;
+					z-index: 2;
+					top: 0;
+					left: 0;
+
+					.address-detail-main {
+						position: absolute;
+						left: 0;
+						bottom: 30rpx;
+						width: 100%;
+						display: flex;
+						align-items: flex-end;
+						justify-content: space-between;
+
+						.address-detail-main-left {
+							position: absolute;
+							left: 20rpx;
+
+							.title {
+								font-size: 32rpx;
+								font-weight: bold;
+								color: #FFFFFF;
+							}
+
+							.content {
+								margin: 12rpx 0 20rpx;
+								width: 92rpx;
+								height: 34rpx;
+								background: rgba(142, 160, 166, .6);
+								border-radius: 17rpx;
+								color: #ffffff;
+								font-size: 22rpx;
+								display: flex;
+								align-items: center;
+								justify-content: center;
+							}
+
+							.bottom {
+								display: flex;
+								align-items: center;
+								justify-content: flex-start;
+
+								.bottom-left {
+									font-size: 24rpx;
+									font-weight: bold;
+									color: #ffffff;
+									margin-right: 6rpx;
+								}
+
+								.bottom-right {
+									font-size: 32rpx;
+									font-weight: bold;
+									color: #ffffff;
+								}
+							}
+						}
+
+						.address-detail-main-right {
+							position: absolute;
+							right: 24rpx;
+							width: 120rpx;
+							height: 44rpx;
+							background: #FF6300;
+							box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.08);
+							border-radius: 22rpx;
+							display: flex;
+							align-items: center;
+							justify-content: center;
+							color: #ffffff;
+							font-size: 28rpx;
+						}
+					}
+
+					.address-detail-position {
+						position: absolute;
+						top: 22rpx;
+						right: 24rpx;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						font-weight: 500;
+						color: #FFFFFF;
+						font-size: 20rpx;
+					}
+				}
+			}
+
+
+		}
+	}
+
+	.search-detail {
+		width: 100%;
+		position: absolute;
+		top: 88rpx;
+		z-index: 999 !important;
+		background-color: #ffffff;
+		box-shadow: 0px 12rpx 16rpx 0px rgba(220, 222, 229, 0.4);
+		padding: 20rpx 30rpx 20rpx;
+
+		.partner {
+			.partner-top {
+				height: 88rpx;
+				border-top: 2rpx solid #F0F0F0;
+				border-bottom: 2rpx solid #F0F0F0;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				color: #333;
+				font-size: 28rpx;
+			}
+
+			.partner-main {
+				margin-top: 32rpx;
+
+				::v-deep .uni-data-checklist .checklist-group .checklist-box {
+					width: 26%;
+				}
+
+				::v-deep .uni-data-checklist .checklist-group .checklist-box .checkbox__inner {
+					width: 48rpx;
+					height: 48rpx;
+				}
+
+				::v-deep .uni-data-checklist .checklist-group .checklist-box .checkbox__inner .checkbox__inner-icon {
+					top: 6rpx !important;
+					left: 17rpx !important;
+					height: 24rpx !important;
+					width: 15rpx !important;
+					border-right-color: #ff6200;
+					border-bottom-color: #ff6200;
+				}
+
+				::v-deep .uni-data-checklist .checklist-group .checklist-box.is--default.is-checked .checklist-text {
+					color: #666 !important;
+					font-size: 24rpx !important;
+				}
+
+				::v-deep .checklist-text {
+					font-size: 24rpx !important;
+				}
+
+				::v-deep .uni-data-checklist .checklist-group .checklist-box.is--default.is-checked .checkbox__inner {
+					border-color: #EDEDED !important;
+					background-color: #ffffff;
+				}
+			}
+		}
+
+		.search-detail-area {
+			width: 100%;
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: flex-start;
+			align-items: center;
+
+			.areaTitle {
+				width: 156rpx;
+				height: 56rpx;
+				background: #FFFFFF;
+				border: 2rpx solid #EDEDED;
+				border-radius: 28rpx;
+				font-size: 28rpx;
+				color: #666;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				margin-right: 20rpx;
+				margin-bottom: 18rpx;
+
+				&:nth-child(4n) {
+					margin-right: 0;
+				}
+			}
+
+			// .areaTitle-item {
+			// 	width: 156rpx;
+			// 	height: 56rpx;
+			// 	background-color: #F1F1F1;
+			// 	border-radius: 26rpx;
+			// 	font-size: 24rpx;
+			// 	color: #999;
+			// 	display: flex;
+			// 	justify-content: center;
+			// 	align-items: center;
+			// }
+			.active-area {
+				width: 156rpx;
+				height: 56rpx;
+				border-radius: 28rpx;
+				background-color: #FF6200;
+				color: #fff;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
+		}
+
+		.search-detail-btn {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			margin: 38rpx 0 20rpx;
+
+			.search-detail-btn-left {
+				flex: 1;
+				height: 76rpx;
+				background: rgba(237, 237, 237, .55);
+				border-radius: 8rpx;
+				color: #999999;
+				font-size: 30rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				font-weight: bold;
+
+			}
+
+			.search-detail-btn-right {
+				flex: 1;
+				height: 76rpx;
+				background: linear-gradient(270deg, #FF6200 0%, #FF9342 100%);
+				border-radius: 8rpx;
+				color: #FFFFFF;
+				font-size: 30rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				margin-left: 22rpx;
+				font-weight: bold;
+			}
+
+		}
+
+		::v-deep .u-input {
+			width: 690rpx !important;
+			height: 68rpx !important;
+			background: #F1F1F1;
+			border-radius: 74rpx;
+		}
+
+		::v-deep .u-input__content__field-wrapper {
+			padding-left: 36rpx;
+		}
+	}
+
+
+	.search-top {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	.search {
+		position: relative;
+		flex: none;
+		width: 100%;
+		background: #FFFFFF;
+		box-shadow: 0px 12rpx 16rpx 0px rgba(220, 222, 229, 0.4);
+		display: flex;
+		flex-direction: column;
+		align-items: inherit;
+		justify-content: space-between;
+
+		.search-loupe {
+			flex: none;
+			width: 60rpx;
+			height: 60rpx;
+			background: #FFFFFF;
+			border-radius: 50%;
+			border: 2rpx solid #EDEDED;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			margin-right: 16rpx;
+		}
+
+		.search-area-all {
+			flex: 1;
+			display: flex;
+			align-items: center;
+			justify-content: flex-start;
+
+			.search-areaClick {
+				padding: 12rpx 22rpx;
+				height: 52rpx;
+				background: #FFFFFF;
+				border-radius: 26rpx;
+				border: 2rpx solid #FF6200;
+				font-weight: 500;
+				color: #FF6200;
+				font-size: 28rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				margin-right: 16rpx;
+
+				text {
+					margin-right: 8rpx;
+				}
+			}
+
+			.search-area {
+				padding: 12rpx 22rpx;
+				height: 52rpx;
+				background: #FFFFFF;
+				border-radius: 26rpx;
+				border: 2rpx solid #EDEDED;
+				font-weight: 500;
+				color: #666666;
+				font-size: 28rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				margin-right: 16rpx;
+
+				text {
+					margin-right: 8rpx;
+				}
+			}
+		}
+
+	}
+
+	.address-nav {
+		position: absolute;
+		width: 100%;
+		bottom: 34rpx;
+		padding: 0 8px;
+		// display: flex;
+		// flex-direction: column;
+		// align-items: center;
+		// justify-content: space-between;
+		overflow-x: scroll;
+
+		.address-nav-btn {
+			width: 100%;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+		}
+		
+		.address-nav-button{
+			position: fixed;
+			bottom: 450rpx;
+			
+			&:first-child{
+				left:16rpx;
+			}
+			&:last-child{
+				right:16rpx;
+			}
+		}
+	}
+
+	.address {
+		flex: 1;
+		position: relative;
+		
+
+		.address-detail {
+			display: inline-block;
+			position: relative;
+			flex: none;
+			width: 248px;
+			height: 318rpx;
+			border-radius: 10rpx;
+			margin-right: 8px;
+
+			&:last-child {
+				margin-right: 0rpx;
+			}
+			
+			.mark{
+				height: inherit;
+				width: inherit;
+				
+				image{
+					width: 100%;
+					height:100%;
+					border-radius: 10rpx;
+				}
+			}
+
+			.inner {
+				width: 100%;
+				height: inherit;
+				border-radius: 10rpx;
+				position: absolute;
+				z-index: 2;
+				top: 0;
+				left: 0;
+
+				.address-detail-main {
+					position: absolute;
+					left: 0;
+					bottom: 30rpx;
+					width: 100%;
+					display: flex;
+					align-items: flex-end;
+					justify-content: space-between;
+					
+
+					.address-detail-main-left {
+						position: absolute;
+						left: 20rpx;
+
+						.title {
+							font-size: 32rpx;
+							font-weight: bold;
+							color: #FFFFFF;
+						}
+
+						.content {
+							margin: 12rpx 0 20rpx;
+							width: 92rpx;
+							height: 34rpx;
+							background: rgba(142, 160, 166, .6);
+							border-radius: 17rpx;
+							color: #ffffff;
+							font-size: 22rpx;
+							display: flex;
+							align-items: center;
+							justify-content: center;
+						}
+
+						.bottom {
+							display: flex;
+							align-items: center;
+							justify-content: flex-start;
+
+							.bottom-left {
+								font-size: 24rpx;
+								font-weight: bold;
+								color: #ffffff;
+								margin-right: 6rpx;
+							}
+
+							.bottom-right {
+								font-size: 32rpx;
+								font-weight: bold;
+								color: #ffffff;
+							}
+						}
+					}
+
+					.address-detail-main-right {
+						position: absolute;
+						right: 24rpx;
+						width: 120rpx;
+						height: 44rpx;
+						background: #FF6300;
+						box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.08);
+						border-radius: 22rpx;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						color: #ffffff;
+						font-size: 28rpx;
+					}
+
+				}
+
+				.address-detail-position {
+					position: absolute;
+					top: 22rpx;
+					right: 24rpx;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					font-weight: 500;
+					color: #FFFFFF;
+					font-size: 20rpx;
+				}
+			}
+
+
+		}
+	}

pages/map/map.vue

@@ -132,11 +132,12 @@
 			</view>
 
 		</view>
-		<view class="address" v-if="isShow">
+		<view class="address">
 			<view style="height:1232rpx;">
-				<hch-position ref="map" :markers="markers" @moveToMarkId="moveToMarkId"/>
+				<hch-position ref="map" :markers="hotelList" @moveToMarkId="moveToMarkId"/>
 			</view>
-			<view class="address-nav" style="overflow-x: visible;">
+			<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>
@@ -145,11 +146,14 @@
 						<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% + 32rpx);height:318rpx;white-space: nowrap;" :scroll-x="true" :scroll-left="scrolls.scrollX" :scroll-with-animation="true">
-					<view style="width: 16rpx;display: inline-block;"></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=""
@@ -162,29 +166,35 @@
 									<view class="content">
 										<text>{{item.label}}</text>
 									</view>
-									<view class="bottom">
+									<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(item.id)">
+								<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.distance}}km</text>
+								<text style="margin-left:4rpx ;">{{item.distanceToMe}}km</text>
 							</view>
 						</view>
 					</view>
-					<view style="width: 1rpx;display: inline-block;"></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" v-if="!isShow">
+		<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">
@@ -198,18 +208,18 @@
 								<view class="content">
 									<text>{{item.label}}</text>
 								</view>
-								<view class="bottom">
+								<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(item.id)">
+							<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.distance}}km</text>
+							<text style="margin-left:4rpx ;">{{item.distanceToMe}}km</text>
 						</view>
 					</view>
 				</view>
@@ -329,12 +339,21 @@
 				isPartner: false,
 				//是否展示加盟品牌
 				isJoin: false,
+				//滚动参数
+				scrollData:{
+					spa: false
+				},
 			}
 		},
 		onLoad() {
 			//获取经纬度
 			this.updated()
 			this.getHotelCategory()
+			uni.getSystemInfo({
+				success:(res)=>{
+					this.screenWidth = res.screenWidth
+				}
+			})
 		},
 		methods: {
 			//获取筛选数据
@@ -375,35 +394,9 @@
 						_this.getList()
 					},
 					fail: function(res) {
-						console.log(res)
 					}
 				})
-			},
-			//计算酒店距离我的位置--int
-			calcDistanceFromHotel({x0,y0},{x1,y1}){
-				//x0,y0是我的坐标(经纬度)
-				//x1,y1是酒店坐标(经纬度)
-				// console.log(x0,y0,x1,y1);
-				return this.space(x0,y0,x1,y1);
-				return Math.sqrt(Math.pow(Math.abs(x1-x0),2)+Math.pow(Math.abs(y1-y0),2));//返回距离
-			},
-			//遍历所有酒店,并计算出酒店分别与我的距离--数组
-			setEachHotelDistance(hotelArray=[],{x0,y0}){
-				hotelArray.map(item=>{
-					item.distanceToMe=this.calcDistanceFromHotel({x0,y0},{x1:item.longitude,y1:item.latitude})
-					return item;
-				})
-				return hotelArray;
-				
-			},
-			//筛选出距离我最近的酒店--对象
-			getMinDistanceHotel({x0,y0}){
-				this.markers=this.setEachHotelDistance(this.markers,{x0,y0});
-				// this.markers.sort((prev,next)=>{
-				// 	return prev.distanceToMe-next.distanceToMe;
-				// })
-				return this.markers[0];
-			},
+			},			
 			space(lat1, lng1, lat2, lng2) {
 			  var radLat1 = lat1 * Math.PI / 180.0;
 			  var radLat2 = lat2 * Math.PI / 180.0;
@@ -420,54 +413,60 @@
 				this.$api.hotel.getHotelList({
 					page: 1
 				}).then(res => {
-					// this.hotelListBase = res.data.data
-					// this.hotelList = []
-					// this.hotelListBase.forEach(item=>{
-					// 	if(this.search.isActiveIds.find(item.category_id)){
-					// 		this.hotelList.push(item)
-					// 	}
-					// })
-					this.hotelList = res.data.data
-					this.markers = this.hotelList.map(item=>{
-						const distance =this.calcDistanceFromHotel({x0:this.latitude, y0:this.longitude}, {x1:item.latitude,y1:item.longitude}).toFixed(1);
-						item.distance = distance;
+					this.hotelList = res.data.data.map(item=>{
 						return {
-							id:item.id,
-							latitude: item.latitude,
-							longitude: item.longitude,
-							width:'34rpx',
-							height:'40rpx',
-							iconPath:'../../static/icon/late02.png' ,
-							distance: distance,
-							active: {
-								width: '90rpx',
-								height: '100rpx',
-								iconPath: item.logo,
-							},
-							noActive:{
+							...item, 
+							marker:{
+								id:item.id,
+								latitude: item.latitude,
+								longitude: item.longitude,
 								width:'34rpx',
 								height:'40rpx',
 								iconPath:'../../static/icon/late02.png' ,
-							},
-							callout1: {
-								content:item.name,
-								borderRadius: 10,
-								padding: 10,
-								display: "ALWAYS",
-							}	
+								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",
+								},
+							}
 						}
 					})
-					console.log(this.markers, '----->markers')
-					let mylongitude = this.longitude
-					let mylatitude = this.latitude
-					let a = this.getMinDistanceHotel({x0:mylongitude,y0:mylatitude})
-					console.log(a,'----->最近酒店');
+					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(id) {
+			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='+id
+					url: `/pages/map/hotel-book/index?hotel_id=${hotel.id}&latitude=${hotel.latitude}&longitude=${hotel.longitude}&name=${hotel.name}&address=${hotel.address}`
 				})
 			},
 			//返回上一级
@@ -476,7 +475,6 @@
 			},
 			//打开酒店列表
 			goHotelList() {
-				console.log(111);
 				this.isShow = !this.isShow
 			},
 			//是否展示加盟品牌
@@ -489,7 +487,6 @@
 			},
 			//合作伙伴刷选
 			change(e) {
-				console.log('e:', e);
 			},
 			//菜单index切换
 			checked(id,categoreName) {
@@ -518,528 +515,37 @@
 			},
 			//下面酒店位移
 			moveToMarkId(markId){
-				this.markers.forEach((item,index) => {
+				this.hotelList.forEach((item,index) => {
 					if(markId == item.id){
-						this.scrolls.scrollX = ((496+16) * index) + 'rpx';
+						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" scoped>
-	page {
-		height: 100%;
-	}
-
-	.map {
-		height: 100%;
-		background-color: #f9f9f9;
-		display: flex;
-		flex-direction: column;
-	}
-
-	.return-btn {
-		position: fixed;
-		right: 0;
-		top: 927rpx;
-		z-index: 99;
-	}
-
-	.home-bottom {
-		height: 60rpx;
-		background-color: #f9f9f9;
-	}
-
-	.hotel-list {
-		width: 100%;
-		background-color: #f9f9f9;
-		padding: 32rpx 30rpx;
-		padding-bottom: 200rpx;
-
-		.hotel-list-item {
-			width: 100%;
-			margin-bottom: 20rpx;
-
-			.wrap {
-				width: 100%;
-				height: 318rpx;
-				position: relative;
-				box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.08);
-				border-radius: 10rpx;
-
-				.inner {
-					width: 100%;
-					height: 318rpx;
-					border-radius: 10rpx;
-					position: absolute;
-					z-index: 2;
-					top: 0;
-					left: 0;
-
-					.address-detail-main {
-						position: absolute;
-						left: 0;
-						bottom: 30rpx;
-						width: 100%;
-						display: flex;
-						align-items: flex-end;
-						justify-content: space-between;
-
-						.address-detail-main-left {
-							position: absolute;
-							left: 20rpx;
-
-							.title {
-								font-size: 32rpx;
-								font-weight: bold;
-								color: #FFFFFF;
-							}
-
-							.content {
-								margin: 12rpx 0 20rpx;
-								width: 92rpx;
-								height: 34rpx;
-								background: rgba(142, 160, 166, .6);
-								border-radius: 17rpx;
-								color: #ffffff;
-								font-size: 22rpx;
-								display: flex;
-								align-items: center;
-								justify-content: center;
-							}
-
-							.bottom {
-								display: flex;
-								align-items: center;
-								justify-content: flex-start;
-
-								.bottom-left {
-									font-size: 24rpx;
-									font-weight: bold;
-									color: #ffffff;
-									margin-right: 6rpx;
-								}
-
-								.bottom-right {
-									font-size: 32rpx;
-									font-weight: bold;
-									color: #ffffff;
-								}
-							}
-						}
-
-						.address-detail-main-right {
-							position: absolute;
-							right: 24rpx;
-							width: 120rpx;
-							height: 44rpx;
-							background: #FF6300;
-							box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.08);
-							border-radius: 22rpx;
-							display: flex;
-							align-items: center;
-							justify-content: center;
-							color: #ffffff;
-							font-size: 28rpx;
-						}
-					}
-
-					.address-detail-position {
-						position: absolute;
-						top: 22rpx;
-						right: 24rpx;
-						display: flex;
-						align-items: center;
-						justify-content: center;
-						font-weight: 500;
-						color: #FFFFFF;
-						font-size: 20rpx;
-					}
-				}
-			}
-
-
-		}
-	}
-
-	.search-detail {
-		width: 100%;
-		position: absolute;
-		top: 88rpx;
-		z-index: 999 !important;
-		background-color: #ffffff;
-		box-shadow: 0px 12rpx 16rpx 0px rgba(220, 222, 229, 0.4);
-		padding: 20rpx 30rpx 20rpx;
-
-		.partner {
-			.partner-top {
-				height: 88rpx;
-				border-top: 2rpx solid #F0F0F0;
-				border-bottom: 2rpx solid #F0F0F0;
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-				color: #333;
-				font-size: 28rpx;
-			}
-
-			.partner-main {
-				margin-top: 32rpx;
-
-				::v-deep .uni-data-checklist .checklist-group .checklist-box {
-					width: 26%;
-				}
-
-				::v-deep .uni-data-checklist .checklist-group .checklist-box .checkbox__inner {
-					width: 48rpx;
-					height: 48rpx;
-				}
-
-				::v-deep .uni-data-checklist .checklist-group .checklist-box .checkbox__inner .checkbox__inner-icon {
-					top: 6rpx !important;
-					left: 17rpx !important;
-					height: 24rpx !important;
-					width: 15rpx !important;
-					border-right-color: #ff6200;
-					border-bottom-color: #ff6200;
-				}
-
-				::v-deep .uni-data-checklist .checklist-group .checklist-box.is--default.is-checked .checklist-text {
-					color: #666 !important;
-					font-size: 24rpx !important;
-				}
-
-				::v-deep .checklist-text {
-					font-size: 24rpx !important;
-				}
-
-				::v-deep .uni-data-checklist .checklist-group .checklist-box.is--default.is-checked .checkbox__inner {
-					border-color: #EDEDED !important;
-					background-color: #ffffff;
-				}
-			}
-		}
-
-		.search-detail-area {
-			width: 100%;
-			display: flex;
-			flex-wrap: wrap;
-			justify-content: flex-start;
-			align-items: center;
-
-			.areaTitle {
-				width: 156rpx;
-				height: 56rpx;
-				background: #FFFFFF;
-				border: 2rpx solid #EDEDED;
-				border-radius: 28rpx;
-				font-size: 28rpx;
-				color: #666;
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				margin-right: 20rpx;
-				margin-bottom: 18rpx;
-
-				&:nth-child(4n) {
-					margin-right: 0;
-				}
-			}
-
-			// .areaTitle-item {
-			// 	width: 156rpx;
-			// 	height: 56rpx;
-			// 	background-color: #F1F1F1;
-			// 	border-radius: 26rpx;
-			// 	font-size: 24rpx;
-			// 	color: #999;
-			// 	display: flex;
-			// 	justify-content: center;
-			// 	align-items: center;
-			// }
-			.active-area {
-				width: 156rpx;
-				height: 56rpx;
-				border-radius: 28rpx;
-				background-color: #FF6200;
-				color: #fff;
-				display: flex;
-				justify-content: center;
-				align-items: center;
-			}
-		}
-
-		.search-detail-btn {
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			margin: 38rpx 0 20rpx;
-
-			.search-detail-btn-left {
-				flex: 1;
-				height: 76rpx;
-				background: rgba(237, 237, 237, .55);
-				border-radius: 8rpx;
-				color: #999999;
-				font-size: 30rpx;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				font-weight: bold;
-
-			}
-
-			.search-detail-btn-right {
-				flex: 1;
-				height: 76rpx;
-				background: linear-gradient(270deg, #FF6200 0%, #FF9342 100%);
-				border-radius: 8rpx;
-				color: #FFFFFF;
-				font-size: 30rpx;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				margin-left: 22rpx;
-				font-weight: bold;
-			}
-
-		}
-
-		::v-deep .u-input {
-			width: 690rpx !important;
-			height: 68rpx !important;
-			background: #F1F1F1;
-			border-radius: 74rpx;
-		}
-
-		::v-deep .u-input__content__field-wrapper {
-			padding-left: 36rpx;
-		}
-	}
-
-
-	.search-top {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-	}
-
-	.search {
-		position: relative;
-		flex: none;
-		width: 100%;
-		background: #FFFFFF;
-		box-shadow: 0px 12rpx 16rpx 0px rgba(220, 222, 229, 0.4);
-		display: flex;
-		flex-direction: column;
-		align-items: inherit;
-		justify-content: space-between;
-
-		.search-loupe {
-			flex: none;
-			width: 60rpx;
-			height: 60rpx;
-			background: #FFFFFF;
-			border-radius: 50%;
-			border: 2rpx solid #EDEDED;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			margin-right: 16rpx;
-		}
-
-		.search-area-all {
-			flex: 1;
-			display: flex;
-			align-items: center;
-			justify-content: flex-start;
-
-			.search-areaClick {
-				padding: 12rpx 22rpx;
-				height: 52rpx;
-				background: #FFFFFF;
-				border-radius: 26rpx;
-				border: 2rpx solid #FF6200;
-				font-weight: 500;
-				color: #FF6200;
-				font-size: 28rpx;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				margin-right: 16rpx;
-
-				text {
-					margin-right: 8rpx;
-				}
-			}
-
-			.search-area {
-				padding: 12rpx 22rpx;
-				height: 52rpx;
-				background: #FFFFFF;
-				border-radius: 26rpx;
-				border: 2rpx solid #EDEDED;
-				font-weight: 500;
-				color: #666666;
-				font-size: 28rpx;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				margin-right: 16rpx;
-
-				text {
-					margin-right: 8rpx;
-				}
-			}
-		}
-
-	}
-
-	.address-nav {
-		position: absolute;
-		width: 100%;
-		bottom: 34rpx;
-		padding: 0 16rpx;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: space-between;
-		overflow-x: scroll;
-
-		.address-nav-btn {
-			width: 100%;
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-		}
-
-	}
-
-	.address {
-		flex: 1;
-		position: relative;
-		
-
-		.address-detail {
-			display: inline-block;
-			position: relative;
-			flex: none;
-			width: 496rpx;
-			height: 318rpx;
-			border-radius: 10rpx;
-			margin-right: 16rpx;
-
-			&:last-child {
-				margin-right: 0rpx;
-			}
-			
-			.mark{
-				height: inherit;
-				width: inherit;
-				
-				image{
-					width: 100%;
-					height:100%;
-					border-radius: 10rpx;
-				}
-			}
-
-			.inner {
-				width: 100%;
-				height: inherit;
-				border-radius: 10rpx;
-				position: absolute;
-				z-index: 2;
-				top: 0;
-				left: 0;
-
-				.address-detail-main {
-					position: absolute;
-					left: 0;
-					bottom: 30rpx;
-					width: 100%;
-					display: flex;
-					align-items: flex-end;
-					justify-content: space-between;
-					
-
-					.address-detail-main-left {
-						position: absolute;
-						left: 20rpx;
-
-						.title {
-							font-size: 32rpx;
-							font-weight: bold;
-							color: #FFFFFF;
-						}
-
-						.content {
-							margin: 12rpx 0 20rpx;
-							width: 92rpx;
-							height: 34rpx;
-							background: rgba(142, 160, 166, .6);
-							border-radius: 17rpx;
-							color: #ffffff;
-							font-size: 22rpx;
-							display: flex;
-							align-items: center;
-							justify-content: center;
-						}
-
-						.bottom {
-							display: flex;
-							align-items: center;
-							justify-content: flex-start;
-
-							.bottom-left {
-								font-size: 24rpx;
-								font-weight: bold;
-								color: #ffffff;
-								margin-right: 6rpx;
-							}
-
-							.bottom-right {
-								font-size: 32rpx;
-								font-weight: bold;
-								color: #ffffff;
-							}
-						}
-					}
-
-					.address-detail-main-right {
-						position: absolute;
-						right: 24rpx;
-						width: 120rpx;
-						height: 44rpx;
-						background: #FF6300;
-						box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.08);
-						border-radius: 22rpx;
-						display: flex;
-						align-items: center;
-						justify-content: center;
-						color: #ffffff;
-						font-size: 28rpx;
-					}
-
-				}
-
-				.address-detail-position {
-					position: absolute;
-					top: 22rpx;
-					right: 24rpx;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					font-weight: 500;
-					color: #FFFFFF;
-					font-size: 20rpx;
-				}
-			}
-
-
-		}
-	}
-</style>
+<style lang="scss" src="./map.scss" scoped></style>