小程序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",
})
}
}
});
}