feat: 支付的时候防止重复点击

src/main.js

@@ -16,6 +16,8 @@ app.$mount();
 import { createSSRApp } from "vue";
 import * as Pinia from "pinia";
 import { createUnistorage } from "pinia-plugin-unistorage";
+import noclick from "./utils/noclick";
+
 export function createApp() {
   const app = createSSRApp(App);
   const pinia = Pinia.createPinia();
@@ -23,10 +25,11 @@ export function createApp() {
   pinia.use(createUnistorage());
   app.use(pinia);
   app.use(share);
+  app.use(noclick);
 
   return {
     app,
     pinia,
   };
 }
-// #endif
+// #endif

src/pages-booking/components/FooterSection/index.vue

@@ -21,7 +21,7 @@
       />
       <text
         class="font-size-16 font-500 color-white"
-        @click="emit('payClick', orderData)"
+        @click="$onMultipleClicks(() => emit('payClick', orderData))"
         >立即支付</text
       >
     </view>

src/pages-order/order/components/FooterSection/index.vue

@@ -17,7 +17,7 @@
           'bg-2D91FF': ['1', '2', '3', '4', '5', '6'].includes(statusCode),
         },
       ]"
-      @click="handleButtonClick(orderData)"
+      @click="$onmultipleClicks(() => handleButtonClick(orderData))"
     >
       {{ buttonText }}
     </button>

src/utils/noclick.js

@@ -0,0 +1,28 @@
+// 防止处理多次点击
+// methods是需要点击后需要执行的函数， info是点击需要传的参数
+export function noMultipleClicks(fn, info, delay = 2000) {
+  if (typeof fn !== 'function') return;
+  // this 会是组件实例（因为通过 globalProperties 调用时 Vue 会把组件实例作为上下文）
+  const ctx = this || {};
+  if (!ctx.__noClickMap) ctx.__noClickMap = new WeakMap();
+
+  const map = ctx.__noClickMap;
+  if (map.get(fn)) {
+    console.log('请勿重复点击:', fn.name);
+    return;
+  }
+
+  map.set(fn, true);
+  // 保留组件上下文调用方法
+  fn.call(ctx, info);
+
+  setTimeout(() => {
+    map.set(fn, false);
+  }, delay);
+}
+
+export default {
+  install(app) {
+    app.config.globalProperties.$noMultipleClicks = noMultipleClicks;
+  }
+}