zhywpt-sp/subpackage/personal-center/old-user.vue

<template>
	<view class="box">
		<view class="title">公务车车牌号</view>
		<carNumerInput @numberInputResult="numberInputResult">
		</carNumerInput>
	</view>
	<!-- 车牌颜色 -->
	<view class="plate-color">
		<view class="title">选择车牌颜色</view>
		<numberplateColor :numberplate="state.numberplate?state.numberplate:state.vehiclePlateNumber"
			:numberplateCor="{ id: 0 }" @numberplateResult="checkNumberplateColor">
		</numberplateColor>
	</view>
	<view class="btn">
		<submit-button title="确定" @submit="submit"></submit-button>
	</view>
	<u-popup v-model="state.showPopup" mode="bottom">
		<view v-if="state.showPopup">
			<popup-numberplate-color :numberplateCor="state.curNumberplateColor" :numberplate="state.numberplate"
				@numberplateResult="numberplateResult">
			</popup-numberplate-color>
		</view>
	</u-popup>
</template>

<script setup lang="ts">
	import {
		reactive
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		msg,
		navTo
	} from '@/utils/utils';
	import {
		request
	} from "@/utils/network/request.js";
	import {
		gongWuChefindFormatVehicleInfo,
		gongWuCheDanWeiJinDu
	} from "@/utils/network/api.js";
	import {
		stringToJson
	} from "@/utils/network/encryption";
	import popupNumberplateColor from "./components/popup-choose-numberplate-color";
	import numberplateColor from "./components/layout-numberplate-color";
	import carNumerInput from "@/components/car-number-input/car-number-input";
	const tools = require("../../static/etcUtil/tools.js");

	onLoad((option) => {
		console.log(option);
	})

	const state = reactive({
		//显示车牌颜色选择popup
		showPopup: false,
		//当前选择的车牌颜色
		curNumberplateColor: {
			id: -1
		},
		vehiclePlateColor: 0,
		vehiclePlateColorStr: "请选择车牌颜色",
		numberplate: "",
		vehiclePlateNumber: "贵A12345",

	})

	/* 选择车牌颜色 */
	const checkNumberplateColor = (item : any) => {
		state.vehiclePlateColor = item.id;
	};

	//车牌颜色选择回调结果
	const numberplateResult = (colorItem : any) => {
		console.log(colorItem);
		state.vehiclePlateColor = colorItem.id;
		state.vehiclePlateColorStr = colorItem.title;
		state.showPopup = false;
	}

	const numberInputResult = (e : string) => {
		state.numberplate = e;
	}

	const chooseColor = () => {
		state.showPopup = true
	}

	//提交换货申请
	const submit = () => {
		if (state.numberplate.trim().length < 7) {
			msg('请输入正确车牌号');
			return
		}
		if (isVehicleNumber(state.numberplate.trim())) {
			msg('请输入车牌号格式不正确');
		}
		const options = {
			type: 2,
			data: {
				vehPlateNo: state.numberplate,
				vehPlateNoColor: state.vehiclePlateColor,
			},
			method: "POST",
			showLoading: true,
		};
		request(gongWuChefindFormatVehicleInfo, options).then((res : any) => {


			const result = stringToJson(res.bizContent)
			console.log(result);
			// deptName单位名称
			getGongWuCheDanWeiJinDu(result.fvehClass, result.fvehPlateColor, result.fvehPlateNo, result.deptName);


		})
	}

	const getGongWuCheDanWeiJinDu = (vehicleType : number, vehiclePlateColor : number, vehiclePlate : string, deptName :
		string) => {

		const options = {
			type: 2,
			data: {
				vehicleId: vehiclePlate + "_" + vehiclePlateColor,
				vehicleType: vehicleType,
			},
			method: "POST",
			showLoading: true,
		};
		request(gongWuCheDanWeiJinDu, options).then((res : any) => {
			const result = stringToJson(res.bizContent)
			console.log(result);
			console.log("deptName", deptName)
			if (result) {
				//成功调到查询界面
				tools.showModalAlert("历史用户信息检测成功，请您前往特制卡申请进行单位查询", function (res) {
					if (res.confirm) { //确定
						// tools.toUrl(route.scompnayQuery + '?deptShortName=' + deptShortName)

						navTo("/subpackage/personal-center/query-company-list?deptShortName=" + deptName)
						return;
					}
				});

			} else {
				tools.showModalAlert("未检测到历史用户信息，是否前往特制卡申请进行新增单位", function (res) {
					if (res.confirm) { //确定
						// tools.toUrl(route.scompnayQuery)
						navTo("/subpackage/personal-center/query-company-list")
						return;
					}
				}, null, "", true);
			}
		})

	}

	//车牌号验证方法	 
	function isVehicleNumber(vehicleNumber : string) {

		var xreg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF]$)|([DF][A-HJ-NP-Z0-9][0-9]{4}$))/;

		var creg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/;

		if (vehicleNumber.length == 7) {

			return creg.test(vehicleNumber);

		} else if (vehicleNumber.length == 8) {

			return xreg.test(vehicleNumber);

		} else {

			return false;

		}

	}
</script>
<style>
	page {
		background-color: #EEF7F7;
	}
</style>

<style lang="scss" scoped>
	.title {
		font-size: 32rpx;
		font-weight: bold;
		padding-bottom: 20rpx;
		padding-left: 20rpx;
	}

	.plate-color {
		display: flex;
		flex-direction: column;
		margin: 30rpx 30rpx 60rpx 30rpx;
		padding: 20rpx 0;
	}

	.plate-color .tit {
		font-size: 32rpx;
		padding-right: 20rpx;
		color: #666;
	}

	.plate-color .value {
		flex: 1;
		font-size: 32rpx;
	}

	.plate-color image {
		width: 36rpx;
		height: 36rpx;
	}

	.box {
		margin: 30rpx 0rpx;
		padding: 0 30rpx;
	}

	.btn {
		padding: 0 30rpx;
	}
</style>