zhywpt-sp/subpackage/personal-center/vehicle-change/vehicle-change-chepai.vue

<template>
	<view class="bg">
		<view class="title_wrap"><text class="title">基本信息</text></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.vehiclePlate" input-align='right' disabled/>
			</u-form-item>
			<u-form-item label="车牌颜色" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
				borderBottom>
					<view class="showworld">{{getCodeName('VEHICLE_COLOR_TYPE',state.form.vehiclePlateColor)}}</view>
			</u-form-item>
			<u-form-item label="ETC卡状态" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
				borderBottom>
				<view class="showworld">{{getCodeName('CARD_STATE_TYPE',state.form.cardStatus)}}</view>
			</u-form-item>
			<u-form-item label="OBU卡状态" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
				borderBottom>
				<view class="showworld">{{getCodeName('CARD_STATE_TYPE',state.form.obuStatus)}}</view>
			</u-form-item>
			<u-form-item label="ETC卡状态" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
				borderBottom>
			</u-form-item>
			<view class="card">
				<image :src='`${$imgUrl}issuance/cardPicture.png`' mode=""></image>
				<view class="details">
					<view>储蓄卡</view>
					<view>卡号：{{state.form.cardId}}</view>
				</view>
			</view>
			<u-form-item label="OBU卡状态" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
				borderBottom>
			</u-form-item>
			<view class="card">
				<image :src='`${$imgUrl}issuance/obuPicture.png`' mode=""></image>
				<view class="details">
					<view>OBU信息</view>
					<view>序列号：{{state.form.obuId}}</view>
				</view>
			</view>
		</u-form>
	</view>
	<view class="bg">
		<view class="title" style="margin-bottom: 30rpx;">请输入需要变更ETC车牌号码</view>
		<car-number-input :defaultStr="state.form.vehiclePlateNew" @numberInputResult="carNumber"></car-number-input>
        <u-form label-width="230" :model="state.form" ref="uForm" :label-style='labelStyle' borderBottom>
			<u-form-item label="车牌颜色" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
				borderBottom>
				<u-input v-model="state.form.vehiclePlateColorNewStr" type="select" @click="show1 = true" input-align='right'/>
			</u-form-item>
			<u-form-item label="车牌类型" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
				borderBottom>
				<u-input v-model="state.form.vehicleTypeStr" type="select" @click="show2 = true" input-align='right'/>
			</u-form-item>
		</u-form>
	</view>
	<view class="tips">
		<view class="hint">
			<image :src="`${$imgUrl}common/icon-hint.png`" class="icon"></image>
			<view>注意事项</view>
		</view>
		<view class="item">1、非蓝牙设备不支持该功能。</view>
		<view class="item">2、单位用户请到线下网点进行办理。</view>
		<view class="item">3、车牌变更成功后需重新绑定票根信息工行。</view>
		<view class="item">4、工行、建行渠道的储值卡不支持该功能。</view>
	</view>
	<view class="action">
		<button type="default" class="ui-btn" @click="savaHandle()">
			提交
		</button>
	</view>
<!-- 选择车牌颜色 -->
	<u-select v-model="show1" :list="state.colorRange" @confirm="changeColor"></u-select>
	<u-select v-model="show2" :list="state.vehicleTypeRange" @confirm="changeVehicleType"></u-select>
</template>

<script setup lang="ts">
	import { navTo,uploadFile,strReplace,msg} from "@/utils/utils";
	import { reactive,ref } from "vue";
	import carNumberInput from "@/components/car-number-input/car-number-input.vue";
	import { onLoad } from "@dcloudio/uni-app";
	import { getItem } from "@/utils/storage.ts"
import {selfServiceView,selfServiceUserUpload,cardObuQuery,plateCheck} from "@/utils/network/api.js";
import {requestNew} from "@/utils/network/request.js";
import {
		getCodeName
	} from "@/datas/queryKey.js";
	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 show2 = ref(false)
	const state = reactive({
		form: {
			vehicleId:"",
			vehiclePlate: "",
			vehiclePlateColor: "",
			cardId:"",
			obuId:"",
			cardStatus:"",
			obuStatus:"",
			vehiclePlateNew:"",
			vehiclePlateColorNew:"",
			vehiclePlateColorNewStr:"",//车牌颜色中文
			vehicleType:"",
			vehicleTypeStr:"",
			isVehiclePlateChange:""
		},
		colorRange: [],
		vehicleTypeRange:[
			{value: 1, label: "客车"},
			{value: 2, label: "货车"},
			{value: 3, label: "作业车"},
		],
	})
	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['label'] = getColor[k]['name']
			state.colorRange.push(obj)
		}
		state.form.vehicleId=option.vehicleId
		state.form.vehiclePlate=option.vehicleId.split("_")[0]
		state.form.vehiclePlateColor=option.vehicleId.split("_")[1]
		state.form.cardId=option.cardId
		state.form.obuId=option.obuId
		state.form.isVehiclePlateChange=option.isVehiclePlateChange
		getObuList()
		console.log("state.colorRange",state.colorRange,option)
	});
	//车牌号输入
	const carNumber = (val : any) => {
		state.form.vehiclePlateNew = val.trim();
	};
	const savaHandle = () => {
		if(!state.form.vehiclePlateNew){
			msg("请输入新车牌");
			return;
		}
		if(!state.form.vehiclePlateColorNew){
			msg("请输入新车牌颜色");
			return;
		}
		if(!state.form.vehicleType){
			msg("请选择车牌类型");
			return;
		}
		const options = {
			type: 2,
			data: {
				vehiclePlate: state.form.vehiclePlateNew,
				vehiclePlateColor: state.form.vehiclePlateColorNew,
			},
			method: "POST",
			showLoading: true,
		};
		// 车牌校验有问题 还没改好
		requestNew(plateCheck, options).then((res) => {
			console.log("车牌校验", res)
			const paramsAll={
				vehicleId:state.form.vehicleId,
				isVehiclePlateChange:state.form.isVehiclePlateChange,
				cardId:state.form.cardId,
				obuId:state.form.obuId,
				vehiclePlateNew:state.form.vehiclePlateNew,
				vehiclePlateColorNew:state.form.vehiclePlateColorNew,
				vanType:state.form.vehicleType,
			}
			const params = encodeURIComponent(JSON.stringify(paramsAll))
			navTo(`/subpackage/personal-center/vehicle-change/vehicle-change-chepai-write?params=${params}`)
		});
	}
   const changeColor = (item) => {
		state.form.vehiclePlateColorNew = item[0].value
		state.form.vehiclePlateColorNewStr = item[0].label
		console.log(item)
	}
	const changeVehicleType = (item) => {
		state.form.vehicleType = item[0].value
		state.form.vehicleTypeStr = item[0].label
		console.log(item)
	}
	
	const getObuList = () => {
		var data = {
			obuId: state.form.obuId,
			cardId:state.form.cardId,
		};
		const options = {
			type: 2,
			data: data,
			method: "POST",
			showLoading: true,
		};
		requestNew(cardObuQuery, options).then((res) => {
			let result = res;
			state.form.obuStatus = result.obuStatus?result.obuStatus:""
			state.form.cardStatus = result.cardStatus
		})
	}
</script>

<style lang="scss" scoped>
	.bg {
		background-color: white;
		width: 90%;
		margin: 0 auto;
		margin-top: 20rpx;
		border-radius: 12px;
		border: 1px solid #FFFFFF;
		padding: 30rpx 20rpx;
		overflow: hidden;
		box-sizing: border-box;

		.title_wrap {
			display: flex;
			font-weight: 400;
            justify-content: space-between;
			.title {
				font-size: 30rpx;
				color: #01243A;
			}
		}

		.des {
			font-weight: 400;
			font-size: 28rpx;
			color: #01243A;
			line-height: 56rpx;
			margin-top: 10rpx;
			text-indent: 1rem;
		}
	}

	.action {
		position: absolute;
		left: 0;
		height: 160rpx;
		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;
	}
	.card{
		display: flex;
		align-items: center;
		image{
			width: 120rpx;
			height: 120rpx;
			margin-right: 20rpx;
		}
		.details view:first-child{
			margin-bottom: 10rpx;
		}
	}
	.tips{
		width: 90%;
		padding: 20rpx 0;
		box-sizing: border-box;
		margin: 20rpx auto;
		.hint{
			display: flex;
			align-items: center;
			.icon{
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}
		}
		.item{
			margin: 10rpx 0;
			text-indent: 1rem;
		}
	}
	.showworld{
		display: flex;
		justify-content: flex-end;
	}
</style>