syle:更新样式

pages/search/index.vue

@@ -1,9 +1,14 @@
 <template>
 	<view class="search-page">
-		<!-- <view class="map-wrap">
+		<view class="map-wrap">
 			<MapComponent :userLocation="userLocation" :filteredPositions="filteredPositions"
-				@mapCenterChange="onMapCenterChange" />
-		</view> -->
+				:enableMarkers="true" :customHeight="'100%'" :hideControls="true" :fullWidth="true"
+				@mapCenterChange="onMapCenterChange" @relocate="init" @markerTap="goToPositionDetail" />
+			<!-- 定位按钮 -->
+			<view class="relocate-btn" @click="init">
+				<image src="/static/location.png" class="relocate-icon" mode="aspectFit"></image>
+			</view>
+		</view>
 		<view class="list-wrap">
 			<view class="panel">
 				<view class="filter-tabs">
@@ -11,8 +16,9 @@
 					<view class="tab" :class="{ active: activeTab === 'return' }" @click="setTab('return')">可归还</view>
 				</view>
 				<scroll-view class="list-scroll" scroll-y="true">
-					<view class="card" :class="{ available: isRentable(item) }"
-						v-for="(item, index) in filteredPositions" :key="item.positionId || index">
+					<view class="card" :class="{ available: isRentable(item), invalid: !isValidCoordinate(item.latitude, item.longitude) }"
+						v-for="(item, index) in filteredPositions" :key="item.positionId || index"
+						@click="goToPositionDetail(item)">
 						<view class="thumb"></view>
 						<view class="info">
 							<view class="row top">
@@ -25,6 +31,9 @@
 							<view class="row meta" v-if="item.workTime && item.workTime !== '0'">
 								<text class="time">营业时间：{{ item.workTime }}</text>
 							</view>
+							<view class="row meta" v-if="!isValidCoordinate(item.latitude, item.longitude)">
+								<text class="time" style="color: #ff6b6b;">坐标信息异常</text>
+							</view>
 							<view class="tags">
 								<view class="tag rent" v-if="isRentable(item)">可租借</view>
 								<view class="tag return" v-if="isReturnable(item)">可归还</view>
@@ -32,10 +41,12 @@
 						</view>
 						<view class="actions">
 
-							<view class="nav" @click.stop="navigateToPosition(item)">
+							<view class="nav" 
+								:class="{ disabled: !isValidCoordinate(item.latitude, item.longitude) }"
+								@click.stop="navigateToPosition(item)">
 								<image src="/static/location.png" class="action-icon" mode="aspectFit"></image>
 							</view>
-							<view class="distance" v-if="item.distance">{{ item.distance }}</view>
+							<view class="distance" v-if="item.distance && isValidCoordinate(item.latitude, item.longitude)">{{ item.distance }}</view>
 						</view>
 					</view>
 
@@ -101,9 +112,18 @@
 		}
 	}
 
+	const isValidCoordinate = (lat, lng) => {
+		const latitude = parseFloat(lat)
+		const longitude = parseFloat(lng)
+		return !isNaN(latitude) && !isNaN(longitude) &&
+			latitude >= -90 && latitude <= 90 &&
+			longitude >= -180 && longitude <= 180 &&
+			!(latitude === 0 && longitude === 0) // 排除 0,0 这种无效坐标
+	}
+
 	const calculateDistances = (center) => {
 		positionList.value.forEach(item => {
-			if (item.longitude && item.latitude) {
+			if (item.longitude && item.latitude && isValidCoordinate(item.latitude, item.longitude)) {
 				try {
 					const distanceInMeters = calculateDistanceSync(
 						center.latitude,
@@ -113,10 +133,14 @@
 					)
 					item.distance = formatDistance(distanceInMeters)
 					item.distanceInMeters = distanceInMeters
-				} catch (_) {}
+				} catch (_) {
+					item.distanceInMeters = 999999
+				}
+			} else {
+				item.distanceInMeters = 999999
 			}
 		})
-		positionList.value.sort((a, b) => (a.distanceInMeters || 999000) - (b.distanceInMeters || 999000))
+		positionList.value.sort((a, b) => (a.distanceInMeters || 999999) - (b.distanceInMeters || 999999))
 		applyFilter()
 	}
 
@@ -180,6 +204,13 @@
 	}
 
 	const navigateToPosition = (position) => {
+		if (!isValidCoordinate(position.latitude, position.longitude)) {
+			uni.showToast({
+				title: '该位置坐标无效',
+				icon: 'none'
+			})
+			return
+		}
 		const latitude = parseFloat(position.latitude)
 		const longitude = parseFloat(position.longitude)
 		uni.openLocation({
@@ -190,6 +221,19 @@
 		})
 	}
 
+	const goToPositionDetail = (position) => {
+		if (!position.positionId) {
+			uni.showToast({
+				title: '场地信息异常',
+				icon: 'none'
+			})
+			return
+		}
+		uni.navigateTo({
+			url: `/pages/position/detail?positionId=${position.positionId}`
+		})
+	}
+
 	onMounted(() => {
 		init()
 	})
@@ -204,13 +248,39 @@
 
 	.map-wrap {
 		flex: 0 0 48vh;
-		padding: 20rpx 20rpx 0 20rpx;
+		padding: 0;
+		position: relative;
+		overflow: hidden;
+
+		.relocate-btn {
+			position: absolute;
+			right: 20rpx;
+			bottom: 20rpx;
+			width: 72rpx;
+			height: 72rpx;
+			background: rgba(255, 255, 255, 0.96);
+			border-radius: 36rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12);
+			border: 2rpx solid #e0e0e0;
+			z-index: 100;
+
+			&:active {
+				transform: scale(0.95);
+			}
+
+			.relocate-icon {
+				width: 44rpx;
+				height: 44rpx;
+			}
+		}
 	}
 
 	.list-wrap {
 		flex: 1;
 		background: transparent;
-		margin-top: -20rpx;
 		padding: 0 20rpx 20rpx;
 
 		.panel {
@@ -247,7 +317,7 @@
 		}
 
 		.list-scroll {
-			height: calc(52vh - 88rpx);
+			height: calc(48vh - 140rpx);
 			padding: 6rpx 4rpx 12rpx 4rpx;
 			box-sizing: border-box;
 		}
@@ -269,6 +339,12 @@
 			background: #F6FBF8;
 		}
 
+		&.invalid {
+			opacity: 0.6;
+			border-color: #FFE5E5;
+			background: #FFF9F9;
+		}
+
 		.thumb {
 			width: 120rpx;
 			height: 120rpx;
@@ -353,6 +429,11 @@
 			align-items: center;
 			justify-content: center;
 			color: #3EAB64;
+
+			&.disabled {
+				background: #F5F5F5;
+				opacity: 0.5;
+			}
 		}
 	}