concrete-transportation-uniapp-20250821/pages_order/base/showcar.vue

<template>
	<view class="content">
		<navbar title="车辆详情" leftClick @leftClick="$utils.navigateBack" />
		<view class="car-info-container">
			<!-- 车辆基本信息 -->
			<view class="info-section">
				<view class="section-title">车辆信息</view>
				<view class="info-item">
					<view class="info-label">车牌号</view>
					<view class="info-value">{{ carInfo.plateNumber }}</view>
				</view>
				<view class="info-item">
					<view class="info-label">车辆类型</view>
					<view class="info-value">{{ carInfo.carType }}</view>
				</view>
				<view class="info-item">
					<view class="info-label">轴数</view>
					<view class="info-value">{{ carInfo.axleCount }}</view>
				</view>
				<view class="info-item">
					<view class="info-label">载重量</view>
					<view class="info-value">{{ carInfo.loadCapacity }}吨</view>
				</view>
				<view class="info-item">
					<view class="info-label">审核状态</view>
					<view class="info-value" :class="[getStatusClass(carInfo.status)]">{{ getStatusText(carInfo.status) }}</view>
				</view>
			</view>
			
			<!-- 车辆照片 -->
			<view class="info-section">
				<view class="section-title">车辆照片</view>
				<view class="image-grid">
					<view v-for="(image, index) in carInfo.images" :key="index" class="image-item" @click="previewImage(index, 'images')">
						<image :src="image" mode="aspectFill" class="car-image"></image>
					</view>
				</view>
				<view v-if="carInfo.images.length === 0" class="empty-tip">
					<text>暂无车辆照片</text>
				</view>
			</view>
			
			<!-- 证件照片 -->
			<view class="info-section">
				<view class="section-title">相关证件</view>
				<view class="image-grid">
					<view v-for="(doc, index) in carInfo.documents" :key="index" class="image-item" @click="previewImage(index, 'documents')">
						<image :src="doc" mode="aspectFill" class="car-image"></image>
						<view class="doc-label">证件{{ index + 1 }}</view>
					</view>
				</view>
				<view v-if="carInfo.documents.length === 0" class="empty-tip">
					<text>暂无证件照片</text>
				</view>
			</view>
			
			<!-- 联系信息 -->
			<view class="info-section">
				<view class="section-title">联系信息</view>
				<view class="info-item">
					<view class="info-label">联系人</view>
					<view class="info-value">{{ carInfo.contactName }}</view>
				</view>
				<view class="info-item">
					<view class="info-label">联系电话</view>
					<view class="info-value contact-phone" @click="callPhone">{{ carInfo.contactPhone }}</view>
				</view>
				<view class="info-item">
					<view class="info-label">所在地区</view>
					<view class="info-value">{{ carInfo.location }}</view>
				</view>
			</view>
			
			<!-- 申请时间 -->
			<view class="info-section">
				<view class="section-title">申请信息</view>
				<view class="info-item">
					<view class="info-label">申请时间</view>
					<view class="info-value">{{ carInfo.applyTime }}</view>
				</view>
				<view class="info-item" v-if="carInfo.auditTime">
					<view class="info-label">审核时间</view>
					<view class="info-value">{{ carInfo.auditTime }}</view>
				</view>
				<view class="info-item" v-if="carInfo.auditRemark">
					<view class="info-label">审核备注</view>
					<view class="info-value">{{ carInfo.auditRemark }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navbar from '@/components/base/navbar.vue'
	
	export default {
		name: 'BaseShowcar',
		components: {
			navbar
		},
		data() {
			return {
				carId: '',
				carInfo: {
					plateNumber: '湘A12345',
					carType: '泵车',
					axleCount: '4轴',
					loadCapacity: '25',
					status: 'reviewing', // reviewing, approved, rejected
					images: [
						'/static/re/ide1.png',
						'/static/re/ide2.png'
					],
					documents: [
						'/static/re/ideic1.png',
						'/static/re/ideic2.png',
						'/static/re/ideic3.png'
					],
					contactName: '张师傅',
					contactPhone: '13800138000',
					location: '长沙市雨花区',
					applyTime: '2024-01-15 10:30:00',
					auditTime: '',
					auditRemark: ''
				}
			}
		},
		onLoad(options) {
			if (options.id) {
				this.carId = options.id;
				this.loadCarInfo();
			}
			uni.setNavigationBarTitle({
				title: '车辆证件信息'
			});
		},
		methods: {
			loadCarInfo() {
				// 模拟根据ID加载车辆信息
				if (this.carId === '2') {
					this.carInfo.status = 'rejected';
					this.carInfo.auditTime = '2024-01-16 14:20:00';
					this.carInfo.auditRemark = '证件照片不清晰，请重新上传';
				} else if (this.carId === '3') {
					this.carInfo.status = 'approved';
					this.carInfo.auditTime = '2024-01-16 16:45:00';
					this.carInfo.auditRemark = '审核通过，欢迎加入平台';
				}
			},
			getStatusText(status) {
				const statusMap = {
					reviewing: '审核中',
					approved: '审核通过',
					rejected: '审核未通过'
				};
				return statusMap[status] || '未知状态';
			},
			getStatusClass(status) {
				return {
					'status-reviewing': status === 'reviewing',
					'status-approved': status === 'approved',
					'status-rejected': status === 'rejected'
				};
			},
			previewImage(index, type) {
				const images = type === 'images' ? this.carInfo.images : this.carInfo.documents;
				uni.previewImage({
					current: index,
					urls: images
				});
			},
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.carInfo.contactPhone
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 20rpx;
		min-height: 100vh;
		background-color: #f5f5f5;
	}
	
	.car-info-container {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}
	
	.info-section {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}
	
	.section-title {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		margin-bottom: 30rpx;
		padding-bottom: 15rpx;
		border-bottom: 2rpx solid #f0f0f0;
	}
	
	.info-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f8f8f8;
		
		&:last-child {
			border-bottom: none;
		}
	}
	
	.info-label {
		font-size: 28rpx;
		color: #666;
		flex-shrink: 0;
		width: 200rpx;
	}
	
	.info-value {
		font-size: 28rpx;
		color: #333;
		flex: 1;
		text-align: right;
		
		&.contact-phone {
			color: #007AFF;
			text-decoration: underline;
		}
		
		&.status-reviewing {
			color: #ff9500;
		}
		
		&.status-approved {
			color: #34c759;
		}
		
		&.status-rejected {
			color: #ff3b30;
		}
	}
	
	.image-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
	}
	
	.image-item {
		position: relative;
		width: 200rpx;
		height: 200rpx;
		border-radius: 8rpx;
		overflow: hidden;
	}
	
	.car-image {
		width: 100%;
		height: 100%;
	}
	
	.doc-label {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.6);
		color: #fff;
		font-size: 22rpx;
		text-align: center;
		padding: 8rpx;
	}
	
	.empty-tip {
		text-align: center;
		padding: 60rpx 0;
		color: #999;
		font-size: 28rpx;
	}
</style>