实现支付输入密码页面🤸🏻‍♀️🤸🏻‍♀️🤸🏻‍♀️

van-popup 是Vant的# Popup 弹出层组件。 Vant*是轻量、可靠的移动端 Vue 组件库，是有赞前端团队开发的产品。

在app.json或index.json中引入对应的组件就可以使用了

"usingComponents": {
  "van-popup": "@vant/weapp/popup/index"
}

js-data

data:{
    showKeyboard: true,
    numList: [1,2,3,4,5,6,7,8,9],
    passwordList: ['','','','','',''],
    passwordIndex: 0
}

wxml

密码框 和 付款键盘 同时出现，都由 showKeyboard 控制显示。 使用custom-style可更改样式

<!-- 付款键盘对应密码框 -->
<van-popup show="{{showKeyboard}}"  custom-style="margin-top: -100px;" bind:close="onCloseKeyboard" round closeable>
  <view class="paymentCode_box">
    <view class="one">请输入支付密码</view>
    <view class="two">付款定金 2元</view>
  </view>
  <view class="num_list_box" wx:for="{{passwordList}}" wx:key="*this">
    <view class="num_box" style="{{index==0?'border-left: 1px solid #ada9a9;':''}}" >
      <view wx:if="{{item}}">*</view>
    </view>
  </view>
</van-popup>

<!-- 付款键盘 -->
<van-popup
  show="{{ showKeyboard }}"
  position="bottom"
  overlay="{{false}}"
  custom-style="height: 188px"
  bind:close="onCloseKeyboard"
>
  <view class="numeric_keypad_wrap">
    <view class="numeric_keypad">
      <div class="kc">
        <view wx:for="{{numList}}" wx:key="*this">
          <span bindtap="handleNum" data-index="{{item}}">{{item}}</span>
        </view>
        <span style="background-color: #eeeeee" bindtap="handleNum"></span>
        <span bindtap="handleNum" data-index="0">0</span>
        <span style="background-color: #eeeeee" bindtap="handleNumDel"><image src="../../imgs/order/keyDel.png"></image></span>
      </div>
    </view>
  </view>
</van-popup>

Do not set same key "6" in wx:key. 是因为我定义的 numList是 [1,2,3,4,5,6,7,8,9] 的，写的key是 wx:key="*this" 所以就可能会出现key重复，就会有这样的警告。

less

设置样式

// 键盘
.numeric_keypad {
  width: 100%;
  background-color: #e2e1e1;
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: center;
}
.kc{
  width: 100%;
  float: left;
  span {
    float: left;
    width: 32.7%;
    height: 45px;
    line-height: 45px;
    font-size: 18px;
    text-align: center;
    font-weight: bold;
    background-color: white;
    border: 1px solid #eeeeee;
    display: flex;
    justify-content: center;
    align-items: center;
    image{
      width: 25px;
      height: 25px;
    }
  }
}

// 密码框
.paymentCode_box{
  width: 300px;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center; 
  .one{
    font-weight: bold;
    font-size: 18px;
  }
  .two{
    margin-top: 10px;
    font-size: 15px;
  }
}
.num_list_box{
  width: 80%;
  margin: 0 auto;
  margin-top: -15px;
  .num_box{
    margin-bottom: 30px;
    float: left;
    width: 40px;
    height: 40px;
    border-top: 1px solid #ada9a9;
    border-right: 1px solid #ada9a9;
    border-bottom: 1px solid #ada9a9;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
  }
}

js

   // 关闭支付键盘
   onCloseKeyboard(){
    this.setData({
      showKeyboard: false,
      passwordList: ['','','','','',''],
      passwordIndex: 0
    })
  },
  // 输入支付密码
  handleNum(e){
    const num = e.currentTarget.dataset.index;
    const {passwordIndex, passwordList} = this.data;
    if( passwordIndex >= 6 ) 
      return
    passwordList[passwordIndex] = num;
    this.setData({
      passwordIndex: passwordIndex+1,
      passwordList
    })
    if( passwordIndex == 5 ){
      var str = '';
      passwordList.forEach((item,index)=>{
        str += item
      })
      this.endOfTheOrder(str);
    }
  },
  // 输入支付密码时删除
  handleNumDel(){
    const {passwordIndex, passwordList} = this.data;
    passwordList[passwordIndex-1] = '';
    this.setData({
      passwordIndex: passwordIndex-1,
      passwordList
    })
  },
  //结束订单
  endOfTheOrder(str){
    console.log(str);
    this.setData({
      passwordList: ['','','','','',''],
      showKeyboard: false
    })
    showToast({title: '预定成功, 正在生成订单'})
  }