fix(预约提交): 添加提交状态检查防止重复提交并优化支付流程

添加 is_submitting 状态防止重复提交订单优化支付流程的错误处理和状态重置提取刷新参观者列表为独立函数复用逻辑

fix(预约提交): 添加提交状态检查防止重复提交并优化支付流程
添加 is_submitting 状态防止重复提交订单优化支付流程的错误处理和状态重置提取刷新参观者列表为独立函数复用逻辑
hookehuyr
Commit 4f6fb2c51dbb1e1025073cc21855101f6c19928f 4f6fb2c5 1 parent e2488353
Showing 1 changed file with 50 additions and 22 deletions
src/pages/submit/index.vue
--- a/src/pages/submit/index.vue
View file @4f6fb2c
+++ b/src/pages/submit/index.vue
View file @4f6fb2c
 <!--
  * @Date: 2024-01-15 16:25:51
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2026-01-16 17:38:55
+ * @LastEditTime: 2026-01-16 18:01:23
  * @FilePath: /xyxBooking-weapp/src/pages/submit/index.vue
  * @Description: 预约人员信息
 -->
@@ -100,6 +100,7 @@ const RESERVE_STATUS = {
 }
 const checked_visitors = ref([]);
+const is_submitting = ref(false); // 是否正在提交订单
 const addVisitor = (item) => {
   if (item.is_reserve === RESERVE_STATUS.ENABLE) { // 今天已经预约
     Taro.showToast({ title: '已预约过参观，请不要重复预约', icon: 'none' })
@@ -128,43 +129,74 @@ const pending_pay_id = ref(null);
 // 待支付订单是否需要支付
 const pending_need_pay = ref(null);
+/**
+ * 刷新参观者列表
+ */
+
+const refreshVisitorList = async (options) => {
+  if (!date.value || !time.value) return;
+  const res = await personListAPI({
+    reserve_date: date.value,
+    begin_time: time.value.split('-')[0],
+    end_time: time.value.split('-')[1],
+    period_type: period_type.value
+  });
+  if (res && res.code) {
+    visitorList.value = res.data || [];
+    if (options?.reset_checked) {
+      checked_visitors.value = [];
+    }
+  }
+}
+
 const submitBtn = async () => {
+  if (is_submitting.value) return;
   if (!checked_visitors.value.length) {
     Taro.showToast({ title: '请先添加参观者', icon: 'none' })
     return;
   }
+  is_submitting.value = true;
+  try {
     let pay_id = pending_pay_id.value;
     let need_pay = pending_need_pay.value;
     if (!pay_id) { // TAG: 提交订单, 如果没有待支付订单ID, 则创建一个新的订单
       Taro.showLoading({ title: '提交中...' });
-    const { code, data, msg } = await addReserveAPI({
+      let reserve_res = null;
+      try {
+        reserve_res = await addReserveAPI({
           reserve_date: date.value,
           begin_time: time.value.split('-')[0],
           end_time: time.value.split('-')[1],
           person_id_list: JSON.stringify(checked_visitors.value),
           period_type: period_type.value
         });
-
+      } finally {
         Taro.hideLoading();
+      }
-    if (code != 1) {
+      if (!reserve_res || reserve_res.code != 1) {
         return;
       }
-    pay_id = data.pay_id;
+      pay_id = reserve_res.data.pay_id;
       pending_pay_id.value = pay_id;
-    need_pay = data?.need_pay;
+      need_pay = reserve_res.data?.need_pay;
       pending_need_pay.value = need_pay;
+      await refreshVisitorList({ reset_checked: true });
     }
     // 以接口返回的 need_pay 为准：1=需要支付，0=不需要支付
     if (Number(need_pay) === 1 || need_pay === true) {
       Taro.showLoading({ title: '支付准备中...' });
-    const payParams = await wxPayAPI({ pay_id }); // 参数接口
+      let payParams = null;
+      try {
+        payParams = await wxPayAPI({ pay_id }); // 参数接口
+      } finally {
         Taro.hideLoading();
+      }
-    if (payParams.code) {
+      if (payParams && payParams.code == 1) {
         let pay_params = payParams.data;
         Taro.requestPayment({
           timeStamp: pay_params.timeStamp,
@@ -178,21 +210,22 @@ const submitBtn = async () => {
             go('/success', { pay_id });
           },
           fail(res) {
-          // 支付取消或失败，保留 pending_pay_id，允许用户再次点击按钮尝试支付同一订单
+            refreshVisitorList({ reset_checked: true }).catch(() => {});
-          // 只有当 wxPayAPI 获取支付参数失败时（如下面的 else 分支），才重置 ID 以便重新创建订单
+            Taro.showToast({ title: '支付未完成，可再次点击提交订单继续支付', icon: 'none' });
-          Taro.showToast({ title: '支付失败，请重试', icon: 'none' });
           }
         })
       } else {
-      pending_pay_id.value = null; // 支付参数获取失败，重置订单ID
+        refreshVisitorList({ reset_checked: true }).catch(() => {});
-      pending_need_pay.value = null; // 支付参数获取失败，重置是否需要支付标志
+        Taro.showToast({ title: payParams?.msg || '获取支付信息失败', icon: 'none' });
-      Taro.showToast({ title: payParams.msg || '获取支付信息失败', icon: 'none' });
       }
     } else {
-    pending_pay_id.value = null; // 不需要支付，重置订单ID
+      pending_pay_id.value = null;
-    pending_need_pay.value = null; // 不需要支付，重置是否需要支付标志
+      pending_need_pay.value = null;
       go('/success', { pay_id });
     }
+  } finally {
+    is_submitting.value = false;
+  }
 }
 useDidShow(async () => {
@@ -202,12 +235,7 @@ useDidShow(async () => {
   price.value = params.price || 0;
   period_type.value = params.period_type || '';
-  if (date.value && time.value) {
+  await refreshVisitorList();
-    const { code, data } = await personListAPI({ reserve_date: date.value, begin_time: time.value.split('-')[0], end_time: time.value.split('-')[1], period_type: period_type.value });
-    if (code) {
-      visitorList.value = data || [];
-    }
-  }
 });
 </script>