YGChatCS/pages/goods/index.vue

<template>
  <view class="goods-container">
    <TopNavBar title="商品详情" />

    <!-- 滚动区域 -->
    <scroll-view class="content-wrapper" scroll-y>
      <ImageSwiper
        :border-radius="0"
        :height="300"
        :images="goodsData.commodityPhotoList"
      />

      <view class="goods-content">
        <!-- 商品信息组件 -->
        <GoodInfo :goodsData="goodsData" @showCalendar="showCalendar" />

        <ModuleTitle title="购买须知" />

        <zero-markdown-view :markdown="goodsData.commodityTip" />
      </view>
    </scroll-view>

    <!-- 立即抢购 -->
    <view class="footer">
      <view class="left">
        <text class="label">价格：</text>
        <text class="price">{{ goodsData.specificationPrice || 399 }}</text>
      </view>
      <view class="buy-button" @click="showConfirmPopup">立即抢购</view>
    </view>

    <!-- 商品确认弹窗 -->
    <GoodConfirm
      ref="goodConfirmRef"
      :goodsData="goodsData"
      @confirm="handleConfirmOrder"
      @close="handleCloseConfirm"
    />

    <!-- 日历组件 -->
    <Calender
      :visible="calendarVisible"
      :price-data="priceData"
      mode="range"
      @close="handleCalendarClose"
      @range-select="handleDateSelect"
    />
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import {
  goodsDetail,
  commodityDailyPriceList,
  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 priceData = ref([]);

// 获取商品详情数据
const goodsInfo = async (params) => {
  const res = await goodsDetail(params);

  goodsData.value = res.data;

  // 判断是酒店类型订单再获取获取商品日价格及库存
  if (goodsData.value.commodityTypeCode === "0") {
    getGoodsDailyPrice({
      commodityId: goodsData.value.commodityId,
    });
  }
};

// 获取商品日价格及库存
const getGoodsDailyPrice = async (params) => {
  const res = await commodityDailyPriceList(params);

  priceData.value = res.data;
};

// 显示确认弹窗
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 = 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",
  });
};

// 处理关闭弹窗
const handleCloseConfirm = () => {
  console.log("关闭确认弹窗");
};

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">
@import "./styles/index.scss";
</style>