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

<template>
	<view class="content">
		<navbar title="我的订单" :leftClick="true" @leftClick="$utils.navigateBack" />
		<view class="head flex-sb">
			<view class="items">
				<view class="item-tab flex">
					<view @click="clickTabOne">施工前</view>
					<view @click="clickTabTwo">施工中</view>
					<view @click="clickTabThr">施工后</view>
				</view>
				<view class="item-active" :style="'--step:' + step + 'rpx'"></view>
			</view>
		</view>
		<view class="m20">
			<view v-if="item.length < 1" class="re-empty">
				<view>暂无数据</view>
			</view>
			<view v-for="(orderItem, index) in item" :key="index" class="b-relative item-card mb20">
				<view class="m10 flex-sb">
					<view class="item-tip">请于施工前30分钟内到达现场</view>
					<view style="color:#aaa" @click="clickDetail(orderItem.id)">
						<label v-if="orderItem.step === 0">待开工</label>
						<label v-if="orderItem.step === 1">施工中</label>
						<label v-if="orderItem.step === 2">已完成</label>
						<uv-icon name="arrow-right" color="#aaa" size="12"></uv-icon>
					</view>
				</view>
				<view class="mt20">
					<view>
						<view class="item-icon"></view>
						<label>到场时间：{{ formatTime(orderItem.in_time) }}</label>
					</view>
					<view @click="openMap(orderItem)">
						<view class="item-icon"></view>
						<label>施工地点：{{ orderItem.address }}</label>
						<uv-icon name="map" color="#333" size="12"></uv-icon>
					</view>
					<view>
						<view class="item-icon" style="border-color:#e5b746"></view>
						<label>施工已开始</label>
					</view>
				</view>
				<view class="mt20 flex-reverse">
					<button class="item-button" @click="clickStep(orderItem.id)">拍摄照片</button>
					<button v-if="orderItem.step === 0" class="item-button jr">我要拒单</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navbar from '@/components/base/navbar.vue'
	
	export default {
		name: 'UserOrders',
		components: {
			navbar
		},
		data() {
			return {
				step: 8,
				item: [],
				status: 0
			};
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: '我的订单'
			});
		},
		onShow() {
			this.clickTabOne();
		},
		methods: {
			clickDetail(id) {
				uni.navigateTo({ url: `/pages_order/user/orderd?id=${id}` });
			},
			clickTabOne() {
				this.step = 8;
				this.status = 0;
				this.loadList();
			},
			clickTabTwo() {
				this.step = 221;
				this.status = 1;
				this.loadList();
			},
			clickTabThr() {
				this.step = 432;
				this.status = 2;
				this.loadList();
			},
			loadList() {
				// 模拟数据，实际项目中应该调用API
				this.item = this.getMockData();
			},
			getMockData() {
				const mockOrders = [
					{
						id: '1',
						step: this.status,
						in_time: '2024-01-15 09:30:00',
						address: '北京市朝阳区建国门外大街1号',
						latitude: 39.9042,
						longitude: 116.4074
					},
					{
						id: '2',
						step: this.status,
						in_time: '2024-01-15 14:00:00',
						address: '北京市海淀区中关村大街27号',
						latitude: 39.9889,
						longitude: 116.3058
					}
				];
				return this.status === 0 ? mockOrders : this.status === 1 ? mockOrders.slice(0, 1) : [];
			},
			clickStep(id) {
				let stepUri = '/pages_order/user/step';
				if (this.status === 0) {
					stepUri = stepUri + '0';
				} else if (this.status === 1) {
					stepUri = stepUri + '1';
				} else if (this.status === 2) {
					stepUri = stepUri + '2';
				}
				uni.navigateTo({
					url: `${stepUri}?id=${id}`
				});
			},
			openMap(row) {
				uni.openLocation({
					latitude: parseFloat(row.latitude),
					longitude: parseFloat(row.longitude),
					scale: 18,
					name: row.address || '未命名地址'
				});
			},
			formatTime(timeStr) {
				if (!timeStr) return '';
				const date = new Date(timeStr);
				const month = (date.getMonth() + 1).toString().padStart(2, '0');
				const day = date.getDate().toString().padStart(2, '0');
				const hours = date.getHours().toString().padStart(2, '0');
				const minutes = date.getMinutes().toString().padStart(2, '0');
				return `${month}-${day} ${hours}:${minutes}`;
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #f5f5f5;
		--step: 1;
		--color: #F40000;
	}
	
	.content {
		min-height: 100vh;
		background-color: #f5f5f5;
	}
	
	.flex {
		display: flex;
	}
	
	.flex-sb {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.flex-reverse {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	
	.b-relative {
		position: relative;
	}
	
	.m10 {
		margin: 10rpx;
	}
	
	.m20 {
		margin: 20rpx;
	}
	
	.mt20 {
		margin-top: 20rpx;
	}
	
	.mb20 {
		margin-bottom: 20rpx;
	}
	
	.head {
		height: 68rpx;
		padding: 10rpx 40rpx;
		background-color: #fff;
	}
	
	.items {
		width: 687rpx;
		height: 52rpx;
		padding: 8rpx 8rpx;
		border-radius: 34rpx;
		background-color: #f2f4f9;
		position: relative;
	}
	
	.item-tab {
		line-height: 52rpx;
		background-color: transparent;
		
		view {
			width: 33%;
			text-align: center;
			font-size: 26rpx;
			font-weight: normal;
			letter-spacing: -0.16px;
			color: #152748;
			background-color: transparent;
			z-index: 1;
		}
	}
	
	.item-active {
		width: 229rpx;
		height: 52rpx;
		border-radius: 26rpx;
		background-color: #ffffff;
		position: absolute;
		left: var(--step);
		top: 8rpx;
		transition: .3s ease-in;
		z-index: 0;
	}
	
	.re-empty {
		text-align: center;
		padding: 100rpx;
		color: #999;
		font-size: 28rpx;
	}
	
	.item-card {
		width: calc(100vw - 120rpx);
		height: calc(414rpx - 60rpx);
		background: #ffffff;
		padding: 30rpx;
		margin: 30rpx;
		border-radius: 24rpx;
		font-size: 24rpx;
		line-height: 52rpx;
		color: #333333;
	}
	
	.item-tip {
		padding: 0 10rpx;
		background-color: #F2F5F9;
		border-radius: 8rpx;
		font-size: 20rpx;
		font-weight: normal;
		letter-spacing: 0px;
		color: #152748;
	}
	
	.item-icon {
		width: 24rpx;
		height: 24rpx;
		box-sizing: border-box;
		border: 6rpx solid #68B04F;
		border-radius: 50%;
		display: inline-block;
		margin: 10rpx 15rpx -2rpx 0;
	}
	
	.item-button {
		width: 160rpx;
		height: 64rpx;
		line-height: 64rpx;
		border-radius: 32rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		font-weight: normal;
		text-align: center;
		letter-spacing: 0px;
		color: #F40000;
		padding: 0 !important;
		margin: 0 !important;
		background-color: transparent !important;
		margin-left: 10rpx !important;
		border: 2rpx solid #F40000;
	}
	
	.jr {
		border-color: #aaa;
		color: #aaa;
	}
</style>