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

<template>
	<view class="page">
		<!-- 导航栏 -->
		<navbar title="接车确认" :leftClick="true" @leftClick="goBack" />
		
		<view class="content">
			<view class="cr mt40">
				<!-- 仪表盘照片 -->
				<view class="re-card-p32">
					<view class="flex-sb">
						<view class="re-from-label">请拍摄仪表盘照片</view>
						<view class="re-card-show" @tap="clickShowExample('https://relief.oss-cn-hangzhou.aliyuncs.com/one01.png')">查看示例</view>
					</view>
					<input-image 
						:height="456" 
						@uploadSuccess="handleImageUpload('a', $event)"
					/>
					<view class="re-card-context">
						请拍摄车辆启动后的仪表 确保柴油油位照片，<text class="highlight">机油压力水温和故障预警，照片清晰无倾斜</text>
					</view>
				</view>
				
				<!-- 车身前方照片 -->
				<view class="re-card-p32">
					<view class="flex-sb">
						<view class="re-from-label">请拍摄车身前方照片</view>
						<view class="re-card-show" @tap="clickShowExample('https://relief.oss-cn-hangzhou.aliyuncs.com/one02.png')">查看示例</view>
					</view>
					<input-image 
						:height="456" 
						@uploadSuccess="handleImageUpload('b', $event)"
					/>
					<view class="re-card-context">
						需拍摄<text class="highlight">车辆前方</text>照片，以保证车辆交车状况。
					</view>
				</view>
				
				<!-- 车身后方照片 -->
				<view class="re-card-p32">
					<view class="flex-sb">
						<view class="re-from-label">请拍摄车身后方照片</view>
						<view class="re-card-show" @tap="clickShowExample('https://relief.oss-cn-hangzhou.aliyuncs.com/one08.png')">查看示例</view>
					</view>
					<input-image 
						:height="456" 
						@uploadSuccess="handleImageUpload('c', $event)"
					/>
					<view class="re-card-context">
						需拍摄<text class="highlight">车辆后方</text>照片，以保证车辆交车状况。
					</view>
				</view>
				
				<!-- 车身左侧方照片 -->
				<view class="re-card-p32">
					<view class="flex-sb">
						<view class="re-from-label">请拍摄车身左侧方照片</view>
						<view class="re-card-show" @tap="clickShowExample('https://relief.oss-cn-hangzhou.aliyuncs.com/one04.png')">查看示例</view>
					</view>
					<input-image 
						:height="456" 
						@uploadSuccess="handleImageUpload('d', $event)"
					/>
					<view class="re-card-context">
						需拍摄<text class="highlight">车辆左侧方</text>照片，以保证车辆交车状况。
					</view>
				</view>
				
				<!-- 车身右侧方照片 -->
				<view class="re-card-p32">
					<view class="flex-sb">
						<view class="re-from-label">请拍摄车身右侧方照片</view>
						<view class="re-card-show" @tap="clickShowExample('https://relief.oss-cn-hangzhou.aliyuncs.com/one03.png')">查看示例</view>
					</view>
					<input-image 
						:height="456" 
						@uploadSuccess="handleImageUpload('e', $event)"
					/>
					<view class="re-card-context">
						需拍摄<text class="highlight">车辆右侧方</text>照片，以保证车辆交车状况。
					</view>
				</view>
				
				<!-- 当前工作环境 -->
				<view class="re-card-p32">
					<view class="flex-sb">
						<view class="re-from-label">请拍摄当前工作环境</view>
						<view class="re-card-show" @tap="clickShowExample('https://relief.oss-cn-hangzhou.aliyuncs.com/one07.png')">查看示例</view>
					</view>
					<input-image 
						:height="456" 
						@uploadSuccess="handleImageUpload('f', $event)"
					/>
					<view class="re-card-context">
						需拍摄<text class="highlight">车辆四周</text>照片，以保证平台任务相符。
					</view>
				</view>
				
				<!-- 水槽照片 -->
				<view class="re-card-p32">
					<view class="flex-sb">
						<view class="re-from-label">请拍摄水槽照片</view>
					</view>
					<input-image 
						:height="456" 
						@uploadSuccess="handleImageUpload('g', $event)"
					/>
					<view class="re-card-context">
						需拍摄<text class="highlight">车辆水槽</text>照片，以保证水位能满足车辆降温。
					</view>
				</view>
				
				<!-- 液压油位照片 -->
				<view class="re-card-p32">
					<view class="flex-sb">
						<view class="re-from-label">请拍摄液压油位照片</view>
						<view class="re-card-show" @tap="clickShowExample('https://relief.oss-cn-hangzhou.aliyuncs.com/one06.png')">查看示例</view>
					</view>
					<input-image 
						:height="456" 
						@uploadSuccess="handleImageUpload('h', $event)"
					/>
					<view class="re-card-context">
						需拍摄<text class="highlight">车辆液压油位</text>照片，以保证油位满足正常施工。
					</view>
				</view>
				
				<!-- 备注 -->
				<view class="re-card-p32">
					<view class="re-from-label">备注<text class="optional">（选填）</text></view>
					<textarea 
						class="re-card-textarea" 
						placeholder="如在施工过程中发现问题，请用文字描述。" 
						v-model="form.remark"
					/>
				</view>
			</view>
			
			<!-- 提交按钮 -->
			<view class="re-end-pand">
				<button @tap="clickSaveAndBack">提交保存</button>
			</view>
		</view>
		
		<!-- 示例弹窗 -->
		<show-example 
			:show="show" 
			:url="url" 
			@close="show = 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: 'UserStep0',
		components: {
			navbar,
			inputImage,
			showExample
		},
		data() {
			return {
				show: false,
				url: '',
				orderId: '',
				form: {
					a: '', // 仪表盘照片
					b: '', // 车身前方照片
					c: '', // 车身后方照片
					d: '', // 车身左侧方照片
					e: '', // 车身右侧方照片
					f: '', // 当前工作环境
					g: '', // 水槽照片
					h: '', // 液压油位照片
					i: '', // 预留字段
					j: '', // 预留字段
					k: '', // 预留字段
					remark: '' // 备注
				}
			}
		},
		onLoad(options) {
			if (options.id) {
				this.orderId = options.id
			}
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack()
			},
			
			// 显示示例图片
			clickShowExample(url) {
				if (url) {
					this.url = url
				} else {
					this.url = 'https://relief.oss-cn-hangzhou.aliyuncs.com/yx.jpg'
				}
				this.show = true
			},
			
			// 处理图片上传成功
			handleImageUpload(field, event) {
				console.log('图片上传成功:', field, event)
				// event 包含 { localPath, ossUrl }
				if (event && event.ossUrl) {
					this.form[field] = event.ossUrl
				} else if (event && event.localPath) {
					// 如果没有OSS地址，使用本地路径（开发模式）
					this.form[field] = event.localPath
				}
			},
			
			// 提交保存
			clickSaveAndBack() {
				// 验证必填字段
				if (!this.form.a || !this.form.b || !this.form.c || !this.form.d || 
					!this.form.e || !this.form.f || !this.form.g || !this.form.h) {
					uni.showToast({
						icon: 'none',
						title: '请按照要求拍摄上传照片'
					})
					return
				}
				this.doSubmit()
			},
			
			// 执行提交
			doSubmit() {
				// 模拟数据提交
				const submitData = {
					id: this.$utils?.generateUUID?.() || Date.now().toString(),
					status: 1,
					step: 1,
					orderId: this.orderId,
					...this.form
				}
				
				console.log('提交数据:', submitData)
				
				// 模拟提交成功
				uni.showToast({
					icon: 'success',
					title: '提交成功'
				})
				
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				}, 1500)
				
				// 实际项目中的API调用示例：
				// this.$httpPost('/api/order/image', submitData, (res) => {
				//   console.log('[/order/image]', res)
				//   if (res.data && res.data > 0) {
				//     this.$httpPost('/api/order/status', submitData, (res2) => {
				//       console.log('[/order/status]', res2)
				//       if (res2.data) {
				//         uni.showToast({ icon: 'success', title: '提交成功' })
				//         setTimeout(() => {
				//           uni.navigateBack({ delta: 1 })
				//         }, 1500)
				//       }
				//     })
				//   } else {
				//     uni.showModal({
				//       title: '提交失败',
				//       content: `本次提交失败，您可以停留在本页面，稍后再次尝试提交，错误码[${res.data}]`
				//     })
				//   }
				// })
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: #F5F5F5;
		min-height: 100vh;
	}
	
	.content {
		padding-bottom: 120rpx; // 为底部按钮留出空间
	}
	
	.cr {
		min-height: calc(88vh);
	}
	
	.mt40 {
		margin-top: 40rpx;
	}
	
	// 卡片样式
	.re-card-p32 {
		padding: 32rpx;
		margin: 0 32rpx 32rpx 32rpx;
		background-color: #fff;
		border-radius: 16rpx;
		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: 32rpx;
		font-weight: 500;
		color: #333;
		line-height: 44rpx;
	}
	
	// 查看示例按钮
	.re-card-show {
		font-size: 26rpx;
		color: #007AFF;
		padding: 8rpx 16rpx;
		border: 1rpx solid #007AFF;
		border-radius: 20rpx;
		background-color: rgba(0, 122, 255, 0.1);
	}
	
	// 说明文字
	.re-card-context {
		font-size: 26rpx;
		color: #666;
		line-height: 36rpx;
		margin-top: 16rpx;
		padding: 16rpx;
		background-color: #f8f9fa;
		border-radius: 8rpx;
		border-left: 4rpx solid #007AFF;
	}
	
	// 高亮文字
	.highlight {
		color: #F40000;
		font-weight: 500;
	}
	
	// 可选标识
	.optional {
		color: #999;
		font-weight: normal;
	}
	
	// 文本域样式
	.re-card-textarea {
		width: 100%;
		min-height: 120rpx;
		padding: 20rpx;
		border: 1rpx solid #e0e0e0;
		border-radius: 8rpx;
		font-size: 28rpx;
		color: #333;
		background-color: #fafafa;
		margin-top: 16rpx;
		box-sizing: border-box;
		resize: none;
		
		&::placeholder {
			color: #999;
		}
		
		&:focus {
			border-color: #007AFF;
			background-color: #fff;
		}
	}
	
	// 底部按钮区域
	.re-end-pand {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 24rpx 32rpx;
		padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
		background-color: #fff;
		border-top: 1rpx solid #e0e0e0;
		z-index: 100;
		
		button {
			width: 100%;
			height: 88rpx;
			background: linear-gradient(135deg, #007AFF 0%, #0056CC 100%);
			color: #fff;
			font-size: 32rpx;
			font-weight: 500;
			border: none;
			border-radius: 44rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.3);
			transition: all 0.3s ease;
			
			&:active {
				transform: translateY(2rpx);
				box-shadow: 0 2rpx 8rpx rgba(0, 122, 255, 0.4);
			}
			
			&::after {
				border: none;
			}
		}
	}
	
	// 单选框样式覆盖
	/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;
	}
</style>