更新:加按钮节流

This commit is contained in:
2025-11-28 11:48:39 +08:00
parent 12de098e10
commit 3587e15e7a
3 changed files with 55 additions and 4 deletions

View File

@@ -195,6 +195,7 @@ export async function submitFeedback(data: IFeedbackForm) {
* @param productId 产品ID * @param productId 产品ID
*/ */
export async function verifyGooglePay(productId: number, purchaseToken: string, orderSn: string) { export async function verifyGooglePay(productId: number, purchaseToken: string, orderSn: string) {
console.log(productId, purchaseToken, orderSn);
const res = await mainClient.request<IApiResponse>({ const res = await mainClient.request<IApiResponse>({
url: 'pay/googlepay/googleVerify', url: 'pay/googlepay/googleVerify',
method: 'POST', method: 'POST',

39
hooks/useThrottle.ts Normal file
View File

@@ -0,0 +1,39 @@
import { ref } from 'vue';
/**
* 按钮节流Hook
* @param callback 点击后执行的业务逻辑回调
* @param delay 节流时间默认1500ms
* @returns 节流后的点击事件函数
* @template T 回调函数的参数类型(支持多参数元组)
*/
export const useThrottle = <T extends any[]>(
callback: (...args: T) => void | Promise<void>,
delay: number = 1500
) => {
// 标记是否可点击
const isClickable = ref(true);
// 节流后的函数,支持传递任意参数
const throttledFn = async (...args: T) => {
if (!isClickable.value) return;
// 锁定按钮
isClickable.value = false;
try {
// 执行业务回调,支持异步函数
await callback(...args);
} catch (error) {
console.error('节流回调执行失败:', error);
throw error; // 抛出错误,方便组件内捕获
} finally {
// 延迟后解锁按钮(无论成功/失败都解锁)
setTimeout(() => {
isClickable.value = true;
}, delay);
}
};
return throttledFn;
};

View File

@@ -66,6 +66,7 @@
import { useMessage } from '@/uni_modules/wot-design-uni' import { useMessage } from '@/uni_modules/wot-design-uni'
import { getBookBuyConfigList, getAgreement, getActivityDescription, verifyGooglePay, getPlaceOrder } from '@/api/modules/user' import { getBookBuyConfigList, getAgreement, getActivityDescription, verifyGooglePay, getPlaceOrder } from '@/api/modules/user'
import { useUserStore } from '@/stores/user' import { useUserStore } from '@/stores/user'
import { useThrottle } from '@/hooks/useThrottle';
const googlePay = uni.requireNativePlugin("sn-googlepay5"); const googlePay = uni.requireNativePlugin("sn-googlepay5");
const userStore = useUserStore() const userStore = useUserStore()
@@ -226,7 +227,11 @@
// payType.value = val; // payType.value = val;
} }
const handleRecharge = async () => { /**
* 点击支付按钮
*/
const paymentButton = async () => {
if (!state.value) { if (!state.value) {
uni.showToast({ uni.showToast({
title: t('order.readAgreeServices'), title: t('order.readAgreeServices'),
@@ -237,7 +242,8 @@
getPlaceOrderObj() getPlaceOrderObj()
uni.showLoading({ title: '生成订单中...' }) uni.showLoading({ title: '生成订单中...' })
} }
// 节流支付按钮
const handleRecharge = useThrottle(paymentButton);
/** /**
* 初始化 * 初始化
@@ -275,6 +281,11 @@
getPayAll() getPayAll()
} else { } else {
console.log('查询失败', e); console.log('查询失败', e);
uni.showToast({
title: 'No product found.',
icon: 'none',
duration: 2000
})
// 查询失败 // 查询失败
} }
} }
@@ -326,12 +337,12 @@
}, },
); );
} }
/** /**
* 校验订单 * 校验订单
*/ */
const googleVerify = async () => { const googleVerify = async () => {
console.log(typeof aloneItem.value.priceTypeId, typeof purchaseToken.value, typeof orderSn.value); console.log(typeof aloneItem.value.priceTypeId, typeof purchaseToken.value, typeof orderSn.value);
try { try {
const obj = await verifyGooglePay(aloneItem.value.priceTypeId, purchaseToken.value, orderSn.value) const obj = await verifyGooglePay(aloneItem.value.priceTypeId, purchaseToken.value, orderSn.value)
uni.switchTab({ uni.switchTab({