亲宝软件园·资讯

展开

uniapp添加车牌组件

可乐1028 人气:0

1.先看效果

2.插件实现

<!--
 * @Author: dfh
 * @Date: 2022-04-20 09:43:44
 * @LastEditors: dfh
 * @Modified By: dfh
 * @describe: 
-->
<template>
	<view class='dialog-license-container' @click='cancelHandler'>
		<view class="dialog-license-box"  @click.stop="">
			<text class="dialog-title">添加车牌</text>
			<text class="dialog-sub-title">请输入您的车牌号</text>
			<view class="dialog-row-license-box">
				<template v-for="(item,index) in brand">
					<text v-if="item=='新能源'" :key='index' class="dialog-license new-energy" @click.stop="onBrandClick"
						:data-index='index'>{{item}}</text>
					<text v-else :key='index' class="dialog-license" :class="{'dialog-active': currentIndex===index}"
						@click.stop="onBrandClick" :data-index='index'>{{item}}</text>
				</template>
			</view>
			<button type="primary" class="dialog-add-license" @click.stop="submitHandler">确认</button>
		</view>

		<!-- 省份 -->
		<view class="dialog-province-box" v-if="isShowProvinceSelect"  @click.stop="">
			<view class="dialog-header">
				<text class="dialog-cancel" @click.stop='cancelHandler'> 取消</text>
				<text @click.stop="submitHandler">完成</text>
			</view>
			<view class="dialog-grid-box">
				<text v-for="(item,index) in province" :key='index' @click.stop="provinceClick"
					:data-item="item">{{item}}</text>
				<view class="dialog-close-box" @click.stop="clearHandler">
					<image src="../../static/add_car_delete.png" mode="widthFix" style="width:60rpx;height:60rpx" />
				</view>
			</view>
		</view>

		<!-- 车牌 -->
		<view class="dialog-province-box" v-if="isShowBrandSelect" @click.stop="">
			<view class="dialog-header">
				<text class="dialog-cancel" @click.stop='cancelHandler'>取消</text>
				<text @click.stop="submitHandler">完成</text>
			</view>
			<view class="dialog-grid-box">
				<text v-for="(item,index) in brand_code" :key='index' @click.stop="brandCodeHandler" :data-item="item"
					:class="{'dialog-gray-text':!item.isShow}">{{item.code}}</text>
				<text @click.stop="clearHandler" class="dialog-close">删除</text>
			</view>
		</view>
	</view>


</template>

<script>
	export default {
		props: {
			onCancel: {
				type: Function
			},
			onOk: {
				type: Function
			}
		},
		data() {
			return {
				isEnd: false, //是否可以结束输入
				isNotEnergy: true,
				brand: ['', '', '', '', '', '', '', '新能源'],
				currentIndex: 0,
				province: ['京', '津', '沪', '渝', '冀', '豫', '云', '辽', '黑', '湘', '皖', '鲁', '新', '苏', '浙', '赣', '鄂', '桂', '甘',
					'晋', '蒙', '陕', '吉', '闽', '贵', '粤', '青', '藏', '川', '宁', '琼', '使', '无'
				],
				brand_code: [{
						code: '1',
						isShow: true
					},
					{
						code: '2',
						isShow: true
					},
					{
						code: '3',
						isShow: true
					},
					{
						code: '4',
						isShow: true
					},
					{
						code: '5',
						isShow: true
					},
					{
						code: '6',
						isShow: true
					},
					{
						code: '7',
						isShow: true
					},
					{
						code: '8',
						isShow: true
					},
					{
						code: '9',
						isShow: true
					},
					{
						code: '0',
						isShow: true
					},
					{
						code: 'Q',
						isShow: true
					},
					{
						code: 'W',
						isShow: true
					},
					{
						code: 'E',
						isShow: true
					},
					{
						code: 'R',
						isShow: true
					},
					{
						code: 'T',
						isShow: true
					},
					{
						code: 'Y',
						isShow: true
					},
					{
						code: 'U',
						isShow: true
					},
					{
						code: 'O',
						isShow: false
					},
					{
						code: 'P',
						isShow: true
					},
					{
						code: '港',
						isShow: false
					},
					{
						code: 'A',
						isShow: true
					},
					{
						code: 'S',
						isShow: true
					},
					{
						code: 'D',
						isShow: true
					},
					{
						code: 'F',
						isShow: true
					},
					{
						code: 'G',
						isShow: true
					},
					{
						code: 'H',
						isShow: true
					},
					{
						code: 'J',
						isShow: true
					},
					{
						code: 'K',
						isShow: true
					},
					{
						code: 'L',
						isShow: true
					},
					{
						code: '澳',
						isShow: false
					},
					{
						code: 'Z',
						isShow: true
					},
					{
						code: 'X',
						isShow: true
					},
					{
						code: 'C',
						isShow: true
					},
					{
						code: 'V',
						isShow: true
					},
					{
						code: 'B',
						isShow: true
					},
					{
						code: 'N',
						isShow: true
					},
					{
						code: 'M',
						isShow: true
					},
					{
						code: '学',
						isShow: false
					},
					{
						code: '领',
						isShow: false
					}
				],
			}
		},
		computed: {
			isShowProvinceSelect() {
				return this.currentIndex === 0
			},
			isShowBrandSelect() {
				return this.currentIndex > 0;
			}
		},
		created() {},
		methods: {
			// 校验车牌
			isVehicleNumber(vehicleNumber){
				let result = false;
				const express =
					/^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/;
				result = express.test(vehicleNumber);
				return result;
			},
			onBrandClick(e) {
				console.log(e.currentTarget.dataset.index);
				this.currentIndex = e.currentTarget.dataset.index;
			},
			provinceClick(e) {
				console.log(e.currentTarget.dataset.item);
				let {
					brand,
					currentIndex
				} = this;
				brand[currentIndex++] = e.currentTarget.dataset.item;
				this.brand = brand;
				this.currentIndex = currentIndex === brand.length ? currentIndex - 1 : currentIndex;
				this.resetKeyboard();
				this.brandIsEnd();
			},
			brandCodeHandler(e) {
				console.log(e.currentTarget.dataset.item);
				if (!e.currentTarget.dataset.item.isShow) return;
				const item = e.currentTarget.dataset.item;
				let {
					brand_code,
					currentIndex,
					brand
				} = this;
				if (currentIndex === 6 && item.code === '澳' || item.code === '港' || item.code === '领' || item.code ===
					'学') { //处理选择了 港澳领学
					brand[currentIndex] = item.code;
					this.isNotEnergy = false; //设置最后一个味是否为灰色
				} else {
					brand[currentIndex++] = item.code;
					this.isNotEnergy = true; //
				}
				this.brand = brand;
				this.brand_code = [...brand_code];
				this.currentIndex = currentIndex === brand.length ? currentIndex - 1 : currentIndex;
				this.resetKeyboard();
				this.brandIsEnd();

			},
			//判断时候结束
			brandIsEnd() {
				let {
					brand
				} = this;
				this.isEnd = !brand.includes('');
			},
			//重新设置键盘
			resetKeyboard() {
				let {
					brand_code,
					currentIndex
				} = this;
				if (currentIndex === 1) {
					brand_code = brand_code.map(item => {
						if (item.code === '澳' || item.code === '港' || item.code === '领' || item.code === '学') {
							console.log('currentIndex', currentIndex)
							return {
								...item,
								isShow: false
							}
						} else {
							return {
								...item,
								isShow: true
							}
						}
					})
				} else if (currentIndex === 6) {
					brand_code = brand_code.map(item => {
						if (item.code === 'O') {
							console.log('currentIndex', currentIndex)
							return {
								...item,
								isShow: false
							}
						} else {
							return {
								...item,
								isShow: true
							}
						}
					})
				} else {
					brand_code = brand_code.map(item => {
						if (item.code === '澳' || item.code === '港' || item.code === '领' || item.code === '学' ||
							item.code === 'O') {
							return {
								...item,
								isShow: false
							}
						} else {
							return {
								...item
							}
						}
					})
				}
				this.brand_code = brand_code;
			},
			clearHandler() {
				let {
					brand,
					currentIndex
				} = this;
				if (currentIndex <= 0) return;
				console.log(currentIndex)
				brand[currentIndex--] = currentIndex === 6 ? '新能源' : '';
				this.brand = brand;
				this.currentIndex = currentIndex;
				this.resetKeyboard();
				this.brandIsEnd();
			},
			submitHandler() {
				const brand = [...this.brand];
				if (brand[brand.length - 1] === '新能源') {
					brand.pop();
				}
				console.log(brand)
				const licensePlate = brand.join('');
				const checked = this.isVehicleNumber(licensePlate);
				if (checked) {
					this.$emit('onOk', licensePlate);
					this.cancelHandler();
				} else {
					console.log('请输入正确的车牌号码');
					uni.showToast({
						title: '请输入正确的车牌号码',
						icon: 'none'
					})
				}
			},
			cancelHandler() {
				this.isEnd = false; //是否可以结束输入
				this.isNotEnergy = true;
				this.brand = ['', '', '', '', '', '', '', '新能源'];
				this.currentIndex = 0;
				this.$emit('onCancel');
			}
		}

	}
</script>

<style lang="less">
	page {
		width: 100%;
		height: 100%;

		.dialog-license-container {
			position: fixed;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			z-index: 999 !important;
			background-color: rgba(0, 0, 0, .3);
			display: flex;
			flex-direction: column;
			align-items: center;

			.dialog-license-box {
				width: 650rpx;
				height: 487rpx;
				background: #FFFFFF;
				border-radius: 35rpx;
				margin-top: 170rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.dialog-title {
					margin-top: 50rpx;
					font-size: 35rpx;
					font-weight: 500;
					color: #323233;
					line-height: 49rpx;
				}

				.dialog-sub-title {
					margin-top: 11rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #979899;
					line-height: 33rpx;
				}

				.dialog-row-license-box {
					margin-top: 65rpx;
					height: 80rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					// padding: 0 10rpx;

					.dialog-license {
						width: 64rpx;
						height: 78rpx;
						border-radius: 16rpx;
						border: 2rpx solid #DEDEDE;
						line-height: 84rpx;
						text-align: center;
						box-sizing: border-box;
						font-size: 38rpx;
						color: black;
						line-height: 78rpx;
						margin: 0 6rpx;

						&.dialog-active {
							border: 2rpx solid #80ADEB;
							color: #007AFF;
						}

						&.new-energy {
							background: rgba(18, 191, 145, 0.04);
							border: 2rpx solid rgba(23, 186, 142, 0.46);
							font-size: 18rpx;
							color: #12BF91;
							border: 2rpx solid #80ADEB;
						}
					}

				}

				.dialog-add-license {
					margin-top: 65rpx;
					width: 400rpx;
					height: 78rpx;
					line-height: 78rpx;
				}
			}

			.dialog-province-box {
				width: 100%;
				height: 460rpx;
				position: absolute;
				bottom: 0;
				left: 0;
				border-top: 1rpx solid #e7e8ea;
				display: flex;
				flex-direction: column;
				box-sizing: border-box;
				padding-bottom: 30rpx;
				background: #e7e8ea;

				.dialog-header {
					width: 100%;
					height: 60rpx;
					background: white;
					box-sizing: border-box;
					padding: 0 30rpx;
					display: flex;
					justify-content: space-between;
					line-height: 60rpx;
					font-size: 32rpx;
					color: #0F5BFF;

					.dialog-cancel {
						color: gray;
					}
				}

				.dialog-grid-box {
					flex: 1;
					box-sizing: border-box;
					display: flex;
					flex-wrap: wrap;
					padding-right: 1%;
					align-items: center;
					margin-top: 20rpx;

					>text {
						width: 9%;
						margin-left: 1%;
						background: white;
						text-align: center;
						height: 70rpx;
						line-height: 70rpx;
						border-radius: 8rpx;
					}

					.dialog-gray-text {
						color: #e7e8ea;
					}

					.dialog-close-box {
						position: absolute;
						bottom: 38rpx;
						right: 10rpx;
						width: 80rpx;
						height: 70rpx;
						background: #cfd0d4;
						border-radius: 8rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.dialog-close {
						background: #cfd0d4;
						font-size: 24rpx;
					}
				}
			}

		}
	}
</style>

插件已发布uni-app插件市场,可以直接在插件市场搜索车牌号添加组件找到

3.插件使用

<template>
	<view class="content">
		<button type="default" @click="addLicenseDialog">添加车牌</button>
		<cowain-add-license v-if="showLicenseDialog" @onCancel='cancelLicenseDialog' @onOk='okLicense'>
		</cowain-add-license>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showLicenseDialog: false, //是否显示添加车牌的dialog
			}
		},
		onLoad() {

		},
		methods: {
			//显示添加车牌
			addLicenseDialog() {
				this.showLicenseDialog = true;
			},
			//取消添加车牌
			cancelLicenseDialog() {
				this.showLicenseDialog = false;
			},
			//添加车牌成功
			okLicense(license) {
				console.log(license);
			},
		}
	}
</script>

总结

加载全部内容

相关教程
猜你喜欢
用户评论