feat: 提交订单的loading 添加

src/pages-booking/index.vue

@@ -203,96 +203,107 @@ const validateUserForms = () => {
 
 // 处理支付点击事件
 const handlePayClick = ThrottleUtils.createThrottle(async (goodsData) => {
-  console.log("处理支付点击事件", userFormList.value);
+  // 点击后立即展示 loading
-  // 判断是酒店类型
+  uni.showLoading({ title: "正在提交订单..." });
-  if (goodsData.commodityTypeCode === "0") {
+
-    // 校验用户姓名
+  try {
-    if (!validateUserForms()) {
+    console.log("处理支付点击事件", userFormList.value);
+    // 判断是酒店类型
+    if (goodsData.commodityTypeCode === "0") {
+      // 校验用户姓名
+      if (!validateUserForms()) {
+        uni.hideLoading();
+        return;
+      }
+    }
+    // 校验手机号
+    if (!PhoneUtils.validatePhone(userFormList.value[0].contactPhone)) {
+      uni.hideLoading();
+      uni.showToast({ title: "请输入正确的手机号", icon: "none" });
       return;
     }
+
+    // 购买的商品id
+    const commodityId = goodsData.commodityId;
+    // 消费者信息
+    const consumerInfoEntityList = userFormList.value;
+    // 购买数量
+    const purchaseAmount = consumerInfoEntityList.length;
+    // 支付方式 0-微信 1-支付宝 2-云闪付
+    const payWay = "0";
+    // 支付渠道 0-app 1-小程序 2-h5
+    const paySource = "1";
+
+    const params = {
+      commodityId,
+      purchaseAmount,
+      payWay,
+      paySource,
+      consumerInfoEntityList,
+    };
+
+    //酒店类型添加入住时间、离店时间
+    if (goodsData.commodityTypeCode === "0" && selectedDate.value) {
+      const { startDate, endDate } = selectedDate.value;
+      // 入住时间
+      params.checkInData = startDate;
+      // 离店时间
+      params.checkOutData = endDate;
+    }
+
+    const res = await orderPay(params);
+    console.log("确认订单---2:", res);
+
+    // 检查接口返回数据
+    if (!res || !res.data) {
+      uni.hideLoading();
+      uni.showToast({ title: "订单创建失败，请重试", icon: "none" });
+      return;
+    }
+
+    const { data } = res;
+    const { nonceStr, packageVal, paySign, signType, timeStamp } = data;
+
+    // 验证支付参数是否完整
+    if (!nonceStr || !packageVal || !paySign || !signType || !timeStamp) {
+      uni.hideLoading();
+      uni.showToast({ title: "支付参数错误，请重试", icon: "none" });
+      return;
+    }
+
+    // 在发起微信支付前关闭 loading（避免与原生支付 UI 冲突）
+    uni.hideLoading();
+
+    // 调用微信支付
+    uni.requestPayment({
+      provider: "wxpay",
+      timeStamp: String(timeStamp), // 确保为字符串类型
+      nonceStr: String(nonceStr),
+      package: String(packageVal), // 确保为字符串类型
+      signType: String(signType),
+      paySign: String(paySign),
+      success: () => {
+        uni.showToast({
+          title: "支付成功",
+          icon: "success",
+          success: () => {
+            uni.navigateTo({
+              url: "/pages-order/order/list",
+            });
+          },
+        });
+      },
+      fail: () => {
+        uni.showToast({ title: "支付失败，请重试", icon: "none" });
+      },
+    });
+  } catch (error) {
+    console.error(error);
+    uni.showToast({ title: "请求出错，请重试", icon: "none" });
+  } finally {
+    // 防止某些分支忘记 hide，确保最终关闭 loading（requestPayment 后也可以安全调用 hide）
+    uni.hideLoading();
   }
-  // 校验手机号
-  if (!PhoneUtils.validatePhone(userFormList.value[0].contactPhone)) {
-    uni.showToast({ title: "请输入正确的手机号", icon: "none" });
-    return;
-  }
-
-  // 购买的商品id
-  const commodityId = goodsData.commodityId;
-  // 消费者信息
-  const consumerInfoEntityList = userFormList.value;
-  // 购买数量
-  const purchaseAmount = consumerInfoEntityList.length;
-  // 支付方式 0-微信 1-支付宝 2-云闪付
-  const payWay = "0";
-  // 支付渠道 0-app 1-小程序 2-h5
-  const paySource = "1";
-
-  const params = {
-    commodityId,
-    purchaseAmount,
-    payWay,
-    paySource,
-    consumerInfoEntityList,
-  };
-
-  //酒店类型添加入住时间、离店时间
-  if (goodsData.commodityTypeCode === "0" && selectedDate.value) {
-    const { startDate, endDate } = selectedDate.value;
-    // 入住时间
-    params.checkInData = startDate;
-    // 离店时间
-    params.checkOutData = endDate;
-  }
-
-  const res = await orderPay(params);
-  console.log("确认订单---2:", res);
-
-  // 检查接口返回数据
-  if (!res || !res.data) {
-    uni.showToast({ title: "订单创建失败，请重试", icon: "none" });
-    return;
-  }
-
-  const { data } = res;
-  const { nonceStr, packageVal, paySign, signType, timeStamp } = data;
-
-  // 验证支付参数是否完整
-  if (!nonceStr || !packageVal || !paySign || !signType || !timeStamp) {
-    // console.error("支付参数不完整:", {
-    //   nonceStr: !!nonceStr,
-    //   packageVal: !!packageVal,
-    //   paySign: !!paySign,
-    //   signType: !!signType,
-    //   timeStamp: !!timeStamp,
-    // });
-    uni.showToast({ title: "支付参数错误，请重试", icon: "none" });
-    return;
-  }
-
-  // 调用微信支付
-  uni.requestPayment({
-    provider: "wxpay",
-    timeStamp: String(timeStamp), // 确保为字符串类型
-    nonceStr: String(nonceStr),
-    package: String(packageVal), // 确保为字符串类型
-    signType: String(signType),
-    paySign: String(paySign),
-    success: () => {
-      uni.showToast({
-        title: "支付成功",
-        icon: "success",
-        success: () => {
-          uni.navigateTo({
-            url: "/pages-order/order/list",
-          });
-        },
-      });
-    },
-    fail: () => {
-      uni.showToast({ title: "支付失败，请重试", icon: "none" });
-    },
-  });
 }, 1000);
 </script>
 

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

@@ -71,10 +71,14 @@ const handleButtonClick = async (orderData) => {
       uni.navigateTo({
         url: `/pages/goods/index?commodityId=${orderData.commodityId}`,
       });
+      return;
     }
 
     // 待支付状态，调用支付接口
     if (statusCode.value === "0") {
+      // 显示 loading
+      uni.showLoading({ title: "正在提交订单..." });
+
       const orderId = orderData.orderId;
       const payWay = orderData.payWay;
       const paySource = orderData.paySource;
@@ -84,6 +88,7 @@ const handleButtonClick = async (orderData) => {
 
       // 检查接口返回数据
       if (!res || !res.data) {
+        uni.hideLoading();
         uni.showToast({ title: "订单创建失败，请重试", icon: "none" });
         return;
       }
@@ -93,17 +98,14 @@ const handleButtonClick = async (orderData) => {
 
       // 验证支付参数是否完整
       if (!nonceStr || !packageVal || !paySign || !signType || !timeStamp) {
-        // console.error("支付参数不完整:", {
+        uni.hideLoading();
-        //   nonceStr: !!nonceStr,
-        //   packageVal: !!packageVal,
-        //   paySign: !!paySign,
-        //   signType: !!signType,
-        //   timeStamp: !!timeStamp,
-        // });
         uni.showToast({ title: "支付参数错误，请重试", icon: "none" });
         return;
       }
 
+      // 在发起微信支付前关闭 loading（避免与原生支付 UI 冲突）
+      uni.hideLoading();
+
       // 调用微信支付
       uni.requestPayment({
         provider: "wxpay",
@@ -126,6 +128,7 @@ const handleButtonClick = async (orderData) => {
     }
   } catch (error) {
     console.error("操作失败:", error);
+    uni.hideLoading();
   }
 };
 </script>