feat: 商品详情交互开发

pages/goods/index.vue

@@ -12,7 +12,7 @@
 
       <view class="goods-content">
         <!-- 商品信息组件 -->
-        <GoodInfo :goodsData="goodsData" />
+        <GoodInfo :goodsData="goodsData" @showCalendar="showCalendar" />
 
         <ModuleTitle title="购买须知" />
 
@@ -36,21 +36,32 @@
       @confirm="handleConfirmOrder"
       @close="handleCloseConfirm"
     />
+
+    <!-- 日历组件 -->
+    <Calender
+      :visible="calendarVisible"
+      mode="range"
+      @close="handleCalendarClose"
+      @range-select="handleDateSelect"
+    />
   </view>
 </template>
 
 <script setup>
 import { ref } from "vue";
 import { onLoad } from "@dcloudio/uni-app";
-import { goodsDetail } from "@/request/api/GoodsApi";
+import { goodsDetail, orderPay } from "@/request/api/GoodsApi";
 import TopNavBar from "@/components/TopNavBar/index.vue";
 import ImageSwiper from "@/components/ImageSwiper/index.vue";
 import GoodInfo from "./components/GoodInfo/index.vue";
 import ModuleTitle from "@/components/ModuleTitle/index.vue";
 import GoodConfirm from "./components/GoodConfirm/index.vue";
+import Calender from "@/components/Calender/index.vue";
 
+const calendarVisible = ref(false);
 const goodsData = ref({});
 const goodConfirmRef = ref(null);
+const selectedDate = ref("");
 
 // 获取商品详情数据
 const goodsInfo = async (params) => {
@@ -61,20 +72,71 @@ const goodsInfo = async (params) => {
 
 // 显示确认弹窗
 const showConfirmPopup = () => {
+  // 当商品类型为"0"时，需要校验入住和离店日期
+  if (goodsData.value.commodityTypeCode === "0") {
+    // 检查是否已选择日期
+    if (
+      !selectedDate.value ||
+      !selectedDate.value.startDate ||
+      !selectedDate.value.endDate
+    ) {
+      calendarVisible.value = true;
+
+      uni.showToast({
+        title: "请先选择入住和离店日期",
+        icon: "none",
+        duration: 2000,
+      });
+      return;
+    }
+  }
+
+  // 校验通过或非住宿类商品，显示确认弹窗
   goodConfirmRef.value?.showPopup();
 };
 
 // 处理确认订单
-const handleConfirmOrder = (orderData) => {
+const handleConfirmOrder = async (orderData) => {
   console.log("确认订单:", orderData);
+  // const commodityId = orderData.commodityId;
+  // const purchaseAmount = orderData.purchaseAmount;
+  // const checkInData = orderData.checkInData;
+  // const checkOutData = orderData.checkOutData;
+  // const consumerInfoEntityList = orderData.consumerInfoEntityList;
+  // const payWay = "0";
+  // const paySource = "1";
+
+  // const params = {
+  //   commodityId,
+  //   purchaseAmount,
+  //   payWay,
+  //   paySource,
+  //   consumerInfoEntityList,
+  //   checkInData,
+  //   checkOutData,
+  // };
+  // const res = await orderPay(params);
+
+  // 仅作为示例，非真实参数信息。
+  // uni.requestPayment({
+  //   provider: "wxpay",
+  //   timeStamp: String(Date.now()),
+  //   nonceStr: "A1B2C3D4E5",
+  //   package: "prepay_id=wx20180101abcdefg",
+  //   signType: "MD5",
+  //   paySign: "",
+  //   success: (res) => {
+  //     console.log("success:" + JSON.stringify(res));
+  //   },
+  //   fail: (err) => {
+  //     console.log("fail:" + JSON.stringify(err));
+  //   },
+  // });
+
   uni.showToast({
     title: "订单确认成功",
     icon: "success",
   });
-  // 这里可以跳转到订单页面或支付页面
-  // uni.navigateTo({
-  //   url: '/pages/order/detail?orderId=' + orderData.orderId
-  // });
 };
 
 // 处理关闭弹窗
@@ -85,6 +147,25 @@ const handleCloseConfirm = () => {
 onLoad(({ commodityId = "1950766939442774018" }) => {
   goodsInfo({ commodityId });
 });
+
+// 显示日历弹窗
+const showCalendar = () => (calendarVisible.value = true);
+
+const handleCalendarClose = () => (calendarVisible.value = false);
+
+const handleDateSelect = (data) => {
+  console.log("选择的日期:", data);
+
+  // 保存选择的日期范围
+  selectedDate.value = {
+    startDate: data.startDate,
+    endDate: data.endDate,
+    totalDays: data.totalDays,
+  };
+
+  // 日历组件会自动关闭，无需手动设置
+  calendarVisible.value = false;
+};
 </script>
 
 <style scoped lang="scss">