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

<template>
	<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" @click="clickShowExample('https://relief.oss-cn-hangzhou.aliyuncs.com/one01.png')">查看示例</view>
				</view>
				<input-image @success="(url) => from.a = url" :height="456"/>
				<view class="re-card-context">
					请拍摄车辆启动后的仪表 确保柴油油位照片，<span>机油压力水温和故障预警，照片清晰无倾斜</span>
				</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/one02.png')">查看示例</view>
				</view>
				<input-image @success="(url) => from.b = url" :height="456"/>
				<view class="re-card-context">
					需拍摄<span>车辆前方</span>照片，以保证车辆交车状况。
				</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/one08.png')">查看示例</view>
				</view>
				<input-image @success="(url) => from.c = url" :height="456"/>
				<view class="re-card-context">
					需拍摄<span>车辆后方</span>照片，以保证车辆交车状况。
				</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/one04.png')">查看示例</view>
				</view>
				<input-image @success="(url) => from.d = url" :height="456"/>
				<view class="re-card-context">
					需拍摄<span>车辆左侧方</span>照片，以保证车辆交车状况。
				</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/one03.png')">查看示例</view>
				</view>
				<input-image @success="(url) => from.e = url" :height="456"/>
				<view class="re-card-context">
					需拍摄<span>车辆右侧方</span>照片，以保证车辆交车状况。
				</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 @success="(url) => from.f = url" :height="456"/>
				<view class="re-card-context">
					需拍摄<span>车辆四周</span>照片，以保证平台任务相符。
				</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 @success="(url) => from.g = url" :height="456"/>
				<view class="re-card-context">
					需拍摄<span>车辆水槽</span>照片，以保证水位能满足车辆降温。
				</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 @success="(url) => from.h = url" :height="456"/>
				<view class="re-card-context">
					需拍摄<span>车辆液压油位</span>照片，以保证油位满足正常施工。
				</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/one_cv.mp4')">查看示例</view>
				</view>
				<input-voide @success="(url) => from.i = url" :height="456"/>
				<view class="re-card-context">
					请尽量拍摄一段保持<span>在2分钟内</span>的视频，视频应包含<span>清晰车牌、车身四面、施工环境</span>内容
				</view>
			</view> -->
			
			<view class="re-card-p32">
				<view class="re-from-label">备注<span>（选填）</span></view>
				<textarea v-model="from.remark" class="re-card-textarea inpit" placeholder=" 如在施工过程中发现问题，请用文字描述。"/>
			</view>
			
		</view>
		
		<view class="re-end-pand">
			<button @click="clickSaveAndBack">提交保存</button>
		</view>
		
		<show-example ref="showe" :show="show" :url="url" @close="show=false"/>
		
	</view>
</template>

<script>
	import InputImage from "/components/input-image.vue"
	import InputVoide from "/components/input-voide.vue"
	import ShowExample from "/components/show-example.vue"
	export default {
		components: {
			InputImage, 
			InputVoide,
			ShowExample
		},
		data() {
			return {
				show: false,
				url: "",
				orderId: "",
				from: {
					a:"",
					b:"",
					c:"",
					d:"",
					e:"",
					f:"",
					g:"",
					h:"",
					i:"",
					j:"",
					k:"",
					remark: ""
				},
			}
		},
		onLoad(opn) {
			this.orderId = opn.id
		},
		methods: {
			clickShowExample(url){
				if(url){
					this.url = url
				} else {
					this.url = "https://relief.oss-cn-hangzhou.aliyuncs.com/yx.jpg"
				}
				this.show = true
			},
			clickSaveAndBack(){
				if(!this.from.a || !this.from.b || !this.from.c || !this.from.d
					||!this.from.e || !this.from.f || !this.from.g || !this.from.h){
					uni.showToast({ icon: "none", title: "请按照要求拍摄上传照片" })
					return
				}
				//if(!this.from.remark){
				//	uni.showToast({ icon: "none", title: "开工备注必填" })
				//	return
				//}
				this.doSubmit()
			},
			doSubmit(){
				const _this = this;
				this.from.id = this.$utils.generateUUID()
				this.from.status = 1
				this.from.step = 1
				this.from.orderId = this.orderId
				console.log(this.from);
				this.$httpPost("/api/order/image", this.from, function(res) {
					console.log('[/order/image]', res);
					if(res.data && res.data>0){
						_this.$httpPost("/api/order/status", _this.from, function(res) {
							console.log('[/order/status]', res);
							if(res.data){
								uni.showToast({ icon: "success", title: "提交成功" })
								setTimeout(()=>{
									uni.navigateBack({ delta: 1 });
								}, 1500)
							}
						})
					} else {
						uni.showModal({
							title: "提交失败",
							content: `本次提交失败，您可以停留在本页面，稍后再次尝试提交，错误码[${res.data}]`,
							success: (res) => {
								if(res.confirm === true){
									
								}
							}
						})
					}
				})
			}
		}
	}
</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;
	}
</style>