微信小程序 车牌号输入

 

 

 

<view catchtap="tapSpecBtna" style="overflow: hidden;clear: both;height: 100%;">
    <form bindsubmit="toLogin">
        <view class="top">
            <view class="toptwo">
                <view class="cartitle"><text>输入车牌号</text></view>
                <view class="paizhao" bindtap="chooseImage">
                   <text class="ptitle">拍照识别</text>
                </view>
            </view>
            <view class="con-query">
                <view class='plate-input-text' bindtap='changeplate'>
                </view>
                <view class="plate-input-body">
                    <view class="plate-input-content" catchtap="inbtn">
                        <view class="{{inputOnFocusIndex=='0'?'plate-nums-foc':'plate-nums-first'}}">
                            <text bindtap="inputClick" class="plate-num-text" data-id="0">{{inputPlates.index0}}</text>
                        </view>
                        <view class="{{inputOnFocusIndex=='1'?'plate-nums-foc':'plate-nums-first'}}">
                            <text bindtap="inputClick" class="plate-num-text" data-id="1">{{inputPlates.index1}}</text>
                        </view>
                        <!-- <view style="width:8px;height:38px;border-bottom: 1px solid #707070;"></view> -->
                        <view class="{{inputOnFocusIndex=='2'?'plate-nums-foc':'plate-nums-first'}}">
                            <text bindtap="inputClick" class="plate-num-text" data-id="2">{{inputPlates.index2}}</text>
                        </view>
                        <view class="{{inputOnFocusIndex=='3'?'plate-nums-foc':'plate-nums-first'}}">
                            <text bindtap="inputClick" class="plate-num-text" data-id="3">{{inputPlates.index3}}</text>
                        </view>
                        <view class="{{inputOnFocusIndex=='4'?'plate-nums-foc':'plate-nums-first'}}">
                            <text bindtap="inputClick" class="plate-num-text" data-id="4">{{inputPlates.index4}}</text>
                        </view>
                        <view class="{{inputOnFocusIndex=='5'?'plate-nums-foc':'plate-nums-first'}}">
                            <text bindtap="inputClick" class="plate-num-text" data-id="5">{{inputPlates.index5}}</text>
                        </view>
                        <view class="{{inputOnFocusIndex=='6'?'plate-nums-foc':'plate-nums-first'}}">
                            <text bindtap="inputClick" class="plate-num-text" data-id="6">{{inputPlates.index6}}</text>
                        </view>
                        <view class="{{inputOnFocusIndex=='7'?'plate-nums-foc':'plate-nums-first'}}" wx:if="{{isNewEnergy}}">
                            <text bindtap="inputClick" class="plate-num-text" data-id="7">{{inputPlates.index7}}</text>
                        </view>
                    </view>
                </view>
                <view class="bottomtext"><text>请输入真实有效车牌信息，以免无法正常使用</text></view>
                <button class="button" formType="submit">确定</button>
                <view class='plate-input-flag' bindtap='changeplate'>
                    <text wx:if="{{isNewEnergy}}" class="new-energy"></text>
                    <text wx:if="{{!isNewEnergy}}"></text>
                </view>
            </view>
        </view>
    </form>

    <view class="keyboard" wx:if="{{isKeyboard}}" catchtap="inbtn">
        <view class="kb_top">
            <text catchtap="tapSpecBtna" data-index="1" style="position:absolute;right:0;display:block;height:74rpx;padding:0 34rpx; color:#FFB93F;line-height:74rpx; font-size: 30rpx;">关闭</text>
        </view>
        <view style="width:100%; text-align:center;" wx:if="{{isNumberKB}}">
            <view style="width:99%;display:flex;text-align:center;margin:0 auto">
                <view catchtap="tapKeyboard" class="td td_nor" data-index="{{idx}}" data-val="{{itemName}}" hoverClass="board_bg" hoverStartTime="0" hoverStayTime="80" wx:if="{{idx<=9}}" wx:for="{{keyboard1}}" wx:for-index="idx" wx:for-item="itemName" wx:key="{{itemName}}">
                    {{itemName}}
                </view>
            </view>
            <view style="display:flex;text-align:center; width:90%;margin:0 auto">
                <view catchtap="tapKeyboard" class="td td_nor" data-index="{{idx}}" data-val="{{itemName}}" hoverClass="board_bg" hoverStartTime="0" hoverStayTime="80" wx:if="{{idx<=18&&idx>9}}" wx:for="{{keyboard1}}" wx:for-index="idx" wx:for-item="itemName" wx:key="{{itemName}}">
                    {{itemName}}
                </view>
            </view>
            <view style="display:flex;text-align:center; width:70%;margin:0 auto">
                <view catchtap="tapKeyboard" class="td td_nor" data-index="{{idx}}" data-val="{{itemName}}" hoverClass="board_bg" hoverStartTime="0" hoverStayTime="80" wx:if="{{idx<=25&&idx>18}}" wx:for="{{keyboard1}}" wx:for-index="idx" wx:for-item="itemName" wx:key="{{itemName}}">
                    {{itemName}}
                </view>
            </view>
            <view style="display:flex; width:50%;margin:0 auto;text-align:center;">
                <view catchtap="tapKeyboard" class="td td_nor" data-index="{{idx}}" data-val="{{itemName}}" hoverClass="board_bg" hoverStartTime="0" hoverStayTime="80" wx:if="{{idx>25}}" wx:for="{{keyboard1}}" wx:for-index="idx" wx:for-item="itemName" wx:key="{{itemName}}">
                    {{itemName}}
                </view>
            </view>
            <view bindtap="tapSpecBtn" class="del-first" data-index="0" hoverClass="del-hover" hoverStartTime="0" hoverStayTime="80">
                <text>删除</text>
            </view>
        </view>
        <view style="width:100%; text-align:center;" wx:if="{{!isNumberKB}}">
            <view style="width:99%;display:flex;text-align:center;margin:0 auto">
                <view class="td td_num board_bg" wx:if="{{!tapNum&&idx<=9}}" wx:for="{{keyboardNumber}}" wx:for-index="idx" wx:for-item="itemName" wx:key="{{itemName}}">
                    {{itemName}}
                </view>
            </view>
            <view style="width:99%;display:flex;text-align:center;margin:0 auto">
                <view catchtap="tapKeyboard" class="td td_num" data-index="{{idx}}" data-val="{{itemName}}" hoverClass="board_bg" hoverStartTime="0" hoverStayTime="80" wx:if="{{tapNum&&idx<=9}}" wx:for="{{keyboardNumber}}" wx:for-index="idx" wx:for-item="itemName" wx:key="{{itemName}}">
                    {{itemName}}
                </view>
            </view>
            <view style="width:99%;display:flex;text-align:center;margin:0 auto">
                <view catchtap="tapKeyboard" class="td td_num" data-index="{{idx}}" data-val="{{itemName}}" hoverClass="board_bg" hoverStartTime="0" hoverStayTime="80" wx:if="{{idx>9&&idx<=17}}" wx:for="{{keyboardNumber}}" wx:for-index="idx" wx:for-item="itemName" wx:key="{{itemName}}">
                    {{itemName}}
                </view>
                <view catchtap="tapKeyboard" class="td td_num" data-index="{{idx}}" data-val="{{itemName}}" hoverClass="board_bg" hoverStartTime="0" hoverStayTime="80" wx:if="{{tapNum&&18<=idx&&idx<=19}}" wx:for="{{keyboardNumber}}" wx:for-index="idx" wx:for-item="itemName" wx:key="{{itemName}}">
                    {{itemName}}
                </view>
                <view class="td td_num board_bg" wx:if="{{!tapNum&&18<=idx&&idx<=19}}" wx:for="{{keyboardNumber}}" wx:for-index="idx" wx:for-item="itemName" wx:key="{{itemName}}">
                    {{itemName}}
                </view>
            </view>
            <view style="width:99%;display:flex;text-align:center;margin:0 auto">
                <view catchtap="tapKeyboard" class="td td_num" data-index="{{idx}}" data-val="{{itemName}}" hoverClass="board_bg" hoverStartTime="0" hoverStayTime="80" wx:if="{{idx>19&&idx<=28}}" wx:for="{{keyboardNumber}}" wx:for-index="idx" wx:for-item="itemName" wx:key="{{itemName}}">
                    {{itemName}}
                </view>
                <view catchtap="tapKeyboard" class="td td_num" data-index="{{idx}}" data-val="{{itemName}}" hoverClass="board_bg" hoverStartTime="0" hoverStayTime="80" wx:if="{{tapNum&&29==idx}}" wx:for="{{keyboardNumber}}" wx:for-index="idx" wx:for-item="itemName" wx:key="{{itemName}}">
                    {{itemName}}
                </view>
                <view class="td td_num board_bg" wx:if="{{!tapNum&&29==idx}}" wx:for="{{keyboardNumber}}" wx:for-index="idx" wx:for-item="itemName" wx:key="{{itemName}}">
                    {{itemName}}
                </view>
            </view>
            <view style="width:69%;display:flex;text-align:left; margin-left:5rpx;">
                <view catchtap="tapKeyboard" class="td td_num" data-index="{{idx}}" data-val="{{itemName}}" hoverClass="board_bg" hoverStartTime="0" hoverStayTime="80" wx:if="{{idx>29}}" wx:for="{{keyboardNumber}}" wx:for-index="idx" wx:for-item="itemName" wx:key="{{itemName}}">
                    {{itemName}}
                </view>
            </view>
            <view bindtap="tapSpecBtn" class="del-first" data-index="0" hoverClass="del-hover" hoverStartTime="0" hoverStayTime="80">
                <text>删除</text>
            </view>
        </view>
    </view>
</view>

 

// 获取应用实例
const app = getApp()

Page({
  data: {
    isLoading: false,
    appUserId: "",
    escapeOrderList: [],
    carNumList: [],
    hasOrder: false,
    isKeyboard: false,
    isNumberKB: true,
    tapNum: false,
    disableKey: "1234567890港澳学",
    // keyboardNumber: "1234567890ABCDEFGHJKLMNPQRSTUVWXYZ港澳学",
    keyboardNumber: "1234567890QWERTYUP港澳ASDFGHJKL学ZXCVBNM",
    keyboard1: "渝川京沪粤津冀晋蒙辽吉黑苏浙皖闽赣鲁豫鄂湘桂琼贵云藏陕甘青宁新",
    inputPlates: {
      index0: "",
      index1: "",
      index2: "",
      index3: "",
      index4: "",
      index5: "",
      index6: "",
      index7: ""
    },
    inputOnFocusIndex: "",
    isNewEnergy: false,
    carNum: ""
  },
  onLoad(){

  },
  onShow() {
    wx.hideHomeButton();
  },
  //切换车牌
  changeplate: function () {
    var that = this;
    console.log("isNewEnergy", that.data.isNewEnergy);
    that.setData({
      isNewEnergy: !that.data.isNewEnergy,
    });
    this.checkCarNum();
  },
  //切换车牌
  changeplate1: function () {
    var that = this;
    that.setData({
      flag: true,
      inputPlates: {
        index0: "渝",
        index1: "",
        index2: "",
        index3: "",
        index4: "",
        index5: "",
        index6: "",
        index7: ""
      },
    })
  },
  inputClick: function (t) {
    var that = this;
    //console.log('输入框:', t);
    //console.log('输入框:', t.target.dataset.id);

    if (t.target.dataset.id == 0) {
      that.setData({
        inputOnFocusIndex: t.target.dataset.id,
        isNumberKB: true,
        isKeyboard: true,
        tapNum: false,
      })
    };
    if (t.target.dataset.id == 1) {
      that.setData({
        inputOnFocusIndex: t.target.dataset.id,
        isNumberKB: false,
        isKeyboard: true,
        tapNum: false,
      })
    }
    if (t.target.dataset.id > 1) {
      that.setData({
        inputOnFocusIndex: t.target.dataset.id,
        isNumberKB: false,
        isKeyboard: true,
        tapNum: true,
      })
    }
  },
  //键盘点击事件
  tapKeyboard: function (t) {
    t.target.dataset.index;
    var a = t.target.dataset.val;
    //console.log("data",this.data);
    //console.log('键盘:',a);
    //console.log("index",t.target.dataset.index);
    //console.log("focus",this.data.inputOnFocusIndex);
    switch (parseInt(this.data.inputOnFocusIndex)) {
      case 0:
        this.setData({
          "inputPlates.index0": a,
          inputOnFocusIndex: "1"
        });
        break;
      case 1:
        this.setData({
          "inputPlates.index1": a,
          inputOnFocusIndex: "2"
        });
        break;
      case 2:
        this.setData({
          "inputPlates.index2": a,
          inputOnFocusIndex: "3"
        });
        break;
      case 3:
        this.setData({
          "inputPlates.index3": a,
          inputOnFocusIndex: "4"
        });
        break;
      case 4:
        this.setData({
          "inputPlates.index4": a,
          inputOnFocusIndex: "5"
        });
        break;
      case 5:
        this.setData({
          "inputPlates.index5": a,
          inputOnFocusIndex: "6"
        });
        break;
      case 6:
        this.setData({
          "inputPlates.index6": a,
          inputOnFocusIndex: "7"
        });
        break;
      case 7:
        this.setData({
          "inputPlates.index7": a,
          inputOnFocusIndex: "7"
        });
    }
    var n = this.data.inputPlates.index0 + this.data.inputPlates.index1 + this.data.inputPlates.index2 + this.data.inputPlates.index3 + this.data.inputPlates.index4 + this.data.inputPlates.index5 +
      this.data.inputPlates.index6
    // + this.data.inputPlates.index7
    //console.log('车牌号:', n);
    this.data.carNum = n;
    this.checkedSubmitButtonEnabled();
    this.checkCarNum();

  },
  //
  tapSpecBtna: function (t){
    var that = this;
    that.setData({
      isKeyboard: false,
      inputOnFocusIndex:"8"
    })
  },
  //键盘关闭按钮点击事件
  tapSpecBtn: function (t) {

    var a = this,
      e = t.target.dataset.index;
    console.log(t);
    console.log(t.target.dataset.index);
    //0 == e
    if (true) {
      switch (parseInt(this.data.inputOnFocusIndex)) {
        case 0:
          this.setData({
            "inputPlates.index0": "",
            inputOnFocusIndex: "0"
          });
          break;
        case 1:
          this.setData({
            "inputPlates.index1": "",
            inputOnFocusIndex: "0"
          });
          break;
        case 2:
          this.setData({
            "inputPlates.index2": "",
            inputOnFocusIndex: "1"
          });
          break;
        case 3:
          this.setData({
            "inputPlates.index3": "",
            inputOnFocusIndex: "2"
          });
          break;
        case 4:
          this.setData({
            "inputPlates.index4": "",
            inputOnFocusIndex: "3"
          });
          break;
        case 5:
          this.setData({
            "inputPlates.index5": "",
            inputOnFocusIndex: "4"
          });
          break;
        case 6:
          this.setData({
            "inputPlates.index6": "",
            inputOnFocusIndex: "5"
          });
          break;
        case 7:
          this.setData({
            "inputPlates.index7": "",
            inputOnFocusIndex: "6"
          });
      }
      this.checkedSubmitButtonEnabled();
    } else 1 == e && a.setData({
      isKeyboard: !1,
      isNumberKB: !1,
      inputOnFocusIndex: ""
    });
    var n = this.data.inputPlates.index0 + this.data.inputPlates.index1 + this.data.inputPlates.index2 + this.data.inputPlates.index3 + this.data.inputPlates.index4 + this.data.inputPlates.index5 +
      this.data.inputPlates.index6
    //+ this.data.inputPlates.index7
    //console.log('车牌号:', n);
    this.data.carNum = n;
    this.checkCarNum();
  },
  //键盘切换
  checkedKeyboard: function () {
    var t = this;
    //console.log("键盘切换", this.data.inputOnFocusIndex);
    if (this.data.inputOnFocusIndex == 0) {
      t.setData({
        tapNum: false,
        isNumberKB: true
      })
    }
    if (this.data.inputOnFocusIndex == 1) {
      t.setData({
        tapNum: false,
        isNumberKB: false
      })
    }
    if (this.data.inputOnFocusIndex > 1) {
      t.setData({
        tapNum: true,
        isNumberKB: false
      })
    }
  },
  checkedSubmitButtonEnabled: function () {
    this.checkedKeyboard();
    var t = !0;
    for (var a in this.data.inputPlates)
      if ("index7" != a && this.data.inputPlates[a].length < 1) {
        t = !1;
        break;
      }
  },
  //校验车牌号-车牌输入限制了正确格式只判断车牌位数
  checkCarNum: function () {
    if (this.data.isNewEnergy && this.data.carNum.length < 8) {
      let res = {
        carNum: this.data.carNum,
        isPlate: false
      }
      this.triggerEvent("setCarNum", res);
      return false
    }
    if (!this.data.isNewEnergy) {
      if (this.data.carNum.length < 7) {
        let res = {
          carNum: this.data.carNum,
          isPlate: false
        }
        this.triggerEvent("setCarNum", res);
        return false
      } else {
        var carNum = this.data.carNum.substr(0, 7);
        let res = {
          carNum: carNum,
          isPlate: true
        }
        this.triggerEvent("setCarNum", res);
        return true;
      }
    }
    let res = {
      carNum: this.data.carNum,
      isPlate: true
    }
    this.triggerEvent("setCarNum", res);
    return true;
  },
  chooseImage() {
    const that = this;
    wx.chooseMedia({
      sourceType: ['album', 'camera'], //图片和视频选择的来源
      count: 1,
      mediaType: ['image'],
      success(res) {
        that.setData({
          imageList: res.tempFiles,
          imgList: [],
          ishavefile: true
        })
        console.log(res.tempFiles);
      },
      fail: function (err) { //请求失败
        if (err.errMsg == "chooseMedia:fail cancel") {
          wx.showToast({
            title: "取消上传",
            icon: "none",
            duration: 1000
          });
        } else {
          wx.showToast({
            title: "图片上传失败",
            icon: "none",
            duration: 1000
          });
        }
      }
    })
  },
  toLogin(e) {
    let that = this;
    console.log("车牌号" + that.data.carNum);
  },
  //用户点击右上角分享(好友)
  onShareAppMessage() {
    return {
      title: '首页',
      path: '/pages/login/login',
    };
  },
})

page {
  background: #eeeeee;
  width: 100%;
  height: 100%;
}
.top{
  width: 90%;
  height: 430rpx;
  margin: 50rpx auto;
  background-color: #fff;
  border-radius: 15rpx;
}
.imagesize{
  margin-left: 15rpx;
  justify-content: center;
  align-items:center;
  vertical-align: middle;
  margin-top: -7rpx;
}
.toptwo{
  width: 100%;
  display: flex;
}
.paizhao{
  height: 40rpx;
  line-height: 40rpx;
  margin-top: 30rpx;
  background-color: #E5F4FF;
  border-radius: 10rpx;
  padding-right: 13rpx;
}
.ptitle{
  display: inline-block;
  text-align: center;
  height: 40rpx;
  color: #0097FF;
  margin-left: 5rpx;
}
.cartitle{
  width: 61%;
  height: 100rpx;
  line-height: 100rpx;
  font-size: 20px;
  font-weight: 600;
  margin-left: 7%;
  color: #333333;
  background-color: #fff;
}
.bottomtext{
  height: 100rpx;
  line-height: 100rpx;
  margin-left: 7%;
  color: #666666;
  font-size: 14px;
}
.button{
  width: 90% !important;
  height: 80rpx;
  line-height: 50rpx;
  background-color: #0097FF;
  color: #FFFFFF;
  text-align: center;
  border-bottom: 10px;
}
.con-query {
  /* height: 4.8rem; */
  width:100%;
  border-radius: 8px;
  background-color: #FFF;
}

.pages_header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pages_header_top {
  width: 33.3%;
  height: 60rpx;
  border-left: 5px solid green;
  border-right: 5px solid green;
}

.pages_header_btm {
  width: 70%;
  background: green;
  height: 120rpx;
  line-height: 120rpx;
  text-align: center;
  color: white;
  border-radius: 10rpx;
  font-weight: normal;
  font-size: 16pt;
}

.tips {
  text-align: center;
  margin: 60rpx 0;
  font-size: 12pt;
  color: #888888;
  
}
.plate-input-text{
  text-align: center;
  line-height: 90rpx;
  color: #f39900;
}
.plate-input-flag {
  float: right;
  margin-right: 8%;
  font-size: 14PX;
}
.plate-input-flag .new-energy{
  color: #14c414;
}
.plate-input-body {
  /*border: 1px solid red;*/
  height: 80rpx;
  width: 88%;
  margin: 0 6% 2px 6%;
}
.plate-input-content {
  display: flex;
  flex-direction: row;
  height: 80rpx;
}

.plate-nums-foc {
  flex: 1;
  border: 2rpx solid #FFB93F;
  margin: 0 5rpx 0 5rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  box-sizing: border-box;
  border-radius: 14rpx;
}

.plate-nums-first{
  flex: 1;
 border: 1rpx solid #CCCCCC;
 margin: 0 5rpx 0 5rpx;
 display: flex;
 align-items: center;
 justify-content: center;
 text-align: center;
 height: 100%;
 box-sizing: border-box;
 border-radius: 14rpx;
}

.plate-num-text {
 flex: 1;
 line-height: 80rpx;
 height: 100%;
 box-sizing: border-box;
 font-size: 40rpx;
 font-weight: 300;
}

.new-plate-input-content{
display: flex;
flex-direction: row;
height: 100rpx;
}

.kb_top {
 align-content: relative;
 width: 100%;
 height: 74rpx;
 background: #fff;
 border-top: solid #ebebeb 2rpx;
 border-bottom: 15rpx solid #F4F4F4;
}

.keyboard {
 z-index: 9999;
 position: fixed;
 bottom: 0;
 left: 0;
 width: 100%;
 height: auto;
 background: #F4F4F4;
 display: flex;
 flex-wrap: wrap;
 border-bottom: 15rpx solid #F4F4F4;
}

.td {
 font-family: "微软雅黑";
 flex-grow: 1;
 text-align: center;
 font-size: 34rpx;
 height: 86rpx;
 line-height: 80rpx;
 background: #fff;
 margin: 10rpx 5rpx;
 color: #333;
 border-radius: 2rpx;
 box-shadow: 0rpx 2rpx 0rpx #a9a9a9;
}



.td_nor {
 flex: 1 1 6%;
}

.td_num {
 flex: 1 1 8%;
}

.td_spec {
 flex: 1 1 12%;
}

.board_bg {
 box-shadow: 0 0 0 #e5e5e5;
 background: #e5e5e5;
}
.del-first {
 position: absolute;
 bottom: 10rpx;
 right: 10rpx;
 width: 100rpx;
 height: 86rpx;
 background-color: #fff;
 box-shadow: 0rpx 2rpx 0rpx #a9a9a9;
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: 10rpx;
}

.del-hover {
 position: absolute;
 bottom: 10rpx;
 right: 10rpx;
 width: 137rpx;
 height: 86rpx;
 background-color: #e5e5e5;
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: 10rpx;
 box-shadow: 0 0 0 #e5e5e5;
}
.del-img {
 display: block;
 width: 46rpx;
 height: 38rpx;
}
.color-white{
  color: #FFFFFF;
}

.color-red{
  color: #ff0000;
}
.bule{
  color: #0000ff;
}