zhywpt-sp/subpackage/after-sale/rescind-carId/rescind-carId-select - 副本.vue

<template>
	
	<view class="bg">
		<view class="title">基本信息</view>
		<view class="car-type">
			<view class="car-type-item" :class="{active: state.form.applyType == '1'}" @click="toggleApplyType('1')">个人车辆</view>
			<view class="car-type-item" :class="{active: state.form.applyType == '2'}" @click="toggleApplyType('2')">单位车辆</view>
		</view>
		
		<u-form label-width="230" :model="state.form" ref="uForm" :label-style='labelStyle' v-if="state.form.applyType == '1'">
			<u-form-item label="是否本人" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
				<u-input v-model="state.form.isSelfStr" type="select" @click="isSelfSelect = true" input-align='right'/>
			</u-form-item>
		</u-form>
	</view>
	
	<view class="bg">
		<view class="title"> 身份证信息 </view>
		<view class="picture-wrapper" @click="takePhotoMode('1',false)">
			<view class="bg">
				<view class="">
					<view class="name"> 人像面 </view>
					<view class="value"> 上传身份证的人像面 </view>
					<view class="tip">
						<view class="tip-value"> 拍摄规范 </view>
					</view>
				</view>
				<image v-if="!state.form.userPosImagesUrl" class="icon" :src="`${$imgUrl}issuance/sfz.png`"
					:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
				</image>
				<image v-else class="icon" :src="getFullImageUrl(state.form.userPosImagesUrl)"
					:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
			</view>
		</view>
		<view class="picture-wrapper" @click="takePhotoMode('2',false)">
			<view class="bg">
				<view class="">
					<view class="name"> 国徽面 </view>
					<view class="value"> 上传身份证的国徽面 </view>
					<view class="tip">
						<view class="tip-value"> 拍摄规范 </view>
					</view>
				</view>
				<image v-if="!state.form.userNegImagesUrl" class="icon" :src="`${$imgUrl}issuance/sff.png`"
					:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}">
				</image>
				<image v-else class="icon" :src="getFullImageUrl(state.form.userNegImagesUrl)"
					:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
			</view>
		</view>
		<u-form label-width="230" :model="state.form" ref="uForm" :label-style='labelStyle'>
			<u-form-item label="申请人姓名" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
				<u-input v-model="state.form.name" placeholder='请输入姓名'
					maxlength="20" @blur="replaceInput($event,1)" inputAlign="right"/>
			</u-form-item>
			<u-form-item label="证号号码" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
				<u-input placeholder='请输入证件号码' type="idcard" v-model="state.form.customerIdNum"
					 maxlength="18" inputAlign="right"/>
			</u-form-item>
			<u-form-item label="手机号" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
				<u-input placeholder='请输入手机号' type="number" v-model="state.form.mobile"
					 maxlength="11" inputAlign="right"/>
			</u-form-item>
		</u-form>
	</view>
	<view class="bg">
		<view class="title"> 行驶证信息 </view>
		<view class="picture-wrapper" @click="takePhotoMode('3')">
			<view class="bg">
				<view class="">
					<view class="name"> 行驶证主页 </view>
					<view class="value"> 上传行驶证的主页 </view>
					<view class="tip">
						<view class="tip-value"> 拍摄规范 </view>
					</view>
				</view>
				<image v-if="!state.form.vehPosImgUrl" class="icon" :src="`${$imgUrl}issuance/xz.png`"
					:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
				</image>
				<image v-else class="icon" :src="getFullImageUrl(state.form.vehPosImgUrl)"
					:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image>
			</view>
		</view>
		<view class="picture-wrapper" @click="takePhotoMode('4')">
			<view class="bg">
				<view class="">
					<view class="name"> 行驶证副页 </view>
					<view class="value"> 上传行驶证的副页 </view>
					<view class="tip">
						<view class="tip-value"> 拍摄规范 </view>
					</view>
				</view>
				<image v-if="!state.form.vehNegImgUrl" class="icon" :src="`${$imgUrl}issuance/xf.png`"
					:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
				</image>
				<image v-else class="icon" :src="getFullImageUrl(state.form.vehNegImgUrl)"
					:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image>
			</view>
		</view>
		<u-form label-width="200" :model="state.form" ref="uForm" :label-style='labelStyle'>
			<u-form-item label="车牌号" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
				<car-number-input @numberInputResult="carNumber" :defaultStr="state.form.vehiclePlate"></car-number-input>
			</u-form-item>
			<u-form-item label="所有人" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
				<u-input inputAlign="right" placeholder="请输入所有人" v-model="state.form.vehicleOwnerName" maxlength="20" />
			</u-form-item>
			<u-form-item label="车牌颜色" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
				<!-- <uni-data-select v-model="state.form.vehiclePlateColor" :localdata="state.colorRange" @change="changeColor"
					:clear="false"></uni-data-select> -->
					<u-input v-model="state.form.vehiclePlateColorStr" type="select" @click="show1 = true" input-align='right'/>
			</u-form-item>
		</u-form>
	</view>
		
	<view class="bg" v-if="state.form.applyType=='2'">
		<view class="title"> 单位资料信息 </view>
		<view class="picture-wrapper" @click="cardImageOcrYY()">
			<view class="bg">
				<view class="">
					<view class="name"> 营业执照 </view>
					<view class="value"> 上传企业的营业执照 </view>
					<view class="tip">
						<view class="tip-value"> 拍摄规范 </view>
					</view>
				</view>
				<image v-if="!state.form.unitImagesUrl" class="icon" :src="`${$imgUrl}applyCard/zhizhao.png`"
					:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
				</image>
				<image v-else class="icon" :src="getFullImageUrl(state.form.unitImagesUrl)"
					:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image>
			</view>
		</view>
		<view class="picture-wrapper" @click="cardFileImageUpdate()">
			<view class="bg">
				<view class="">
					<view class="name"> 授权书 </view>
					<view class="value"> 上传授权书 </view>
					<view class="tip">
						<view class="tip-value"> 拍摄规范 </view>
					</view>
					<!-- <view class="down" @click="downAuthD">模板下载</view> -->
				</view>
				<image v-if="!state.form.proxyUrl" class="icon" :src="`${$imgUrl}issuance/weituo.png`"
					:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
				</image>
				<image v-else class="icon" :src="getFullImageUrl(state.form.proxyUrl)"
					:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image>
			</view>
		</view>
		<u-form label-width="230" :model="state.form" ref="uForm" :label-style='labelStyle'>
			<u-form-item label="单位名称" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' border-bottom=true>
				<u-input v-model="state.form.orgName" placeholder='请输入单位名称'
					maxlength="20" @blur="replaceInput($event,2)" inputAlign="right"/>
			</u-form-item>
			<u-form-item label="证号号码" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' border-bottom=true>
				<u-input placeholder='请输入证件号码' type="idcard" v-model="state.form.unitId"
					 maxlength="18" inputAlign="right"/>
			</u-form-item>
		</u-form>
	</view>
	<!-- 个人 非本人 展示 -->
	<view class="bg" v-if="state.form.applyType=='1' && state.form.isSelf=='2'">
		<view class="title"> 车主信息 </view>
		<view class="picture-wrapper" @click="takePhotoMode('1',true)">
			<view class="bg">
				<view class="">
					<view class="name"> 车主身份证 </view>
					<view class="name"> 人像面 </view>
					<view class="value"> 上传身份证的人像面 </view>
					<view class="tip">
						<view class="tip-value"> 拍摄规范 </view>
					</view>
				</view>
				<image v-if="!state.form.ownerPosImgUrl" class="icon" :src="`${$imgUrl}issuance/sfz.png`"
					:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
				</image>
				<image v-else class="icon" :src="getFullImageUrl(state.form.ownerPosImgUrl)"
					:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
			</view>
		</view>
		<view class="picture-wrapper" @click="takePhotoMode('2',true)">
			<view class="bg">
				<view class="">
					<view class="name"> 车主身份证 </view>
					<view class="name"> 国徽面 </view>
					<view class="value"> 上传身份证的国徽面 </view>
					<view class="tip">
						<view class="tip-value"> 拍摄规范 </view>
					</view>
				</view>
				<image v-if="!state.form.ownerNegImgUrl" class="icon" :src="`${$imgUrl}issuance/sff.png`"
					:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}">
				</image>
				<image v-else class="icon" :src="getFullImageUrl(state.form.ownerNegImgUrl)"
					:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
			</view>
		</view>
		<u-form label-width="230" :model="state.form" ref="uForm" :label-style='labelStyle'>
			<u-form-item label="车主姓名" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' border-bottom=true>
				<u-input v-model="state.form.ownerName" placeholder='请输入车主姓名'
					maxlength="20" @blur="replaceInput($event,3)" inputAlign="right"/>
			</u-form-item>
			<u-form-item label="证号号码" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' border-bottom=true>
				<u-input placeholder='请输入证件号码' type="idcard" v-model="state.form.ownerIdNum"
					 maxlength="18" inputAlign="right"/>
			</u-form-item>
		</u-form>
		<view class="picture-wrapper" @click="cardFileImageUpdate()">
			<view class="bg">
				<view class="">
					<view class="name"> 授权书 </view>
					<view class="value"> 上传授权书 </view>
					<view class="tip">
						<view class="tip-value"> 拍摄规范 </view>
					</view>
					<!-- <view class="down" @click="downAuthD">模板下载</view> -->
				</view>
				<image v-if="!state.form.proxyUrl" class="icon" :src="`${$imgUrl}issuance/weituo.png`"
					:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
				</image>
				<image v-else class="icon" :src="getFullImageUrl(state.form.proxyUrl)"
					:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image>
			</view>
		</view>
		
	</view>
	<view class="action">
		<button type="default" class="ui-btn" @click="savaHandle()">
			提交
		</button>
	</view>
	<view class="choice-takePhoto-wrap" v-if="state.isTakePhotoModeShow" @click="cancle">
		<view class="choice-takePhoto">
			<view @click.stop="takePhoto(state.choiceIndex)" style="border-radius: 20rpx 20rpx 0 0;">拍照</view>
			<view @click.stop="xiangce(state.choiceIndex)">从手机相册选择</view>
			<view @click.stop="cancle">取消</view>
		</view>
	</view>
	
	<viewfinder v-if="state.phoneType" :phoneType="state.phoneType" :images="state.images"
		:showStartPhoto="state.showImg" @confirmReturn="confirmReturn" @camera="camera"></viewfinder>
		
	<!-- 选择车牌颜色 -->
	<u-select v-model="show1" :list="state.colorRange" @confirm="changeColor"></u-select>
	
	<!-- 选择是否是本人 -->
	<u-select v-model="isSelfSelect" :list="state.isSelfRange" @confirm="changeIsSelf"></u-select>
		
</template>

<script setup lang="ts">
	import {
		reactive,
		ref
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		idCardOcr,
		vehicleLicenseOcr,
		releasePlateaApply,
		ocrAllQuery
	} from "@/utils/network/api.js";
	import {requestNew} from "@/utils/network/request.js";
	import { getItem } from "@/utils/storage.ts"
	import viewfinder from "@/components/viewfinder.vue"
	import carNumberInput from "@/components/car-number-input/car-number-input.vue";
	import {
		navTo, uploadFile,msg, getFullImageUrl
	} from "@/utils/utils";
	// ########
	const labelStyle = {
		color: "#004576",
		fontSize: "28rpx",
	}
	const leftIcon = {
		height: '100%',
		width: '8rpx',
		display: 'flex',
		'align-items': 'center',
		'margin-right': '4rpx',
	}
	const show1 = ref(false)
	const isSelfSelect = ref(false)
	
	const state = reactive({
		applyTypeRange:[{
		value: "1",
		text: "个人车辆"
	}, {
		value: "2",
		text: "单位车辆"
	}],
	isSelfRange:[
		{
			value: "1",
			label: "是"
		}, {
			value: "2",
			label: "否"
		}
	],
		showImg: true,
		phoneType: 0,  // 1 身份证正面  2 身份证反面  3行驶证正面 4行驶证反面
		choiceIndex: 1,  // 1 身份证正面  2 身份证反面
		isTakePhotoModeShow: false,  //选择拍照方式是否出来
		images: '',
		form: {
			applyType: "1",//1个人，2单位
			isSelf: "1",//是否本人 1是，2否
			isSelfStr: '是',
			mobile:"",
			name: "", //开户人姓名
			customerIdNum: "", //用户证件号码
			userPosImagesUrl: "", //身份证正面
			userNegImagesUrl: "", //身份证反面
			vehPosImgUrl: "", //行驶证正面
			vehNegImgUrl: "", //行驶证证反面
		    vehiclePlate:"",
			vehiclePlateColor:"",
			vehicleOwnerName:"", //车主姓名，ocr识别行驶证
			ownerPosImgUrl:"",//车主身份证件人面地址
			ownerNegImgUrl:"",//车主身份证件国徽地址
			ownerIdNum:"",//车主证件号
			ownerName:"",//车主姓名
			proxyUrl:"",//授权书图片地址
			unitImagesUrl:"",//营业执照图片地址
			unitId:"",//单位证件编号
			orgName:"",
			unitIdType:"", // 单位证件类型，营业执照：字典code：203
			vehiclePlateColorStr:""
		},
		colorRange: [],
		ownerInfo:false,//非本人 个人 车主信息true  ==== 本人  个人  false
		
	});
	const changeapplyType = (e) => {
		state.form.applyType = e
		console.log("111",e,state.applyTypeRange)
	}
	
	const changeColor = (item: any) => {
		state.form.vehiclePlateColor = item[0].value
		state.form.vehiclePlateColorStr = item[0].label
	}
	
	const changeIsSelf = (item: any) => {
		if (item && item.length > 0) {
			state.form.isSelf = item[0].value
			state.form.isSelfStr = item[0].label
			// 如果是本人，对非本人信息进行个清空
			if (item[0].value == '1') {
				state.form.ownerPosImgUrl = ''
				state.form.ownerNegImgUrl = ''
				state.form.ownerName = ''
				state.form.ownerIdNum = ''
				state.form.proxyUrl = ''
			}
		}
	}
	
	//车牌号输入
	const carNumber = (val : any) => {
		state.form.vehiclePlate = val.trim();
	};
	const replaceInput = (event,val) => {
		if(val==1){
			state.form.name=event.replace(/\s/g, "")
		}else if(val==2){
			state.form.orgName=event.replace(/\s/g, "")
		}else if(val==3){
			state.form.ownerName=event.replace(/\s/g, "")
		}
		console.log("event", event,val,state.form.name)
	}
	const savaHandle = () => {
		
		if (!paramsVerify()) return;
		
		// 单位 
		if(state.form.applyType=='2'){
			// 非本人办理
			state.form.isSelf='2'
			state.form.unitIdType='203' 
		}
		
		let params = state.form
		
		const options = {
			type: 2,
			data: params,
			method: "POST",
			showLoading: true,
		};
		
		requestNew(releasePlateaApply, options).then((res) => {
			console.log(res);
			navTo(`/subpackage/after-sale/rescind-carId/result`);
		});
	};
	
	// 必填字段校验
	const paramsVerify = () => {
		let isVerify = true;
		
			if(!state.form.applyType){
				msg('请选择车辆类型');
				isVerify = false;
			}
			if(state.form.applyType=='1'){
				if(!state.form.isSelf){
					msg('请选择是否本人');
					isVerify = false;
				}
			}
			if(!state.form.userPosImagesUrl){
				msg('请上传身份证正面');
				isVerify = false;
			}
			if(!state.form.userNegImagesUrl){
				msg('请上传身份证反面');
				isVerify = false;
			}
			if(!state.form.name){
				msg('请输入姓名');
				isVerify = false;
			}
			if(!state.form.customerIdNum){
				msg('请输入证件号码');
				isVerify = false;
			}
			if(!state.form.mobile){
				msg('请输入手机号');
				isVerify = false;
			}
			if(!state.form.vehPosImgUrl){
				msg('请上传行驶证主页');
				isVerify = false;
			}
			if(!state.form.vehNegImgUrl){
				msg('请上传行驶证副页');
				isVerify = false;
			}
			if(!state.form.vehiclePlate){
				msg('请输入车牌号');
				isVerify = false;
			}
			if(!state.form.vehicleOwnerName){
				msg('请输入所有人');
				isVerify = false;
			}
			if(!state.form.vehiclePlateColor){
				msg('请选择车牌颜色');
				isVerify = false
			}
		
		return isVerify;
	}

	onLoad((option : any) => {
		// navTo(`/subpackage/after-sale/rescind-carId/result`);
		let getColor = getItem('key')['VEHICLE_COLOR_TYPE'];
		for (var k = 0; k < getColor.length; k++) {
			let obj = {};
			obj['value'] = getColor[k]['code']
			obj['label'] = getColor[k]['name']
			state.colorRange.push(obj)
		}
	});
	
	const cardFileImageUpdate = () => {
		uni.chooseImage({
			count: 1, //只能选取一张照片
			sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ["camera", "album"], //从相册选择
			success: function (res) {
				uploadFile(res.tempFilePaths[0], "", "").then((data) => {
					state.form.proxyUrl = data;
				})
			},
		});
	};


	const xiangce = (val) => {
		console.log("val", val)
		var imageType = val;
		uni.chooseImage({
			count: 1, //只能选取一张照片
			sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ["album"], //从相册选择
			success: function (res) {
				state.showImg = false
				state.images = res.tempFilePaths[0]
				state.phoneType = state.choiceIndex
				state.isTakePhotoModeShow = false
				console.log("tempFilePaths[0].startsWith('file://')", res.tempFilePaths[0], res.tempFilePaths[0].startsWith('file://'))

			},
		})
	}
	const takePhoto = (val) => {
		state.showImg = true
		console.log("拍照", val)
		state.phoneType = val;
	}
	const confirmReturn = (val) => {
		state.phoneType = 0
		state.isTakePhotoModeShow = false
		var imageType = 1;
		
		// state.choiceIndex 1: 身份证中面 2：身份证反面 3：行驶证正面 4：行驶证反面
		if (state.choiceIndex == 1) {
			imageType = 1
		} else if (state.choiceIndex == 2) {
			imageType = 100
		} else if (state.choiceIndex == 3) {
			imageType = 3
		} else if (state.choiceIndex == 4) {
			imageType = 100
		}

		uploadFile(val.tempImagePath, imageType).then((data) => {
			console.log(data)
			if (state.choiceIndex == 1) {
				if(state.ownerInfo){
					state.form.ownerPosImgUrl = data.imageUrl;
					state.form.ownerName = data.name;
					state.form.ownerIdNum = data.idno;
				}else{
					// 谁上传就是谁的信息
					state.form.name = data.name;
					state.form.customerIdNum = data.idno;
					state.form.userPosImagesUrl = data.imageUrl;
				}
			} else if (state.choiceIndex == 2) {
				if(state.ownerInfo){
					state.form.ownerNegImgUrl = data.imageUrl;
				}else{
					state.form.userNegImagesUrl = data.imageUrl;
				}

			} else if (state.choiceIndex == 3) {
				state.form.vehiclePlate = data.plate_a;
				state.form.vehicleOwnerName = data.man;
				state.form.vehPosImgUrl = data.imageUrl;
			} else if (state.choiceIndex == 4) {
				state.form.vehNegImgUrl = data.imageUrl;
			}
			state.isTakePhotoModeShow = false
		})
	}
	const takePhotoMode = (index,ownerInfo) => {
		console.log("index", index)
		state.isTakePhotoModeShow = true
		state.choiceIndex = index
		state.ownerInfo=ownerInfo
	}
	const cancle = () => {
		state.isTakePhotoModeShow = false
	}
	const camera = () => {
		state.phoneType = 0
	}
	//营业执照Orc接口调用
	const cardImageOcrYY = () => {
		uni.chooseImage({
			count: 1, //只能选取一张照片
			sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ["camera", "album"], //从相册选择
			success: function (res) {
				uploadFile(res.tempFilePaths[0], 5).then((data) => {
						state.form.orgName =data.unitName;
						state.form.unitId =data.screditCode;
						state.form.unitImagesUrl =data.imageUrl;
				})
			},
		});
	};
	
	// 切换车辆类型
	const toggleApplyType = (type:string) => {
		state.form.applyType = type;
		
		if (type == '2') {
			state.form.ownerPosImgUrl = ''
			state.form.ownerNegImgUrl = ''
			state.form.ownerName = ''
			state.form.ownerIdNum = ''
			state.form.proxyUrl = ''
		} else if (type == '1') {
			state.form.unitImagesUrl = ''
			state.form.proxyUrl = ''
			state.form.orgName = ''
			state.form.unitId = ''
		}
	}
</script>

<style lang="scss" scoped>
	.bg{
		background-color: white;
		width: 88%;
		margin:0 auto;
		margin-top: 20rpx;
		border-radius: 12rpx;
		border: 1px solid #FFFFFF;
		padding: 20rpx;
	}
	.card {
		display: flex;
		margin: 0 20rpx;
		align-items: center;
	}
	
	.picture-wrapper {
		margin-top: 30rpx;
	
		.bg {
			background: #F5F9FB;
			border-radius: 10rpx;
			padding: 40rpx 30rpx;
			display: flex;
			// align-items: center;
			justify-content: space-between;
	
			.name {
				padding-top: 30rpx;
				font-size: 32rpx;
				font-family: SourceHanSansSC, SourceHanSansSC;
				font-weight: 500;
				color: #111;
				line-height: 34rpx;
			}
	
			.value {
				margin-top: 20rpx;
				font-size: 22rpx;
				font-family: SourceHanSansSC, SourceHanSansSC;
				font-weight: 400;
				color: #999999;
				line-height: 24rpx;
			}
	
			.tip {
				margin-top: 20rpx;
				text-align: center;
				width: 100rpx;
				height: 30rpx;
				border-radius: 6rpx;
				border: 1rpx solid #CCB375;
	
				.tip-value {
					font-size: 20rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #CCB375;
					line-height: 30rpx;
					opacity: 1;
				}
			}
		}
	
		.icon {
			width: 304rpx;
			height: 190rpx;
			background-image: var(--bgimg);
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}
	}
	.action {
		position: absolute;
		left: 0;
		height: 188rpx;
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: 20rpx;
	}
	::deep.uni-select {
		font-size: 13px;
		height: 30px;
		line-height: 30px;
	}
	.choice-takePhoto-wrap {
		width: 100%;
		height: 100vh;
		background-color: rgba(127, 127, 127, 0.2);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 11111;
	}
	.choice-takePhoto {
		position: absolute;
		bottom: 0;
		background-color: white;
		width: 100%;
		border-radius: 20rpx 20rpx 0 0;
	}
	
	.choice-takePhoto>view:first-child {
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		border-bottom: 1rpx solid rgba(127, 127, 127, 0.3);
		background-color: white;
	}
	
	.choice-takePhoto>view:last-child {
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		border-top: 6rpx solid rgba(127, 127, 127, 0.1);
		background-color: white;
	}
	
	.choice-takePhoto>view {
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		background-color: white;
	}
	
	.choice-takePhoto-wrap {
		width: 100%;
		height: 100vh;
		background-color: rgba(127, 127, 127, 0.2);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 11111;
	}
	.car-type{
		width: 400rpx;
		height: 68rpx;
		margin: 50rpx auto;
		border-radius: 68rpx;
		border: 1px #CCB375 solid;
		font-size: 28rpx;
		overflow: hidden;
		display: flex;
		.car-type-item{
			width: 50%;
			height: 100%;
			line-height: 68rpx;
			text-align: center;
			color: #CCB375;
			flex-shrink: 0;
			flex-grow: 0;
		}
		.active{
			color: #FFFFFF;
			background-color: #CCB375;
		}
	}
</style>