在微信小程序中,要想获取元素的属性值,需要用到 bindtap事件,如果想要正确获取到属性值,对属性的命名还有一定要求
如下是正确的方式data-money-Num="9.93":
<view class="weui-msg__desc msg_text">我的<text class="msg_text">余额9.93元,</text><navigator url="javascript:void(0);" class="weui-msg__link" bindtap="allDraw" data-money-Num="9.93">全部提现</navigator></view>
如果写成data-moneyNum="9.93”就获取不到了,所以要么全小写,要使用驼峰命名方式,就必须中间加 - (短横杠)
下面是完整的饿示例:
wxml:
<view class="page">
<view class="weui-msg">
<view class="weui-msg__icon-area">
<!-- <icon type="success" size="64"></icon> -->
<image src="../../images/money.png"></image>
</view>
<view class="weui-msg__text-area">
<view class="weui-msg__title weui-msg__titles">提现金额</view>
<view class="weui-msg__title weui-msg__titless">¥
<input type="digit" value="{{moneyNum}}" style="display:inline-block" confirm-type="done" bindinput="bindedit"></input>
</view>
<view class="weui-msg__desc msg_text">我的<text class="msg_text">余额9.93元,</text><navigator url="javascript:void(0);" class="weui-msg__link" bindtap="allDraw" data-money-Num="9.93">全部提现</navigator></view>
</view> <view class="weui-msg__opr-area">
<view class="weui-btn-area">
<button class="weui-btn" type="primary" bindtap="paytousr">提现</button>
</view>
</view> </view>
</view>
js:
// pages/wallet/withdraw.js
Page({ /**
* 页面的初始数据
*/
data: {
moneyNum: null, }, /**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) { }, /**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () { }, /**
* 生命周期函数--监听页面显示
*/
onShow: function () { }, /**
* 生命周期函数--监听页面隐藏
*/
onHide: function () { }, /**
* 生命周期函数--监听页面卸载
*/
onUnload: function () { }, /**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () { }, /**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () { }, /**
* 用户点击右上角分享
*/
onShareAppMessage: function () { }, bindedit: function (event){
this.setData({
moneyNum: this.money(event.detail.value) //money匹配金额输入规则,返回输入值
});
}, money(val) {
let num = val.toString(); //先转换成字符串类型
if (num.indexOf('.') == 0) { //第一位就是 .
num = '0' + num
}
num = num.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
num = num.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
num = num.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
num = num.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数
if (num.indexOf(".") < 0 && num != "") {
num = parseFloat(num);
}
return num
}, /**
* 提现
*/ paytousr: function (e) {
if(this.data.moneyNum==null){
wx.showToast({
title: '请输入正确的金额',
icon:'none'
})
setTimeout(function(){
wx.hideToast()
},2000)
return false;
}
//此处还应该判断提现金额是否大于余额 var tmp_my_id = wx.getStorageSync('my_id')
var tmp_my_session = wx.getStorageSync('my_session')
wx.request({
url: '自己的接口',
method: 'POST',
dataType: 'json',
header: {
'content-type': 'application/json' // 默认值
},
data: {
my_id: tmp_my_id,
my_session: tmp_my_session,
my_fee: this.data.moneyNum*100 // 用户输入的元比如,1.01元,,你这边转化成分
},
success: function (res) {
var data = res.data;
console.log(data); // errCode=0 是服务器端把数值保存到数据
if(data.errCode==0){
wx.showToast({
title: '提现成功',
icon: 'none',
})
setTimeout(function () {
wx.hideToast()
}, 2000)
}else{
wx.showToast({
title: '提现失败',
icon: 'none',
})
setTimeout(function () {
wx.hideToast()
}, 2000)
} },
fail: function (res) {
console.log('login fail')
},
}) },
/**
* 全部提现
*/
allDraw:function(event){
var moneyNum = event.currentTarget.dataset.moneyNum
console.log(moneyNum)
this.setData({
moneyNum: moneyNum
});
} })