zhywpt-sp/subpackage/after-sale/releaseSuspension/cardloss.vue

<template>
	<view class="page-content">
		
		<view class="bg">
			<template v-if="state.userType === '1'">
				<!--身份证正面-->
				<ocr-cert-block :img="formData.customerPosUrl" :type="1"></ocr-cert-block>
				<!--身份证反面-->
				<ocr-cert-block :img="formData.customerNegUrl" :type="2"></ocr-cert-block>
			</template>
			
			<template v-else>
				
				<view class="picture-wrapper" @click="uploadOtherFile">
					<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="!formData.proxyUrl" class="icon" :src="`${$imgUrl}issuance/weituo.png`"
							:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}">
						</image>
						<image v-else class="icon" :src="getFullImageUrl(formData.proxyUrl)"
							:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
					</view>
				</view>
				
				<!--营业执照-->
				<ocr-cert-block :type="5" @click="takePhotoMode"></ocr-cert-block>
				<!--经办人身份证正面-->
				<ocr-cert-block :img="formData.agentPosImgUrl" :type="1"></ocr-cert-block>
				<!--经办人身份证反面-->			
				<ocr-cert-block :img="formData.agentNegImgUrl" :type="2"></ocr-cert-block>
				
			</template>
		</view>
		<view class="bg">
			<!--驾驶证正本-->
			<ocr-cert-block :img="formData.vehPosImgUrl" :type="3"></ocr-cert-block>
			<!--驾驶证副本-->
			<ocr-cert-block :img="formData.vehNegImgUrl" :type="4"></ocr-cert-block>
		</view>
		<view class="bg">
			<view class="title"> 基本信息 </view>
			
			<u-form label-width="230" :model="formData" ref="uForm" :label-style='labelStyle'>
				<template v-if="state.userType === '1'">
					<u-form-item label="姓名" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
						<u-input v-model="formData.customerName" placeholder='请输入姓名' 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="formData.customerIdNum" inputAlign="right"/>
					</u-form-item>
					<u-form-item label="车牌号" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
						<car-number-input @numberInputResult="carNumber" :defaultStr="formData.vehiclePlate"></car-number-input>
					</u-form-item>
				</template>
				
				<template v-else>
					<u-form-item label="单位名称" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
						<u-input v-model="formData.customerName" placeholder='请输入单位名称' inputAlign="right"/>
					</u-form-item>
					<u-form-item label="经办人姓名" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
						<u-input v-model="formData.customerName" placeholder='请输入经办人姓名' 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="formData.customerIdNum" inputAlign="right"/>
					</u-form-item>
					<u-form-item label="车牌号" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
						<car-number-input @numberInputResult="carNumber" :defaultStr="formData.vehiclePlate"></car-number-input>
					</u-form-item>
				</template>
			</u-form>
		</view>
		
		<view class="action">
			<button type="default" class="ui-btn" @click="submit()">
				提交
			</button>
		</view>
	</view>
	
	<!--证件照上传 start-->
	<!-- <uploadOcr
		:isTakePhotoModeShow="state.isTakePhotoModeShow"
		:phoneType="state.choiceIndex"
		@close="close"
		@ocrResult="ocrResult">
	</uploadOcr> -->
	<!--证件照上传 end-->
</template>

<script setup lang="ts">
	import { reactive, ref, computed } from "vue";
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import { getItem, StorageKeys } from "@/utils/storage";
	import { checkStr, navTo, uploadFile, msg, getFullImageUrl, replaceBaseImageUrl, maskBankCard } from "@/utils/utils";
	import { requestNew } from "@/utils/network/request.js";
	import { deviceResumeAdd, vehicleInfoView } from "@/utils/network/api.js";
	import { useUserStore } from "@/stores/user";
	import { commonStore } from '@/stores/common.js'
	import { getCodeName } from '@/datas/queryKey.js'
	import carNumberInput from "@/components/car-number-input/car-number-input.vue";
	import { getVehiclePlateColorPai } from '@/datas/vehiclePlateColor'
	// import uploadOcr from '@/components/uploadOcr';
	import { compareDates } from '@/utils/utils'
	
	const commonStoreUse = commonStore()
	const { getSelectIndex, setIsRefresh } = commonStoreUse
	
	const refreshKey = 'runWaterRefundInfo'
	
	const isMultiProvince = [
		{name: '单省', id: 0},
		{name: '跨省', id: 1},
	]
	
	interface uploadFileParams{
		imageUrl: string
	}
	
	interface pageParams{
		routeType: string,
		vehicleId: string,
		cardId: string,
		obuId: string,
		cardExpireTime: string,
		obuExpireTime: string
	}
	
	const labelStyle = {
		color: "#004576",
		fontSize: "28rpx",
	}
	
	const leftIcon = {
		height: '100%',
		width: '8rpx',
		display: 'flex',
		'align-items': 'center',
		'margin-right': '4rpx',
	}
	
	const formData = reactive({
		customerPosUrl: '',
		customerNegUrl: '',
		customerName: '',
		customerIdNum: '',
		vehiclePlate: '',
		vehiclePlateColor: '',
		vehPosImgUrl: '',
		vehNegImgUrl: '',
		cardVehicleType: '',
		proxyUrl: '', // 委托书
		// agentIdtype: 'AMJMSFZ',
		agentPosImgUrl: '', // 经办人信息
		agentNegImgUrl: '',
		agentName: '',
		agentIdNum: '',
		customerTel: '',
		cardId: '',
		obuId: '',
		oldCardExpireTime: '',
		oldObuExpireTime: '',
		axleCount: '',
		approvedCount: '',
		totalMass: '',
		vehicleDimensions: '',
		vanType: '',
	})
	
	const state = reactive({
		isTakePhotoModeShow: false,
		choiceIndex: null,
		userType: '1', // 1 个人用户，2：单位用户
		pageParams: {
			routeType: "",
			vehicleId: "",
			cardId: "",
			obuId: "",
			cardExpireTime: "",
			obuExpireTime: ""
		},
		deviceInfo: {
			ownerName: '',
			ownerPosImgUrl: '',
			ownerNegImgUrl: '',
			ownerIdNum: '',
			vehiclePlate: '',
			vehiclePlateColor: '',
			type: '',
			vehPosImgUrl: '',
			vehNegImgUrl: '',
			proxyUrl: '',
			ownerTel: '',
			customerType: 0,
			axleCount: '',
			approvedCount: '',
			totalMass: '',
			vehicleDimensions: '',
			vehicleType: ''
		}
	})
	
	onLoad((option: pageParams) => {
		if (option) {
			state.pageParams = option
			formData.cardId = option.cardId
			formData.obuId = option.obuId
			formData.oldCardExpireTime = option.cardExpireTime
			formData.oldObuExpireTime = option.obuExpireTime
		}
		getVehicleInfoView()
	})
	
	onShow(() => {
		
	})
	
	/**
	 * 身份证ocr识别后接收参数
	*/
	interface OCRData {
		imageUrl: string,
		bizContent: string,
		screditCode: string,
		enddate: string
	}
	
	const submit = () => {
		if (!paramsVerify()) return;
	 	const options = {
			type: 2,
			data: {...formData},
			method: "POST",
			showLoading: true,
		}
		//调用方式
		requestNew(deviceResumeAdd, options).then(res => {
			// uni.redirectTo({
			// 	url: '/pages/common/submit-result?back=1&tipText=' + '预计1-3日完成资料审核'
			// })
		})
	}
	
	// 获取车辆详情
	const getVehicleInfoView = () => {
		let option = {
			type: 2,
			data: {vehicleId: state.pageParams.vehicleId},
			method: "POST",
			showLoading: true,
		}
		requestNew(vehicleInfoView, option).then(res => {
			state.deviceInfo = res
			setFormData()
		})
	}
	
	// 初始化表单参数
	const setFormData = () => {
		let deviceInfo = state.deviceInfo
		
		state.userType = deviceInfo.customerType === 1 ? '2' : '1'
		
		formData.customerName = deviceInfo.ownerName
		formData.customerPosUrl = deviceInfo.ownerPosImgUrl
		formData.customerNegUrl = deviceInfo.ownerNegImgUrl
		formData.customerIdNum = deviceInfo.ownerIdNum
		formData.vehiclePlate = deviceInfo.vehiclePlate
		formData.vehiclePlateColor = deviceInfo.vehiclePlateColor
		formData.cardVehicleType = deviceInfo.vehicleType
		formData.vehPosImgUrl = deviceInfo.vehPosImgUrl
		formData.vehNegImgUrl = deviceInfo.vehNegImgUrl
		formData.proxyUrl = state.userType === '1' ? '' : deviceInfo.proxyUrl
		formData.customerTel = deviceInfo.ownerTel
		formData.axleCount = deviceInfo.axleCount
		formData.approvedCount = deviceInfo.approvedCount
		formData.totalMass = deviceInfo.totalMass
		formData.vehicleDimensions = deviceInfo.vehicleDimensions
		formData.vanType = deviceInfo.type
		
		if (state.userType === '1') {
			formData.agentName = deviceInfo.ownerName
			formData.agentIdNum = deviceInfo.ownerIdNum
			formData.agentNegImgUrl = deviceInfo.ownerNegImgUrl
			formData.agentNegImgUrl = deviceInfo.ownerPosImgUrl
			// formData.agentIdtype = ownerIdType
		}
		
		
		
	}
	
	const selectProvince = () => {
		uni.navigateTo({
			url: '/pages/common/select-data-list'
		})
	}
	
	// 字段校验
	const paramsVerify = () => {
		let isVerify = true;
		if (state.userType === '1') {
			if(!formData.customerName){
				msg('请输入用户姓名');
				isVerify = false;
			} else if(!formData.customerIdNum){
				msg('请输入证件号码');
				isVerify = false;
			} else if(!formData.vehiclePlate){
				msg('请输入车牌号码');
				isVerify = false;
			}
		} else {
			
		}
		return isVerify;
	}
	
	//车牌号输入
	const carNumber = (val : any) => {
		formData.vehiclePlate = val.trim();
	};
	
	const close = (e) => {
		state.isTakePhotoModeShow = e
	}
	
	const takePhotoMode = (index: number) => {
		state.isTakePhotoModeShow = true
		state.choiceIndex = index
	}
	
	// const ocrResult = (data: OCRData) => {
	// 	let bizContent = data.bizContent = data.bizContent ? JSON.parse(data.bizContent) : {}
	// 	if (state.choiceIndex === 1) {
	// 		if (!bizContent.idno) {
	// 			msg('识别失败，请重新上传')
	// 		} else {
	// 			if (state.userType === '1') {
	// 				formData.customerName = bizContent.name;
	// 				formData.customerIdNum = bizContent.idno;
	// 				formData.customerPosUrl = data.imageUrl;
	// 			} else {
	// 				formData.agentName = bizContent.name;
	// 				formData.agentIdNum = bizContent.idno;
	// 				formData.agentPosImgUrl = data.imageUrl
	// 			}
	// 		}
	// 	} else if (state.choiceIndex === 2) {
	// 		if (!bizContent.begindate) {
	// 			msg('识别失败，请重新上传')
	// 		} else {
	// 			if (state.userType === '1') {
	// 				formData.customerNegUrl = data.imageUrl;
	// 				compareDates(data.enddate)
	// 			} else {
	// 				formData.agentNegImgUrl = data.imageUrl
	// 				compareDates(data.enddate)
	// 			}
	// 		}
	// 	} else if (state.choiceIndex === 3) {
	// 		formData.vehPosImgUrl = bizContent.imageUrl
	// 		if (bizContent.plate_a.length > 8) {
	// 			formData.vehiclePlate = bizContent.plate_a.substring(0, 8);
	// 		} else {
	// 			formData.vehiclePlate = bizContent.plate_a;
	// 		}
	// 	} else if (state.choiceIndex === 4) {
	// 		formData.vehNegImgUrl = bizContent.imageUrl
			
	// 	} else if (state.choiceIndex === 5) {
	// 		submitForm.name = bizContent.unitName;
	// 		submitForm.address = bizContent.adress;
	// 		submitForm.idNo = bizContent.screditCode;
	// 		submitForm.idCardFront = data.imageUrl
	// 	}
	// }
	
	// 授权证书上传
	const uploadOtherFile = () => {
		uni.chooseImage({
			count: 1, // 只能选取一张照片
			sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ["camera", "album"], //从相册选择
			success: (res) => {
				uploadFile(res.tempFilePaths[0]).then((data: uploadFileParams) => {
					formData.proxyUrl = data.imageUrl
				})
			},
		});
	}
</script>

<style lang="scss" scoped>
	.bg{
		background-color: white;
		margin:0 32rpx;
		margin-top: 20rpx;
		border-radius: 12rpx;
		border: 1px solid #FFFFFF;
		padding: 20rpx;
	}
	.card {
		display: flex;
		margin: 0 20rpx;
		align-items: center;
	}
	.action {
		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;
		padding: 24rpx 0 calc(24rpx + env(safe-area-inset-bottom));
	}
	::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;
		}
	}
	.disabled-text{
		color: #999999;
	}
	.uni-list{
		width: 88%;
		margin: 24rpx auto;
		.left-owner-radio{
			margin-right: 12rpx;
		}
	}
	.page-content{
		position: relative;
		min-height: 100vh;
	}
	.flex-input{
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		.unit{
			color: #01243A;
			font-size: 26rpx;
			width: 60rpx;
			text-align: center;
		}
	}
	.image-list{
		display: flex;
		flex-wrap: wrap;
		margin-top: 24rpx;
		.icon{
			width: 180rpx;
			height: 180rpx;
			margin: 0 24rpx 24rpx 0;
		}
		.image-out{
			width: 180rpx;
			height: 180rpx;
			margin: 0 24rpx 24rpx 0;
			position: relative;
			.delete{
				position: absolute;
				right: 0;
				top: 0;
			}
		}
	}
	.upload-num{
		color: #999999;
		font-size: 26rpx;
		margin-left: 12rpx;
	}
</style>