uni-fans-score/components/LocationListSheet.vue

<template>
	<view class="location-popup" v-if="show">
		<view class="popup-mask" @click="$emit('close')"></view>
		<view class="location-sheet" :class="{ 'expanded': expanded }">
			<view class="sheet-header">
				<text class="sheet-title">{{ title }} ({{ positions.length }})</text>
				<view class="close-btn" @click="$emit('close')">
					<uv-icon name="close"></uv-icon>
				</view>
			</view>

			<view class="sheet-content">
				<view class="position-item" v-for="(item, index) in positions" :key="item.positionId || index"
					@click="$emit('select', item)">
					<view class="position-info">
						<view class="position-name">{{ item.name }}</view>
						<view class="tag-row">
							<view class="status-tag rent" v-if="isRentable(item)"><text>可租借</text></view>
							<view class="status-tag return" v-if="isReturnable(item)"><text>可归还</text></view>
						</view>
						<view class="position-time" v-if="item.workTime && item.workTime !== '0'"><text>营业时间：{{ item.workTime }}</text>
						</view>
					</view>
					<view class="position-actions">
						<view class="distance-info" v-if="item.distance"><text>{{ item.distance }}</text></view>
						<view class="nav-btn" @click.stop="$emit('navigate', item)"><text>导航</text></view>
					</view>
				</view>

				<view class="empty-state" v-if="!isLoading && (!positions || positions.length === 0)">
					<image class="empty-icon" src="/static/scan-icon.png" mode="aspectFit" />
					<text class="empty-text">附近暂无设备</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { computed } from 'vue'

	const props = defineProps({
		show: { type: Boolean, default: false },
		expanded: { type: Boolean, default: false },
		positions: { type: Array, default: () => [] },
		isLoading: { type: Boolean, default: false },
		title: { type: String, default: '附近设备场地' }
	})

	const isRentable = (item) => {
		// 兼容多种标识字段
		if (typeof item?.canRent !== 'undefined') return !!item.canRent
		return String(item?.status || '').toLowerCase() === 'online'
	}

	const isReturnable = (item) => {
		if (typeof item?.canReturn !== 'undefined') return !!item.canReturn
		return String(item?.status || '').toLowerCase() === 'online'
	}
</script>

<style lang="scss" scoped>
	.location-popup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2000;
		display: flex;
		align-items: flex-end;
		justify-content: center;

		.popup-mask {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.5);
		}

		.location-sheet {
			background: #ffffff;
			border-radius: 32rpx 32rpx 0 0;
			box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
			max-height: 78vh;
			transition: all 0.3s ease;
			z-index: 1;
			position: relative;
			width: 100%;
			display: flex;
			flex-direction: column;
			animation: slideUp 0.3s ease-out;

			&.expanded {
				max-height: 88vh;
			}

			.sheet-header {
				padding: 20rpx 30rpx;
				border-bottom: 1px solid #f0f0f0;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.sheet-title {
					font-size: 32rpx;
					font-weight: 600;
					color: #333;
				}

				.close-btn {
					width: 60rpx;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background: #f0f0f0;
					border-radius: 50%;
					transition: all 0.2s ease;

					&:active {
						background: #e0e0e0;
						transform: scale(0.95);
					}
				}
			}

			.sheet-content {
				padding: 12rpx 0;
				height: 64vh;
				overflow: auto;
			}
		}
	}

	@keyframes slideUp {
		from {
			transform: translateY(100%);
		}

		to {
			transform: translateY(0);
		}
	}

	.position-item {
		display: flex;
		align-items: center;
		padding: 24rpx 30rpx;
		border-bottom: 1px solid #f8f9fa;

		.position-info {
			flex: 1;

			.position-name {
				font-size: 32rpx;
				font-weight: 500;
				color: #333;
				margin-bottom: 8rpx;
			}

			.tag-row {
				display: flex;
				gap: 12rpx;
				margin-bottom: 8rpx;

				.status-tag {
					padding: 8rpx 16rpx;
					border-radius: 20rpx;
					font-size: 22rpx;

					&.rent {
						background: #e8f5e8;
						color: #4caf50;
					}

					&.return {
						background: #e8f2ff;
						color: #3578e5;
					}
				}
			}

			.position-time {
				font-size: 24rpx;
				color: #999;
			}
		}

		.position-actions {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			gap: 8rpx;

			.distance-info {
				font-size: 24rpx;
				color: #2196F3;
				font-weight: 500;
			}

			.nav-btn {
				padding: 12rpx 20rpx;
				background: #2196F3;
				border-radius: 20rpx;
				font-size: 24rpx;
				color: #ffffff;
			}
		}
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 60rpx 0;

		.empty-icon {
			width: 120rpx;
			height: 120rpx;
			margin-bottom: 24rpx;
			opacity: 0.5;
		}

		.empty-text {
			font-size: 28rpx;
			color: #999;
		}
	}
</style>