concrete-transportation-uniapp-20250821/pages/user/step1.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/one07.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/one11.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/one12.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/one13.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/one14.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/one05.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/one07.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/one15.png')">查看示例</view>
				</view>
				<input-image @success="(url) => from.i = url" :height="456"/>
				<view class="re-card-context">
					需拍摄<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 ShowExample from "/components/show-example.vue"
	export default {
		components: {
			InputImage, 
			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
					||!this.from.i){
					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 = 2
				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>