自定义小程序车牌输入软键盘

wxml

<view class="container">
  <view style="width: 100%;height: 100%;position: fixed;z-index: -1;" bindtap="boardStop"></view>
  <!-- 车牌号 -->
  <view wx:if="{{carView}}" style="width: 100%;">
    <view class="moduleTitle" style="">填写车牌号</view>
    <view class="moduleTip">为了给您提供更好的服务</view>
    <view class="moduleTip">请正确填写您的车牌</view>
    <view class="carNum">
      <view wx:for="{{7}}" wx:for-index='index' data-index="{{index}}" class="{{index == activeIndex ? 'active' : ''}}" bindtap="activeNum">{{ choosedArr.length > 0 && choosedArr[index] ? choosedArr[index] : '' }}</view>
    </view>
    <view class="moduleTip" style="text-align: left;width:90%;margin-top:15rpx;">例如：京A88888</view>
    <text class="moduleTip" style="text-align: left;width:90%;color:rgba(255,56,61,1);font-size:24rpx;">*您填写的车牌号有误，请重新填写</text>
    <button class="carNumbtn" bindtap="sure">确认</button>
    <view class="keyProvienceboard" hidden="{{activeIndex != 0 || activeIndex == -1}}">
      <view wx:for="{{arrProvience}}" data-value="{{item}}" bindtap="addProvience">{{item}}</view>
      <view style="flex-grow: 1" bindtap="cancel">
        <image src="../../images/close.png" mode="widthFix" style="width: 60rpx;"></image>
      </view>
    </view>
    <view class="keyboard" hidden="{{activeIndex == 0 || activeIndex == -1}}">
      <view class="key numKey">
        <view wx:for="{{arrNumber}}" data-value="{{item}}" bindtap="addProvience" style="{{activeIndex == 1 ? 'color:#cccccc':''}}">{{item}}</view>
      </view>
      <view class="key">
        <view wx:for="{{arrCaptainOne}}" data-value="{{item}}" bindtap="addProvience">{{item}}</view>
      </view>
      <view class="key">
        <view style="width:4%;border:none;visibility: hidden;"></view>
        <view wx:for="{{arrCaptainTwo}}" data-value="{{item}}" bindtap="addProvience">{{item}}</view>
        <view style="width:4%;border:none;visibility: hidden;"></view>
      </view>
      <view class="key" style="display: flex;justify-content: center;">
        <view wx:for="{{arrCaptainThree}}" data-value="{{item}}" bindtap="addProvience">{{item}}</view>
        <view style="width:20%;border:none;background:none;position:relative;" bindtap="cancel">
          <image src="../../images/close.png" mode="widthFix" style="width: 70%;position: absolute;margin: auto;top: 0;left: 0;right: 0;bottom: 0;"></image>
        </view>
      </view>

    </view>
  </view>
  <view wx:if="{{lichengView}}" style="width: 100%;">
    <view class="moduleTitle" style="">填写行驶里程</view>
    <view class="moduleTip">门店可通过您的行驶里程</view>
    <view class="moduleTip">为您推荐最佳保养方案</view>
    <view style="height:70px;width:90%;margin:50rpx auto 0 auto;display: flex;justify-content: space-around;">
      <picker-view 
      indicator-style="height: 70px;" style="width:70px;height:70px;float:left;"
      value="{{wanUnitIndex}}"
      bindchange="wanChange">
      <picker-view-column>
        <view wx:for="{{41}}" wx:key="{{item}}" style="width:70px;line-height: 70px;text-align:center;background:linear-gradient(180deg,rgba(238,238,238,1) 0%,rgba(216,216,216,1) 100%);">{{item}}</view>
      </picker-view-column>
 </picker-view>
 <text style="float:left;line-height:70px;padding:0 20rpx;">万</text>
 <picker-view 
      indicator-style="height: 70px;" style="width:70px;height:70px;float:left;"
      value="{{qianUnitIndex}}"
      bindchange="qianChange">
      <picker-view-column>
        <view wx:for="{{10}}" wx:key="{{item}}" style="width:70px;line-height: 70px;text-align:center;background:linear-gradient(180deg,rgba(238,238,238,1) 0%,rgba(216,216,216,1) 100%);">{{item}}</view>
      </picker-view-column>
 </picker-view>
 <text style="float:left;line-height:70px;padding:0 20rpx;">千</text>
 <text style="color:rgba(45, 45, 45, 1);line-height:70px;">公里</text>
    </view>
    <text class="moduleTip" style="text-align: left;width:90%;color:rgba(255,56,61,1);font-size:24rpx;margin:0 auto;display:block;">*未选择，请选择后确定！</text>
     <view class="moduleTip" style="width:60%;margin:0 auto;margin-top:80rpx;font-size:30rpx;display:block;">如果您记不住详细的行驶里程，可以选个大概的数字哦</view>
     <view class="lichengBtn" style="">
     <button style="color:rgba(74, 144, 226, 1);">忘记了</button>
     <button style="background:rgba(74,144,226,1);color:#fff;">确定</button>
     </view>

  </view>

</view>

wcss

page {
  background: rgba(248, 248, 248, 1);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", sans-serif;
}

.userinfo, .uploader, .tunnel {
  margin-top: 40rpx;
  height: 140rpx;
  width: 100%;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-left: none;
  border-right: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  transition: all 300ms ease;
}

.userinfo-avatar {
  width: 100rpx;
  height: 100rpx;
  margin: 20rpx;
  border-radius: 50%;
  background-size: cover;
  background-color: white;
}

.userinfo-avatar:after {
  border: none;
}

.userinfo-nickname {
  font-size: 32rpx;
  color: #007aff;
  background-color: white;
  background-size: cover;
}

.userinfo-nickname::after {
  border: none;
}

.uploader, .tunnel {
  height: auto;
  padding: 0 0 0 40rpx;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
}

.uploader-text, .tunnel-text {
  width: 100%;
  line-height: 52px;
  font-size: 34rpx;
  color: #007aff;
}

.uploader-container {
  width: 100%;
  height: 400rpx;
  padding: 20rpx 20rpx 20rpx 0;
  display: flex;
  align-content: center;
  justify-content: center;
  box-sizing: border-box;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.uploader-image {
  width: 100%;
  height: 360rpx;
}

.tunnel {
  padding: 0 0 0 40rpx;
}

.tunnel-text {
  position: relative;
  color: #222;
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: space-between;
  box-sizing: border-box;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.tunnel-text:first-child {
  border-top: none;
}

.tunnel-switch {
  position: absolute;
  right: 20rpx;
  top: -2rpx;
}

.disable {
  color: #888;
}

.service {
  position: fixed;
  right: 40rpx;
  bottom: 40rpx;
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
  background: linear-gradient(#007aff, #0063ce);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  display: flex;
  align-content: center;
  justify-content: center;
  transition: all 300ms ease;
}

.service-button {
  position: absolute;
  top: 40rpx;
}

.service:active {
  box-shadow: none;
}

.request-text {
  padding: 20rpx 0;
  font-size: 24rpx;
  line-height: 36rpx;
  word-break: break-all;
}
.carNum {
  width: 90%;
  height: 100rpx;
  display: flex;
  justify-content: space-between;
  margin-top: 50rpx; 
}
.carNum view{
  width: 84rpx;
  height: 84rpx;
  /* border-radius: 5px; */
  border: 1px solid #efefef;
  text-align: center;
  line-height: 84rpx;
  background: #fff;
  font-size:50rpx;
  font-family:PingFangSC-Semibold,PingFang SC;
  font-weight:600;
  color:rgba(0,0,0,1);
}
.carNum view.active{
  border:1px solid rgba(255,56,61,1);
  /* box-shadow: 0 0 4px 0px red; */
}
.keyProvienceboard{
  position: fixed;
  display: flex;
  padding: 20rpx;
  background: rgba(241, 241, 241, 1);
  flex-flow: row wrap;
  justify-content: space-around;
  bottom: 0;
}
.keyboard{
  background: rgba(241, 241, 241, 1);
}
.keyProvienceboard view,
.keyboard view.key view{
  width:70rpx;
  height: 90rpx;
  margin: 7rpx;
  text-align: center;
  line-height: 90rpx;
  /* flex: 0 0 16%; */
  border-radius: 20rpx;
  border: 1px solid rgba(219,219,219,1);
  background:#fff;
  font-size: 30rpx;
  margin-right: 0;
}
.keyboard{
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 20rpx;
  box-sizing: border-box;
}
.keyboard view.key{
  height: 90rpx;
  margin: 10rpx 0;
}
.keyboard view.key view{
  width: calc(9% - 2px);
  margin: 0 0.5%;
  float: left;
}
.moduleTitle{
  width: 100%;
  height: 140rpx;
  font-size: 50rpx;
  font-family: PingFangSC-Semibold,PingFang SC;
  font-weight: 600;
  color: rgba(0,0,0,1);
  line-height: 140rpx;
  letter-spacing: 1px;
  text-align: center;
  margin-top: 40rpx;
}
.moduleTip{
  width:100%;
  height:42rpx;
  font-size:32rpx;
  font-family:PingFang-SC-Medium,PingFang-SC;
  font-weight:500;
  color:rgba(133,132,136,1);
  line-height:42rpx;
  letter-spacing:1px;
  text-align: center;
}
.carNumbtn{
  width: 90%;
  height:90rpx;
  background:rgba(74,144,226,1);
  border-radius:45rpx;
  font-size:30rpx;
  font-family:PingFangSC-Semibold,PingFang SC;
  font-weight:600;
  color:rgba(255,255,255,1);
  line-height:90rpx;
  letter-spacing:2px;
  margin-top:60rpx;
}
.lichengBtn{
  position:fixed;bottom:62rpx;width:100%;background:#fff;height:100rpx;display: flex;justify-content: space-around;
}
.lichengBtn button{
  width:45%;
  float: left;
  box-sizing: border-box;
  text-align: center;
  line-height: 90rpx;
background:rgba(255,255,255,1);
border-radius:45px;
border:1px solid rgba(74,144,226,1);
font-size:30rpx;

}
.picker-box{
  width:70px;
  height: 70px;
  font-size:50rpx;
font-family:PingFang-SC-Heavy,PingFang-SC;
font-weight:800;
color:rgba(45,45,45,1);
}
.carNum text{
  line-height: 140rpx;
  color:rgba(133, 132, 136, 1);
}

js

//index.js
const app = getApp()

Page({
  data: {
    avatarUrl: './user-unlogin.png',
    userInfo: {},
    logged: false,
    takeSession: false,
    requestResult: '',
    // 车牌号
    arrProvience: ['京', '津', '冀', '晋', '蒙', '辽', '吉', '黑', '沪', '苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘', '粤','桂', '琼', '渝', '川', '贵', '云', '藏', '陕', '甘', '青', '宁', '新'],
    arrNumber: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
    arrCaptainOne: ['Q', 'W', 'E', 'R', 'T', 'Y', 'U','I','O' ,'P'],
    arrCaptainTwo: ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
    arrCaptainThree: ['Z', 'X', 'C', 'V', 'B', 'N', 'M'],
    arrlicheng: [1,2,3],
    lichengOne:1,
    activeIndex: 0,
    choosedArr:new Array(7),
    carView:true,
    lichengView: false,
    isLicheng: false,
    wanUnitIndex: 0,
    qianUnitIndex: 0
  },
  // 车牌号开始
  addProvience(e){
    if (this.data.activeIndex == 1 && !isNaN(Number(e.currentTarget.dataset.value))){
      return
    }
    
    this.data.choosedArr[this.data.activeIndex] = e.currentTarget.dataset.value
    if (this.data.activeIndex < 6 ) {
      this.data.activeIndex = parseInt(this.data.activeIndex) + 1
      // if (!this.data.choosedArr[parseInt(this.data.activeIndex) + 1]){
        
      // }
    } 
    this.setData({
      choosedArr: this.data.choosedArr,
      activeIndex: this.data.activeIndex
    })
    
    console.log('选择的车牌号', this.data.choosedArr)
  },
  activeNum(e){
    console.log(e.currentTarget.dataset.index)
    this.data.activeIndex = e.currentTarget.dataset.index
    this.setData({
      activeIndex: this.data.activeIndex
    })
  },
  cancel(){
    // 线判断当前是否有选中操作的车牌号
    if(this.data.activeIndex == -1) return
    
    this.data.choosedArr[this.data.activeIndex] = ''
    if (this.data.activeIndex > 0) {
      this.data.activeIndex = parseInt(this.data.activeIndex) - 1
      // if (!this.data.choosedArr[parseInt(this.data.activeIndex) + 1]){

      // }
    }
    this.setData({
      choosedArr: this.data.choosedArr,
      activeIndex: this.data.activeIndex
    })
  },
  boardStop(){
    this.setData({
      activeIndex: -1
    })
  },
  wanChange(e){
    console.log(e)
    this.setData({
      wanUnitIndex: e.detail.value
    })
  },
  qianChange(e) {
    console.log(e)
    this.setData({
      qianUnitIndex: e.detail.value
    })
  },
  sure(){
    this.setData({
      carView: false,
      lichengView: true
    })
    let result = this.data.choosedArr.every((item) => {
      return item
    })
    if(result){
      console.log(this.data.choosedArr.join(''))
      // this.setData({
      //   carStr: this.data.choosedArr.join('')
      // })
    }
  },
  // 车牌号结束
  onLoad: function() {
   
  },

 

})

 

posted @   JackieDYH  阅读(5)  评论(0)  编辑  收藏  举报  
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示