小程序 支付页面

页面"/>

小程序 支付页面

先贴效果图，下次不用自己写了
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) {},})