第一种 直接使用微信小程序
官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showLoading.html
wx.showLoading({
title: '加载中',
})
具体代码可以这样子实现:
用户点击按钮后出发comit方法一开始是就直接调用showloading在接口掉完以后再complete方法中使用hideloading隐藏一开始的加载遮罩层
comit() {
wx.showLoading({
title: '加载中',
mask: true
})
var that = this;
var data = {
// isReceiveGoods: this.data.isReceiveGoods,
refundAmount: this.data.money,
refundReasonCode: this.data.num,
subOrderCode: this.data.code,
refundType: this.data.chooseRefundType,
refundMemoToseller: this.data.remark,
}
console.log(data);
if (that.data.recordIdImg) {
data.resourceId = that.data.recordIdImg.join(',')
};
//正则表达式验证输入金额只能为数字或小数点后两位
var verifyMoney = /^([0-4][0-9]{9}|[0-9]{1,9})(\.[0-9][0-9]?)?$/
if (!verifyMoney.test(that.data.money)) {
wx.showToast({
title: "订单金额格式错误",
icon: 'none',
})
return;
}
if (that.data.money == 0) {
wx.showToast({
title: '退款金额不能为0',
icon: 'none',
})
return;
}
//判断 若输入金额大于实付金额 则报错
if (that.data.money > that.data.refundPrice) {
wx.showToast({
title: '退款不能大于实付金额',
icon: "none"
})
return;
}
that.setData({
boCommit: true
})
$.post({
url:'orderRefund/create',
port:'order',
data:data,
success:res=>{
if (res.code == 0) {
wx.showToast({
title: '申请成功',
icon: 'none',
success: function () {
wx.navigateBack({
delta: 1
})
}
})
} else {
that.setData({
boCommit: false
})
wx.showToast({
title: res.msg,
icon: 'none',
})
return;
}
},
fail:function(){
},
complete() {
wx.hideLoading()
}
})
},
//提交跳转至订单详情
gotoOrder: function () {
wx.navigateTo({
url: '/subPackages/trade/account/account?fromPage=order',
})
}
第二种就是直接自己判断
在data中设置一个属性为false,每次一触发就设置为true然后判断当他为true的时候就不能再次点击
if (this.data.isClickPay) {
wx.showToast({
title: '请勿重复点击',
icon: 'none'
})
return
}
this.setData({
isClickPay:true
})
this.setData可以更改为this.data.isClickPay如果页面中不使用isClickPay字段。因为this.setData是页面更新是需要的 仅仅字段更新就使用this.data即可。