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

<template>
	<view>
		<navbar title="进度详情" leftClick @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="content">
			<!-- 施工前 -->
			<view v-if="status === 1" class="cr mt40">
				<view class="re-card-p32">
					<view class="flex-sb">
						<view class="re-from-label">仪表盘照片</view>
					</view>
					<image v-if="froma.a" :src="froma.a" mode="widthFix" class="step-image" />
					<view v-else class="no-image">暂无图片</view>
				</view>
				
				<view class="re-card-p32">
					<view class="flex-sb">
						<view class="re-from-label">车身前后左右</view>
					</view>
					<image v-if="froma.b" :src="froma.b" mode="widthFix" class="step-image" />
					<image v-if="froma.c" :src="froma.c" mode="widthFix" class="step-image" />
					<image v-if="froma.d" :src="froma.d" mode="widthFix" class="step-image" />
					<image v-if="froma.e" :src="froma.e" mode="widthFix" class="step-image" />
					<view v-if="!froma.b && !froma.c && !froma.d && !froma.e" class="no-image">暂无图片</view>
				</view>
				
				<view class="re-card-p32">
					<view class="flex-sb">
						<view class="re-from-label">当前工作环境</view>
					</view>
					<image v-if="froma.f" :src="froma.f" mode="widthFix" class="step-image" />
					<view v-else class="no-image">暂无图片</view>
				</view>
				
				<view class="re-card-p32">
					<view class="flex-sb">
						<view class="re-from-label">水槽照片</view>
					</view>
					<image v-if="froma.g" :src="froma.g" mode="widthFix" class="step-image" />
					<view v-else class="no-image">暂无图片</view>
				</view>
				
				<view class="re-card-p32">
					<view class="flex-sb">
						<view class="re-from-label">现场视频</view>
					</view>
					<video v-if="froma.h" :src="froma.h" class="step-video" controls />
					<view v-else class="no-image">暂无视频</view>
				</view>
				
				<view class="re-card-p32">
					<view class="re-from-label">备注</view>
					<textarea 
						class="re-card-textarea" 
						placeholder=" 请在此处备注您的疑问或者特殊情况。" 
						v-model="froma.remark" 
						readonly
					/>
				</view>
			</view>
			
			<!-- 施工中 -->
			<view v-if="status === 2" class="cr mt40">
				<view class="re-card-p32">
					<view class="flex-sb">
						<view class="re-from-label">当前工作环境</view>
					</view>
					<image v-if="fromb.a" :src="fromb.a" mode="widthFix" class="step-image" />
					<view v-else class="no-image">暂无图片</view>
				</view>
				
				<view class="re-card-p32">
					<view class="flex-sb">
						<view class="re-from-label">支腿照片</view>
					</view>
					<image v-if="fromb.b" :src="fromb.b" mode="widthFix" class="step-image" />
					<image v-if="fromb.c" :src="fromb.c" mode="widthFix" class="step-image" />
					<image v-if="fromb.d" :src="fromb.d" mode="widthFix" class="step-image" />
					<image v-if="fromb.e" :src="fromb.e" mode="widthFix" class="step-image" />
					<view v-if="!fromb.b && !fromb.c && !fromb.d && !fromb.e" class="no-image">暂无图片</view>
				</view>
				
				<view class="re-card-p32">
					<view class="flex-sb">
						<view class="re-from-label">水槽照片</view>
					</view>
					<image v-if="fromb.f" :src="fromb.f" mode="widthFix" class="step-image" />
					<view v-else class="no-image">暂无图片</view>
				</view>
				
				<view class="re-card-p32">
					<view class="flex-sb">
						<view class="re-from-label">冷却箱</view>
					</view>
					<image v-if="fromb.g" :src="fromb.g" mode="widthFix" class="step-image" />
					<view v-else class="no-image">暂无图片</view>
				</view>
				
				<view class="re-card-p32">
					<view class="flex-sb">
						<view class="re-from-label">计时开始照片</view>
					</view>
					<image v-if="fromb.h" :src="fromb.h" mode="widthFix" class="step-image" />
					<view v-else class="no-image">暂无图片</view>
				</view>
				
				<view class="re-card-p32">
					<view class="re-from-label">备注</view>
					<textarea 
						class="re-card-textarea" 
						placeholder=" 请在此处备注您的疑问或者特殊情况。" 
						v-model="fromb.remark" 
						readonly
					/>
				</view>
			</view>
			
			<!-- 施工后 -->
			<view v-if="status === 3" class="cr mt40">
				<view class="re-card-p32">
					<view class="flex-sb">
						<view class="re-from-label">计时结束照片</view>
					</view>
					<image v-if="fromc.a" :src="fromc.a" mode="widthFix" class="step-image" />
					<view v-else class="no-image">暂无图片</view>
				</view>
				
				<view class="re-card-p32">
					<view class="flex-sb">
						<view class="re-from-label">抖料清洗照片</view>
					</view>
					<image v-if="fromc.b" :src="fromc.b" mode="widthFix" class="step-image" />
					<view v-else class="no-image">暂无图片</view>
				</view>
				
				<view class="re-card-p32">
					<view class="flex-sb">
						<view class="re-from-label">车身照片</view>
					</view>
					<image v-if="fromc.c" :src="fromc.c" mode="widthFix" class="step-image" />
					<view v-else class="no-image">暂无图片</view>
				</view>
				
				<view class="re-card-p32">
					<view class="flex-sb">
						<view class="re-from-label">仪表盘照片</view>
					</view>
					<image v-if="fromc.d" :src="fromc.d" mode="widthFix" class="step-image" />
					<view v-else class="no-image">暂无图片</view>
				</view>
				
				<view class="re-card-p32">
					<view class="flex-sb">
						<view class="re-from-label">补方小票照片</view>
					</view>
					<image v-if="fromc.e" :src="fromc.e" mode="widthFix" class="step-image" />
					<view v-else class="no-image">暂无图片</view>
				</view>
				
				<view class="re-card-p32">
					<view class="flex-sb">
						<view class="re-from-label">车辆入库交车照片</view>
					</view>
					<image v-if="fromc.f" :src="fromc.f" mode="widthFix" class="step-image" />
					<view v-else class="no-image">暂无图片</view>
				</view>
				
				<view class="re-card-p32">
					<view class="re-from-label">备注</view>
					<textarea 
						class="re-card-textarea" 
						placeholder=" 请在此处备注您的疑问或者特殊情况。" 
						v-model="fromc.remark" 
						readonly
					/>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navbar from '@/components/base/navbar.vue'
	
	export default {
		name: 'UserSteps',
		components: {
			navbar
		},
		data() {
			return {
				orderId: '',
				step: 8, // 步骤指示器位置
				status: 1, // 当前状态：1-施工前，2-施工中，3-施工后
				// 施工前数据
				froma: {
					a: '', // 仪表盘照片
					b: '', // 车身前
					c: '', // 车身后
					d: '', // 车身左
					e: '', // 车身右
					f: '', // 当前工作环境
					g: '', // 水槽照片
					h: '', // 现场视频
					remark: '' // 备注
				},
				// 施工中数据
				fromb: {
					a: '', // 当前工作环境
					b: '', // 支腿前
					c: '', // 支腿后
					d: '', // 支腿左
					e: '', // 支腿右
					f: '', // 水槽照片
					g: '', // 冷却箱
					h: '', // 计时开始照片
					remark: '' // 备注
				},
				// 施工后数据
				fromc: {
					a: '', // 计时结束照片
					b: '', // 抖料清洗照片
					c: '', // 车身照片
					d: '', // 仪表盘照片
					e: '', // 补方小票照片
					f: '', // 车辆入库交车照片
					remark: '' // 备注
				}
			}
		},
		onLoad(options) {
			if (options.id) {
				this.orderId = options.id;
			}
		},
		onShow() {
			this.clickTabOne();
		},
		methods: {
			// 点击施工前标签
			clickTabOne() {
				this.step = 8;
				this.status = 1;
				this.loadList();
			},
			
			// 点击施工中标签
			clickTabTwo() {
				this.step = 221;
				this.status = 2;
				this.loadList();
			},
			
			// 点击施工后标签
			clickTabThr() {
				this.step = 432;
				this.status = 3;
				this.loadList();
			},
			
			// 加载数据
			loadList() {
				// 模拟加载数据
				uni.showLoading({
					title: '加载中...'
				});
				
				setTimeout(() => {
					uni.hideLoading();
					
					// 模拟数据
					if (this.status === 1) {
						this.froma = {
							a: 'https://relief.oss-cn-hangzhou.aliyuncs.com/one01.png',
							b: 'https://relief.oss-cn-hangzhou.aliyuncs.com/one02.png',
							c: 'https://relief.oss-cn-hangzhou.aliyuncs.com/one03.png',
							d: 'https://relief.oss-cn-hangzhou.aliyuncs.com/one04.png',
							e: 'https://relief.oss-cn-hangzhou.aliyuncs.com/one05.png',
							f: 'https://relief.oss-cn-hangzhou.aliyuncs.com/one06.png',
							g: 'https://relief.oss-cn-hangzhou.aliyuncs.com/one07.png',
							h: '',
							remark: '施工前检查完成，设备状态良好。'
						};
					} else if (this.status === 2) {
						this.fromb = {
							a: 'https://relief.oss-cn-hangzhou.aliyuncs.com/one08.png',
							b: 'https://relief.oss-cn-hangzhou.aliyuncs.com/one11.png',
							c: 'https://relief.oss-cn-hangzhou.aliyuncs.com/one12.png',
							d: 'https://relief.oss-cn-hangzhou.aliyuncs.com/one13.png',
							e: 'https://relief.oss-cn-hangzhou.aliyuncs.com/one14.png',
							f: 'https://relief.oss-cn-hangzhou.aliyuncs.com/one05.png',
							g: 'https://relief.oss-cn-hangzhou.aliyuncs.com/one07.png',
							h: 'https://relief.oss-cn-hangzhou.aliyuncs.com/one15.png',
							remark: '施工中，设备运行正常。'
						};
					} else if (this.status === 3) {
						this.fromc = {
							a: 'https://relief.oss-cn-hangzhou.aliyuncs.com/one19.png',
							b: 'https://relief.oss-cn-hangzhou.aliyuncs.com/one17.png',
							c: 'https://relief.oss-cn-hangzhou.aliyuncs.com/one19.png',
							d: 'https://relief.oss-cn-hangzhou.aliyuncs.com/one01.png',
							e: 'https://relief.oss-cn-hangzhou.aliyuncs.com/one16.png',
							f: 'https://relief.oss-cn-hangzhou.aliyuncs.com/one18.png',
							remark: '施工完成，设备清洗完毕，交车状态良好。'
						};
					}
				}, 1000);
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #F5F5F5;
	}
	
	.content {
		min-height: 100vh;
		background-color: #F5F5F5;
	}
	
	.cr {
		min-height: calc(88vh);
	}
	
	.mt40 {
		margin-top: 40rpx;
	}
	
	// 头部样式
	.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;
			position: relative;
			transition: color 0.3s;
			
			&:active {
				color: #007AFF;
			}
		}
	}
	
	.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;
	}
	
	// 弹性布局
	.flex {
		display: flex;
	}
	
	.flex-sb {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;
	}
	
	// 卡片样式
	.re-card-p32 {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		width: calc(690rpx - 64rpx);
		min-height: 120rpx;
		margin: 0 calc(50vw - 690rpx / 2);
		margin-bottom: 30rpx;
		padding: 32rpx;
		position: relative;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
	}
	
	// 标签样式
	.re-from-label {
		font-size: 28rpx;
		font-weight: normal;
		letter-spacing: 0px;
		color: #1c1c1c;
	}
	
	// 图片样式
	.step-image {
		width: 100%;
		max-width: 626rpx;
		border-radius: 16rpx;
		margin: 15rpx auto;
		display: block;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}
	
	// 视频样式
	.step-video {
		width: 100%;
		max-width: 626rpx;
		height: 342rpx;
		border-radius: 16rpx;
		margin: 15rpx auto;
		display: block;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}
	
	// 无图片提示
	.no-image {
		width: 100%;
		height: 200rpx;
		line-height: 200rpx;
		text-align: center;
		color: #999;
		font-size: 28rpx;
		background-color: #f8f9fa;
		border: 2rpx dashed #ddd;
		border-radius: 16rpx;
		margin: 15rpx auto;
	}
	
	// 文本域样式
	.re-card-textarea {
		width: 570rpx;
		height: 152rpx;
		border-radius: 8rpx;
		padding: 20rpx;
		background: #EEEEEE;
		font-size: 26rpx;
		line-height: normal;
		letter-spacing: 0em;
		color: #0d0d0d;
		border: none;
		box-sizing: border-box;
		resize: none;
		
		&::placeholder {
			color: #999;
		}
		
		&[readonly] {
			background-color: #f5f5f5;
			color: #666;
		}
	}
</style>