支付按钮防抖

src/points/productDetails/components/selectProduct.vue

@@ -100,7 +100,7 @@
                 color: '#fff',
                 background: '#03C1B8'
             }">请选择</u-button>
-            <u-button v-else-if="selectedObj && selectedObj.stock" :customStyle="{
+            <u-button :disabled="redeemNowBtnDisable" v-else-if="selectedObj && selectedObj.stock" :customStyle="{
                 color: '#fff',
                 background: '#03C1B8'
             }" @click="redeemNowFun">实付价 {{ params.paymentType == 1 ? selectedObj.pricePoint + '积分' :
@@ -129,6 +129,10 @@ export default {
             type: Object,
             default: {}
         },
+        redeemNowBtnDisable: {
+            type: Boolean ,
+            default: false
+        },
         
     },
     data() {
@@ -140,9 +144,7 @@ export default {
             specValueText: '',
             specValuePrice: '',
             specList: [],
-            selectedObj: null
-
-
+            selectedObj: null,
 
         }
     },
@@ -188,9 +190,7 @@ export default {
         },
         //立即兑换
         redeemNowFun() {
-            this.$emit('redeemNowFun', this.selectedObj ? JSON.parse(JSON.stringify(this.selectedObj)) : null, this.selectPayMeth, this.orderRemarks)
-
-
+            this.$emit('redeemNowFun', this.selectedObj ? JSON.parse(JSON.stringify(this.selectedObj)) : null, this.selectPayMeth, this.orderRemarks,true)
         },
         //点击选规则
         selectedSpecFun(specValue, specName) {

src/points/productDetails/index.vue

@@ -121,10 +121,10 @@
       </view>
 
       <view class="footer-bar">
-        <u-button v-if="selectedObj ? selectedObj.stock : params.stock" :customStyle="{
+        <u-button :disabled="redeemNowBtnDisable" v-if="selectedObj ? selectedObj.stock : params.stock" :customStyle="{
           color: '#fff',
           background: '#03C1B8'
-        }" @click="redeemNowFun">立即兑换</u-button>
+        }" @click="redeemNowFun">{{ redeemNowBtnDisable ? '支付中...' : '立即兑换' }}</u-button>
         <u-button v-else :customStyle="{
           color: '#999999 ',
           background: '#eee'
@@ -135,7 +135,7 @@
         <RedemptionRules ref="redemptionRulesRef"></RedemptionRules>
       </u-popup>
       <u-popup :z-index="999" :show="selectProductShowPopup" mode="bottom" round="10">
-        <SelectProduct :params="params" ref="selectProductRef" :defaultAddress="defaultAddress"
+        <SelectProduct :redeemNowBtnDisable="redeemNowBtnDisable" :params="params" ref="selectProductRef" :defaultAddress="defaultAddress"
           @redeemNowFun="redeemNowFun" @closeSelectProduct="closeSelectProduct">
         </SelectProduct>
       </u-popup>
@@ -167,6 +167,7 @@ export default {
   components: { ImageItem, RedemptionRules, SelectProduct },
   data() {
     return {
+      redeemNowBtnDisable: false,
       isTop: 0,
       redemptionRulesShowPopup: false,
       selectProductShowPopup: false,
@@ -269,7 +270,7 @@ export default {
       this.redemptionRulesShowPopup = true
     },
     //立即兑换
-    redeemNowFun(selectedObj, selectPayMeth, orderRemarks) {
+    redeemNowFun(selectedObj, selectPayMeth, orderRemarks,redeemNowBtnDisable) {
       if (selectedObj) this.selectedObj = selectedObj
       if (selectPayMeth) this.selectPayMeth = selectPayMeth
       if (orderRemarks) this.orderRemarks = orderRemarks
@@ -293,6 +294,7 @@ export default {
           })
           return
         }
+        this.redeemNowBtnDisable = redeemNowBtnDisable?redeemNowBtnDisable:true
         let params = {}
         params.openId = uni.getStorageSync('wx_copenid');//用户openId
         params.userPhone = this.defaultAddress.phone;//用户手机号
@@ -335,60 +337,67 @@ export default {
       let url = 'https://city.baoxianzhanggui.com/fragrance/'
       productOrderCreate(params).then(res => {
         if (res.data.code == 200) {
+          
           productOrderPay({
             orderNo: res.data.data, //订单编号
             payType: params.payType, //支付方式:1微信支付 2:余额支付
             totalPrice: params.totalAmount //订单总金额，单位：元
           }).then(res => {
-            let payConfig = JSON.parse(res.data.data)
-            getSignature(url).then(res => {
-              this.wxconfig = res.data
-              wx.config({
-                beta: true,
-                debug: false,
-                appId: this.wxconfig.appId, // 公众号ID 
-                // appId: uni.getAppBaseInfo().host.appId, // 公众号ID 
-                timestamp: this.wxconfig.timestamp, // 时间戳，自1970年以来的秒数
-                nonceStr: this.wxconfig.nonceStr, // 随机串
-                signature: this.wxconfig.sign, // 微信签名方式
-                jsApiList: ['getBrandWCPayRequest']
-              });
-              var vm = this
-              wx.invoke('getBrandWCPayRequest',
-                // 下面参数内容都是后台返回的
-                {
-                  'appId': payConfig.appid, // 公众号名称，由商户传入
-                  'timeStamp': payConfig.timeStamp, // 时间戳
-                  'nonceStr': payConfig.nonceStr, // 随机串
-                  'package': payConfig.package, // 预支付id
-                  'signType': payConfig.signType, // 微信签名方式
-                  'paySign': payConfig.paySign, // 微信签名
-                },
-                function (res) {
-                  // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
-
-                  // JSON.stringify(res);
-                  if (res.err_msg == "get_brand_wcpay_request:ok") {
-                    uni.navigateTo({
-                      url: '/points/productDetails/paymentSuccessful?orderNo=' + this.orderNo
-                    });
-                  } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
-                    uni.showToast({
-                      title: '已取消支付',
-                      icon: 'none'
-                    })
-                    uni.navigateTo({
-                      url: '/points/productDetails/pendingPayment?orderNo=' + this.orderNo
-                    });
-
-
-                  } else {
-                    alert('付款失败');
-                  }
+            if (res.data.code == 200) {
+              let payConfig = JSON.parse(res.data.data)
+              getSignature(url).then(res => {
+                if (res.data.code == 200) {
+                  this.wxconfig = res.data
+                  wx.config({
+                    beta: true,
+                    debug: false,
+                    appId: this.wxconfig.appId, // 公众号ID 
+                    // appId: uni.getAppBaseInfo().host.appId, // 公众号ID 
+                    timestamp: this.wxconfig.timestamp, // 时间戳，自1970年以来的秒数
+                    nonceStr: this.wxconfig.nonceStr, // 随机串
+                    signature: this.wxconfig.sign, // 微信签名方式
+                    jsApiList: ['getBrandWCPayRequest']
+                  });
+                  var vm = this
+                  wx.invoke('getBrandWCPayRequest',
+                    // 下面参数内容都是后台返回的
+                    {
+                      'appId': payConfig.appid, // 公众号名称，由商户传入
+                      'timeStamp': payConfig.timeStamp, // 时间戳
+                      'nonceStr': payConfig.nonceStr, // 随机串
+                      'package': payConfig.package, // 预支付id
+                      'signType': payConfig.signType, // 微信签名方式
+                      'paySign': payConfig.paySign, // 微信签名
+                    },
+                    function (res) {
+                      // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
+
+                      // JSON.stringify(res);
+                      if (res.err_msg == "get_brand_wcpay_request:ok") {
+                        this.redeemNowBtnDisable = false
+                        uni.navigateTo({
+                          url: '/points/productDetails/paymentSuccessful?orderNo=' + this.orderNo
+                        });
+                      } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
+                        uni.showToast({
+                          title: '已取消支付',
+                          icon: 'none'
+                        })
+                        uni.navigateTo({
+                          url: '/points/productDetails/pendingPayment?orderNo=' + this.orderNo
+                        });
+
+
+                      } else {
+                        alert('付款失败');
+                      }
+                    }
+                  )
                 }
-              )
 
-            })
+              })
+            }
+
 
           })
         }
@@ -417,6 +426,7 @@ export default {
               totalPrice: params.totalAmount //订单总金额，单位：元
             }).then(res => {
               if (res.data.code == 200) {
+                this.redeemNowBtnDisable = false
                 uni.navigateTo({
                   url: '/points/productDetails/paymentSuccessful'
                 });

src/points/productDetails/pendingPayment.vue

@@ -61,7 +61,7 @@
                             <text class="text">合计：</text>
                             <text class="price">¥ {{
                                 (orderInfo.payAmount + (orderInfo.freightAmount > 0 ? orderInfo.freightAmount : 0))
-                            }}</text>
+                                }}</text>
                         </view>
                     </view>
                     <view class="weiChect">
@@ -115,7 +115,7 @@
                     border: '2rpx solid rgba(153, 153, 153, 1)'
                 }" @click="cancelOrderFun">取消支付</u-button>
 
-                <u-button v-if="orderInfo.orderStatus == 0" :customStyle="{
+                <u-button :disabled="goPayBtnDisable" v-if="orderInfo.orderStatus == 0" :customStyle="{
                     color: '#fff ',
                     background: '#03C1B8'
                 }" @click="goPay">去付款</u-button>
@@ -201,16 +201,16 @@ export default {
             orderInfo: null,
             productInfo: null,
             wxconfig: {},
+            goPayBtnDisable: false
         }
     },
     onLoad(data) {
         if (data.orderNo) {
             this.orderNo = data.orderNo
-            this.getOrderInfo();
         }
     },
     onShow() {
-
+        this.getOrderInfo();
     },
     onPageScroll() {
     },
@@ -275,6 +275,7 @@ export default {
 
         //去付款
         goPay() {
+            this.goPayBtnDisable = true
             if (this.orderInfo.payType == 1) {
                 //微信支付 
                 this.weixinPay()
@@ -318,9 +319,10 @@ export default {
                         },
                         function (res) {
                             // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
-
+                            this.goPayBtnDisable = false
                             // JSON.stringify(res);
                             if (res.err_msg == "get_brand_wcpay_request:ok") {
+
                                 uni.navigateTo({
                                     url: '/points/productDetails/paymentSuccessful?orderNo=' + this.orderNo
                                 });
@@ -359,8 +361,8 @@ export default {
                     payType: this.orderInfo.payType, //支付方式:1微信支付 2:余额支付
                     totalPrice: this.orderInfo.totalAmount //订单总金额，单位：元
                 }).then(res => {
-                    console.log(res, '8888888')
                     if (res.data.code == 200) {
+                        this.goPayBtnDisable = false
                         uni.navigateTo({
                             url: '/points/productDetails/paymentSuccessful'
                         });
@@ -425,7 +427,7 @@ export default {
         //再次购买
         buyAgain() {
             uni.navigateTo({
-                url: `/points/productDetails/index?id=${this.orderInfo.id}`
+                url: `/points/productDetails/index?id=${this.productInfo.productId}`
             });
         }