微信小程序新能源 车牌号

<view class='che'>
  <view bindtap='go'>请输入要办理ETC车辆的的车牌号</view>

  <view class='fle'>
    <block wx:for="{{cars}}">
      <view class='itemsss {{count==index?"active":""}} {{item=="新能源"?"xin":""}}'>{{item}}</view>
      <view wx:if="{{index==1}}" class='dian'>.</view>
    </block>
  </view>

  <view class='car'>
    <!-- <view bindtap='showCity' class='carNo {{carNo==""?"":"hei"}}'>{{carNo||'请输入车牌号码'}}</view> -->
    <view hidden="{{isCarNo}}" class='city'>
      <view class='item {{index>23?"w":""}}' wx:for="{{cityArr}}" bindtap='chooseCity' data-item="{{item}}">
        {{item}}
      </view>
    </view>
    <view hidden='{{isZimu}}' class='zimu'>
      <block wx:for="{{zimu}}">
        <view class='item {{count==0&&index<10?"jinzhi":""}}' data-index="{{index}}" bindtap='chooseZimu' data-item="{{item}}">
          <text data-index="{{index}}" data-item="{{item}}"> {{item}}</text>
        </view>
        <view class='del' bindtap='clear' wx:if="{{index==27}}">
          <image src='http://etc-app.oss-cn-beijing.aliyuncs.com/image_201907221155210160.png' mode='widthFix'></image>
        </view>
      </block>
      <view class='close' bindtap='close'>
        <text>确认办理</text>
      </view>
    </view>
  </view>

</view>

/* pages/che/che.wxss */

view {
  box-sizing: border-box;
}

.fle {
  display: flex;
  margin-bottom: 20rpx;
}

.itemsss {
  width: 60rpx;
  height: 70rpx;
  border: 1rpx solid #ccc;
  margin-left: 10rpx;
  text-align: center;
  line-height: 70rpx;
}

.active {
  border: 1rpx solid #15bf5d;
}

.dian {
  margin: 0 15rpx;
  height: 70rpx;
  line-height: 50rpx;
}
.xin {
  font-size: 18rpx;
  color: #15bf5d;
  border: 1rpx dashed #ccc;
}

/*  */

.car {
  width: 750rpx;
  padding: 22rpx 13rpx;
  box-sizing: border-box;
  background: #ebebeb;
}
.item {
  background: white;
 	box-shadow: 0px 5rpx 10rpx 0px 
		#d1d1d1;
  border: 1rpx solid #d0d0d0;
  /* margin: 10rpx; */
  border-radius: 9rpx;
  font-size: 24rpx;
  box-sizing: border-box;
    display: flex;
  align-items: center;
  justify-content: center;
}

.city,.zimu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.city .item {
  width: 79rpx;
  height: 104rpx;
  margin: 6rpx;
  line-height: 99rpx;
}
.w {
  width: 90rpx !important;
}
.zimu .item {
  width: 62rpx;
  height: 104rpx;
  margin: 5.5rpx;

}

.close {
  margin: 5.5rpx;
  width: 278rpx;
  height: 104rpx;
  font-size: 24rpx;
  line-height: 70rpx;
  background: #15bf5d;
	box-shadow: 0px 5rpx 10rpx 0px 
		#d1d1d1;
 border: 1rpx solid #d0d0d0;
   border-radius: 9rpx;
  box-sizing: border-box;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.del {
  width: 135rpx;
  height: 104rpx;
  background-color: white;
  margin: 5.5rpx;
   border: 1rpx solid #d0d0d0;
   	box-shadow: 0px 5rpx 10rpx 0px 
		#d1d1d1;
      border-radius: 9rpx;
      /* text-align: center; */
      display: flex;
      justify-content: center;
      align-items: center;
}
.del image {
  width: 70rpx;
  height: 46rpx !important;
}
.jinzhi {
  background-color: #e5e5e5;
}

// pages/che/che.js
var carNo_reg = /^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/
// let count = 0
Page({

  /**
   * 页面的初始数据
   */
  data: {
    cars: ['', '', '', '', '', '', '', '新能源'],
    count: 0,
    // chepai
    carNo: '',
    cityArr: [
      '京',
      '沪',
      '浙',
      '苏',
      '粤',
      '鲁',
      '晋',
      '冀',
      '豫',
      '川',
      '渝',
      '辽',
      '吉',
      '黑',
      '皖',
      '鄂',
      '津',
      '贵',
      '云',
      '桂',
      '琼',
      '青',
      '新',
      '藏',
      '蒙',
      '宁',
      '甘',
      '陕',
      '闽',
      '赣',
      '湘'
    ],
    zimu: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9",
      "Q", "W", "E", "R", "T", "Y", "U", "P",
      "A", "S", "D", "F", "G", "H", "J", "K", "L",
      "Z", "X", "C", "V", "B", "N", "M"
    ],
    isCarNo: false,
    isZimu: true,
    carsData:''
  },

  /**
   * 组件的方法列表
   */
  go() {
    console.log('s')
    wx.navigateTo({
      url: '/pages/index/index'
    })
  },
  showCity() {
    // 如果空 则显示 城市  否 则显示 字母
    if (this.data.carNo) {
      this.setData({
        isZimu: false,
        isCarNo: true
      })
    } else {
      this.setData({
        isCarNo: false,
        isZimu: true
      })
    }

  },
  chooseCity(e) {

    this.data.cars[this.data.count] = e.target.dataset.item
    this.setData({
      carNo: e.target.dataset.item,
      isCarNo: true,
      isZimu: false,
      cars: this.data.cars,
      count: this.data.count
    })
  },
     chooseZimu(e) {
      console.log(this.data.count)
      if (this.data.count == 0) {
        console.log(e.target.dataset.index)
        if (e.target.dataset.index <= 9) {
          return
        }
      }
      this.setData({
        count: this.data.count + 1
      })

      if (this.data.count > 7) return this.setData({
        count: 7
      })
      this.data.cars[this.data.count] = e.target.dataset.item
      // let newCarNo = this.data.carNo + e.target.dataset.item
      this.setData({
        // carNo: newCarNo,
        cars: this.data.cars,
        count: this.data.count
      })
    },
     close() {
      // this.setData({
      //   isCarNo: true,
      //   isZimu: true
      // })
      // 验证的

      if (this.data.cars[this.data.cars.length - 1] == '新能源') { //新能源就把最后一个删了  
        this.data.cars = this.data.cars.slice(0, 7)
        this.setData({
          carsData: this.data.cars // 赋值给新数组 保证返回得时候新能源还在   外部直接调取使用
        })
        console.log(this.data.carsData)
      } else {
        this.setData({
          carsData: this.data.cars
        })
      }
      if (carNo_reg.test(this.data.cars.join(''))) {
        console.log(this.data.cars)
        this.triggerEvent('getOk')
      } else {
        wx.showToast({
          title: '请输入正确格式的车牌号',
          icon: 'none'
        })
      }
    },
   clear() {
      console.log(this.data.count)
      if (this.data.count > 7) {
        this.setData({
          count: 7
        })
      }
      this.data.cars[this.data.count] = ''
      this.data.cars[7] = '新能源'
      // 从尾部删除一个
      this.setData({
        // carNo: this.data.carNo.substr(0, this.data.carNo.length - 1),
        cars: this.data.cars,
        count: this.data.count - 1
      })
      if (this.data.count < 0) this.setData({
        isCarNo: false,
        isZimu: true,
        count: 0
      })

    }

})

拿到车牌字符串形式：che为引入的组件名
plateNum: che.data.carsData.join(’’)