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

<template>
    <view class="bg">
		<view class="card">
			<text>车辆类型：</text>
			<uni-data-select v-model="state.form.applyType" :localdata="state.applyTypeRange"
				@change="changeapplyType" :clear="false" style="width: 300rpx;"></uni-data-select>
		</view>
		<view class="card" style="margin-top: 20rpx;" v-if="state.form.applyType=='1'">
			<text>是否本人：</text>
			<uni-data-select v-model="state.form.isSelf" :localdata="state.isSelfRange"
				@change="changeisSelf" :clear="false" style="width: 300rpx;"></uni-data-select>
		</view>
	</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.userImagesUrl1" class="icon" :src="`${$imgUrl}issuance/sfz.png`"
					:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
				</image>
				<image v-else class="icon" :src="strReplace(state.form.userImagesUrl1)"
					: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.userImagesUrl2" class="icon" :src="`${$imgUrl}issuance/sff.png`"
					:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}">
				</image>
				<image v-else class="icon" :src="strReplace(state.form.userImagesUrl2)"
					: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.vehicleImagesUrl1" class="icon" :src="`${$imgUrl}issuance/xz.png`"
					:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
				</image>
				<image v-else class="icon" :src="strReplace(state.form.vehicleImagesUrl1)"
					: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.vehicleImagesUrl2" class="icon" :src="`${$imgUrl}issuance/xf.png`"
					:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
				</image>
				<image v-else class="icon" :src="strReplace(state.form.vehicleImagesUrl2)"
					: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-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.orgImagesUrl1" class="icon" :src="`${$imgUrl}applyCard/zhizhao.png`"
					:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
				</image>
				<image v-else class="icon" :src="strReplace(state.form.orgImagesUrl1)"
					: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.authorizeImagesUrl1" class="icon" :src="`${$imgUrl}issuance/weituo.png`"
					:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
				</image>
				<image v-else class="icon" :src="strReplace(state.form.authorizeImagesUrl1)"
					: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.orgId"
					 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.personFrontUrl" class="icon" :src="`${$imgUrl}issuance/sfz.png`"
					:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
				</image>
				<image v-else class="icon" :src="strReplace(state.form.personFrontUrl)"
					: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.personBackUrl" class="icon" :src="`${$imgUrl}issuance/sff.png`"
					:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}">
				</image>
				<image v-else class="icon" :src="strReplace(state.form.personBackUrl)"
					: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.personName" 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.personIdNum"
					 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.authorizeImagesUrl1" class="icon" :src="`${$imgUrl}issuance/weituo.png`"
					:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
				</image>
				<image v-else class="icon" :src="strReplace(state.form.authorizeImagesUrl1)"
					: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>
</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, strReplace, uploadFile,msg
	} 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 state = reactive({
		applyTypeRange:[{
		value: "1",
		text: "个人车辆"
	}, {
		value: "2",
		text: "单位车辆"
	}],
	isSelfRange:[
		{
			value: "1",
			text: "是"
		}, {
			value: "2",
			text: "否"
		}
	],
		showImg: true,
		phoneType: 0,  // 1 身份证正面  2 身份证反面  3行驶证正面 4行驶证反面
		choiceIndex: 1,  // 1 身份证正面  2 身份证反面
		isTakePhotoModeShow: false,  //选择拍照方式是否出来
		images: '',
		form: {
			applyType:"",//1个人，2单位
			isSelf:"",//是否本人 1是，2否
			mobile:"",
			name: "", //开户人姓名
			customerIdNum: "", //用户证件号码
			userImagesUrl1: "", //身份证正面
			userImagesUrl2: "", //身份证反面
			vehicleImagesUrl1: "", //行驶证正面
			vehicleImagesUrl2: "", //行驶证证反面
		    vehiclePlate:"",
			vehiclePlateColor:"",
			vehicleOwnerName:"", //车主姓名，ocr识别行驶证
			personFrontUrl:"",//车主身份证件人面地址
			personBackUrl:"",//车主身份证件国徽地址
			personIdNum:"",//车主证件号
			personName:"",//车主姓名
			authorizeImagesUrl1:"",//授权书图片地址
			orgImagesUrl1:"",//营业执照图片地址
			orgId:"",//单位证件编号
			orgName:"",
			orgIdClass:"",//营业执照203
		},
		colorRange: [],
		ownerInfo:false,//非本人 个人 车主信息true  ==== 本人  个人  false
		
	});
	const changeapplyType = (e) => {
		state.form.applyType = e
		console.log("111",e,state.applyTypeRange)
	}
	const changeisSelf=(e)=>{
		state.form.isSelf = e
	}
	const changeColor = (e) => {
		state.form.vehiclePlateColor = e
		console.log(e)
	}
	//车牌号输入
	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.personName=event.replace(/\s/g, "")
		}
		console.log("event", event,val,state.form.name)
	}
	const savaHandle = () => {
		if(!state.form.applyType){
			msg('请选择车辆类型');
			return;
		}
		if(state.form.applyType=='1'){
			if(!state.form.isSelf){
				msg('请选择是否本人');
				return;
			}
		}
		if(!state.form.userImagesUrl1){
			msg('请上传身份证正面');
			return;
		}
		if(!state.form.userImagesUrl2){
			msg('请上传身份证反面');
			return;
		}
		if(!state.form.name){
			msg('请输入姓名');
			return;
		}
		if(!state.form.customerIdNum){
			msg('请输入证件号码');
			return;
		}
		if(!state.form.mobile){
			msg('请输入手机号');
			return;
		}
		if(!state.form.vehicleImagesUrl1){
			msg('请上传行驶证主页');
			return;
		}
		if(!state.form.vehicleImagesUrl2){
			msg('请上传行驶证副页');
			return;
		}
		if(!state.form.vehiclePlate){
			msg('请输入车牌号');
			return;
		}
		if(!state.form.vehicleOwnerName){
			msg('请输入所有人');
			return;
		}
		if(!state.form.vehiclePlateColor){
			msg('请选择车牌颜色');
			return;
		}
		// 单位 
		if(state.form.applyType=='2'){
			// 非本人办理
			state.form.isSelf='2'
			state.form.orgIdClass='203' 
		}
		const options = {
			type: 2,
			data: state.form,
			method: "POST",
			showLoading: true,
		};
		requestNew(releasePlateaApply, options).then((res) => {
			console.log(res);
			navTo(`/subpackage/after-sale/rescind-carId/result`);
		});
	};
	const cardFileImageUpdate = () => {
		uni.chooseImage({
			count: 1, //只能选取一张照片
			sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ["camera", "album"], //从相册选择
			success: function (res) {
				uploadFile(res.tempFilePaths[0], "", "").then((data) => {
					state.form.authorizeImagesUrl1 = data;
				})
			},
		});
	};


	onLoad((option : any) => {
		let getColor = getItem('key')['VEHICLE_COLOR_TYPE'];
		for (var k = 0; k < getColor.length; k++) {
			let obj = {};
			obj['value'] = getColor[k]['code']
			obj['text'] = getColor[k]['name']
			state.colorRange.push(obj)
		}
	});


	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;

		if (state.choiceIndex == 1) {
			imageType = 1
			var isEtcOcrCard = idCardOcr
		} else if (state.choiceIndex == 2) {
			imageType = 2
			var isEtcOcrCard = idCardOcr
		} else if (state.choiceIndex == 3) {
			imageType = 1
			var isEtcOcrCard = vehicleLicenseOcr
		} else if (state.choiceIndex == 4) {
			imageType = 2
			var isEtcOcrCard = vehicleLicenseOcr
		}

			console.log("图片地址val", val.tempImagePath)
		uploadFile(val.tempImagePath, imageType, isEtcOcrCard).then((data) => {
			console.log("身份证上传", data)
			if (state.choiceIndex == "1") {
				if(state.ownerInfo){
					state.form.personFrontUrl = data.imageUrl;
					state.form.personName = data.name;
					state.form.personIdNum = data.idno;
				}else{
					// 谁上传就是谁的信息
					state.form.name = data.name;
					state.form.customerIdNum = data.idno;
					state.form.userImagesUrl1 = data.imageUrl;
				}
			} else if (state.choiceIndex == "2") {
				if(state.ownerInfo){
					state.form.personBackUrl = data.imageUrl;
				}else{
					state.form.userImagesUrl2 = data.imageUrl;
				}

			} else if (state.choiceIndex == "3") {
				state.form.vehiclePlate = data.plate_a;
				state.form.vehicleOwnerName = data.man;
				state.form.vehicleImagesUrl1 = data.imageUrl;
			} else if (state.choiceIndex == "4") {
				state.form.vehicleImagesUrl2 = 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], "", ocrAllQuery).then((data) => {
						console.log("data",data)
						state.form.orgName =data.unitName;
						state.form.orgId =data.screditCode;
						state.form.orgImagesUrl1 =data.imageUrl;
				})
			},
		});
	};
</script>

<style lang="scss" scoped>
	.bg{
		background-color: white;
		width: 88%;
		margin:0 auto;
		margin-top: 20rpx;
		border-radius: 12px;
		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;
				// background: rgba(204, 179, 117);
				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;
	}
</style>