fix:修复bug

2025-12-10 15:16:47 +08:00
parent 8dd95a325b
commit be0eab5460
10 changed files with 1463 additions and 984 deletions
@@ -6,10 +6,19 @@
 			<map id="map" class="native-map" :longitude="mapCenter.longitude" :latitude="mapCenter.latitude"
 				:markers="mapMarkers" :scale="mapZoom" :show-location="false" @regionchange="onMapRegionChange"
 				@markertap="onMapMarkerTap" @callouttap="onCalloutTap" @updated="onMapUpdated" @error="onMapError">
-				<!-- 覆盖在地图上的可点击控件（使用 cover-view 以兼容小程序原生组件层级） -->
-				<cover-view class="index-swiper" v-if="!props.hideControls && !props.hideMapOverlays" @tap="handleJoinTap">
-					<cover-image src="/static/index_swiper.png" class="index-swiper-img" mode="aspectFit"></cover-image>
+			<!-- 覆盖在地图上的广告轮播（使用 cover-view 以兼容小程序原生组件层级） -->
+			<cover-view class="index-swiper" v-if="!props.hideControls && !props.hideMapOverlays && currentBannerImage">
+				<cover-image :src="currentBannerImage" class="index-swiper-img" mode="aspectFill" @tap="handleBannerTap"></cover-image>
+				<!-- 轮播指示器 -->
+				<cover-view class="banner-indicators" v-if="props.bannerImages.length > 1">
+					<cover-view 
+						v-for="(img, idx) in props.bannerImages" 
+						:key="idx"
+						class="indicator-dot"
+						:class="{ active: idx === currentBannerIndex }">
+					</cover-view>
 				</cover-view>
+			</cover-view>
 				
 				<!-- 地图中心固定定位图标 -->
 				<cover-view class="center-location-marker" v-if="!props.hideMapOverlays">
@@ -98,15 +107,19 @@
 			type: Boolean,
 			default: false // 是否隐藏侧边控制按钮
 		},
-	fullWidth: {
-		type: Boolean,
-		default: false // 是否全宽显示（去掉 margin 和固定宽度）
-	},
-	hideMapOverlays: {
-		type: Boolean,
-		default: false // 是否隐藏地图上的覆盖层元素（如中心定位图标、轮播图等）
-	}
-})
+		fullWidth: {
+			type: Boolean,
+			default: false // 是否全宽显示（去掉 margin 和固定宽度）
+		},
+		hideMapOverlays: {
+			type: Boolean,
+			default: false // 是否隐藏地图上的覆盖层元素（如中心定位图标、轮播图等）
+		},
+		bannerImages: {
+			type: Array,
+			default: () => [] // 广告图片列表
+		}
+	})

 	// Emits
 	const emit = defineEmits([
@@ -114,7 +127,8 @@
 		'scan',
 		'showList',
 		'markerTap',
-		'mapCenterChange'
+		'mapCenterChange',
+		'bannerClick'
 	])

 	// 响应式数据
@@ -126,6 +140,17 @@
 	const mapZoom = ref(17)
 	const mapMarkers = ref([]) // 用于地图组件的markers
 	const mapContext = ref(null) // 地图上下文
+	const currentBannerIndex = ref(0) // 当前显示的广告索引
+	let bannerTimer = null // 广告轮播定时器
+
+	// 计算当前显示的广告图片
+	const currentBannerImage = computed(() => {
+		if (props.bannerImages && props.bannerImages.length > 0) {
+			return props.bannerImages[currentBannerIndex.value]
+		}
+		// 降级：如果没有广告，显示默认图片
+		return '/static/index_swiper.png'
+	})

 	// 验证坐标有效性
 	const isValidCoordinate = (lat, lng) => {
@@ -220,6 +245,26 @@
 		deep: true
 	})

+	// 监听广告图片变化，启动或停止轮播
+	watch(() => props.bannerImages, (newImages, oldImages) => {
+		console.log('广告图片变化:', newImages?.length, '张')
+		// 先停止旧的轮播
+		stopBannerRotation()
+		currentBannerIndex.value = 0
+		
+		// 如果有多张图片，启动新的轮播
+		if (newImages && newImages.length > 1) {
+			console.log('启动广告轮播，共', newImages.length, '张图片')
+			// 使用 nextTick 确保 DOM 已更新
+			nextTick(() => {
+				startBannerRotation()
+			})
+		}
+	}, {
+		immediate: true,
+		deep: true
+	})
+
 	// 地图加载完成事件
 	const onMapUpdated = () => {
 		isLoading.value = false
@@ -337,6 +382,44 @@ const handleSearch = () => {
 		})
 	}

+	// 处理广告点击
+	const handleBannerTap = () => {
+		console.log('点击地图广告:', currentBannerIndex.value, currentBannerImage.value)
+		// 触发父组件处理点击事件
+		emit('bannerClick', currentBannerIndex.value)
+		// 默认跳转到合作加盟页面
+		handleJoinTap()
+	}
+
+	// 启动广告轮播
+	const startBannerRotation = () => {
+		// 如果只有一张或没有图片，不需要轮播
+		if (!props.bannerImages || props.bannerImages.length <= 1) {
+			console.log('图片数量不足，不启动轮播')
+			return
+		}
+
+		// 清除旧的定时器
+		stopBannerRotation()
+
+		console.log('开始广告轮播定时器')
+		// 每3秒切换一次
+		bannerTimer = setInterval(() => {
+			const nextIndex = (currentBannerIndex.value + 1) % props.bannerImages.length
+			console.log('轮播切换:', currentBannerIndex.value, '->', nextIndex)
+			currentBannerIndex.value = nextIndex
+		}, 3000)
+	}
+
+	// 停止广告轮播
+	const stopBannerRotation = () => {
+		if (bannerTimer) {
+			console.log('停止广告轮播')
+			clearInterval(bannerTimer)
+			bannerTimer = null
+		}
+	}
+
 	const handleScan = () => {
 		emit('scan')
 	}
@@ -364,6 +447,12 @@ const handleSearch = () => {
 			if (collapseRef.value) {
 				collapseRef.value.init()
 			}
+			
+			// 初始化广告轮播
+			if (props.bannerImages && props.bannerImages.length > 1) {
+				console.log('onMounted: 初始化广告轮播')
+				startBannerRotation()
+			}
 		})
 	})

@@ -373,6 +462,8 @@ const handleSearch = () => {
 			clearTimeout(regionChangeTimer)
 			regionChangeTimer = null
 		}
+		// 停止广告轮播
+		stopBannerRotation()
 		mapContext.value = null
 	})

@@ -554,15 +645,42 @@ const handleSearch = () => {
 		border-radius: 20rpx;
 		z-index: 1;
 		position: absolute;
-		// top: 10rpx;
 		left: 50%;
 		transform: translateX(-50%);
 		right: 0;
+		overflow: hidden;

 		&-img {
 			width: 100%;
 			height: 100%;
 			border-radius: 20rpx;
 		}
+
+		.banner-indicators {
+			position: absolute;
+			bottom: 10rpx;
+			left: 50%;
+			transform: translateX(-50%);
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			justify-content: center;
+			gap: 8rpx;
+			z-index: 2;
+
+			.indicator-dot {
+				width: 12rpx;
+				height: 12rpx;
+				border-radius: 50%;
+				background-color: rgba(255, 255, 255, 0.5);
+				transition: all 0.3s ease;
+
+				&.active {
+					width: 24rpx;
+					border-radius: 6rpx;
+					background-color: rgba(255, 255, 255, 0.9);
+				}
+			}
+		}
 	}
 </style>