concrete-transportation-uniapp-20250821/pages_order/user/orderd.vue

<template>
	<view class="content">
		<navbar title="订单详情" leftClick @leftClick="$utils.navigateBack" />
		
		<!-- 头部图片 -->
		<view class="head">
			<image v-if="orderDetail.headerImage" class="head" :src="orderDetail.headerImage" mode="scaleToFill" />
			<image v-else class="head" src="/static/re/center.png" mode="scaleToFill" />
		</view>
		
		<!-- 计划信息 -->
		<view class="item-card b-relative">
			<view class="title">
				<label class="title-span">·</label>计划信息
			</view>
			<view class="tips" style="line-height:48rpx;font-size:28rpx">
				<view>到场时间：{{ orderDetail.arrivalTime }}</view>
				<view>计划数量：{{ orderDetail.quantity }} 立方或者趟</view>
				<view>合同类型：{{ orderDetail.contractType }}</view>
				<view @click="openMap">
					<label>施工地址：{{ orderDetail.address }}</label>
					<image src="/static/icons/icon1.png" class="square40" style="margin:0 0 -8rpx" />
				</view>
			</view>
			<view class="tips ti">{{ orderDetail.publisher }}发布</view>
		</view>
		
		<!-- 车辆信息 -->
		<view class="item-card">
			<view class="title">
				<label class="title-span">·</label>车辆信息
			</view>
			<view class="tips" style="line-height:48rpx;font-size:28rpx">
				<view>车辆牌照：{{ orderDetail.plateNumber }}</view>
				<view>车辆轴数：{{ orderDetail.axleCount }}</view>
				<view @click="viewCertificates">
					<label>证照信息：点击查看证件信息</label>
					<image src="/static/icons/icon1.png" class="square40" style="margin:0 0 -8rpx" />
				</view>
			</view>
		</view>
		
		<!-- 接单须知 -->
		<view class="item-card">
			<view class="title">
				<label class="title-span">·</label>接单须知
			</view>
			<view class="tips">
				<view>1.您需要预交保证金进行接单，接单后如有特殊情况请及时与平台沟通协调，可通过个人中心-我要拒单联系客服</view>
				<view>2.为了保障工作顺利开展建议您提前一定时间到达现场，请规划您的合理出行时间</view>
				<view>3.施工完成、取车前后请您按照平台要求及时准确的拍摄报，以便出现合同争议时通过您提交的信息保证您的利益</view>
			</view>
		</view>
		
		<!-- 确认接单按钮 -->
		<view v-if="showConfirmBtn" class="re-end-pand">
			<button @click="confirmOrder">确认接单</button>
		</view>
	</view>
</template>

<script>
	import navbar from '@/components/base/navbar.vue'
	
	export default {
		name: 'UserOrderd',
		components: {
			navbar
		},
		data() {
			return {
				orderId: '',
				showConfirmBtn: true,
				orderDetail: {
					headerImage: '',
					arrivalTime: '2024-01-15 08:00',
					quantity: '200',
					contractType: '按方计费',
					address: '长沙市雨花区建设工地A区',
					publisher: '湖南建设集团',
					plateNumber: '湘A12345',
					axleCount: '4轴',
					longitude: 112.9388,
					latitude: 28.2282
				}
			}
		},
		onLoad(options) {
			if (options.id) {
				this.orderId = options.id;
				this.loadOrderDetail();
			}
			uni.setNavigationBarTitle({
				title: '订单详情'
			});
		},
		methods: {
			// 加载订单详情
			loadOrderDetail() {
				// 模拟加载订单详情数据
				console.log('加载订单详情:', this.orderId);
				// 这里可以调用API获取真实数据
			},
			
			// 打开地图
			openMap() {
				uni.openLocation({
					latitude: this.orderDetail.latitude,
					longitude: this.orderDetail.longitude,
					name: '施工地址',
					address: this.orderDetail.address,
					success: () => {
						console.log('打开地图成功');
					},
					fail: (err) => {
						console.error('打开地图失败:', err);
						uni.showToast({
							title: '打开地图失败',
							icon: 'none'
						});
					}
				});
			},
			
			// 查看证件信息
			viewCertificates() {
				uni.navigateTo({
					url: '/pages_order/base/showcar?id=' + this.orderId
				});
			},
			
			// 确认接单
			confirmOrder() {
				uni.showModal({
					title: '确认接单',
					content: '确定要接取这个订单吗？接单后需要按时到达现场。',
					success: (res) => {
						if (res.confirm) {
							this.submitOrder();
						}
					}
				});
			},
			
			// 提交接单
			submitOrder() {
				uni.showLoading({
					title: '接单中...'
				});
				
				// 模拟接单请求
				setTimeout(() => {
					uni.hideLoading();
					uni.showToast({
						title: '接单成功',
						icon: 'success'
					});
					
					// 跳转到我的订单页面
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages_order/user/orders'
						});
					}, 1500);
				}, 2000);
			},
			
			goBack() {
				uni.navigateBack();
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		min-height: 100vh;
		background-color: #f5f5f5;
	}
	
	.head {
		height: 460rpx;
		width: 100vw;
	}
	
	.item-card {
		width: calc(100vw - 40rpx);
		min-height: 176rpx;
		padding: 30rpx 20rpx;
		background-color: #fff;
		margin-bottom: 10rpx;
	}
	
	.title {
		font-size: 30rpx;
		font-weight: 400;
		line-height: 36rpx;
		letter-spacing: 0px;
		color: #000000;
		margin-bottom: 20rpx;
	}
	
	.title-span {
		font-size: 30rpx;
		font-weight: bolder;
		margin-right: 10rpx;
		color: #F40000;
	}
	
	.tips {
		font-size: 24rpx;
		font-weight: 350;
		line-height: 36rpx;
		letter-spacing: 0px;
		color: #333333;
		padding: 20rpx;
		
		&.ti {
			position: absolute;
			top: 10rpx;
			right: 20rpx;
			color: #999;
			padding: 0;
		}
		
		view {
			margin-bottom: 10rpx;
			
			&:last-child {
				margin-bottom: 0;
			}
		}
	}
	
	.square40 {
		width: 40rpx;
		height: 40rpx;
		vertical-align: middle;
		margin-left: 10rpx;
	}
	
	.re-end-pand {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		padding: 30rpx;
		background-color: #fff;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
		
		button {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			background-color: #F40000;
			color: #fff;
			border-radius: 44rpx;
			font-size: 32rpx;
			font-weight: bold;
			border: none;
		}
	}
	
	.b-relative {
		position: relative;
	}
	
	.placeholder-icon {
		font-size: 120rpx;
		margin-bottom: 30rpx;
	}
	
	.placeholder-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}
	
	.placeholder-text {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 40rpx;
	}
	
	.back-btn {
		padding: 20rpx 40rpx;
		background-color: #007AFF;
		color: #fff;
		border-radius: 25rpx;
		font-size: 28rpx;
		border: none;
	}
</style>