第一種 直接使用微信小程序
官方文檔: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即可。