zhywpt-sp/subpackage/after-sale/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.trim() || item.title}}</view>
			<image :src="`${fileURL}image/issuance/color-tip.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 { onLoad } from "@dcloudio/uni-app";
	import { fileURL } from '@/datas/fileURL.js';
	import { getItem } from "@/utils/storage";
	import { getGlobalParam } from "@/utils/network/api.js";
	import { getCodeName } from "@/datas/queryKey.js";
	import { msg } from "@/utils/utils";
	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: '#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: '红色' },
		]
	})

	/* 选择车牌颜色 */
	const checkNumberplateColor = (item) => {
		console.log("item", item)
		state.curCheckId = item.id;
		emit('numberplateResult', item.id)
	}
	const getCarColor = () => {
		state.numberplateColorList=state.allColorList
		state.curCheckId = state.numberplateColorList[0]['id'];
		emit('numberplateResult', state.curCheckId)
		console.log("state.numberplateColorList", state.numberplateColorList)
	}
	onMounted(() => {
		setTimeout(() => {
			getCarColor()
		})
	})
</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-bottom: 40rpx;
			position: relative;

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

			&-bg {
				width: 196rpx;
				height: 64rpx;
			}

			&-name {
				font-size: 26rpx;
				color: white;
				position: absolute;
				line-height: 64rpx;
			}

			&-icon-check {
				width: 34rpx;
				height: 34rpx;
				position: absolute;
				right: 0rpx;
				bottom: 0rpx;
			}
		}
	}
</style>