小程序自定义键盘组件之车牌号录入

小程序自定义键盘组件之车牌号录入

效果图：

html:

<view bindtap="showAddCarNumFun">点击新增车牌号</view>

<view class="addCarNumBg" wx:if="{{showAddCarNum}}" catchtap="closeAddCarNum"></view>
<view class="addCarNumContent" wx:if="{{showAddCarNum}}">
  <view class="carNumSelectBox">
    <view class="carNumSelectTip">请输入完整车牌</view>
    <view class="flexAround">
      <view class="carNumSelectItem {{itemActiveIndex==index?'itemActiveClass':''}}" data-index="{{index}}" wx:for="{{carNumArr}}" bindtap="itemActive">
        <view>{{item}}</view>
      </view>
    </view>
  </view>

  <view class="customKeyboard">
    <view class="customKeyboardClose flexBetween">
      <view class="{{cansave?'cansaveClass':''}}" bindtap="{{cansave?'saveCarNum':''}}">保存</view>
      <view class="closeAddCarNum" catchtap="closeAddCarNum">关闭</view>
    </view>
    <view class="keyboardBox flex" style="flex-wrap: wrap;">
      <view class="keyboardItem {{item.name==''?'nameNone':''}} {{item.disabled?'disabledActive':''}}" wx:for="{{itemActiveIndex==0?keyboard1:itemActiveIndex==1?keyboard2:itemActiveIndex==6?keyboard4:keyboard3}}" bindtap="{{item.disabled?'':'choosedText'}}" data-text="{{item.name}}">
        {{item.name}}
      </view>
      <view class="keyboardItem" bindtap="delCarNumSelect">
        删
      </view>
    </view>
  </view>
</view>

css:

.addCarNumBg{position: fixed;top: 0;left: 0;z-index: 400;width: 100%;height: 100vh;background: rgba(0, 0, 0, 0.6)}
.carNumSelectBox{position: fixed;bottom: 500rpx;left: 0;width: calc(100% - 60rpx);margin: 30rpx;z-index: 500}
.carNumSelectItem{width: 12%;height: 92rpx;line-height: 92rpx;text-align: center;background: white;margin-bottom: 10rpx;font-size: 34rpx;font-weight: bold;border: 1px solid #e5e5e5;border-radius: 4rpx}
.carNumSelectTip{font-size: 44rpx;font-weight: bold;text-align: center;margin-bottom: 50rpx;color: #f7f7f7}

.customKeyboard{position: fixed;bottom: 0;left: 0;z-index: 500}
.customKeyboardClose{position: absolute;top: -92rpx;left: 0;height: 92rpx;line-height: 92rpx;background: white;width: calc(100% - 40rpx);border-top: 1px solid #e5e5e5;padding: 0 20rpx;font-size: 34rpx;color: #666;}

.keyboardBox{background: #e5e5e5;padding: 20rpx 10rpx;padding-bottom: 0}
.keyboardItem{width: 9.0%;margin: 0.5%;height: 72rpx;line-height: 72rpx;text-align: center;background: white;margin-bottom: 20rpx;font-size: 30rpx;border-radius: 6rpx;box-shadow: 0 1px 2px #999;}
.disabledActive{background: #f7f7f7;color:#ccc}
.itemActiveClass{transform: scale(1.1);border: 1px solid #008cd7}

.cansaveClass{color: #008cd7}
.nameNone{background: none;box-shadow: none}

.flex{display: flex;align-items: center}
.flexBetween{display: flex;justify-content: space-between;align-items: center}
.flexAround{display: flex;justify-content: space-around;align-items: center}

js:

Component({
  properties: {
    props: { // 属性名
      type: Array,
      value: ''
    }
  },

  observers: {

  },

  data: {
    itemActiveIndex: 0,
    showAddCarNum: false,
    keyboard1: [
      { name: '京', disabled: false }, { name: '津', disabled: false },
      { name: '晋', disabled: false }, { name: '冀', disabled: false },
      { name: '蒙', disabled: false }, { name: '辽', disabled: false },
      { name: '吉', disabled: false }, { name: '黑', disabled: false },
      { name: '沪', disabled: false }, { name: '苏', disabled: false },
      { name: '浙', disabled: false }, { name: '皖', disabled: false },
      { name: '闽', disabled: false }, { name: '赣', disabled: false },
      { name: '鲁', disabled: false }, { name: '豫', disabled: false },
      { name: '鄂', disabled: false }, { name: '湘', disabled: false },
      { name: '粤', disabled: false }, { name: '桂', disabled: false },
      { name: '琼', disabled: false }, { name: '渝', disabled: false },
      { name: '川', disabled: false }, { name: '贵', disabled: false },
      { name: '云', disabled: false }, { name: '藏', disabled: false },
      { name: '陕', disabled: false }, { name: '甘', disabled: false },
      { name: '青', disabled: false }, { name: '宁', disabled: false },
      { name: '新', disabled: false }, { name: 'W', disabled: false },
      { name: '', disabled: true }, { name: '', disabled: true },
      { name: '', disabled: true }, { name: '', disabled: true },
      { name: '', disabled: true }, { name: '', disabled: true },
      { name: '', disabled: true }
    ],

    keyboard2: [
      { name: '1', disabled: true }, { name: '2', disabled: true },
      { name: '3', disabled: true }, { name: '4', disabled: true },
      { name: '5', disabled: true }, { name: '6', disabled: true },
      { name: '7', disabled: true }, { name: '8', disabled: true },
      { name: '9', disabled: true }, { name: '0', disabled: true },
      { name: 'Q', disabled: false }, { name: 'W', disabled: false },
      { name: 'E', disabled: false }, { name: 'R', disabled: false },
      { name: 'T', disabled: false }, { name: 'Y', disabled: false },
      { name: 'U', disabled: false }, { name: 'O', disabled: false },
      { name: 'P', disabled: false }, { name: '军', disabled: true },
      { name: 'A', disabled: false }, { name: 'S', disabled: false },
      { name: 'D', disabled: false }, { name: 'F', disabled: false },
      { name: 'J', disabled: false }, { name: 'K', disabled: false },
      { name: 'G', disabled: false }, { name: 'H', disabled: false },
      { name: 'L', disabled: false }, { name: '警', disabled: true },
      { name: 'Z', disabled: false }, { name: 'X', disabled: false },
      { name: 'C', disabled: false }, { name: 'V', disabled: false },
      { name: 'B', disabled: false }, { name: 'N', disabled: false },
      { name: 'M', disabled: false }, { name: '港', disabled: true },
      { name: '澳', disabled: true }
    ],

    keyboard3: [
      { name: '1', disabled: false }, { name: '2', disabled: false },
      { name: '3', disabled: false }, { name: '4', disabled: false },
      { name: '5', disabled: false }, { name: '6', disabled: false },
      { name: '7', disabled: false }, { name: '8', disabled: false },
      { name: '9', disabled: false }, { name: '0', disabled: false },
      { name: 'Q', disabled: false }, { name: 'W', disabled: false },
      { name: 'E', disabled: false }, { name: 'R', disabled: false },
      { name: 'T', disabled: false }, { name: 'Y', disabled: false },
      { name: 'U', disabled: false }, { name: 'O', disabled: true },
      { name: 'P', disabled: false }, { name: '军', disabled: true },
      { name: 'A', disabled: false }, { name: 'S', disabled: false },
      { name: 'D', disabled: false }, { name: 'F', disabled: false },
      { name: 'J', disabled: false }, { name: 'K', disabled: false },
      { name: 'G', disabled: false }, { name: 'H', disabled: false },
      { name: 'L', disabled: false }, { name: '警', disabled: true },
      { name: 'Z', disabled: false }, { name: 'X', disabled: false },
      { name: 'C', disabled: false }, { name: 'V', disabled: false },
      { name: 'B', disabled: false }, { name: 'N', disabled: false },
      { name: 'M', disabled: false }, { name: '港', disabled: true },
      { name: '澳', disabled: true }
    ],

    keyboard4: [
      { name: '1', disabled: false }, { name: '2', disabled: false },
      { name: '3', disabled: false }, { name: '4', disabled: false },
      { name: '5', disabled: false }, { name: '6', disabled: false },
      { name: '7', disabled: false }, { name: '8', disabled: false },
      { name: '9', disabled: false }, { name: '0', disabled: false },
      { name: 'Q', disabled: false }, { name: 'W', disabled: false },
      { name: 'E', disabled: false }, { name: 'R', disabled: false },
      { name: 'T', disabled: false }, { name: 'Y', disabled: false },
      { name: 'U', disabled: false }, { name: 'O', disabled: false },
      { name: 'P', disabled: false }, { name: '军', disabled: false },
      { name: 'A', disabled: false }, { name: 'S', disabled: false },
      { name: 'D', disabled: false }, { name: 'F', disabled: false },
      { name: 'J', disabled: false }, { name: 'K', disabled: false },
      { name: 'G', disabled: false }, { name: 'H', disabled: false },
      { name: 'L', disabled: false }, { name: '警', disabled: false },
      { name: 'Z', disabled: false }, { name: 'X', disabled: false },
      { name: 'C', disabled: false }, { name: 'V', disabled: false },
      { name: 'B', disabled: false }, { name: 'N', disabled: false },
      { name: 'M', disabled: false }, { name: '港', disabled: false },
      { name: '澳', disabled: false }
    ],

    carNumArr: ['', '', '', '', '', '', ''],
    cansave: false
  },

  ready() {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    //选择车牌
    choosedText: function (e) {
      let text = e.currentTarget.dataset.text;
      let itemActiveIndex = this.data.itemActiveIndex;
      this.setData({
        [`carNumArr[${itemActiveIndex}]`]: text
      })
      if (itemActiveIndex < 6) {
        itemActiveIndex += 1
        this.setData({
          itemActiveIndex
        })
      }
      let cansave = this.data.carNumArr.every(val => {
        return val != ''
      })
      if (cansave) {
        this.setData({
          cansave: true
        })
      }
      console.log(cansave)
    },

    //删除当前框的值
    delCarNumSelect: function () {
      let itemActiveIndex = this.data.itemActiveIndex;
      this.setData({
        [`carNumArr[${itemActiveIndex}]`]: ''
      })
      if (itemActiveIndex > 0) {
        itemActiveIndex -= 1
        this.setData({
          itemActiveIndex, cansave: false
        })
      }
    },

    saveCarNum: function () {
      let carNumArr = this.data.carNumArr;
      carNumArr = carNumArr.join('');
      console.log(carNumArr)
    },

    //选择输入框
    itemActive: function (e) {
      let index = e.currentTarget.dataset.index;
      this.setData({ itemActiveIndex: index })
    },

    //点击显示新增车牌
    showAddCarNumFun: function () {
      this.setData({ showAddCarNum: true })
    },

    //点击取消新增车牌
    closeAddCarNum: function () {
      this.setData({
        showAddCarNum: false,
        carNumArr: ['', '', '', '', '', '', ''],
        itemActiveIndex: 0
      })
    }
  }
})