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

<template>
	
	<view>
	
		<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 class="cr mt40" v-if="status===1">
				
				<view class="re-card-p32">
					<view class="flex-sb">
						<view class="re-from-label">仪表盘照片</view>
					</view>
					<image :src="froma.a" height="456"></image>
				</view>
				
				<view class="re-card-p32">
					<view class="flex-sb">
						<view class="re-from-label">车身前后左右</view>
					</view>
					<image :url="froma.b" height="456"/>
					<image :url="froma.c" height="456"/>
					<image :url="froma.d" height="456"/>
					<image :url="froma.e" height="456"/>
				</view>
				
				<view class="re-card-p32">
					<view class="flex-sb">
						<view class="re-from-label">当前工作环境</view>
					</view>
					<image :url="froma.f" height="456"/>
				</view>
				
				<view class="re-card-p32">
					<view class="flex-sb">
						<view class="re-from-label">水槽照片</view>
					</view>
					<image :url="froma.g" height="456"/>
				</view>
				
				<view class="re-card-p32">
					<view class="flex-sb">
						<view class="re-from-label">水槽照片</view>
					</view>
					<image :url="froma.h" height="456"/>
				</view>
				
				<view class="re-card-p32">
					<view class="flex-sb">
						<view class="re-from-label">现场视频</view>
					</view>
					<video :url="froma.i" height="456"/>
				</view>
				
				<view class="re-card-p32">
					<view class="re-from-label">备注</view>
					<textarea v-model="froma.remark" class="re-card-textarea inpit" placeholder=" 请在此处备注您的疑问或者特殊情况。"/>
				</view>
				
			</view>
		
			<view class="cr mt40" v-if="status===2">
				
				<view class="re-card-p32">
					<view class="flex-sb">
						<view class="re-from-label">当前工作环境</view>
					</view>
					<image :src="fromb.a" />
				</view>
				
				<view class="re-card-p32">
					<view class="flex-sb">
						<view class="re-from-label">支腿照片</view>
					</view>
					<image :src="fromb.b" />
					<image :src="fromb.c" />
					<image :src="fromb.d" />
					<image :src="fromb.e" />
				</view>
				
				<view class="re-card-p32">
					<view class="flex-sb">
						<view class="re-from-label">水槽照片</view>
					</view>
					<image :src="fromb.f" />
				</view>
				
				<view class="re-card-p32">
					<view class="flex-sb">
						<view class="re-from-label">冷却箱</view>
					</view>
					<image :src="fromb.g" />
				</view>
				
				<view class="re-card-p32">
					<view class="flex-sb">
						<view class="re-from-label">液压油位</view>
					</view>
					<image :src="fromb.h" />
				</view>
				
				<view class="re-card-p32">
					<view class="flex-sb">
						<view class="re-from-label">计时开始照片</view>
					</view>
					<image :src="fromb.i" />
				</view>
				
				
				<view class="re-card-p32">
					<view class="re-from-label">备注</view>
					<textarea v-model="fromb.remark" class="re-card-textarea inpit" placeholder=" 请在此处备注您的疑问或者特殊情况。"/>
				</view>
			</view>
			
			<view class="cr mt40" v-if="status===3">
				
				<view class="re-card-p32">
					<view class="flex-sb">
						<view class="re-from-label">计时结束照片</view>
					</view>
					<image :src="fromc.a" />
				</view>
				
				<view class="re-card-p32">
					<view class="flex-sb">
						<view class="re-from-label">抖料清洗照片</view>
					</view>
					<image :src="fromc.b" />
				</view>
				
				<view class="re-card-p32">
					<view class="flex-sb">
						<view class="re-from-label">车身照片</view>
					</view>
					<image :src="fromc.c" />
				</view>
				
				<view class="re-card-p32">
					<view class="flex-sb">
						<view class="re-from-label">仪表盘照片</view>
					</view>
					<image :src="fromc.d" />
				</view>
				
				<view class="re-card-p32">
					<view class="flex-sb">
						<view class="re-from-label">签单照片</view>
					</view>
					<image :src="fromc.e" />
				</view>
				
				<view class="re-card-p32">
					<view class="flex-sb">
						<view class="re-from-label">补方小票照片</view>
					</view>
					<image :src="fromc.f" />
				</view>
				
				<view class="re-card-p32">
					<view class="flex-sb">
						<view class="re-from-label">车辆入库交车照片</view>
					</view>
					<image :src="fromc.g" />
				</view>
				
				<view class="re-card-p32">
					<view class="re-from-label">备注</view>
					<textarea v-model="fromc.remark" class="re-card-textarea inpit" placeholder=" 请在此处备注您的疑问或者特殊情况。"/>
				</view>
			</view>
			
		</view>
	
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				url: "",
				orderId: "",
				step: 8,
				status: 0,
				froma: {
					a:"",
					remark: ""
				},
				fromb: {
					a:"",
					remark: ""
				},
				fromc: {
					a:"",
					remark: ""
				},
			}
		},
		onLoad(opn) {
			this.orderId = opn.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(){
				const _this = this;
				const params = {orderId: this.orderId, step: this.status}
				this.$httpGet("/api/order/get/step", params, function(res) {
					if(res.data){
						if(_this.status===1){
							_this.froma = res.data
						} else if(_this.status===2){
							_this.fromb = res.data
						} else if(_this.status===3){
							_this.fromc = res.data
						}
					}
					
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #F5F5F5;
	}
	
	.cr {
		min-height: calc(88vh);
	}
	
	/deep/ uni-radio .uni-radio-input{
		background-color: #F40000 !important;
		border-color: #F40000 !important;
	}
	
	/deep/ uni-radio .uni-radio-input:empty{
		background-color: #ffffff !important;
		border-color: #d1d1d1 !important;
	}
	
	.re-from-car{
		width: 72rpx;
		height: 60rpx;
		margin: 0 16rpx -20rpx 0;
	}
	
	.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;
	}
	.item-tab view{
		width: 33%;
		text-align: center;
		font-size: 26rpx;
		font-weight: normal;
		text-align: center;
		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;
	}
</style>