zhywpt-sp/subpackage/personal-center/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="`${$imgUrl}issueActivation/${item.src}.png`" class="numberplate-bg"></image>
			<view class="numberplate-name" :style="`color:${item.color}`">{{numberplate}}</view>
			<image :src="`${$imgUrl}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";
	const emit = defineEmits(['numberplateResult'])
	
	const props = defineProps({
		//显示的车牌
		numberplate:{
			type:String,
			default:'贵A12345'
		},
		
		//当前选择的车牌
		numberplateCor:{
			type:Object,
			default:()=>{return {id:-1}}
		}
	})
	
	const state = reactive({
		curCheckId:-1, //当前选择的车牌
		numberplateColorList:[//车牌颜色
			{src:'bg-blue',checkSrc:'icon-select-blue',id:0,color:'#ffffff',title:'蓝色'},
			{src:'bg-orange',checkSrc:'icon-select-orange',id:1,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-green',checkSrc:'icon-select-green',id:4,color:'#000000',title:'渐变绿色'},			
			{src:'bg-yellow_green',checkSrc:'icon-select-yellow_green',id:5,color:'#000000',title:'黄绿双拼'},			
			{src:'bg-white_blue',checkSrc:'icon-select-blue',id:6,color:'#000000',title:'蓝白渐变'},
			{src:'green',checkSrc:'icon-green',id:11,color:'#ffffff',title:'绿色'},
			{src:'rad',checkSrc:'icon-select-red',id:12,color:'#ffffff',title:'红色'},
		],  
	})
	

	/* 选择车牌颜色 */
	const checkNumberplateColor = (item) => {
		state.curCheckId = item.id;
		emit('numberplateResult',item)
	}
	
	onMounted(()=>{
		state.curCheckId = props.numberplateCor.id;
	})
</script>

<style lang="scss" scoped>
	.numberplates{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	    justify-content: space-around;
		.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: 190rpx;
				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>