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>
				
				<ocr-cert-block
					:text="{
						title: '单位授权书',
						tag1: '上传授权书',
						tag2: '拍摄规范',
						img: 'issuance/weituo.png'
					}"
					:img="formData.proxyUrl"
					 @click="uploadOtherFile"
				></ocr-cert-block>
				
				<!--营业执照-->
				<ocr-cert-block :type="5" :img="formData.customerPosUrl" @click="takePhotoMode"></ocr-cert-block>
				<!--经办人身份证正面-->
				<ocr-cert-block :text="{title: '经办人身份证人像面'}" :img="formData.agentPosImgUrl" :type="1"></ocr-cert-block>
				<!--经办人身份证反面-->			
				<ocr-cert-block :text="{title: '经办人身份证国徽面'}" :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.customerIdNum" 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.agentName" 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.agentIdNum" 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, getCustomerDetail } 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, showModals } from '@/utils/utils'
	
	import { startHeartbeat, stopHeartbeat } from "@/pages/bluetooth/heartbeatService"
	const cmd = require("../../../static/etcUtil/cmdConfig.js");
	const tools = require("../../../static/etcUtil/tools.js");
	const bluetoothUtil = require("../../../static/etcUtil/index.js");
	
	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: '',
		customerIdType: "SFZ"
	})
	
	const card = reactive({
		cardId: "",
		cardNo: "",
		startTime: "",
		endTime: "",
		userName: "",
		userNameStr: "",
		idNum: "",
		idNumStr: "",
		vehiclePlate: "",
		vehiclePlateColor: "",
		color: "",
		colorStr: "",
		version: "",
		type: "",
		typeStr: "",
		favourable: "",
		favourableStr: "",
		money: "",
		v_userType: "",
		cardBalance: ""
	});
	
	const obu = reactive({
		obuId: "",
		num: "",
		startTime: "",
		endTime: "",
		version: "",
		approvedCount: "",
		axleCount: "",
		axleDistance: "",
		engineNum: "",
		type: "",
		typeStr: "",
		userType: "",
		userTypeStr: "",
		vehiclePlate: "",
		vehiclePlateColor: "",
		vehiclePlateColorStr: "",
		vin: "",
		wheelCount: "",
		isJH: "",
		isJHStr: "",
		outsideDimensions: "",
		loadStatus: ""
	});
	
	const state = reactive({
		isTakePhotoModeShow: false,
		choiceIndex: null,
		userType: '', // 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: ''
		},
		userInfo: {
			
		},
		customerObj: {
			userType: ''
		}
	})
	
	onLoad((option: pageParams) => {
		if (option) {
			state.pageParams = option
			formData.cardId = option.cardId
			formData.obuId = option.obuId
			formData.oldCardExpireTime = option.cardExpireTime
			formData.oldObuExpireTime = option.obuExpireTime
		}
		state.customerObj = getItem('customerObj')
		state.userType = String(state.customerObj.userType)
		getCustomerDetailInfo()
		getVehicleInfoView()
		// getCardDetailInfo()
	})
	
	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 getCustomerDetailInfo = () => {
		const options = {
			type: 2,
			data: {},
			method: "POST",
			showLoading: true,
		}
		//调用方式
		requestNew(getCustomerDetail, options).then(res => {
			let userInfo = state.userInfo = res
			formData.customerPosUrl = userInfo.customerPosImgUrl
			formData.agentPosImgUrl = userInfo.agentPosImgUrl
			formData.agentNegImgUrl = userInfo.agentNegImgUrl
			formData.agentName = userInfo.agentName
			formData.agentIdNum = userInfo.agentIdNum
			
			formData.customerName = userInfo.customerName
			formData.customerIdNum = userInfo.customerIdNum
		})
	}
	
	// 获取卡签信息
	// const getCardDetailInfo = () => {
	// 	getCardDetail().then(res => {
	// 		console.log(1111111111111)
	// 		console.log(res)
	// 	})
	// }
	
	// 获取车辆详情
	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.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.customerPosUrl = deviceInfo.ownerPosImgUrl
			formData.customerNegUrl = deviceInfo.ownerNegImgUrl
			formData.agentName = deviceInfo.ownerName
			formData.agentIdNum = deviceInfo.ownerIdNum
			formData.agentPosImgUrl = deviceInfo.ownerPosImgUrl
			formData.agentNegImgUrl = deviceInfo.ownerNegImgUrl
			// formData.agentIdtype = ownerIdType
		} else {
			getCustomerDetailInfo()
			// formData.agentPosImgUrl = deviceInfo.ownerPosImgUrl
			// formData.agentNegImgUrl = deviceInfo.ownerNegImgUrl
		}
		
	}
	
	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 {
			if (!formData.proxyUrl) {
				msg('请上传单位授权书');
				isVerify = false;
			} else if(!formData.customerName){
				msg('请输入单位名称');
				isVerify = false;
			} else if(!formData.customerIdNum){
				msg('请输入单位证件号');
				isVerify = false;
			} else if(!formData.agentName){
				msg('请输入经办人姓名');
				isVerify = false;
			} else if(!formData.agentIdNum){
				msg('请填写经办人证件号码');
				isVerify = false;
			} else if(!formData.vehiclePlate){
				msg('请输入车牌号码');
				isVerify = false;
			}
		}
		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
				})
			},
		});
	}
	
	/**
	 * 获取OBU号 读OBU
	 */
	const getObuId = () => {
		console.log('======获取OBU号======')
		let cmdArray = [cmd.HOME_DIRECTORY, cmd.OBU_SYSTEM_FILE, cmd.RANDOM_NUMBER];
		bluetoothUtil.transCmd(cmdArray, "20", function(res) {
			var status = res[1].substring(res[1].length - 4, res[1].length);
			console.log('获取OBU号执行结果' + status, res)
			//第一次获取随机数
			if (status == "9000") {
				obu.obuId = res[1].substring(20, 36);
				// obu.obuId = '5201250802001105';
				obu.vin = res[1].substring(18, 20);
				obu.version = res[1].substring(18, 20);
				state.ObuVersion = res[1].substring(18, 20)
				state.ChipSn = res[1].substring(0, 8)
				cmdRandNum = res[2].substring(0, res[2].length - 4);
				getCardId()
				
			} else {
				showModals('获取设备信息错误！')
			}
		}, () => {
			showModals('获取设备信息错误')
		});
	};
	
	// 获取卡详情
	const getCardId = () => {
		//执行0015文件
		tools.showLoadingAlert("执行指令");

		let cmdArr = [cmd.HOME_DIRECTORY, cmd.APPLICATION_DIRECTORY, cmd.CMD_READBINARY, cmd.CMD_GETBALANCE];
		console.log(cmdArr);
		console.log(bluetoothUtil);
		bluetoothUtil.transCmd(cmdArr, '10', function(res) { //10：写卡   20：写OBU
			console.log("5201", res)
			let str = res[2].substring(res[2].length - 4, res[2].length); //判断是否为9000
			let str3 = res[3].substring(res[3].length - 4, res[3].length); //判断是否为9000
			if (str == "9000" || str3 == "9000") {
				if (res[2].length > 86 || res[3] >= 12) {
					card.cardId = res[2].substring(20, 40);
					// card.cardId = '52012511110201724155';
					state.CardVersion = res[2].substring(18, 20),
					tools.hideLoadingAlert();
					state.showBtn = true
				} else {
					alertF("CMD_READBINARY指令长度不符" + res[2]);
				}
				return;
			}
			alertF("CMD_READBINARY指令长度不符" + res[2]);

		})
	};
	
	//提示对话框
	const alertF = (msg) => {
	
		//隐藏加载框
		tools.hideLoadingAlert();
	
		//提示对话框
		tools.showModalAlert(msg);
		stopHeartbeat();
	}
	
	function showModals(msg) {
		uni.showModal({
			title: '提示',
			content: msg,
			showCancel: false,
			success: function(res) {
				if (res.confirm) {
					uni.navigateBack()
					console.log('用户点击确定1');
				} else if (res.cancel) {
					console.log('用户点击取消1');
				}
			}
		});
	}
</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>