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.
310 lines
8.4 KiB
310 lines
8.4 KiB
<template>
|
|
<view class="bar_buy_bottom_cn">
|
|
<view class="page padding-top-25 padding-bottom-20 padding-lr-30">
|
|
<!-- 车牌号码输入框 -->
|
|
<view class="carNumber">
|
|
<!-- 车牌号头两位 -->
|
|
<view class="flex align-center justify-between text-center">
|
|
<view class="carNumber-item" :class="active==0?'border-main':''" @click='openKeyboard' data-index="0">{{carnum[0] || ''}}</view>
|
|
<view class="carNumber-item" :class="active==1?'border-main':''" @click='openKeyboard' data-index="1">{{carnum[1] || ''}}</view>
|
|
<view class="circlebox flex align-center justify-center">
|
|
<view class="circle"></view>
|
|
</view>
|
|
<!-- 常规 -->
|
|
<view class="carNumber-item" :class="active==2?'border-main':''" @click='openKeyboard' data-index="2">{{carnum[2] || ''}}</view>
|
|
<view class="carNumber-item" :class="active==3?'border-main':''" @click='openKeyboard' data-index="3">{{carnum[3] || ''}}</view>
|
|
<view class="carNumber-item" :class="active==4?'border-main':''" @click='openKeyboard' data-index="4">{{carnum[4] || ''}}</view>
|
|
<view class="carNumber-item" :class="active==5?'border-main':''" @click='openKeyboard' data-index="5">{{carnum[5] || ''}}</view>
|
|
<view class="carNumber-item" :class="active==6?'border-main':''" @click='openKeyboard' data-index="6">{{carnum[6] || ''}}</view>
|
|
<!-- 新能源 -->
|
|
<view class="carNumber-item" :class="active==7?'border-main':''" v-if="showNewPower" @click='openKeyboard' data-index="7">{{carnum[7]||''}}</view>
|
|
</view>
|
|
</view>
|
|
<!-- 虚拟键盘 -->
|
|
<view class="keyboard" v-if='KeyboardState'>
|
|
<view class="keyboardClose">
|
|
<view class="keyboardClose_btn" @click='closeKeyboard'>关闭</view>
|
|
<view class="keyboardClose_btn" @click='bindDelChoose'>删除</view>
|
|
</view>
|
|
<!-- 省份简写键盘 -->
|
|
<view class="keyboard-item" v-if="active==0">
|
|
<view class="keyboard-line" v-for="(item,index) in provinces" :key="index">
|
|
<view class="keyboard-btn" v-for="(itemlist,index2) in item" :key="index2" @click='bindChoose(itemlist)'>{{itemlist}}</view>
|
|
</view>
|
|
</view>
|
|
<!-- 车牌号码选择键盘 -->
|
|
<view class="keyboard-item iscarnumber" v-if="active!=0">
|
|
<view class="keyboard-line" v-for="(item,index) in others" :key="index">
|
|
<view class="keyboard-btn" v-for="(itemlist,index2) in item" :key="index2" @click='bindChoose(itemlist)'>{{itemlist}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
newEnergy:{
|
|
type:Boolean,
|
|
value:true,
|
|
}
|
|
},
|
|
data(){
|
|
return{
|
|
//省份简写
|
|
provinces: [
|
|
['京', '沪', '粤', '津', '冀', '晋', '蒙', '辽', '吉', '黑'],
|
|
['苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘'],
|
|
['桂', '琼', '渝', '川', '贵', '云', '藏'],
|
|
['陕', '甘', '青', '宁', '新'],
|
|
],
|
|
others:[
|
|
["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
|
|
["A", "B", "C", "D", "E", "F", "G", "H", "J", "K"],
|
|
["L", "M", "N", "P", "Q", "R", "S", "T", "U", "V"]
|
|
],
|
|
//车牌输入
|
|
numbers: ["W", "X", "Y", "Z"],
|
|
special:["港", "澳", "学",'领','警'],
|
|
carnum: ['','','','','','','',''],
|
|
KeyboardState: false,
|
|
showNewPower:false,
|
|
active:0
|
|
}
|
|
},
|
|
created(){
|
|
this.showNewPower = this.newEnergy
|
|
},
|
|
methods: {
|
|
// 选中点击设置
|
|
bindChoose(e) {
|
|
//改变第active位的值
|
|
let total = this.showNewPower?7:6;
|
|
this.carnum[this.active] = e
|
|
// 自动向后走一位，填写后一位数据
|
|
this.active=Number(this.active)+1<total?Number(this.active)+1:total
|
|
if(this.active==total && this.carnum[total]){
|
|
this.KeyboardState=false
|
|
}
|
|
this.carnum=this.carnum
|
|
// 向父页面传参
|
|
let carnum = this.carnum
|
|
let lisence = carnum[0] + carnum[1] + '·' + carnum[2] + carnum[3] + carnum[4] +carnum[5] + carnum[6]+carnum[7]
|
|
this.$emit('getLisence',lisence)
|
|
// 最后一位+特殊值
|
|
if((this.newEnergy&&this.active==7)||(!this.newEnergy&&this.active==6)){
|
|
this.others[3]=this.numbers.concat(this.special)
|
|
}else{
|
|
this.others[3]=this.numbers
|
|
}
|
|
},
|
|
bindDelChoose() {
|
|
if (this.carnum.length != 0) {
|
|
this.carnum[this.active] = '';
|
|
this.active=Number(this.active)-1>0?Number(this.active)-1:0
|
|
this.carnum=this.carnum
|
|
}
|
|
let carnum = this.carnum
|
|
let lisence = carnum[0] + carnum[1] + '·' + carnum[2] + carnum[3] + carnum[4] +carnum[5] + carnum[6]+carnum[7]
|
|
this.$emit('getLisence',lisence)
|
|
if((this.newEnergy&&this.active==7)||(!this.newEnergy&&this.active==6)){
|
|
this.others[3]=this.numbers.concat(this.special)
|
|
}else{
|
|
this.others[3]=this.numbers
|
|
}
|
|
},
|
|
showPowerBtn() {
|
|
this.showNewPower=true,
|
|
this.KeyboardState=true
|
|
},
|
|
closeKeyboard() {
|
|
this.KeyboardState=false
|
|
let carnum = this.carnum
|
|
let lisence = carnum[0] + carnum[1] + '·' + carnum[2] + carnum[3] + carnum[4] +carnum[5] + carnum[6]+carnum[7]
|
|
this.$emit('getLisence',lisence)
|
|
},
|
|
openKeyboard(e) {
|
|
this.active=e.currentTarget.dataset.index,
|
|
this.KeyboardState=true
|
|
if((this.newEnergy&&this.active==7)||(!this.newEnergy&&this.active==6)){
|
|
this.others[3]=this.numbers.concat(this.special)
|
|
}else{
|
|
this.others[3]=this.numbers
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page{
|
|
background: #fff;
|
|
}
|
|
.weui-cells__title{
|
|
margin-top:.77em;
|
|
margin-bottom:.3em;
|
|
padding-left:15px;
|
|
padding-right:15px;
|
|
color:#999;
|
|
font-size:14px;
|
|
}
|
|
/* 虚拟键盘 */
|
|
.keyboard{
|
|
height: auto;
|
|
background: #d1d5d9;
|
|
position: fixed;
|
|
bottom:0;
|
|
width: 100%;
|
|
left:0;
|
|
z-index: 1111;
|
|
}
|
|
.keyboard-item{
|
|
padding:10rpx 0 5rpx 0;
|
|
position: relative;
|
|
display: block;
|
|
}
|
|
/* 关闭虚拟键盘 */
|
|
.keyboardClose{
|
|
height: 70rpx;
|
|
background-color: #f7f7f7;
|
|
overflow: hidden;
|
|
}
|
|
.keyboardClose_btn{
|
|
float: right;
|
|
line-height: 70rpx;
|
|
font-size: 15px;
|
|
padding-right: 30rpx;
|
|
}
|
|
/* 虚拟键盘-省缩写 */
|
|
|
|
/* 虚拟键盘-行 */
|
|
.keyboard-line{
|
|
margin:0 auto;
|
|
text-align: center;
|
|
}
|
|
.iscarnumber .keyboard-line{
|
|
text-align: left;
|
|
margin-left: 5rpx;
|
|
}
|
|
/* 虚拟键盘-单个按钮 */
|
|
.keyboard-btn{
|
|
font-size: 17px;
|
|
color: #333333;
|
|
background: #fff;
|
|
display: inline-block;
|
|
padding:18rpx 0;
|
|
width: 63rpx;
|
|
text-align: center;
|
|
box-shadow: 0 2rpx 0 0 #999999;
|
|
border-radius: 10rpx;
|
|
margin:5rpx 6rpx;
|
|
}
|
|
/* 虚拟键盘-删除按钮 */
|
|
.keyboard-del{
|
|
font-size: 17px;
|
|
color: #333333;
|
|
background: #A7B0BC;
|
|
display: inline-block;
|
|
padding:4rpx 55rpx;
|
|
box-shadow: 0 2rpx 0 0 #999999;
|
|
border-radius: 10rpx;
|
|
margin:5rpx;
|
|
position: absolute;
|
|
bottom:5rpx;
|
|
right: 6rpx;
|
|
}
|
|
.keyboard-del-font{
|
|
font-size:25px;
|
|
}
|
|
|
|
/* 车牌号码 */
|
|
.carNumber-items{
|
|
text-align: center;
|
|
}
|
|
.carNumber-items-box{
|
|
width: 158rpx;
|
|
height: 90rpx;
|
|
border: 2rpx solid #CCCCCC;
|
|
border-radius: 4rpx;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
position: relative;
|
|
margin-right: 30rpx;
|
|
}
|
|
.carNumber-items-box-list{
|
|
width: 76rpx;
|
|
height: 70rpx;
|
|
line-height: 70rpx;
|
|
text-align: center;
|
|
display: inline-block;
|
|
font-size: 18px;
|
|
margin:10rpx 0;
|
|
vertical-align: middle;
|
|
}
|
|
.carNumber-items-province{
|
|
border-right: 1rpx solid #ccc;
|
|
}
|
|
/* .carNumber-items-box::after{
|
|
content: "";
|
|
width: 6rpx;
|
|
height: 6rpx;
|
|
position: absolute;
|
|
right: -22rpx;
|
|
top: 40rpx;
|
|
border-radius: 50%;
|
|
background-color: #ccc;
|
|
} */
|
|
.carNumber-item{
|
|
/* width: 76rpx;
|
|
height: 90rpx;
|
|
font-size: 18px;
|
|
text-align: center;
|
|
border: 2rpx solid #CCCCCC;
|
|
border-radius: 4rpx;
|
|
line-height: 90rpx;
|
|
display: inline-block;
|
|
margin:0 4rpx;
|
|
vertical-align: middle; */
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
line-height: 70rpx;
|
|
background: #f7f7f7;
|
|
border-radius: 16rpx;
|
|
}
|
|
/* 新能源 */
|
|
.carNumber-item-newpower{
|
|
border: 2rpx dashed #A8BFF3;
|
|
background-color: #F6F9FF;
|
|
color: #A8BFF3;
|
|
font-size: 12px;
|
|
line-height: 45rpx;
|
|
}
|
|
.carNumber-newpower-add{
|
|
font-size: 18px;
|
|
}
|
|
|
|
/* 确认按钮 */
|
|
.carNumberBtn{
|
|
border-radius: 4rpx;
|
|
margin:80rpx 40rpx;
|
|
background-color: #333333;
|
|
}
|
|
.circle{
|
|
width: 10px;
|
|
height: 10px;
|
|
background: #666666;
|
|
border-radius: 50%;
|
|
}
|
|
.circlebox{
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
}
|
|
.border-main{
|
|
border-color: #FFDD1A;
|
|
}
|
|
|
|
</style>
|