concrete-transportation-uniapp-20250821/pages/base/showcar.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/car1.png')">查看示例</view>
				</view>
				<input-image :url="car.carimage" @success="(url) => car.carimage = url" :height="456"/>
				<view class="re-card-context" v-if="edit">
					请在<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 :url="car.xszaimage" @success="(url) => car.xszaimage = url" :height="342"/>
				<input-image :url="car.xszbimage" @success="(url) => car.xszbimage = url" :height="342"/>
				<view class="re-card-context" v-if="edit">
					<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 :url="car.jqximage" @success="(url) => car.jqximage = url" :height="800"/>
				<view class="re-card-context" v-if="edit">
					<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 :url="car.syximage" @success="(url) => car.syximage = url" :height="800"/>
				<view class="re-card-context" v-if="edit">
					<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 {
				edit: "",
				show: false,
				url: "",
				id: "",
				car: {
					carimage:"",
					xszaimage:"",
					xszbimage:"",
					jqximage:"",
					syximage:""
				},
			}
		},
		onLoad(opn) {
			console.log(opn);
			this.id = opn.id
			this.loadCar()
		},
		onShow(){
			this.loadCar()
		},
		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.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
				}
			},
			loadCar(){
				const _this = this
				this.$httpGet("/api/car/get", {id: this.id}, function(res) {
					console.log('[/car/get]', res);
					if(res.data){
						_this.car=res.data
					}
				})
			}
		}
	}
</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>