zhywpt-sp/subpackage/personal-center/official-car-issue.vue

<!-- 公务车发行 -->
<template>
	<view class="title">公务车车牌号</view>
	<car-number-input inputColor="#fff" @numberInputResult="inputResult"></car-number-input>
	<view class="title">公务车车牌颜色</view>
	
	<view style="margin-left: 30rpx;margin-right: 100rpx;">
		<numberplate-color :numberplate="state.numberplate" @numberplateResult="checkNumberplateColor"></numberplate-color>
	</view>
	
	<view class="btn">
		<submit-button title="确定" @submit="confirm"></submit-button>
	</view>
	
	<!-- 未检测到车辆订单信息弹窗提示 -->
	<u-popup v-model="state.showPopup" mode="center" >
		<official-car-issue-hint @cancel="state.showPopup = false" @confirm="popupConfirm"></official-car-issue-hint>
	</u-popup>
</template>

<script setup lang="ts">
	import { msg, navTo } from '@/utils/utils';
	import { reactive } from "vue";
	import officialCarIssueHint from "./components/popup-official-car-issue-hint";
	import numberplateColor from "./components/layout-numberplate-color";
	
	const state = reactive({
		showPopup:false, //显示提示窗
		numberplate:'贵A1234', //车牌号
		numberplateColorID:-1, //选择的车牌ID
	})
	
	 /* 车牌输入结果 */
	 const inputResult = (result) =>{
		 state.numberplate = result;
	 }
	 
	 /* 选择车牌颜色 */
	 const checkNumberplateColor = (item) => {
		 state.numberplateColorID = item.id;
	 }
	 
	 /* 弹窗点击确定 */
	 const popupConfirm = () =>{
		 msg('点击确定');
		 state.showPopup = false;
	 }
	 
	 /* 确定 */
	 const confirm = () =>{
		 if(!state.numberplate || state.numberplate === '贵A1234'){
			 msg('请输入车牌号！');
			 return;
		 }
		 
		 if(state.numberplateColorID === -1){
			 msg('请选择车牌颜色！');
			 return;
		 }
		 
		 if(true){//查询到结果
			 navTo('/subpackage/personal-center/official-car-issue-result');
		 }else{//没查询到结果
			 state.showPopup = true;
		 }
	 }
</script>

<style>
	page{
		background-color: #EEF7F7;
	}
	:deep(.u-mode-center-box){
		border-radius: 20rpx;
	}
</style>
<style lang="scss" scoped>
	.title{
		font-size: 30rpx;
		color: #000000;
		font-weight: 600;
		padding: 36rpx 30rpx 40rpx;
	}
	.btn{
		margin: 60rpx 40rpx 50rpx;
	}
</style>