小程序仿微信支付键盘实现

1. 先上图
   
   2.实现过程

键盘放在了vant-weapp组件的弹窗框popup中，并且默认进入页面自动弹出键盘

index.wxml

<van-popup show="{{ show }}" overlay="{{ false }}" position="bottom" bind:close="onClose">
    <view class="flex-col keyboard">
      <view class="flex-row">
        <view class="flex-row group_5">
          <view class="text-wrapper flex-col items-center justify-center" hover-class="down_state" hover-stay-time="{{50}}" data-key="{{ 1 }}" catchtap="keyInput">
            <text decode="decode">1</text>
          </view>
          <view class="text-wrapper flex-col items-center view_2 justify-center" hover-class="down_state" hover-stay-time="{{50}}" data-key="{{ 2 }}" catchtap="keyInput">
            <text decode="decode">2</text>
          </view>
          <view class="text-wrapper flex-col items-center view_2 justify-center" hover-class="down_state" hover-stay-time="{{50}}" data-key="{{ 3 }}" catchtap="keyInput">
            <text decode="decode">3</text>
          </view>
        </view>
        <view class="flex-col items-center image-wrapper justify-center" hover-class="down_state" hover-stay-time="{{50}}" catchtap="delInput">
          <image src="http://test2.xjdm100.com/xz-wxapp/0d44f235e7cedbd8c950096e47507eea.png" class="image_4" />
        </view>
      </view>
      <view class="flex-row group_6">
        <view class="flex-col group_7">
          <view class="flex-col group_8">
            <view class="flex-row">
              <view class="left-text-wrapper flex-col items-center view_4 justify-center" hover-class="down_state" hover-stay-time="{{50}}" data-key="{{ 4 }}" catchtap="keyInput">
                <text decode="decode">4</text>
              </view>
              <view class="left-text-wrapper flex-col items-center view_5 justify-center" hover-class="down_state" hover-stay-time="{{50}}" data-key="{{ 5 }}" catchtap="keyInput">
                <text decode="decode">5</text>
              </view>
              <view class="left-text-wrapper flex-col items-center view_6 justify-center" hover-class="down_state" hover-stay-time="{{50}}" data-key="{{ 6 }}" catchtap="keyInput">
                <text decode="decode">6</text>
              </view>
            </view>
            <view class="flex-row group_10">
              <view class="text-wrapper flex-col items-center justify-center" hover-class="down_state" hover-stay-time="{{50}}" data-key="{{ 7 }}" catchtap="keyInput">
                <text decode="decode">7</text>
              </view>
              <view class="text-wrapper flex-col items-center view_8 justify-center" hover-class="down_state" hover-stay-time="{{50}}" data-key="{{ 8 }}" catchtap="keyInput">
                <text decode="decode">8</text>
              </view>
              <view class="text-wrapper flex-col items-center view_9 justify-center" hover-class="down_state" hover-stay-time="{{50}}" data-key="{{ 9 }}" catchtap="keyInput">
                <text decode="decode">9</text>
              </view>
            </view>
          </view>
          <view class="flex-row group_11">
            <view class="left-text-wrapper flex-col items-center justify-center view_10" hover-class="down_state" hover-stay-time="{{50}}" data-key="{{ 0 }}" catchtap="keyInput">
              <text decode="decode">0</text>
            </view>
            <view class="flex-col items-center text-wrapper_1 justify-center" hover-class="down_state" hover-stay-time="{{50}}" data-key="." catchtap="keyInput">
              <text decode="decode">.</text>
            </view>
          </view>
        </view>
        <view class="flex-col items-center justify-center text-wrapper_2" hover-class="down_state2" hover-stay-time="{{50}}" bindtap="goRecharge">
          <text decode="decode">充值</text>
        </view>
      </view>
    </view>
  </van-popup>

index.wxss

.group_5 {
  margin-top: 20rpx;
  color: rgb(22, 22, 22);
  font-size: 33rpx;
  line-height: 25rpx;
  white-space: nowrap;
  flex: 1 1 auto;
}

.group_6 {
  margin-top: 10rpx;
}

.text_1 {
  margin-top: 3rpx;
}

.image_1 {
  margin-left: 30rpx;
  width: 350rpx;
  height: 71rpx;
}

.text_2 {
  color: rgb(28, 28, 28);
  font-size: 25rpx;
  line-height: 24rpx;
  white-space: nowrap;
}

.group_4 {
  margin-top: 50rpx;
  padding: 0 3rpx;
  /* display: inline; */
  vertical-align: top;
  /* line-height: 63rpx; */
  /* white-space: nowrap; */
}

.divider {
  margin-top: 32rpx;
  background-color: rgb(228, 228, 228);
  height: 2rpx;
}

.balance-area {
  margin-top: 12rpx;
  color: rgb(28, 28, 28, .6);
  font-size: 25rpx;
}

.view_2 {
  margin-left: 10rpx;
}

.view_3 {
  margin-left: 12rpx;
}

.image-wrapper {
  margin-left: 10rpx;
  margin-top: 20rpx;
  padding: 26rpx 0 27rpx;
  width: 160rpx;
  background-color: rgb(255, 255, 255);
  border-radius: 10rpx;
  height: 90rpx;
}

.group_7 {
  flex: 1 1 auto;
}

.text-wrapper_2 {
  margin-left: 10rpx;
  padding: 118rpx 0;
  color: rgb(255, 255, 255);
  font-size: 29rpx;
  line-height: 28rpx;
  white-space: nowrap;
  background-color: rgb(7, 193, 96);
  border-radius: 10rpx;
  width: 160rpx;
  height: 290rpx;
}

.image_3 {
  width: 36rpx;
  height: 50rpx;
}

.text_3 {
  margin-left: 27rpx;
  height: 70rpx;
  flex: 1;
  color: rgb(28, 28, 28);
  font-size: 84rpx;
  font-weight: 600;
  caret-color: rgb(7, 193, 96);
}

.image_4 {
  width: 33rpx;
  height: 27rpx;
}

.group_8 {
  color: rgb(22, 22, 22);
  font-size: 33rpx;
  line-height: 25rpx;
  white-space: nowrap;
}

.group_11 {
  margin-top: 10rpx;
}

.group_10 {
  margin-top: 10rpx;
}

.view_10 {
  flex: 1 1 auto;
  color: rgb(22, 22, 22);
  font-size: 33rpx;
  line-height: 25rpx;
  white-space: nowrap;
}

.text-wrapper_1 {
  margin-left: 10rpx;
  padding: 45rpx 0 29rpx;
  color: rgb(22, 22, 22);
  font-size: 33rpx;
  line-height: 6rpx;
  white-space: nowrap;
  background-color: rgb(255, 255, 255);
  border-radius: 10rpx;
  width: 180rpx;
  height: 90rpx;
}

.view_4 {
  flex: 1 1 160rpx;
}

.view_5 {
  margin-left: 10rpx;
  flex: 1 1 160rpx;
}

.view_6 {
  margin-left: 10rpx;
  flex: 1 1 160rpx;
}

.view_8 {
  margin-left: 10rpx;
}

.view_9 {
  margin-left: 10rpx;
}

.keyboard {
  background-color: rgb(235 243 255);
  box-sizing: border-box;
  padding: 10rpx;
  font-size: 46rpx;
  font-weight: 500;
}

.down_state {
  background-color: #f5f5f5;
}

.down_state2 {
  background-color: rgba(7, 193, 96, .6);
}

.text-wrapper {
  flex: 1 1 160rpx;
  padding: 27rpx 0 29rpx;
  background-color: rgb(255, 255, 255);
  border-radius: 10rpx;
  height: 90rpx;
}
// 公共部分
.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.justify-start {
  display: flex;
  justify-content: flex-start;
}

.justify-center {
  display: flex;
  justify-content: center;
}

.justify-end {
  display: flex;
  justify-content: flex-end;
}

.justify-evenly {
  display: flex;
  justify-content: space-evenly;
}

.justify-around {
  display: flex;
  justify-content: space-around;
}

.justify-between {
  display: flex;
  justify-content: space-between;
}

.items-start {
  display: flex;
  align-items: flex-start;
}

.items-center {
  display: flex;
  align-items: center;
}

.items-end {
  display: flex;
  align-items: flex-end;
}

index.js

data: {
    amount: '',
    show: false,
},
keyInput(e) {
    let key = e.currentTarget.dataset.key
    let now = this.data.amount + key.toString()
    let inputVal = this.money(now)
    this.setData({
      amount: inputVal
    })
  },
goRecharge() {
    wx.showLoading({
      title: '充值中',
    })
    setTimeout(() =>{
		wx.hideLoading()
    },2000)
},
delInput() {
    let now = this.data.amount
    this.setData({
      amount: now.substr(0, now.length - 1)
    })
},