concrete-transportation-uniapp-20250821/pages/staff/car.vue

<template>
	<view class="content">
		
		<view class="cr mt40">
			
			<view class="re-card-p32">
				<view class="flex-sb m10">
					<view class="re-from-label">车辆类型</view>
					<picker class="flex re-from-label" style="color: #9E9E9E;" :range="types" @change="typeSelect(car, $event)">
						<span v-if="!car.type">请选择</span>
						<view style="color: #0d0d0d;" v-if="car.type">{{ car.type }}</view>
						<uni-icons v-if="!car.type" type="down" size="28rpx" color="#9E9E9E"></uni-icons>
					</picker>
				</view>
				<view class="flex-sb">
					<view class="re-from-label">设备轴数</view>
					<picker class="flex re-from-label" style="color: #9E9E9E;" :range="mis" @change="miSelect(car, $event)">
						<span v-if="!car.mi">请选择</span>
						<view style="color: #0d0d0d;" v-if="car.mi">{{ car.mi }}</view>
						<uni-icons v-if="!car.mi" type="down" size="28rpx" color="#9E9E9E"></uni-icons>
					</picker>
				</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/car1.png')">查看示例</view>
				</view>
				<input-image @success="(url) => car.carimage = url" :height="456"/>
				<view class="re-card-context">
					请在<span>支腿收起状态下，在左前方45度角</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/car2.png')">查看示例</view>
				</view>
				<input-image @success="(url) => car.xszaimage = url" :height="342"/>
				<input-image @success="(url) => car.xszbimage = url" :height="342"/>
				<view class="re-card-context">
					<p>中华人民共和国机动车<span>行驶证</span>正反面</p>
					<p>拍摄时确保行驶证<span>边框完整，字迹清晰，亮度均匀，无遮挡涂鸦。</span></p>
				</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/car4.png')">查看示例</view>
				</view>
				<input-image @success="(url) => car.jqximage = url" :height="800"/>
				<view class="re-card-context">
					<p>您需要提供有效期内<span>《机动车交通事故责任强制保险单》</span>的纸质保单正面或电子保单截图。</p>
					<p>上传时需确保截图内包含<span>车牌号、车架号、以及有效期</span>等关键信息</p>
				</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/car5.png')">查看示例</view>
				</view>
				<input-image @success="(url) => car.syximage = url" :height="800"/>
				<view class="re-card-context">
					<p>您需要提供有效期内<span>《机动车商业保险保险单》</span>的纸质保单正面或电子保单截图。</p>
					<p>上传时需确保截图内包含<span>车牌号、车架号、以及有效期</span>等关键信息</p>
				</view>
			</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: "",
				idx: "",
				car: {
					carimage:"",
					xszaimage:"",
					xszbimage:"",
					jqximage:"",
					syximage:""
				},
				mis: [],
				mia: [{mi: '43米', price: '1.2'}],
				types: ['泵车','搅拌车'],
				
			}
		},
		onLoad() {
			this.loadmi()
		},
		methods: {
			loadmi(){
				this.mis = []
				this.$httpGet("/api/mis", {}, (res) => {
					if(res.data){
						this.mia = this.$utils.toArray(res.data)
						this.mia.forEach(ele => {
							this.mis.push(ele.mi)
						})
					} 
				})
			},
			miSelect(car, event){
				car.mi = this.mis[event.detail.value]
			},
			typeSelect(car, event){
				car.type = this.types[event.detail.value]
			},
			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.car.carimage){
					uni.showToast({ icon: "none", title: "车辆照片缺失" })
					return
				}
				if(!this.car.xszaimage || !this.car.xszbimage){
					uni.showToast({ icon: "none", title: "行驶证照片缺失" })
					return
				}
				if(!this.car.jqximage){
					uni.showToast({ icon: "none", title: "交强险照片缺失" })
					return
				}
				if(!this.car.syximage){
					uni.showToast({ icon: "none", title: "商业险照片缺失" })
					return
				}
				this.clickSubmit()
			},
			clickSubmit(){
				let car = this.car
				car.id = this.$utils.generateUUID()
				car.enterId = uni.getStorageSync("enter_id")
				car.status = 0
				car.mi = "2轴泵车"
				car.type = "泵车"
				car.area = uni.getStorageSync("area")
				this.$httpPost("/api/register/car", car, (resp) => { 
					uni.showToast({
						icon:'none', title:"保存成功"
					})
					uni.navigateBack({ delta: 1 })
				})
			}
		}
	}
</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>