Van-popup is Vant’s # popup layer component. Vant* is a lightweight, reliable mobile Vue component library developed by the awesome front end team.

Json or index.json to use the corresponding component

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

js-data

data:{
    showKeyboard: true.numList: [1.2.3.4.5.6.7.8.9].passwordList: [' '.' '.' '.' '.' '.' '].passwordIndex: 0
}
Copy the code

wxml

The password box and the checkout keyboard appear at the same time, both controlled by the showKeyboard display. Use custom-style to change styles

<! -- Password box for payment keyboard --><van-popup show="{{showKeyboard}}"  custom-style="margin-top: -100px;" bind:close="onCloseKeyboard" round closeable>
  <view class="paymentCode_box">
    <view class="one">Please enter your payment password</view>
    <view class="two">The deposit is 2 yuan</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>
Copy the code

<! -- Payment keyboard --><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>
Copy the code

Do not set same key “6” in wx:key. Wx :key=”*this”; wx:key=”*this”;

less

Set the style

/ / keyboard
.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; }}}/ / the password box
.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: 0auto; 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; }}Copy the code

js

   // Close the payment keyboard
   onCloseKeyboard(){
    this.setData({
      showKeyboard: false.passwordList: [' '.' '.' '.' '.' '.' '].passwordIndex: 0})},// Enter the payment password
  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); }},// Delete when entering the payment password
  handleNumDel(){
    const {passwordIndex, passwordList} = this.data;
    passwordList[passwordIndex-1] = ' ';
    this.setData({
      passwordIndex: passwordIndex-1,
      passwordList
    })
  },
  // End the order
  endOfTheOrder(str){
    console.log(str);
    this.setData({
      passwordList: [' '.' '.' '.' '.' '.' '].showKeyboard: false
    })
    showToast({title: 'Reservation successful, order being generated'})}Copy the code