zhywpt-sp/subpackage/applyCard/components/layout-numberplate-color.vue

<!-- 车牌颜色选择组件 -->
<template>
	<view class="numberplates">
		<view class="numberplate" v-for="(item,index) in state.numberplateColorList" @click="checkNumberplateColor(item)" :key="index">
			<image :src="`${fileURL}/image/issueActivation/${item.src}.png`" class="numberplate-bg"></image>
			<view class="numberplate-name" :style="`color:${item.color}`">{{numberplate}}</view>
			<image :src="`${fileURL}image/issueActivation/${item.checkSrc}.png`" class="numberplate-icon-check"
				v-if="item.id === state.curCheckId"></image>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, reactive } from "vue";
	import{fileURL} from '@/datas/fileURL.js';
	import { getItem} from "@/utils/storage";
	import { getGlobalParam } from "@/utils/network/api.js";
	import {getCodeName} from "@/datas/queryKey.js";
	const emit = defineEmits(['numberplateResult'])
	
	const props = defineProps({
		//显示的车牌
		numberplate:{
			type:String,
			default:'贵A1234'
		},
		
		//当前选择的车牌
		numberplateCor:{
			type:Object,
			default:()=>{return {id:-1}}
		},
		//客车1  货车2
		type:{
			type:String,
			default:'1'
		},
	})
	
	const state = reactive({
		curCheckId:-1, //当前选择的车牌
		numberplateColorList:[],
		allColorList:[//车牌颜色
			{src:'bg-blue',checkSrc:'icon-select-blue',id:0,color:'#ffffff',title:'蓝色'},
			{src:'bg-green',checkSrc:'icon-select-green',id:4,color:'#000000',title:'渐变绿色'},
			{src:'bg-orange',checkSrc:'icon-select-orange',id:1,color:'#000000',title:'黄色'},
			{src:'bg-yellow_green',checkSrc:'icon-select-yellow_green',id:5,color:'#000000',title:'黄绿双拼'},
			{src:'bg-black',checkSrc:'icon-select-black',id:2,color:'#ffffff',title:'黑色'},
			{src:'bg-white',checkSrc:'icon-select-white',id:3,color:'#000000',title:'白色'},
			{src:'bg-white_blue',checkSrc:'icon-select-blue',id:6,color:'#000000',title:'蓝白渐变'},
			{src:'bg-green',checkSrc:'icon-select-green',id:11,color:'#ffffff',title:'绿色'},
			{src:'bg-green',checkSrc:'icon-select-green',id:12,color:'#ffffff',title:'红色'},
		]
	})
	
	/* 选择车牌颜色 */
	const checkNumberplateColor = (item) => {
		state.curCheckId = item.id;
		emit('numberplateResult',item)
	}
	const getCarColor = () => {
		const data=getItem('globalParam')
		if(props.type==1){
			for(var i=0;i<data.carPlateColorType.length;i++){
				for(var j=0;j<state.allColorList.length;j++){
					if(state.allColorList[j].title==getCodeName('VEHICLE_COLOR_TYPE',data.carPlateColorType[i])){
						state.numberplateColorList.push(state.allColorList[j])
					}
				}
			}
		}else{
			for(var i=0;i<data.trucksPlateColorType.length;i++){
				for(var j=0;j<state.allColorList.length;j++){
					if(state.allColorList[j].title==getCodeName('VEHICLE_COLOR_TYPE',data.trucksPlateColorType[i])){
						state.numberplateColorList.push(state.allColorList[j])
					}
				}
			}
		}
		
	}
	
	onMounted(()=>{
		state.curCheckId = props.numberplateCor.id;
		getCarColor()
		console.log("type",props.type)
	})
	
</script>

<style lang="scss" scoped>
	.numberplates{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	
		.numberplate{
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: 60rpx;
			margin-bottom: 40rpx;
			position: relative;
			
			&:nth-child(even){
				margin-right: 0rpx;
			}
			&-bg{
				width: 230rpx;
				height: 80rpx;
			}
			&-name{
				font-size: 30rpx;
				color: white;
				position: absolute;
				line-height: 80rpx;
			}
			&-icon-check{
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				right: -12rpx;
				bottom: -12rpx;
			}
		}
	}
</style>