zhywpt-sp/subpackage/after-sale/ETC-log-off/etc-log-off.vue

<template>
	<view class="page-content">
		
		<view class="bg">
			<view class="title"> 办理人身份信息 </view>
			<!--身份证正面-->
			<ocr-cert-block :img="formData.agentPosImgUrl" :type="1" @click="takePhotoMode"></ocr-cert-block>
			<!--身份证反面-->
			<ocr-cert-block :img="formData.agentNegImgUrl" :type="2" @click="takePhotoMode"></ocr-cert-block>
			<!--委托书-->
			<ocr-cert-block
				:text="{
					title: '委托书',
					tag1: '上传委托书',
					img: 'issuance/weituo.png'
				}"
				:img="formData.proxyUrl" :type="2" @click="uploadOtherFile"></ocr-cert-block>
			<!--驾驶证主页-->
			<ocr-cert-block :img="formData.vehPosImgUrl" :type="3" @click="takePhotoMode"></ocr-cert-block>
			
			<!--驾驶证副业-->
			<ocr-cert-block :img="formData.vehNegImgUrl" :type="4" @click="takePhotoMode"></ocr-cert-block>
		</view>
		
		<view class="bg">
			<view class="title"> 办理人基本信息 </view>
			
			<u-form label-width="230" :model="formData" 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="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>
					<u-input placeholder='请填写手机号' type="number" v-model="formData.agentTel" inputAlign="right"></u-input>
				</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" :isClick="false"></car-number-input>
				</u-form-item>
			</u-form>
		</view>
		
		<!-- 储存卡的时候才需要填写退费信息 -->
		<view class="bg" v-if="formData.cardType === 'STORED_VALUE_CARD'">
			<view class="title"> 退费信息 </view>
			<u-form label-width="230" :model="formData" ref="uForm" :label-style='labelStyle'>
				<u-form-item label="退费信息" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
					<view class="form-item-value-block">
						<view class="form-item-value"><custom-select-data v-model="state.chooseBankInfo" :dataList="state.refundInfoList" placeholder="请选择开户行" @change="chooseBank"></custom-select-data></view>
						<view class="btn btn-primary" @click="addBank">新增</view>
					</view>
				</u-form-item>
			</u-form>
		</view>
		
		<!-- 是否可以连接设备 -->
		<view class="bg">
			<view class="title"> 是否可以连接设备 </view>
			<u-form label-width="230" :model="formData" ref="uForm" :label-style='labelStyle'>
				<u-form-item label=" " borderBottom>
					<!-- <u-radio-group activeColor="#2CE242" v-model="state.isConnectDevice" @change="isConnectDeviceChange">
						<view class="u-radio-list">
							<view class="u-radio-block"><u-radio name="1">是</u-radio></view>
							<view class="u-radio-block"><u-radio name="2">否</u-radio></view>
						</view>
					</u-radio-group> -->
					
					<view class="column-checkbox-group">
						<view
							v-for="item in state.checkboxOption"
							:key="item.value"
							class="column-checkbox"
							style="justify-content: flex-end;"
							@click="isConnectDeviceChange(item.value)">
							<view class="checkbox-icon" :class="{'is-checked': item.value === state.isConnectDevice}">
								<u-icon name="checkbox-mark" :color="item.value === state.isConnectDevice ? '#FFFFFF' : '#FFFFFF'"></u-icon>
							</view>
							<text>{{ item.label  }}</text>
						</view>
					</view>
				</u-form-item>
			</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 { deviceLogOutApply, vehicleInfoView, getCustomerDetail, getRefundInfoPage } 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, objectToQueryString } from '@/utils/utils'
	// import { getCardDetail } from '@/static/etcUtil/etc-bluethooh.js'
	import { deviceStore } from '@/stores/device.js'
	import { logOffOver } from './js/log-off.js'
	
	const deviceStores = deviceStore()
	
	const isMultiProvince = [
		{name: '单省', id: 0},
		{name: '跨省', id: 1},
	]
	
	interface uploadFileParams{
		imageUrl: string
	}
	
	interface pageParams{
		vehicleId: string,
	}
	
	const labelStyle = {
		color: "#004576",
		fontSize: "28rpx",
	}
	
	const leftIcon = {
		height: '100%',
		width: '8rpx',
		display: 'flex',
		'align-items': 'center',
		'margin-right': '4rpx',
	}
	
	const formData = reactive({
		vehicleId: '',
		bankIdCode: '',
		bankName: '',
		bankProvince: '',
		bankBranchName: '',
		cardId: '',
		cardType: '',
		obuId: '',
		operateType: '',
		vehiclePlate: '',
		userName: '', // 持卡人姓名
		userMobile: '', // 持卡人手机号
		
		agentPosImgUrl: '', // 办理人
		agentNegImgUrl: '',
		agentName: '', // 办理人姓名
		agentIdVld: '', // 办理人证件有效期
		agentIdType: '101', // 证件类型
		agentIdNum: '', // 办理人证件号码
		agentAddress: '', // 办理人地址
		agentTel: '', // 办理人手机号
		proxyUrl: '',
		vehPosImgUrl: '',
		vehNegImgUrl: ''
	})
	
	const state = reactive({
		vehicleId: '',
		isTakePhotoModeShow: false,
		choiceIndex: null,
		chooseBankInfo: '',
		refundInfoList: [],
		isConnectDevice: "", // 是否可以连接设备
		checkboxOption: [
			{value: '1', label: '是'},
			{value: '2', label: '否'}
		],
	})
	
	onLoad((option: pageParams) => {
		if (option.vehicleId) {
			formData.vehicleId = state.vehicleId = decodeURIComponent(option.vehicleId)
			let arr = state.vehicleId.split('_')
			formData.vehiclePlate = arr[0]
		}
		let deviceInfo = deviceStores.deviceInfo
		console.log(deviceStores.deviceInfo)
		formData.cardId = deviceInfo.cardId
		formData.obuId = deviceInfo.obuId
		if (deviceInfo.cardType) {
			formData.cardType = deviceInfo.cardTypeNew
			if (formData.cardType === 'STORED_VALUE_CARD') {
				formData.operateType = 'BANK'
			} else {
				formData.operateType = 'ORIGINAL'
			}
		}
		
	})
	
	onShow(() => {
		// 储存卡才需要填写退费信息
		if (formData.cardType === 'STORED_VALUE_CARD') {
			getRefundInfoList() // 查询退费信息
		}
	})
	
	/**
	 * 身份证ocr识别后接收参数
	*/
	interface OCRData {
		imageUrl: string,
		bizContent: string,
		screditCode: string,
		enddate: string
	}
	
	const submit = () => {
		// 如果需要缴纳违约金
		if (!paramsVerify()) return;
		
	 	const options = {
			type: 2,
			data: {
				...formData,
				hasDevice: state.isConnectDevice === '1'
			},
			method: "POST",
			showLoading: true,
		}
		//调用方式
		requestNew(deviceLogOutApply, options).then(res => {
			console.log(res)
			if (deviceStores.logOff.isCancel) {
				let params = {
					orderNo: res.orderNo,
					vehicleId: formData.vehicleId,
					isConnectDevice: '2'
				}
				uni.navigateTo({
					url: `/subpackage/after-sale/ETC-log-off/breach_contract_pay?${objectToQueryString(params)}`
				})
				
			} else {
				// 是否可以连接设备
				if (state.isConnectDevice === '1') { // 如果可以连接设备
					uni.navigateTo({
						url: `/pages/bluetooth/bluetooth?routeType=13&vehicleId=${formData.vehicleId}`
					})
				} else {
					logOffOver()
				}
			}
		})
	}
	
	// 字段校验
	const paramsVerify = () => {
		let isVerify = true;
		if(!formData.agentPosImgUrl){
			msg('请上传身份证人像面');
			isVerify = false;
		} else if (!formData.agentNegImgUrl) {
			msg('请上传身份证国徽面');
			isVerify = false;
		} else if (!formData.proxyUrl) {
			msg('请上传单位授权书');
			isVerify = false;
		} else if (!formData.vehPosImgUrl) {
			msg('请上传行驶证主页');
			isVerify = false;
		} else if (!formData.vehNegImgUrl) {
			msg('请上传行驶副业');
			isVerify = false;
		} else if(!formData.agentTel){
			msg('请输入手机号');
			isVerify = false;
		} else if (!checkStr(formData.agentTel, "mobile")) {
			msg('请输入正确的手机号');
			isVerify = false;
		} else if(!formData.vehiclePlate){
			msg('请输入车牌号码');
			isVerify = false;
		} else if (formData.cardType === 'STORED_VALUE_CARD' && !state.chooseBankInfo) {
			msg('请选择退费信息');
			isVerify = false;
		} else if (!state.isConnectDevice) {
			msg('请选择是否可以连接设备');
			isVerify = false;
		}
		return isVerify;
	}
	
	// 获取退费信息列表
	const getRefundInfoList = () => {
		let option = {
			type: 2,
			data: {pageSize: 50, staffId: 'opId'},
			method: "POST",
			showLoading: true,
		}
		requestNew(getRefundInfoPage, option).then(res => {
			const data = res.result ? res.result.map(item => {
				item.bankNameStr = getCodeName('BANK_TYPE', item.bankName)
				return {
					...item,
					name: `${item.bankNameStr}(${maskBankCard(item.bankIdCode)})`,
				}
			}) : [];
			state.refundInfoList = data
		})
	}
	
	//车牌号输入
	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 {
				formData.agentPosImgUrl = data.imageUrl;
				formData.agentName = bizContent.name;
				formData.agentIdNum = bizContent.idno;
				formData.agentAddress = bizContent.address
			}
		} else if (state.choiceIndex === 2) {
			if (!bizContent.begindate) {
				msg('识别失败，请重新上传')
			} else {
				formData.agentNegImgUrl = data.imageUrl;
				formData.agentIdVld = data.enddate
				compareDates(data.enddate)
			}
		} else if (state.choiceIndex === 3) {
			formData.vehPosImgUrl = bizContent.imageUrl
		} else if (state.choiceIndex === 4) {
			formData.vehNegImgUrl = bizContent.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
				})
			},
		});
	}
	
	// 选择开户航
	const chooseBank = (val, obj) => {
		formData.bankIdCode = obj.bankIdCode
		formData.bankName = obj.bankName
		formData.bankProvince = obj.bankProvince
		formData.bankBranchName	 = obj.bankBranchName
		formData.userName = obj.userName
		formData.userMobile = obj.userMobile
	}
	
	const isConnectDeviceChange = (e) => {
		state.isConnectDevice = e
	}
	
	// 新增银行卡信息
	const addBank = () => {
		uni.navigateTo({
			url: '/subpackage/after-sale/refund-info/add'
		})
	}
</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;
	}
	.u-radio-list{
		flex: 1;
		display: flex;
		justify-content: flex-end;
		.u-radio-block{
			width: 50%;
			display: flex;
			justify-content: flex-end;		
		}
	}
	.form-item-value-block{
		display: flex;
		align-items: center;
		.form-item-value{
			flex: 1;
		}
		.btn {
			height: 60rpx;
			line-height: 58rpx;
			border-radius: 30rpx;
			padding: 0 34rpx;
			font-size: 23rpx;
			box-sizing: border-box;
			margin-left: 12rpx;
			color: white;
			background-color: #133850;
		}
	}
</style>