小程序-微信支付

小程序css代码

.user_title{
	width: 100%;
	height: 160px;
	background: #d4237a;
	text-align: center;
}
.vip{
	height: 16px;
	width: 85px;
	background: #333;
	margin-left: 38.52%;
	font-size: 12px;
	color: white;
	padding-bottom: 2px;
	line-height: 16px;
	border-radius: 15px;
}
.vip_img{
	width: 16px;
	height: 16px;
	margin-bottom: -2px;
}
.user_head{
	width: 85px;
	height: 85px;
	background: white;
	border-radius: 50%;
	margin-top: 15px;
}
.user_name{
	font-size: 16px;
	color: white;
}
.recharge_money{
	font-size: 16px;
	color: #999999;
	width: 100%;
	padding-left: 2.5%;
	padding-right: 2.5%;
	margin-top: 15rpx;
	margin-bottom: 15rpx;
}
.recharge_shuxian{
	color: #fbb103;
	margin-right: 15rpx;
	display: inline-block;
	font-weight: 900;
}
.recharge_input{
	width: 95%;
	margin-left: 2.5%;
	margin-right: 2.5%;
	height: 40px;
	border: 1px solid #ddd;
	color: #999999;
	font-size: 14px;
	border-radius: 6px;
}
.recharge_but{
	width: 95%;
	margin-left: 2.5%;
	margin-right: 2.5%;
	height: 40px;
	border-radius: 6px;
	color: white;
	background: #d4237a;
	margin-top: 30rpx;
}

WXML

<view>
	<view class='user_title'>
	<image src='{{getUserInfomation.user_header}}' class='user_head'></image>
	<view class='vip'><image src='../../../../images/vip.png' class='vip_img'></image>{{vip_grade}}</view>
	<view class='user_name'>{{getUserInfomation.nickname}}</view>
</view>
<view class='recharge_money'><view class='recharge_shuxian'>|</view>充值金额</view>
<input bindinput='getmoney' class='recharge_input' placeholder='请输入充值金额'></input>
<button bindtap='paybut' class='recharge_but'>立刻充值</button>
</view>

wxjs

const app = getApp();
Page({
  data: {
    getmoney: "",
		getUserInfomation:"",
		vip_grade:""
  },
	onLoad: function (query){
	  var	that = this
		getUserInfomation(that)
		that.setData({
			vip_grade:query.vip_grade
		})
	},
	//input获取输入信息
  getmoney: function(e) {
    var that = this;
    that.setData({
      getmoney: e.detail.value
    })
  },
	//立即充值
  paybut: function() {
    var that = this
    var pattern = /^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$/
    if (that.data.getmoney == "") {
      wx.showToast({
        title: '不能为空',
      })
    } else if (!pattern.test(that.data.getmoney)) {
      wx.showToast({
        title: '必须是数字',
      })
    } else {
      that.rechargeMoney(that);
    }
  },

  /* 支付   */
  pay: function(param) {
    var that = this;
    wx.requestPayment({
      timeStamp: param.timeStamp,
      nonceStr: param.nonceStr,
      package: param.package,
      signType: param.signType,
      paySign: param.paySign,
      success: function(res) {
        //回调支付成功
        wx.showToast({
          title: '支付成功',
          icon: 'success'
        });
        setTimeout(function() {
					wx.navigateBack({
						delta: 1,
					})
        }, 1000);
      },
			//失败回调
      fail: function(res) {
        wx.showToast({
          title: '支付失败',
          icon: 'none'
        });
        setTimeout(function() {
          wx.switchTab({
            url: '/pages/user/user'
          })
        }, 1000);
      },

    })
  },
	//支付信息
  rechargeMoney: function(that) {
    wx.request({
      url: app.globalData.requestUrl + 'rechargeMoney',
      data: {
        'web': app.globalData.webUrl,
        'userid': app.globalData.userInfo['user_id'],
        // 'token': app.globalData.token,
        // 'cart': app.globalData.payList,
        // 'openid': app.globalData.openId,
        'recharge': that.data.getmoney,
      },
      success(res) {
        if (res.data.status == 1) {
          that.pay(res.data.info);
        } else {
          wx.showToast({
            title: res.data.info,
            icon: 'none'
          });
        }
      }
    })
  }
})
//获取个人信息
function getUserInfomation(that) {
	wx.request({
		url: app.globalData.requestUrl + 'getUserInfomation',
		data: {
			"userid": app.globalData.userInfo['user_id'],
		},
		success(res) {
			if (res.data.status == 1) {
				that.setData({
					getUserInfomation: res.data.info
				})
			} else {
				wx.showToast({
					title: '个人信息获取失败请确保网络畅通',
					icon: "none",
				})
			}
		}
	});
}