zhywpt-h5/components/LicensePlateColor.vue

<template>
	<div style="padding-left: 30px;margin-top: 10px;">
		<div class="container">
			<div class="numberplate" v-for="(item,index) in handleItems(items)" :key="index"
				@click="checkNumberplateColor(item)">
				<image class="numberplate-bg" :src="`${fileURL}image/issueActivation/${item.src}.png`"></image>
				<view class="numberplate-name" :style="`color:${item.color}`">
					<text style="font-size:24rpx">{{numberplate ? numberplate : item.title }}</text>
				</view>
				<image :src="`${fileURL}image/issueActivation/${item.checkSrc}.png`" class="numberplate-icon-check"
					v-if="item.id === curCheckId"></image>
			</div>
		</div>
	</div>
</template>
<script setup lang='ts'>
	import {
		ref,
		watchEffect
	} from 'vue'
	import {
		fileURL
	} from '@/utils/network/api.js';
	const props = defineProps({
		defaultStr: {
			default: '',
		},
		vanType: {
			default: 'all'
		}
	})

	const handleItems = (item) => {
		let vanType = props.vanType
		if (vanType === 'all') {
			return item
		} else if (vanType === 'passengerCar') {
			// 客车
			return item.filter(item => !['黄绿双拼色', '黄色','蓝白渐变','红色'].includes(item.title))
		} else {
			return item.filter(item => ['黄绿双拼色', '黄色'].includes(item.title))
		}
	}
	const emit = defineEmits([
		"numberplateResult"
	])
	/* 选择车牌颜色 */
	const checkNumberplateColor = (item) => {
		curCheckId.value = item.id;
		emit('numberplateResult', item)
	}
	const numberplate = ref('') //车牌号
	const curCheckId = ref(-1) //当前选择的车牌
	watchEffect(() => {
		if (parseInt(props.defaultStr) === 0 || props.defaultStr) {
			curCheckId.value = parseInt(props.defaultStr)
		}
	})
	const items = [ //车牌颜色
		{
			src: 'bg-blue',
			checkSrc: 'icon-select-blue',
			id: 0,
			color: '#ffffff',
			title: '蓝色'
		},
		{
			src: 'bg-green',
			checkSrc: 'icon-select-green',
			id: 4,
			color: '#ffffff',
			title: '渐变绿色'
		},
		{
			src: 'bg-orange',
			checkSrc: 'icon-select-orange',
			id: 1,
			color: '#ffffff',
			title: '黄色'
		},
		{
			src: 'bg-yellow_green',
			checkSrc: 'icon-select-yellow_green',
			id: 5,
			color: '#ffffff',
			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: '#ffffff',
			title: '蓝白渐变'
		},
		{
			src: 'green',
			checkSrc: 'icon-green',
			id: 11,
			color: '#ffffff',
			title: '绿色'
		},
		{
			src: 'rad',
			checkSrc: 'icon-select-red',
			id: 12,
			color: '#ffffff',
			title: '红色'
		}
	]
</script>
<style lang='scss' scoped>
	.flex-bg {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-content: flex-start;
		line-height: 10px;
	}

	.numberplate {
		width: 200rpx;
		height: 80rpx;
	}

	.item {
		background-color: $uni-bg-color-mask;
	}

	.container {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		gap: 10px;
		/* 根据实际情况调整间距大小 */
	}


	.numberplate {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 10rpx;
		position: relative;

		&:nth-child(even) {
			margin-right: 0rpx;
		}

		&-bg {
			width: 200rpx;
			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>