邓洁 : 地图

pages/index/map/map.vue

@@ -8,9 +8,12 @@
 			</view>
 		</view>
 		<view class="content">
-			<map id="map" @markertap="markerClick" class="map" :markers="marker" :show-location="true" :latitude="lat"
+			<map id="map" @markertap="markerClick" :markers="marker" :show-location="true" :latitude="lat"
 				:longitude="lng"></map>
 		</view>
+		<view class="down-shop">
+			<ShowShopListItem :shopInfo="shopList"></ShowShopListItem>
+		</view>
 	</view>
 </template>
 
@@ -18,23 +21,39 @@
 	export default {
 		data() {
 			return {
-				lat: '30.57',
-				lng: '104.07',
-				marker: []
+				lat: '30.48772',
+				lng: '104.080145',
+				marker: [{
+						id: 1,
+						latitude: 30.488573,
+						longitude: 104.081248,
+						iconPath: '../../../static/map/sp_icon_dw.png',
+						width: '58rpx',
+						height: '72rpx',
+						rotate: 0,
+						alpha: 1
+					},
+					{
+						id: 2,
+						latitude: 30.48772,
+						longitude: 104.080145,
+						// iconPath: '../../../static/map/sp_icon_dw.png',
+						width: '58rpx',
+						height: '72rpx',
+						rotate: 0,
+						alpha: 1
+					}
+				],
+				shopList: {
+					imageUrl: 'https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg',
+					title: '琴行铺面转让',
+					promotionNum: 23,
+					price: 5000,
+					date: '2023-11-02'
+				}
 			}
 		},
-		async onShow() {
-			// await this.getLifeTypeList();
-			// await this.getStatusCode()
-			// if (!this.lat && !this.lng) {
-			// 	await this.chooseSpot()
-			// } else {
-			// 	if (this.isGd) {
-			// 		await this.getPoiAround();
-			// 	} else {
-			// 		await this.getPoiPage();
-			// 	}
-			// }
+		onShow() {
 			// 地图
 			this._mapContext = uni.createMapContext("map", this);
 			this._mapContext.initMarkerCluster({
@@ -52,21 +71,15 @@
 		methods: {
 			// 图标点击
 			markerClick(e) {
-				console.log('图标点击', e);
-				// let markerId = e.markerId;
-				// this.marker.forEach(item => {
-				// 	if (markerId === item.id) {
-				// 		if (this.isGd) {
-				// 			uni.navigateTo({
-				// 				url: `/pages/communityLive/details?data=${item.label}&type=gd&name=${this.name}`
-				// 			})
-				// 		} else {
-				// 			uni.navigateTo({
-				// 				url: `/pages/communityLive/details?id=${item.id}&name=${this.name}&type=fgd`
-				// 			})
-				// 		}
-				// 	}
-				// })
+				console.log('标记点击', e);
+				let markerId = e.markerId; //点击标记点, 获取id, 查询店铺详情, 展示在下方
+				this.marker.forEach(item => {
+					if (markerId === item.id) {
+						item.iconPath = ""
+					} else {
+						item.iconPath = "../../../static/map/sp_icon_dw.png"
+					}
+				})
 			},
 		}
 	}
@@ -75,7 +88,7 @@
 <style lang="scss">
 	.search-box {
 		position: absolute;
-		z-index: 2;
+		z-index: 1;
 		top: 20rpx;
 		left: 50%;
 		transform: translateX(-50%);
@@ -93,10 +106,33 @@
 	.content {
 		width: 100%;
 		height: 460rpx;
+
+		#map {
+			width: 100%;
+			height: 100vh;
+		}
 	}
 
-	.map {
-		width: 100%;
-		height: 100vh;
+	.down-shop {
+		width: 710rpx;
+		// background-color: red;
+		position: absolute;
+		z-index: 1;
+		bottom: 60rpx;
+		left: 10%;
+		transform: translateX(-10%);
+
+		.list-border {
+			margin: 0;
+			padding: 20rpx 20rpx 20rpx 27rpx;
+			width: 94.5%;
+			border-radius: 7rpx;
+			box-shadow: 0rpx 1rpx 2rpx 0rpx rgba(224, 224, 224, 0.5), 0rpx 4rpx 12rpx 1rpx rgba(102, 102, 102, 0.37);
+
+			.rent-and-date text {
+				margin-right: 30rpx !important;
+				font-size: 24rpx;
+			}
+		}
 	}
 </style>