微信小程序 实现微信支付界面效果

1. 效果图
   
2. 代码片段

.setMoney-wrap-top {
  padding: 68rpx 60rpx;
  box-sizing: border-box;
  background-color: #ffffff;
}

.collection-title {
  color: #333333;
  font-size: 28rpx;
  padding-bottom: 30rpx;

}

.money-danwie {
  font-size: 80rpx;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.money-box {
  display: flex;
  align-items: flex-start;
  border-bottom: 1px solid #EEEEEE;
  padding-bottom: 40rpx;
}

.collect-remark {
margin-top: 36rpx;
margin-bottom: 100rpx;
  font-size: 28rpx;
}
.imgItem-box {
  width: 150rpx;
  height: 150rpx;
  padding: 0 5rpx;
  box-sizing: border-box;
  margin-bottom: 16rpx;
  position: relative;
}
.writeInput {
  height: 150rpx;
  font-size: 120rpx;
  font-weight: bold;
}
.icon-delete-copy{
  color: #2d59df;
  position: absolute;
  right: -9rpx;
  top:-9rpx;
}
.upload-imgbox {
  border: 1px dashed #979797;
  width: 150rpx;
  height: 150rpx;
  color: #979797;
  font-size: 24rpx;
  text-align: center;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-bottom: 16rpx;
}

.icon-jiahao {
  padding-top: 35rpx;
  font-size: 55rpx;
}
page {
  background: #ffffff;
  height: 100vh;
}
.page_box {
  width: 100%;

  background: #EDEDED;
  overflow: hidden;
}

.input_view {
  width: 100%;
  background: #fff;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  box-sizing: border-box;
}

.title {
  display: block;
  font-size: 24rpx;
  color: #000;
  padding-left: 10rpx;
}

.input_box {
  display: flex;
padding-bottom: 80rpx;
  height: 80rpx;
  border-bottom: 1px solid #efefef;
}

.input_label {
  font-size: 70rpx;
  font-weight: bold;
  margin-right: 5rpx;
}

.content {
  font-size: 110rpx;
  line-height: 90rpx;
  font-weight: bold;
  margin-top: 8rpx;
}

.content.place {
  font-size: 40rpx;
  color: #E2E2E2;
  font-weight: normal;
  margin-top: 8rpx;
}

.className {
  width: 6rpx;
  height: 66rpx;
  background-color: #2d59df;
  border-radius: 6rpx;
  margin-top: 22rpx;
  animation: twinkling 1s infinite;
}

.animated {
  animation-duration: 1s;
  animation-fill-mode: both
}

@-webkit-keyframes twinkling {
  0% {
      opacity: 0;
  }

  100% {
      opacity: 1;
  }
}
.keyboard {
  height: 0;
  width: 100%;
  background: #f7f7f7;
  position: fixed;
  bottom: 0;
  left: 0;
  transition: height 0.3s;
  padding: 0 0 0 16rpx;
  z-index: 10;
}

.hind_box {
  height: 440rpx;
}


.key_box {
  overflow: hidden;
}
.number_box{
  width: calc((100% / 4 * 3) - 16rpx);
  display: inline-block;
}
.btn_box{
  width: calc(100% / 4);
  display: inline-block;
}
.keys {
  float: left;
  width: calc(100% / 3 - 16rpx);
  height: 90rpx;
  text-align: center;
  line-height: 90rpx;
  box-sizing: border-box;
  font-size: 40rpx;
  background: #fff;
  margin: 16rpx 16rpx 0 0;
  border-radius: 10rpx;
  font-weight: bold;
}
.keys.zero{
  width: calc((100% / 3) * 2 - 16rpx);
}
.keys image{
  width: 50rpx;
  height: auto;
}

.btn_box{
  width: calc((100% / 4));
}

.btn_box .keys{
  width: calc(100% - 16rpx);
  padding-top: 10rpx;
}

.btn_box .pay_btn{
  height: 298rpx;
  line-height: 298rpx;
  padding-top: 0;
  background-color: #2d59df;
  font-size: 30rpx;
  color: #fff;
  font-weight: normal;
}
.imgItem {
  width: 100%;
  height: 150rpx;
}
.upload-box {
  width: 100%;
  padding-top: 10rpx;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}

<view class="setMoney-wrap-top">
    <view>
      <view class="collection-title">收款金额</view>
      <view class='input_view' catchtap='hindKeyboard'>
        <view class='input_box' catchtap='showKeyboard'>
          <text class='input_label'>￥</text>
          <text class='content' wx:if="{{content}}">{{content}}</text>
          <view class='className' wx:if="{{keyShow}}"></view>
          <text class='content place' wx:if="{{!content}}"></text>
        </view>
      </view>
    </view>
  </view>
  <!-- 数字键盘区域 -->
  <view class='page_box'>
    <view class='keyboard {{keyShow&&"hind_box"}}'>
      <view class='key_box'>
        <view class="number_box">
          <view class='keys {{index==9?"zero":""}}' wx:for='{{KeyboardKeys}}' wx:key='this' catchtap='keyTap'
            data-keys='{{item}}'>{{item}}</view>
        </view>
        <view class="btn_box">
          <view class='keys' catchtap='keyTap' data-keys='<'>
            <!-- 根据项目实际路径引用 -->
            <image mode="widthFix" src="/images/colle/del.png"></image>
          </view>
          <view class="keys pay_btn" catchtap='payTap' disabled="{{disabled}}">确定</view>
        </view>
      </view>
    </view>
  </view>

data:{
     KeyboardKeys: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, '·'],
     keyShow: true, //默认显示键盘
     disabled: true
 }
//点击界面键盘消失
  hindKeyboard() {
    var _this = this
    _this.setData({
      keyShow: false
    });
  },
  //点击输入框，键盘显示
  showKeyboard() {
    var _this = this
    _this.setData({
      keyShow: true
    });
  },
  keyTap(e) {
    var _this = this,
      keys = e.currentTarget.dataset.keys,
      content = _this.data.content,
      len = content.length;
    switch (keys) {
      case '·': //点击小数点，（注意输入字符串里的是小数点，但是我界面显示的点不是小数点，是居中的点，在中文输入法下按键盘最左边从上往下数的第二个键，也就是数字键1左边的键可以打出居中的点）
        if (len < 11 && content.indexOf('.') == -1) { //如果字符串里有小数点了，则不能继续输入小数点，且控制最多可输入10个字符串
          if (content.length < 1) { //如果小数点是第一个输入，那么在字符串前面补上一个0，让其变成0.
            content = '0.';
          } else { //如果不是第一个输入小数点，那么直接在字符串里加上小数点
            content += '.';
          }
        }
        break;
      case 0:
        if (len < 4) {
          if (content.length < 1) { //如果0是第一个输入，让其变成0.
            content = '0.';
          } else {
            content += '0'
          }
        }
        break;
      case '<': //如果点击删除键就删除字符串里的最后一个
      if(content=='0.'||content=='0'){
        content = '';
      }else{
        content = content.substr(0, content.length - 1);
      }
        break;
      default:
        let Index = content.indexOf('.'); //小数点在字符串中的位置
        if (Index == -1 || len - Index != 3) { //这里控制小数点只保留两位
          if (len < 8) { //控制最多可输入10个字符串
            content += keys;
          }
        }
        break
    }
    if (content==''||content== '0.' || content == '0.0'||content == '0') {
      _this.setData({
        disabled: true
      });
    }else{
      _this.setData({
        disabled: false
      });
    }
    _this.setData({
      content
    });
  },
  // 设置完金额支付
  payTap(){
  }