concrete-transportation-uniapp-20250821/components/base/select-car.vue

<template>
	<view class="select-car-container">
		<!-- 遮罩层 -->
		<view v-if="visible" :class="['mask', visible && 'active']" @click="close"></view>
		
		<!-- 选择器弹窗 -->
		<view :class="['select-popup', 'b-relative', visible && 'active']">
			<view class="popup-title">选择设备</view>
			<view class="close-btn" @click="close">关闭</view>
			
			<view class="car-list">
				<view v-if="carList.length === 0" class="empty-state">
					<view>暂无数据</view>
				</view>
				
				<view v-for="(car, index) in carList" :key="index" class="car-item">
					<view class="car-info">
						<image class="car-icon" src="/static/icons/icon11.png"></image>
						<text>{{ car.plateNumber }}</text>
					</view>
					
					<view class="car-actions">
						<view v-if="car.status === 'available'" class="action-btn confirm" @click="selectCar(car)">
							<text style="color:#F40000">确认选择</text>
						</view>
						<view v-else-if="car.status === 'pending'" class="action-btn pending">
							<text style="color:#F40000">审核中</text>
						</view>
						<view v-else-if="car.status === 'rejected'" class="action-btn rejected">
							<text style="color:#F40000">未通过审核</text>
						</view>
						<view v-else-if="car.status === 'busy'" class="action-btn busy">
							<text style="color:#F40000">设备使用中</text>
						</view>
					</view>
					
					<view class="car-details">
						<view class="detail-item">
							<text>车辆类型：{{ car.type }}</text>
						</view>
						<view class="detail-item">
							<text>轴数：{{ car.axleCount }}轴</text>
						</view>
						<view class="detail-item">
							<text>载重：{{ car.capacity }}吨</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'SelectCar',
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			carList: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				// 模拟车辆数据
				defaultCarList: [
					{
						id: 1,
						plateNumber: '湘A12345',
						type: '泵车',
						axleCount: 4,
						capacity: 25,
						status: 'available' // available, pending, rejected, busy
					},
					{
						id: 2,
						plateNumber: '湘A67890',
						type: '搅拌车',
						axleCount: 3,
						capacity: 12,
						status: 'busy'
					},
					{
						id: 3,
						plateNumber: '湘A11111',
						type: '泵车',
						axleCount: 5,
						capacity: 35,
						status: 'pending'
					}
				]
			}
		},
		computed: {
			effectiveCarList() {
				return this.carList.length > 0 ? this.carList : this.defaultCarList;
			}
		},
		methods: {
			close() {
				this.$emit('close');
			},
			selectCar(car) {
				if (car.status === 'available') {
					this.$emit('select', car);
					this.close();
				} else {
					uni.showToast({
						title: '该设备不可选择',
						icon: 'none'
					});
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.select-car-container {
		position: relative;
	}
	
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 999;
		opacity: 0;
		transition: opacity 0.3s;
		
		&.active {
			opacity: 1;
		}
	}
	
	.select-popup {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		max-height: 80vh;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		z-index: 1000;
		transform: translateY(100%);
		transition: transform 0.3s;
		
		&.active {
			transform: translateY(0);
		}
	}
	
	.popup-title {
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #eee;
	}
	
	.close-btn {
		position: absolute;
		top: 30rpx;
		right: 30rpx;
		font-size: 28rpx;
		color: #666;
	}
	
	.car-list {
		max-height: 60vh;
		overflow-y: auto;
		padding: 20rpx;
	}
	
	.empty-state {
		text-align: center;
		padding: 100rpx 0;
		color: #999;
		font-size: 28rpx;
	}
	
	.car-item {
		background-color: #fff;
		border: 1rpx solid #eee;
		border-radius: 10rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}
	
	.car-info {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		
		.car-icon {
			width: 72rpx;
			height: 60rpx;
			margin-right: 16rpx;
		}
		
		text {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}
	}
	
	.car-actions {
		display: flex;
		justify-content: flex-end;
		margin-bottom: 20rpx;
	}
	
	.action-btn {
		padding: 10rpx 20rpx;
		border-radius: 8rpx;
		border: 1rpx solid #F40000;
		background-color: #fff;
		
		&.confirm {
			cursor: pointer;
		}
		
		&.pending, &.rejected, &.busy {
			opacity: 0.6;
		}
	}
	
	.car-details {
		.detail-item {
			margin-bottom: 10rpx;
			font-size: 28rpx;
			color: #666;
		}
	}
	
	.b-relative {
		position: relative;
	}
</style>