微信小程序新能源车牌号

<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,// chepaicarNo: '',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.itemthis.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.itemthis.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(’’)

微信小程序新能源车牌号相关推荐

微信小程序输入车牌号（有新能源）
微信小程序输入车牌号(有新能源) <view class="page"><view class="carN ...
微信小程序模拟车牌号键盘
微信小程序模拟车牌号键盘效果图中文键盘英文数字键盘项目地址:https://github.com/ushars/keyboard
微信小程序实现车牌号录入
实现效果如下图所示: 废话不多说,直接上代码,如果有需要直接复制代码到项目里面,注册组件即可. <view class="modal-box"><view cla ...
微信小程序自定义车牌号输入键盘-附源码
键盘已做过处理第一位只能是省份简称,第二位只能输入字母,第三位以后可以输入数字加字母的组合,输入完成后有正则方法校验车牌号的合法性.高效率车牌号输入键盘,大大提升用户体验,增强用户输入车牌号的真实性 ...
微信小程序使用车牌号输入法
在做小程序时,做了一个关于车的项目,然后需要添加车辆信息.添加车牌号,使用车牌键盘输入,当时我把这个需求给砍了,然后在添加车辆信息时,老大看到数据库里我乱填的车牌号,又让我把他加上了^o^ 1.效果图 ...
小程序模拟输入车牌号键盘
wxml <view class=''>车牌号</view><view class='to-flex-center-between' bindtap='licensePl ...
微信小程序车牌号码输入（虚拟键盘）
近日在网上看到一位博主写的微信小程序输入车牌号(有新能源),原文链接:https://blog.csdn.net/qq706352062/article/details/105554453?ops_ ...
【计算机毕业设计】微信小程序题目大全总有一款适合你
最新计算机毕业设计参考选题都有源码+数据库+文档微信小程序大全是近期作品你的选题刚好在下面有,毕设帮助.技术解答.源码获取(有偿)联系方式见文末题目汇总基于微信小程序旅游管理系统基于微信小 ...
基于微信小程序的打车系统#毕业设计
项目介绍目的:本课题主要目标是设计并能够实现一个基于微信小程序租车系统,前台用户使用小程序,小程序使用微信开发者工具开发后台管理使用基PP+MySql的C/S(客户端/服务器端)架构,开发工具使用p ...

微信小程序新能源车牌号

微信小程序新能源车牌号相关推荐

最新文章

热门文章

微信小程序新能源 车牌号

微信小程序新能源 车牌号相关推荐

最新文章

热门文章

微信小程序新能源车牌号

微信小程序新能源车牌号相关推荐