You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
300 lines
6.0 KiB
300 lines
6.0 KiB
<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>
|
|
|