xpz2018
5 years ago
10 changed files with 280 additions and 19 deletions
Split View
Diff Options
-
21app.js
-
2colorui/main.wxss
-
88components/vehicle-keyboard/index.js
-
6components/vehicle-keyboard/index.json
-
35components/vehicle-keyboard/index.wxml
-
113components/vehicle-keyboard/index.wxss
-
13pages/agent/edit/index.js
-
3pages/agent/edit/index.json
-
12pages/agent/edit/index.wxml
-
6project.config.json
@ -0,0 +1,88 @@ |
|||
Component({ |
|||
options: { |
|||
addGlobalClass: true, |
|||
}, |
|||
properties: { |
|||
plateNumber: { |
|||
type: Array, |
|||
value: ["", "", "", "", "", "", ""] |
|||
}, |
|||
safeBottom: { |
|||
type: Number, |
|||
value: 0 |
|||
} |
|||
}, |
|||
data: { |
|||
provinces: "京津沪冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤川青藏琼宁渝港澳台", |
|||
letters: "ABCDEFGHIJKLMNOPQRSTUVWXYZ", |
|||
numbers: "0123456789", |
|||
visible: false, |
|||
activeIndex: -1, |
|||
type: 0, |
|||
disabled: true, |
|||
mode: 0 // 键盘模式 0 关闭状态 1 显示省份输入 2 显示数字和字母输入
|
|||
}, |
|||
lifetimes: { |
|||
attached: function () { |
|||
|
|||
}, |
|||
}, |
|||
methods: { |
|||
show: function (number, type) { |
|||
if(number && number.length){ |
|||
this.data.plateNumber = number.split('') |
|||
} |
|||
this.data.type = type |
|||
this.updateNumber() |
|||
this.setData({ plateNumber: this.data.plateNumber, mode: 1, activeIndex: 0, visible: true}) |
|||
}, |
|||
hide: function () { |
|||
this.setData({visible: false, plateNumber: ["", "", "", "", "", "", ""]}) |
|||
this.triggerEvent("change", null) |
|||
}, |
|||
updateNumber: function(){ |
|||
this.data.disabled = false |
|||
for (let index = 0; index < this.data.plateNumber.length; index++) { |
|||
const element = this.data.plateNumber[index] |
|||
if(element.length == 0){ |
|||
this.data.disabled = true |
|||
break |
|||
} |
|||
} |
|||
this.setData({disabled: this.data.disabled, plateNumber: this.data.plateNumber}) |
|||
}, |
|||
inputKeyboard: function(e){ |
|||
let index = typeof e === 'number' ? e : e.currentTarget.dataset.index |
|||
if(e.currentTarget && this.data.plateNumber[index].length == 0){ |
|||
return |
|||
} |
|||
this.setData({ mode: index == 0 ? 1 : 2, activeIndex: index }) |
|||
}, |
|||
tapDelete: function(e){ |
|||
let activeIndex = this.data.activeIndex |
|||
this.data.plateNumber[activeIndex] = '' |
|||
this.updateNumber() |
|||
if (activeIndex > 0) { |
|||
this.inputKeyboard(--activeIndex) |
|||
} |
|||
}, |
|||
tapFinish: function(){ |
|||
if(this.data.disabled){ |
|||
return |
|||
} |
|||
this.setData({visible: false, activeIndex: -1 }) |
|||
this.triggerEvent("change", {plateNumber: this.data.plateNumber.join(''), type: this.data.type}) |
|||
}, |
|||
tapKeyboard: function(e){ |
|||
let val = e.currentTarget.dataset.val |
|||
let activeIndex = this.data.activeIndex |
|||
this.data.plateNumber[activeIndex] = val |
|||
this.updateNumber() |
|||
if (activeIndex < 6) { |
|||
this.inputKeyboard(++activeIndex) |
|||
} else { |
|||
this.tapFinish() |
|||
} |
|||
}, |
|||
} |
|||
}) |
|||
@ -0,0 +1,6 @@ |
|||
{ |
|||
"component": true, |
|||
"usingComponents": { |
|||
"wux-popup": "../popup/index" |
|||
} |
|||
} |
|||
@ -0,0 +1,35 @@ |
|||
<wux-popup position="bottom" visible="{{ visible }}" safeArea="bottom" bind:close="hide" zIndex="29"> |
|||
<view class="flex flex-justify license-number" style="padding:24rpx 32rpx"> |
|||
<view class="item {{activeIndex == 0 ? 'active':''}}" bindtap="inputKeyboard" data-index="0">{{plateNumber[0]}}</view> |
|||
<view class="item {{activeIndex == 1 ? 'active':''}}" bindtap="inputKeyboard" data-index="1">{{plateNumber[1]}}</view> |
|||
<view class="item item-dot"><view class="dot"></view></view> |
|||
<view class="item {{activeIndex == 2 ? 'active':''}}" bindtap="inputKeyboard" data-index="2">{{plateNumber[2]}}</view> |
|||
<view class="item {{activeIndex == 3 ? 'active':''}}" bindtap="inputKeyboard" data-index="3">{{plateNumber[3]}}</view> |
|||
<view class="item {{activeIndex == 4 ? 'active':''}}" bindtap="inputKeyboard" data-index="4">{{plateNumber[4]}}</view> |
|||
<view class="item {{activeIndex == 5 ? 'active':''}}" bindtap="inputKeyboard" data-index="5">{{plateNumber[5]}}</view> |
|||
<view class="item {{activeIndex == 6 ? 'active':''}}" bindtap="inputKeyboard" data-index="6">{{plateNumber[6]}}</view> |
|||
</view> |
|||
<view class="kb-keyboard" style="background: #d9d9d9"> |
|||
<view class="kb-keyboard-provs flex-brick" hidden="{{!(mode==1)}}"> |
|||
<view class="kb-keyboard_td" wx:for="{{provinces}}" bindtap="tapKeyboard" data-val="{{item}}" |
|||
wx:key="index"> |
|||
{{item}}</view> |
|||
</view> |
|||
<view class="kb-keyboard-nums flex-brick" hidden="{{!(mode==2)}}"> |
|||
<view class="kb-keyboard_td {{activeIndex==1 ? 'disabled':''}}" wx:for="{{numbers}}" bindtap="tapKeyboard" |
|||
data-val="{{item}}" wx:key="index">{{item}}</view> |
|||
</view> |
|||
<view class="kb-keyboard-letters flex-brick" hidden="{{!(mode==2)}}"> |
|||
<view class="kb-keyboard_td {{activeIndex > 1 && item =='Q' ? 'disabled':''}}" wx:for="{{letters}}" |
|||
bindtap="tapKeyboard" data-val="{{item}}" wx:key="index">{{item}}</view> |
|||
</view> |
|||
|
|||
<view class="kb-keyboard-action flex-brick"> |
|||
<view class="kb-keyboard_td kb-keyboard__del {{activeIndex == 0 && !plateNumber[0] ? 'disabled':''}}" bindtap="tapDelete"> |
|||
<view class="ico-del"></view> |
|||
</view> |
|||
<view class="kb-keyboard_td kb-keyboard__finished {{disabled ? 'disabled':''}}" bindtap="tapFinish">确定</view> |
|||
</view> |
|||
</view> |
|||
<view style="height:{{safeBottom}}rpx"></view> |
|||
</wux-popup> |
|||
@ -0,0 +1,113 @@ |
|||
|
|||
.license-number .item { |
|||
width: 64rpx; |
|||
height: 72rpx; |
|||
line-height: 72rpx; |
|||
text-align: center; |
|||
border: 1rpx solid #999590; |
|||
border-radius: 8rpx; |
|||
display: flex; |
|||
font-size: 28rpx; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
.license-number .item.item-new-energy { |
|||
line-height: 1em; |
|||
display: flex; |
|||
align-items: center; |
|||
border: 1rpx dashed #999590; |
|||
} |
|||
.license-number .item.item-new-energy .ico { |
|||
line-height: 1em; |
|||
font-size: 36rpx; |
|||
margin-bottom: -5rpx; |
|||
color: #777; |
|||
} |
|||
.license-number .item.item-new-energy .tit { |
|||
font-size: 12px; |
|||
transform: scale(0.7); |
|||
color: #777; |
|||
} |
|||
|
|||
.license-number .item.active { |
|||
border: 1rpx solid #008AFF; |
|||
color:#008AFF; |
|||
} |
|||
|
|||
.license-number .item.item-dot { |
|||
border: none; |
|||
width: auto; |
|||
padding: 0 6rpx; |
|||
} |
|||
.license-number .item.item-dot .dot { |
|||
width: 12rpx; |
|||
height: 12rpx; |
|||
background: #a09c96; |
|||
border-radius: 10rpx; |
|||
} |
|||
|
|||
.kb-keyboard { |
|||
padding: 6rpx; |
|||
position: relative; |
|||
} |
|||
.flex-brick { |
|||
display: flex; |
|||
flex-flow: row wrap; |
|||
} |
|||
.kb-keyboard-action { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
position: absolute; |
|||
bottom: 6rpx; |
|||
right: 6rpx; |
|||
} |
|||
.kb-keyboard_td { |
|||
color: #1e1e1e; |
|||
box-shadow: 1rpx 1rpx 1rpx #919191; |
|||
background: #fff; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
width: calc((100vw - 12rpx) / 10 - 12rpx); |
|||
font-size: 18px; |
|||
height: 48px; |
|||
margin: 6rpx; |
|||
border-radius:5px; |
|||
} |
|||
|
|||
.kb-keyboard_td.disabled { |
|||
opacity: 0.5; |
|||
pointer-events: none; |
|||
} |
|||
|
|||
.kb-keyboard_td:active { |
|||
background: #f2f2f2; |
|||
} |
|||
.kb-keyboard__del { |
|||
align-self: flex-end; |
|||
width: calc(((100vw - 12rpx) / 10 - 12rpx) * 1.8); |
|||
height: 48px; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding-right: 1rpx; |
|||
} |
|||
.kb-keyboard__del .ico-del { |
|||
width: 44rpx; |
|||
height: 30rpx; |
|||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAeCAMAAABg6AyVAAAAclBMVEUAAAAwMDAxMTEMDAwpKSkpKSkwMDAqKioxMTExMTEpKSkqKiokJCQpKSkpKSkqKioqKioqKioqKioqKiopKSkoKCgoKCgnJycqKioqKioqKioqKioqKioqKioqKiorKysrKysoKCgqKioAAAAlJSUqKipvWYGQAAAAJXRSTlMA/lcC+OyZhmk+lioH8OXd1MlOPzQZDCDcvr2ysaWjajsTEgEiwq/YugAAAM9JREFUOMud1McWgyAQBdABKxp7S+/v/38xDUPAY/DwNs7iLoQZhoycCswkiFY69RL8SaTbA/yaZnJGQD9Z7ZA1NBuAVPoNgpaW4UuFPKVluCuxHmgZHgqUnTxmHAqSEWHsTXCao7rKOmaM8U/Jn2Vs4jbAtieZkL30aFlo4CbDXrVHsLeWlgkd1z6O3teOiMsPaZj7SG5EE62swqkvm25qZRWOkNAkfLTu2P4bzge0X51rU+ztdh0kmbtlRC3D7/Cs3B+s6yqwLxnX9WVfjA8P3SLCPZZ7QgAAAABJRU5ErkJggg==); |
|||
background-size: 100% 100%; |
|||
} |
|||
.kb-keyboard__finished { |
|||
width: calc(((100vw - 12rpx) / 10 - 12rpx) * 1.8); |
|||
} |
|||
|
|||
|
|||
@keyframes breath { |
|||
from { |
|||
border-color:rgba(11, 245, 183, 0.3); |
|||
} |
|||
40% { border-color: #0bf5b7c2; } |
|||
60% { border-color: #0bf5b7c2; } |
|||
to { border-color: rgba(11, 245, 183, 0.3); } |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save