支付方式增加防抖操作

.gitignore

@@ -15,3 +15,4 @@ yarn-error.log*
 *.sln
 node_modules/
 /package-lock.json
+/.history/

pages/paymentMethod/paymentMethod.vue

@@ -1,13 +1,19 @@
 <template>
-	<!-- 
+  <!-- 
 		支付方式选择  微信or贵阳银行
 	 -->
-	<view>
-		<u-modal v-model="payWayPop" :title-style="{ color: '#404040' }" title="缴费方式" width="660rpx"
-			:show-confirm-button="false" :show-cancel-button="false">
-			<view class="slot-content">
-				<view class="pay-way-new">
-					<!-- <view class="pay-way-item pay-way-item-hy" @click="gyBankPay">
+  <view>
+    <u-modal
+      v-model="payWayPop"
+      :title-style="{ color: '#404040' }"
+      title="缴费方式"
+      width="660rpx"
+      :show-confirm-button="false"
+      :show-cancel-button="false"
+    >
+      <view class="slot-content">
+        <view class="pay-way-new">
+          <!-- <view class="pay-way-item pay-way-item-hy" @click="gyBankPay">
 						<image src="../../static/img/guiyang-bank-icon.png" mode=""></image>
 						<view class="title">贵州银行</view>
 						<view class="subtitle">前三个月每天首次一分钱<br/>长期八折优惠</view>
@@ -16,213 +22,212 @@
 						<image src="../../static/img/juhe-icon.png" mode=""></image>
 						<view class="title">微信/支付宝</view>
 					</view> -->
-					<view class="pay-way-item pay-way-item-hy" @click="gyBankPay">
-						<image src="/static/img/gyyh-icon.svg" mode=""></image>
-						<view class="title">贵州银行</view>
-					</view>
-					<!-- #ifdef H5 || MP-WEIXIN -->
-					<view class="pay-way-item pay-way-item-wx" @click="wechatPay" v-if="wxEnv">
-						<image src="/static/img/weixin-icon.svg" mode=""></image>
-						<view class="title">微信支付</view>
-					</view>
-					<!-- #endif -->
-					<view class="pay-way-item pay-way-item-jh" @click="juhePay">
-						<image src="/static/img/juhe-icon.svg" mode=""></image>
-						<view class="title">聚合支付</view>
-					</view>
-				</view>
-				<view class="pay-way-subtitle">
-					<view class="pay-way-subtitle-item">前三个月每天首次一分钱，长期八折优惠</view>
-					<!-- #ifdef H5 || MP-WEIXIN -->
-					<view class="pay-way-subtitle-item" v-if="wxEnv">&nbsp;</view>
-					<!-- #endif -->
-					<view class="pay-way-subtitle-item">&nbsp;</view>
-				</view>
-				<button class="pay-way-close-btn" @click="closePaymentMethod">关闭</button>
-			</view>
-		</u-modal>
-		<u-toast ref="uToast" />
-	</view>
+          <view class="pay-way-item pay-way-item-hy" @click="$u.debounce(gyBankPay, 1000, (immediate = true))">
+            <image src="/static/img/gyyh-icon.svg" mode=""></image>
+            <view class="title">贵州银行</view>
+          </view>
+          <!-- #ifdef H5 || MP-WEIXIN -->
+          <view class="pay-way-item pay-way-item-wx" @click="$u.debounce(wechatPay, 1000, (immediate = true))" v-if="wxEnv">
+            <image src="/static/img/weixin-icon.svg" mode=""></image>
+            <view class="title">微信支付</view>
+          </view>
+          <!-- #endif -->
+          <view class="pay-way-item pay-way-item-jh" @click="$u.debounce(juhePay, 1000, (immediate = true))">
+            <image src="/static/img/juhe-icon.svg" mode=""></image>
+            <view class="title">聚合支付</view>
+          </view>
+        </view>
+        <view class="pay-way-subtitle">
+          <view class="pay-way-subtitle-item">前三个月每天首次一分钱，长期八折优惠</view>
+          <!-- #ifdef H5 || MP-WEIXIN -->
+          <view class="pay-way-subtitle-item" v-if="wxEnv">&nbsp;</view>
+          <!-- #endif -->
+          <view class="pay-way-subtitle-item">&nbsp;</view>
+        </view>
+        <button class="pay-way-close-btn" @click="closePaymentMethod">关闭</button>
+      </view>
+    </u-modal>
+    <u-toast ref="uToast" />
+  </view>
 </template>
 
 <script>
-	import getUrlParams from '@/utils/getUrlParams.js';
-	import {
-		getEnvIsWx
-	} from '@/utils/judgEnvironment.js';
-	import $wxPay from '@/utils/wxPay.js'
-	export default {
-		props: {
-			// 弹框显示
-			payWayPop: {
-				type: Boolean,
-				default: false
-			},
-			// 订单数组
-			curOrderList: {
-				type: Array,
-				default: null
-			},
-			// 设备编号
-			deviceNo: {
-				type: String,
-				default: null
-			},
-			// 地磁支付需要字段
-			payeeId: {
-				type: String,
-				default: undefined
-			},
-			// 地磁支付需要字段
-			payeeName: {
-				type: String,
-				default: undefined
-			},
-			// 跳转页面
-			jumpUrl: {
-				type: String,
-				default: null
-			}
-		},
-		data() {
-			return {
-				wxEnv: true
-			};
-		},
-		created() {
-			this.wxEnv = getEnvIsWx();
-		},
-		methods: {
-			/**
-			 * 贵阳银行支付
-			 * @param {Array} orderList 需要支付的订单号组成的数组
-			 * @param {String} deviceNo 设备编号(只有车位锁部分有)
-			 * */
-			gyBankPay() {
-				const params = {
-					orderList: this.curOrderList,
-					deviceNo: this.deviceNo,
-					jumpUrl: this.jumpUrl,
-					payeeId: this.payeeId,
-					payeeName: this.payeeName
-				};
-				this.$u.api
-					.payGzbank(params)
-					.then(res => {
-						if (res.data.needPay) {
-							let payUrl = res.data.url;
-							location.href = payUrl;
-						} else {
-							this.$refs.uToast.show({
-								title: '无需支付',
-								type: 'info'
-							});
-							setTimeout(() => {
-								uni.hideLoading();
-								location.reload();
-							}, 1000);
-						}
-					})
-					.catch(err => {
-						this.$refs.uToast.show({
-							title: err.msg,
-							type: 'error'
-						});
-					});
-			},
-			/**
-			 * 聚合支付
-			 * 判断vuex中是否存在openId
-			 * 存在直接调起微信支付
-			 * 不存在则通过微信登录去获取用户的code
-			 * 完成后通过code去获取用户的openId等信息
-			 * 最后再调起微信支付
-			 * */
-			juhePay() {
-				this.getWXPayByJava(this.curOrderList, this.deviceNo);
-			},
-			/**
-			 * 微信支付
-			 */
-			wechatPay() {
-				this.$u.api.wechatPayApi({
-					orderList: this.curOrderList,
-					openid: this.vuex_wxinfo.openId,
-					deviceNo: this.deviceNo || undefined,
-					payeeId: this.payeeId || undefined,
-					payeeName: this.payeeName || undefined
-				}).then(res => {
-					if (res.code === 200) {
-						$wxPay.wexinPay(res.data.wx).then(res1 => {
-							switch (Number(res1.code)) {
-								case 0: // 成功
-									//#ifdef H5
-									window.location.reload();
-									//#endif
-									break;
-								case 1: // 取消
-									this.$refs.uToast.show({
-										title: '已取消支付',
-										type: 'info'
-									});
-									break;
-								case 2: // 支付失败
-									this.$refs.uToast.show({
-										title: '支付失败，请检查!',
-										type: 'error'
-									});
-									break;
-							}
-						})
-					}
-				})
-			},
-			/**
-			 * 直接通过后台获取贵阳银行微信支付地址
-			 * @param {Array} list 需要支付的订单组合数组
-			 * @param {Number} deviceNo 设备编号(在停车锁部分需要)
-			 * */
-			getWXPayByJava(orderList, deviceNo) {
-				let params = {
-					orderList: orderList,
-					openid: '',
-					jumpUrl: this.jumpUrl,
-					deviceNo: deviceNo ? deviceNo : null,
-					payeeId: this.payeeId,
-					payeeName: this.payeeName
-				};
-				this.$u.api
-					.ordinaryWxPay(params)
-					.then(res => {
-						if (res.code === 200) {
-							// if (getEnvIsWx()) {
-							// 	location.href = res.data.qrCodeUrl + '&jump_url=' + encodeURIComponent(this.jumpUrl)
-							// } else {
-							// 	location.href = res.data.qrCodeUrl
-							// }
-							localStorage.setItem('jumpUrl', this.jumpUrl);
-							location.href = res.data.qrCodeUrl;
-						} else {
-							uni.hideLoading();
-						}
-					})
-					.catch(err => {
-						this.$refs.uToast.show({
-							title: '无法调起微信支付!',
-							type: 'error'
-						});
-					});
-			},
-			/**
-			 * 关闭弹框
-			 * */
-			closePaymentMethod() {
-				this.$emit('closePaymentMethod');
-			}
-		}
-	};
+import { getEnvIsWx } from '@/utils/judgEnvironment.js';
+import $wxPay from '@/utils/wxPay.js';
+export default {
+  props: {
+    // 弹框显示
+    payWayPop: {
+      type: Boolean,
+      default: false
+    },
+    // 订单数组
+    curOrderList: {
+      type: Array,
+      default: null
+    },
+    // 设备编号
+    deviceNo: {
+      type: String,
+      default: null
+    },
+    // 地磁支付需要字段
+    payeeId: {
+      type: String,
+      default: undefined
+    },
+    // 地磁支付需要字段
+    payeeName: {
+      type: String,
+      default: undefined
+    },
+    // 跳转页面
+    jumpUrl: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {
+      wxEnv: true
+    };
+  },
+  created() {
+    this.wxEnv = getEnvIsWx();
+  },
+  methods: {
+    /**
+     * 贵阳银行支付
+     * @param {Array} orderList 需要支付的订单号组成的数组
+     * @param {String} deviceNo 设备编号(只有车位锁部分有)
+     * */
+    gyBankPay() {
+      const params = {
+        orderList: this.curOrderList,
+        deviceNo: this.deviceNo,
+        jumpUrl: this.jumpUrl,
+        payeeId: this.payeeId,
+        payeeName: this.payeeName
+      };
+      this.$u.api
+        .payGzbank(params)
+        .then((res) => {
+          if (res.data.needPay) {
+            let payUrl = res.data.url;
+            location.href = payUrl;
+          } else {
+            this.$refs.uToast.show({
+              title: '无需支付',
+              type: 'info'
+            });
+            setTimeout(() => {
+              uni.hideLoading();
+              location.reload();
+            }, 1000);
+          }
+        })
+        .catch((err) => {
+          this.$refs.uToast.show({
+            title: err.msg,
+            type: 'error'
+          });
+        });
+    },
+    /**
+     * 聚合支付
+     * 判断vuex中是否存在openId
+     * 存在直接调起微信支付
+     * 不存在则通过微信登录去获取用户的code
+     * 完成后通过code去获取用户的openId等信息
+     * 最后再调起微信支付
+     * */
+    juhePay() {
+      this.getWXPayByJava(this.curOrderList, this.deviceNo);
+    },
+    /**
+     * 微信支付
+     */
+    wechatPay() {
+      this.$u.api
+        .wechatPayApi({
+          orderList: this.curOrderList,
+          openid: this.vuex_wxinfo.openId,
+          deviceNo: this.deviceNo || undefined,
+          payeeId: this.payeeId || undefined,
+          payeeName: this.payeeName || undefined
+        })
+        .then((res) => {
+          if (res.code === 200) {
+            $wxPay.wexinPay(res.data.wx).then((res1) => {
+              switch (Number(res1.code)) {
+                case 0: // 成功
+                  //#ifdef H5
+                  window.location.reload();
+                  //#endif
+                  break;
+                case 1: // 取消
+                  this.$refs.uToast.show({
+                    title: '已取消支付',
+                    type: 'info'
+                  });
+                  break;
+                case 2: // 支付失败
+                  this.$refs.uToast.show({
+                    title: '支付失败，请检查!',
+                    type: 'error'
+                  });
+                  break;
+              }
+            });
+          }
+        });
+    },
+    /**
+     * 直接通过后台获取贵阳银行微信支付地址
+     * @param {Array} list 需要支付的订单组合数组
+     * @param {Number} deviceNo 设备编号(在停车锁部分需要)
+     * */
+    getWXPayByJava(orderList, deviceNo) {
+      let params = {
+        orderList: orderList,
+        openid: '',
+        jumpUrl: this.jumpUrl,
+        deviceNo: deviceNo ? deviceNo : null,
+        payeeId: this.payeeId,
+        payeeName: this.payeeName
+      };
+      this.$u.api
+        .ordinaryWxPay(params)
+        .then((res) => {
+          if (res.code === 200) {
+            // if (getEnvIsWx()) {
+            // 	location.href = res.data.qrCodeUrl + '&jump_url=' + encodeURIComponent(this.jumpUrl)
+            // } else {
+            // 	location.href = res.data.qrCodeUrl
+            // }
+            localStorage.setItem('jumpUrl', this.jumpUrl);
+            location.href = res.data.qrCodeUrl;
+          } else {
+            uni.hideLoading();
+          }
+        })
+        .catch((err) => {
+          this.$refs.uToast.show({
+            title: '无法调起微信支付!',
+            type: 'error'
+          });
+        });
+    },
+    /**
+     * 关闭弹框
+     * */
+    closePaymentMethod() {
+      this.$emit('closePaymentMethod');
+    }
+  }
+};
 </script>
 
 <style lang="scss" scoped>
-	@import './paymentMethod.scss';
+@import './paymentMethod.scss';
 </style>