concrete-transportation-uniapp-20250821/pages_order/user/step2.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/one19.png')">查看示例</view>
				</view>
				<input-image 
					:height="456" 
					@uploadSuccess="(data) => form.timingEnd = 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/one17.png')">查看示例</view>
				</view>
				<input-image 
					:height="456" 
					@uploadSuccess="(data) => form.materialCleaning = 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/one19.png')">查看示例</view>
				</view>
				<input-image 
					:height="456" 
					@uploadSuccess="(data) => form.vehicleBody = 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/one01.png')">查看示例</view>
				</view>
				<input-image 
					:height="456" 
					@uploadSuccess="(data) => form.dashboard = data.ossUrl" 
				/>
				<view class="re-card-context">
					需拍摄<label>仪表盘</label>照片，<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/one16.png')">查看示例</view>
				</view>
				<input-image 
					:height="456" 
					@uploadSuccess="(data) => form.signedOrder = data.ossUrl" 
				/>
				<view class="re-card-context">
					需拍摄<label>签单</label>照片，尽量保证<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/one16.png')">查看示例</view>
				</view>
				<input-image 
					:height="456" 
					@uploadSuccess="(data) => form.supplementTicket = 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/one18.png')">查看示例</view>
				</view>
				<input-image 
					:height="456" 
					@uploadSuccess="(data) => form.vehicleHandover = 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: 'UserStep2',
		components: {
			navbar,
			InputImage,
			ShowExample
		},
		data() {
			return {
				orderId: '',
				showExample: false,
				exampleUrl: '',
				form: {
					timingEnd: '', // 计时结束照片
					materialCleaning: '', // 抖料清洗照片
					vehicleBody: '', // 车身照片
					dashboard: '', // 仪表盘照片
					signedOrder: '', // 签单照片
					supplementTicket: '', // 补方小票照片
					vehicleHandover: '', // 车辆入库交车照片
					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 = [
					'timingEnd', 'materialCleaning', 'vehicleBody', 'dashboard', 
					'signedOrder', 'supplementTicket', 'vehicleHandover'
				];
				
				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: 2,
					step: 3,
					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>