zhywpt-sp/issueActivation/components/popup-choose-numberplate-color.vue

<!-- 选择车牌颜色弹窗 -->
<template>
	<view class="main">
		<view class="title">车牌颜色</view>
		<view class="center">
			<numberplate-color @numberplateResult="checkNumberplateColor" :numberplateCor="numberplateCor" :numberplate="numberplate"></numberplate-color>
		</view>
	</view>
	<view class="btn">
		<submit-button title="确定" @submit="submit"></submit-button>
	</view>
</template>

<script setup lang="ts">
	import { reactive } from "vue";
	import { msg } from "@/utils/utils";
	import numberplateColor from "./layout-numberplate-color";
	
	const emit = defineEmits(['numberplateResult'])
	const props = defineProps({
		//当前选择的车牌
		numberplateCor:{
			type:Object,
			default:()=>{return {id:-1}}
		},
		//显示的车牌
		numberplate:{
			type:String,
			default:'贵A12345'
		},
	})
	
	const state = reactive({
		colorItem:props.numberplateCor,
	})
	
	const checkNumberplateColor = (item) => {
		state.colorItem = item;
	}
	
	const submit = () => {
		if(state.colorItem.id === -1){
			msg('请选择车牌颜色！');
			return;
		}
		emit('numberplateResult',state.colorItem);
	}
</script>

<style lang="scss" scoped>
	.main{
		padding: 30rpx 40rpx 0rpx;
		background-color: white;
		
		.title{
			font-size: 32rpx;
			color: #000000;
			text-align: center;
			margin-bottom: 60rpx;
		}
		.center{
			margin-left: 70rpx;
		}
	}
	.btn{
		margin: 30rpx 40rpx 20px;
	}
</style>