小程序 支付页面

先贴效果图，下次不用自己写了
pages目录下新建pay目录，然后目录下新建page命名 pay
贴代码啦

pay.wxml

<!-- pages/pay/index.wxml -->
<view class="pay">
  <view class="pay-box">

    <view class='title'>选择充值金额：</view>
    <view type="mini" bindtap="reset">重置</view>

    <view class="input-box">
      <input class="input" type="number" value="{{inputs}}" placeholder="请输入整数金额" bindinput="getMoney" />
    </view>

    <view class="item-num">
      <view class="{{money=='1毛' ? 'boxOne checked' : 'boxOne'}}" data-amount='1毛' bindtap="choose">
        1毛
      </view>
      <view class="{{money=='2毛' ? 'boxNormal checked' : 'boxNormal default'}}" data-amount='2毛' bindtap="choose">
        2毛
      </view>
      <view class="{{money=='3毛' ? 'boxNormal checked' : 'boxNormal default'}}" data-amount='3毛' bindtap="choose">
        3毛
      </view>
    </view>

    <view class="item-num">
      <view class="{{money=='4毛' ? ' boxOne checked' : 'boxOne default'}}" data-amount='4毛' bindtap="choose">
        4毛
      </view> 
      <view class="{{money=='5毛' ? ' boxNormal checked' : 'boxNormal default'}}" data-amount='5毛' bindtap="choose">
        5毛
      </view> 
      <view class="{{money=='6毛' ? ' boxNormal checked' : 'boxNormal default'}}" data-amount='6毛' bindtap="choose">
        6毛
      </view> 
    </view>

        <view class="btn btn-primary btn-pay" hover-class="click-btn" bindtap="clickPay">充值</view>
    <view class='tip'>
      点击充值即表示已阅读并同意
      <!-- <navigator url="/pages/doc-controls/doc-controls" class='protocol'> -->
       <view class='protocol'>
          充值协议
      </view>
      <!-- </navigator> -->
    </view>

  </view>
</view>

pay.wxss

/* pages/pay/index.wxss */
.pay{
  background:#ffffff;
}
.pay-box{
  padding:0 30rpx;
}
.pay-box .title{
  font-size:34rpx;
  color:green;
  margin-top:15rpx;
}
.pay-box .input-box{
  text-align:center;
  margin-top:50rpx;
  margin-bottom:50rpx;
}
.pay-box .input-box .input{
  display: block;
  width:690rpx;
  height:100rpx;
  border:1rpx solid #D7D7D7;
  border-radius:5rpx;
  font-size:30rpx;
  color:#333333;
  text-align:center;
}
.item-num{
  display:flex;
  justify-content: space-between;
  margin-bottom: 20rpx;

}
.item-num .boxOne{
  height: 130rpx;
  background-color: lightgray;
  color: #333333;
  font-size: 32rpx;
  width: 280rpx;
  text-align: center;
  line-height: 130rpx;
  border-radius:8rpx;
  margin-left: 15rpx;
}
.item-num .boxNormal{
  height: 130rpx;
  background-color: lightgray;
  color: #333333;
  font-size: 32rpx;
  width: 280rpx;
  text-align: center;
  line-height: 130rpx;
  border-radius:8rpx;
  margin-left: 30rpx;
}
.item-num .boxNormal.checked{
  background-color: lightblue;
  color:red;
}
.item-num .boxOne.checked{
  background-color: lightblue;
  color:red;
}
.pay-box .tip{
  font-size:28rpx;
  color:#999999;
  text-align:center;

}

.pay-box .tip .protocol{
  display:inline;
  /* color:#FF3418; */
  color:red;
}

.pay-box .btn-pay{
  border-radius: 10%;
  height: 100rpx;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 200rpx auto 48rpx;
  color:rgb(64, 228, 49);
  font-weight:400;
  box-shadow:0rpx 10rpx 18rpx 0rpx rgba(243, 38, 38, 0.57);
}
.click-btn{
  color: red;
  background: lightgray
}

pay.js

// pages/pay/pay.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    money: '1毛',
    inputs:''
  },
  //点选按钮
  choose(e) {
    let data = e.currentTarget.dataset;
    this.setData({
      money: data.amount,
    });
    
    
  },
  //手动输入金额
  getMoney(e) {
    let amount = e.detail.value;
    this.setData({
      money: amount,
      inputs:amount
    })
  },
  clickPay(){
    wx.showToast({
      title: this.data.money,
      icon: 'none'
    })
  },
  reset(){
    this.setData({
      inputs: ""
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

})