zhongPin/Financial/components/plateNumber.vue

<template>
	<view class="plateNumber_body">
		<view @click="open" :style="{color:administrative?'#000000':''}" class="plateNumber_select">
			<!-- <uni-data-select placeholder='行政' class="uni_data_select" :clear="false" v-model="value" :localdata="range"
				@change="change"></uni-data-select> -->
				<text  > {{administrative?administrative:'行政'}} </text>
		</view>
		<view class="cutApart"></view>
		<view class="plateNumber_input">
			<input placeholder="请输入车牌号码" v-model="plateNumber" />
		</view>
		<uni-popup :isTouchmove='false'  ref="popup" type="bottom" background-color="#fff">
			<view  style="height:35vh; display: flex;flex-direction: column; padding-bottom: env(safe-area-inset-bottom); border-radius: 20px;">
				<!-- <picker-view   :value="seleIndex" @change="pickerChange"
					 @pickstart='pickstart' @pickend='pickendFn' style="flex: 1;">
					<picker-view-column>
						<view style="display: flex;align-items: center;justify-content: center;"
							v-for="(item,index) in range" :key="index">{{ item.text}}</view>
					</picker-view-column>
				</picker-view> -->
				<view class="administrative_container" >
					<view :style="{color:divIndex === index?'#ffffff':'',backgroundColor:divIndex === index?'#FF6700':''}" @click="divIndex = index" class="administrative_item" v-for="(item,index) in range" :key="index">{{ item.text}}</view>
				</view>
				<button :disabled="pickerOpen" :loading='pickerOpen' @click="buttenFn" class="butten" >
					<text>{{pickerOpen?'':'确定'}}</text>
				</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		options: {
			styleIsolation: 'shared', // 解除样式隔离 
		},
		data() {
			return {
				divIndex:'',
				administrative :'',
				seleIndex: [0],
				pickerOpen:false,
				value: '',
				plateNumber: '',
				range: [{
						value: 0,
						text: "京"
					},
					{
						value: 1,
						text: "津"
					},
					{
						value: 2,
						text: "沪"
					},
					{
						value: 3,
						text: "渝"
					},
					{
						value: 4,
						text: "冀"
					},
					{
						value: 5,
						text: "豫"
					},
					{
						value: 6,
						text: "云"
					},
					{
						value: 7,
						text: "辽"
					},
					{
						value: 8,
						text: "黑"
					},
					{
						value: 9,
						text: "湘"
					},
					{
						value: 10,
						text: "皖"
					},
					{
						value: 11,
						text: "鲁"
					},
					{
						value: 12,
						text: "新"
					},
					{
						value: 13,
						text: "苏"
					},
					{
						value: 14,
						text: "浙"
					},
					{
						value: 15,
						text: "赣"
					},
					{
						value: 16,
						text: "鄂"
					},
					{
						value: 17,
						text: "桂"
					},
					{
						value: 18,
						text: "甘"
					},
					{
						value: 19,
						text: "晋"
					},
					{
						value: 20,
						text: "蒙"
					},
					{
						value: 21,
						text: "陕"
					},
					{
						value: 22,
						text: "吉"
					},
					{
						value: 23,
						text: "闽"
					},
					{
						value: 24,
						text: "贵"
					},
					{
						value: 25,
						text: "粤"
					},
					{
						value: 26,
						text: "青"
					},
					{
						value: 27,
						text: "藏"
					},
					{
						value: 28,
						text: "川"
					},
					{
						value: 29,
						text: "宁"
					},
					{
						value: 30,
						text: "琼"
					},
				],
			};
		},
		methods: {
			buttenFn(){
				console.log()
				this.value = this.divIndex;
				this.administrative = `${ this.range[this.value].text }`;
				this.$refs.popup.close()
			},
			open(){
				this.$refs.popup.open('bottom')
			},
			pickerChange(e) {
				this.seleIndex = e.detail.value;
				console.log(e)
			},
			pickstart(){
				this.pickerOpen = true
			},
			pickendFn(){
				this.pickerOpen = false	
			},
			checkFn(e, value) {
				switch (e) {
					case 'name':
						return /(^[\u4e00-\u9fa5]{1}[\u4e00-\u9fa5\.·。]{0,18}[\u4e00-\u9fa5]{1}$)|(^[a-zA-Z]{1}[a-zA-Z\s]{0,18}[a-zA-Z]{1}$)/
							.test(value);

					case 'plateNumber':
						return /(^[\u4E00-\u9FA5]{1}[A-Z0-9]{6}$)|(^[A-Z]{2}[A-Z0-9]{2}[A-Z0-9\u4E00-\u9FA5]{1}[A-Z0-9]{4}$)|(^[\u4E00-\u9FA5]{1}[A-Z0-9]{5}[挂学警军港澳]{1}$)|(^[A-Z]{2}[0-9]{5}$)|(^(08|38){1}[A-Z0-9]{4}[A-Z0-9挂学警军港澳]{1}$)/
							.test(value)
					case 'phone':
						return /^1[3456789]\d{9}$/.test(value);
					case 'replacePhone':
						return /^1[3456789]\d{9}$/.test(value);
				}
			},
			plateNumberCallBack() {
				if(this.value!==''){
					const plateNumber = `${ this.range[this.value].text }${this.plateNumber}`
					console.log(plateNumber,'plateNumber')
					if (this.checkFn('plateNumber', plateNumber)) {
						return plateNumber
					} else {
						throw Error('输入车牌号');
					}
				}else{
					throw Error('选择车牌归属地');
				}
				
			},
			change(e) {
				console.log("e:", e);
			},
		},
	};
</script>

<style>
	.administrative_item{
		background-color: #F0F0F0;
		width: 140rpx;
		height: 60rpx;
		color: #000000;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
			margin-left: 20rpx;
			margin-bottom: 10rpx;
	}
	.administrative_container{
		width: calc((160rpx * 4) );
		display: flex;
		flex-wrap: wrap;
		height: calc(100% - 60rpx);
		overflow: auto;
		position: relative;
		margin: 0 auto;
		padding: 20rpx 0;
		overflow-y: scroll !important;
		
	}
	.butten{
		background-color: #FF6700;
		color: #FFFFFF;
		font-size: 24rpx;
		width: 235rpx;
		margin-top: 20rpx;
		height: 60rpx !important;
	}
	.plateNumber_input {
		flex: 1;
		padding: 0 10rpx;
		box-sizing: border-box;
	}

	.uni-select__input-box {
		text-align: center;
	}

	.cutApart {
		height: 70%;
		width: 1px;
		background-color: #BBBBBB;
	}

	.uni-select {
		border: 0px;
		border-radius: 0px;
	}

	.plateNumber_select {
		width: 100rpx;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #6a6a6a;
	}

	.plateNumber_body {
		height: 80rpx;
		width: 360rpx;
		border-radius: 10px;
		background: #FFFFFF;
		border-radius: 10px;
		display: flex;
		align-items: center;
	}
</style>