feat: 订单支付|商品详情调整

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

@@ -27,7 +27,7 @@
       <view class="right">
         <input
           class="border-box rounded-8 px-4 py-2 font-size-15 color-000 line-height-20"
-          v-model="userFormList[0].contactPhone"
+          v-model.trim="userFormList[0].contactPhone"
           placeholder="请输入联系手机"
           maxlength="11"
         />

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

@@ -19,7 +19,7 @@
         <view class="right">
           <input
             class="border-box rounded-8 px-4 py-2 font-size-15 color-000 line-height-20"
-            v-model="item.visitorName"
+            v-model.trim="item.visitorName"
             placeholder="请输入姓名"
             maxlength="11"
           />
@@ -31,7 +31,7 @@
         <view class="right">
           <input
             class="border-box rounded-8 px-4 py-2 font-size-15 color-000 line-height-20"
-            v-model="userFormList[0].contactPhone"
+            v-model.trim="userFormList[0].contactPhone"
             placeholder="请输入联系手机"
             maxlength="11"
           />

src/pages-booking/index.vue

@@ -102,10 +102,10 @@ import UserSection from "./components/UserSection/index.vue";
 import RefundPopup from "@/components/RefundPopup/index.vue";
 import DetailPopup from "@/components/DetailPopup/index.vue";
 import FooterSection from "./components/FooterSection/index.vue";
-import { goodsDetail } from "@/request/api/GoodsApi";
+import { goodsDetail, orderPay } from "@/request/api/GoodsApi";
 import { useSelectedDateStore } from "@/store";
 import { GOODS_TYPE } from "@/constant/type";
-import { PhoneUtils } from "@/utils";
+import { ThrottleUtils, PhoneUtils } from "@/utils";
 
 const refundVisible = ref(false);
 const detailVisible = ref(false);
@@ -190,18 +190,113 @@ const navigateToDetail = ({ commodityId }) => {
   });
 };
 
+// 验证用户姓名
+const validateUserForms = () => {
+  const invalidUsers = userFormList.value.filter((user) => {
+    return user.visitorName.trim() === "";
+  });
+
+  if (invalidUsers.length) {
+    uni.showToast({ title: "请填写住客姓名", icon: "none" });
+    return false;
+  }
+
+  return true;
+};
+
 // 处理支付点击事件
-const handlePayClick = (orderData) => {
+const handlePayClick = ThrottleUtils.createThrottle(async (goodsData) => {
   console.log("处理支付点击事件", userFormList.value);
+  // 判断是酒店类型
+  if (goodsData.commodityTypeCode === "0") {
+    // 校验用户姓名
+    if (!validateUserForms()) {
+      return;
+    }
+  }
   // 校验手机号
   if (!PhoneUtils.validatePhone(userFormList.value[0].contactPhone)) {
-    uni.showToast({
-      title: "请输入正确的手机号",
-      icon: "none",
-    });
+    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>
 
 <style scoped lang="scss">