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

<template>
	<view class="content">
		<navbar title="施工确认" leftClick @leftClick="$utils.navigateBack" />
		<view class="cr mt40">
			<!-- 当前工作环境 -->
			<view class="re-card-p32">
				<view class="flex-sb">
					<view class="re-from-label">请拍摄当前工作环境</view>
					<view class="re-card-show" @click="clickShowExample('https://relief.oss-cn-hangzhou.aliyuncs.com/one07.png')">查看示例</view>
				</view>
				<input-image 
					:height="456" 
					@uploadSuccess="(data) => form.workEnvironment = data.ossUrl" 
				/>
				<view class="re-card-context">
					需拍摄<label>车辆四周</label>照片，以保证场地满足施工。
				</view>
			</view>
			
			<!-- 支腿前方照片 -->
			<view class="re-card-p32">
				<view class="flex-sb">
					<view class="re-from-label">请拍摄支腿前方照片</view>
					<view class="re-card-show" @click="clickShowExample('https://relief.oss-cn-hangzhou.aliyuncs.com/one11.png')">查看示例</view>
				</view>
				<input-image 
					:height="456" 
					@uploadSuccess="(data) => form.frontLeg = data.ossUrl" 
				/>
				<view class="re-card-context">
					需拍摄<label>车辆支腿前方</label>照片，以保证车辆交车状况。
				</view>
			</view>
			
			<!-- 支腿后方照片 -->
			<view class="re-card-p32">
				<view class="flex-sb">
					<view class="re-from-label">请拍摄支腿后方照片</view>
					<view class="re-card-show" @click="clickShowExample('https://relief.oss-cn-hangzhou.aliyuncs.com/one12.png')">查看示例</view>
				</view>
				<input-image 
					:height="456" 
					@uploadSuccess="(data) => form.backLeg = data.ossUrl" 
				/>
				<view class="re-card-context">
					需拍摄<label>车辆支腿后方</label>照片，以保证车辆交车状况。
				</view>
			</view>
			
			<!-- 支腿左侧方照片 -->
			<view class="re-card-p32">
				<view class="flex-sb">
					<view class="re-from-label">请拍摄支腿左侧方照片</view>
					<view class="re-card-show" @click="clickShowExample('https://relief.oss-cn-hangzhou.aliyuncs.com/one13.png')">查看示例</view>
				</view>
				<input-image 
					:height="456" 
					@uploadSuccess="(data) => form.leftLeg = data.ossUrl" 
				/>
				<view class="re-card-context">
					需拍摄<label>车辆支腿左侧方</label>照片，以保证车辆交车状况。
				</view>
			</view>
			
			<!-- 支腿右侧方照片 -->
			<view class="re-card-p32">
				<view class="flex-sb">
					<view class="re-from-label">请拍摄支腿右侧方照片</view>
					<view class="re-card-show" @click="clickShowExample('https://relief.oss-cn-hangzhou.aliyuncs.com/one14.png')">查看示例</view>
				</view>
				<input-image 
					:height="456" 
					@uploadSuccess="(data) => form.rightLeg = data.ossUrl" 
				/>
				<view class="re-card-context">
					需拍摄<label>车辆支腿右侧方</label>照片，以保证车辆交车状况。
				</view>
			</view>
			
			<!-- 水槽照片 -->
			<view class="re-card-p32">
				<view class="flex-sb">
					<view class="re-from-label">请拍摄水槽照片</view>
					<view class="re-card-show" @click="clickShowExample('https://relief.oss-cn-hangzhou.aliyuncs.com/one05.png')">查看示例</view>
				</view>
				<input-image 
					:height="456" 
					@uploadSuccess="(data) => form.waterTank = data.ossUrl" 
				/>
				<view class="re-card-context">
					需拍摄<label>车辆油箱、水箱</label>照片，以保证车辆安全状况。
				</view>
			</view>
			
			<!-- 冷却箱 -->
			<view class="re-card-p32">
				<view class="flex-sb">
					<view class="re-from-label">请拍摄冷却箱</view>
					<view class="re-card-show" @click="clickShowExample('https://relief.oss-cn-hangzhou.aliyuncs.com/one07.png')">查看示例</view>
				</view>
				<input-image 
					:height="456" 
					@uploadSuccess="(data) => form.coolingBox = data.ossUrl" 
				/>
				<view class="re-card-context">
					需拍摄<label>车辆冷却箱</label>照片，以保证车辆安全状况。
				</view>
			</view>
			
			<!-- 液压油位 -->
			<view class="re-card-p32">
				<view class="flex-sb">
					<view class="re-from-label">请拍摄液压油位</view>
					<view class="re-card-show" @click="clickShowExample('https://relief.oss-cn-hangzhou.aliyuncs.com/one06.png')">查看示例</view>
				</view>
				<input-image 
					:height="456" 
					@uploadSuccess="(data) => form.hydraulicOil = data.ossUrl" 
				/>
				<view class="re-card-context">
					需拍摄<label>车辆液压油位</label>照片，以保证车辆安全状况。
				</view>
			</view>
			
			<!-- 计时开始照片 -->
			<view class="re-card-p32">
				<view class="flex-sb">
					<view class="re-from-label">请拍摄计时开始照片</view>
					<view class="re-card-show" @click="clickShowExample('https://relief.oss-cn-hangzhou.aliyuncs.com/one15.png')">查看示例</view>
				</view>
				<input-image 
					:height="456" 
					@uploadSuccess="(data) => form.timingStart = data.ossUrl" 
				/>
				<view class="re-card-context">
					需拍摄<label>开始计时的照片</label>以保证您的利益。
				</view>
			</view>
			
			<!-- 备注 -->
			<view class="re-card-p32">
				<view class="re-from-label">备注<label>（选填）</label></view>
				<textarea 
					class="re-card-textarea" 
					placeholder=" 如在施工过程中发现问题，请用文字描述。" 
					v-model="form.remark" 
				/>
			</view>
		</view>
		
		<!-- 底部提交按钮 -->
		<view class="re-end-pand">
			<button @click="submitForm">提交保存</button>
		</view>
		
		<!-- 示例弹窗 -->
		<show-example 
			v-if="showExample" 
			:show="showExample" 
			:url="exampleUrl" 
			@close="showExample = false" 
		/>
	</view>
</template>

<script>
	import navbar from '@/components/base/navbar.vue'
	import InputImage from '@/components/base/input-image.vue'
	import ShowExample from '@/components/base/show-example.vue'
	
	export default {
		name: 'UserStep1',
		components: {
			navbar,
			InputImage,
			ShowExample
		},
		data() {
			return {
				orderId: '',
				showExample: false,
				exampleUrl: '',
				form: {
					workEnvironment: '', // 当前工作环境
					frontLeg: '', // 支腿前方照片
					backLeg: '', // 支腿后方照片
					leftLeg: '', // 支腿左侧方照片
					rightLeg: '', // 支腿右侧方照片
					waterTank: '', // 水槽照片
					coolingBox: '', // 冷却箱
					hydraulicOil: '', // 液压油位
					timingStart: '', // 计时开始照片
					remark: '' // 备注
				}
			}
		},
		onLoad(options) {
			if (options.id) {
				this.orderId = options.id;
			}
		},
		methods: {
			// 显示示例图片
			clickShowExample(url) {
				this.exampleUrl = url || 'https://relief.oss-cn-hangzhou.aliyuncs.com/yx.jpg';
				this.showExample = true;
			},
			
			// 提交表单
			submitForm() {
				// 验证必填项
				const requiredFields = [
					'workEnvironment', 'frontLeg', 'backLeg', 'leftLeg', 
					'rightLeg', 'waterTank', 'coolingBox', 'hydraulicOil', 'timingStart'
				];
				
				for (let field of requiredFields) {
					if (!this.form[field]) {
						uni.showToast({
							icon: 'none',
							title: '请按照要求拍摄上传照片'
						});
						return;
					}
				}
				
				this.doSubmit();
			},
			
			// 执行提交
			doSubmit() {
				// 模拟提交数据
				const submitData = {
					id: this.$utils?.generateUUID() || Date.now().toString(),
					status: 1,
					step: 2,
					orderId: this.orderId,
					...this.form
				};
				
				console.log('提交数据:', submitData);
				
				// 模拟API调用
				uni.showLoading({
					title: '提交中...'
				});
				
				setTimeout(() => {
					uni.hideLoading();
					uni.showToast({
						icon: 'success',
						title: '提交成功'
					});
					
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 1500);
				}, 1000);
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #F5F5F5;
	}
	
	.content {
		min-height: 100vh;
		background-color: #F5F5F5;
		padding-bottom: 200rpx; // 为底部按钮留出空间
	}
	
	.cr {
		min-height: calc(88vh);
	}
	
	.mt40 {
		margin-top: 40rpx;
	}
	
	// 卡片样式
	.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);
	}
	
	// 弹性布局
	.flex-sb {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;
	}
	
	// 标签样式
	.re-from-label {
		font-size: 28rpx;
		font-weight: normal;
		letter-spacing: 0px;
		color: #1c1c1c;
	}
	
	// 查看示例按钮
	.re-card-show {
		color: #9E9E9E;
		font-size: 24rpx;
		font-weight: normal;
		line-height: normal;
		letter-spacing: 0em;
		padding: 8rpx 16rpx;
		border: 1rpx solid #9E9E9E;
		border-radius: 20rpx;
		background-color: rgba(158, 158, 158, 0.1);
		transition: all 0.3s;
		
		&:active {
			background-color: rgba(158, 158, 158, 0.2);
			transform: scale(0.95);
		}
	}
	
	// 说明文字
	.re-card-context {
		font-size: 24rpx;
		font-weight: normal;
		line-height: 36rpx;
		letter-spacing: 0em;
		color: #9E9E9E;
		margin-top: 16rpx;
		
		label {
			color: #F40000;
			font-weight: 500;
		}
	}
	
	// 文本域样式
	.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;
		}
	}
	
	// 底部按钮区域
	.re-end-pand {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100vw;
		height: 88rpx;
		opacity: 1;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0, 0, 0, 0.2);
		padding: 30rpx 0;
		padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
		z-index: 100;
		
		button {
			width: 620rpx;
			height: 88rpx;
			line-height: 88rpx;
			border-radius: 10rpx;
			background: #F40000;
			color: #FFF;
			text-align: center;
			margin: 0 auto;
			font-size: 30rpx;
			font-weight: 400;
			transition: all 0.2s ease-in-out;
			border: none;
			
			&:active {
				transform: translateY(2rpx) translateX(1rpx);
				background: #d63031;
			}
		}
	}
	
	// 高亮文字
	.highlight {
		color: #F40000;
		font-weight: 500;
	}
	
	// 可选标识
	.optional {
		color: #999;
		font-weight: normal;
	}
</style>