feat: 商品详情交互开发

2025-08-04 21:31:11 +08:00
parent 9546662cc9
commit a6bd06e06c
7 changed files with 182 additions and 40 deletions
--- a/components/Calender/index.vue
+++ b/components/Calender/index.vue
@@ -1,5 +1,10 @@
 <template>
-  <uni-popup ref="popup" type="bottom" @maskClick="handleMaskClick">
+  <uni-popup
+    ref="popup"
+    type="bottom"
+    :safe-area="false"
+    @maskClick="handleMaskClick"
+  >
    <!-- 弹窗主体 -->
    <view class="calendar-popup" @tap.stop>
      <!-- 头部区域 -->
@@ -7,7 +12,7 @@
        <view class="header-content">
          <text class="header-title">日历选择</text>
          <text class="header-subtitle"
-            >选择入住和离店日期，以下价格为单晚参考价</text
+            >选择住宿日期，以下价格为单晚参考价</text
          >
        </view>
        <view class="header-close" @tap="handleClose">
@@ -269,8 +274,12 @@ const getDateLabel = (dateStr) => {
    return props.customLabels[dateStr];
  }

-  // 为范围选择模式自动生成入住/离店标签
+  // 为范围选择模式自动生成住/离标签
  if (props.mode === "range") {
+    if (dateStr === rangeStart.value && dateStr === rangeEnd.value) {
+      // 当入住和离店是同一天时，显示"住/离"
+      return "住/离";
+    }
    if (dateStr === rangeStart.value) {
      return "入住";
    }
@@ -343,26 +352,26 @@ const handleRangeSelection = (dateInfo) => {
    rangeEnd.value = dateInfo.date;
    isRangeSelecting.value = false;

-    // 确保开始日期小于结束日期
+    // 允许选择相同日期，但确保开始日期不大于结束日期
    if (new Date(rangeStart.value) > new Date(rangeEnd.value)) {
      [rangeStart.value, rangeEnd.value] = [rangeEnd.value, rangeStart.value];
    }

-    // 检查日期跨度是否超过28天
+    // 检查日期跨度是否超过28天（相同日期跨度为0天，允许通过）
    const daysBetween = calculateDaysBetween(rangeStart.value, rangeEnd.value);
    if (daysBetween > 28) {
      // 使用uni.showToast显示错误提示
      uni.showToast({
-        title: '预定时间不能超过28天',
-        icon: 'none',
-        duration: 3000
+        title: "预定时间不能超过28天",
+        icon: "none",
+        duration: 3000,
      });
-      
+
      // 重置选择状态
      rangeStart.value = null;
      rangeEnd.value = null;
      isRangeSelecting.value = false;
-      
+
      return;
    }

--- a/pages/goods/components/GoodConfirm/index.vue
+++ b/pages/goods/components/GoodConfirm/index.vue
@@ -39,13 +39,25 @@
                }}</view>
                <view class="goods-price">
                  <text class="currency">¥</text>
-                  <text class="price">{{ goodsData.price || 399 }}</text>
+                  <text class="price">
+                    {{ goodsData.specificationPrice || 399 }}
+                  </text>
                </view>
-                <view class="goods-service-list">
+                <view
+                  class="goods-service-list"
+                  v-if="
+                    goodsData.commodityServiceList &&
+                    goodsData.commodityServiceList.length
+                  "
+                >
                  <view class="service-title">包含服务</view>
-                  <view class="goods-service-item">
-                    <text class="service-label">随时可退</text>
-                    <text class="service-value">1份</text>
+                  <view
+                    class="goods-service-item"
+                    v-for="item in goodsData.commodityServiceList"
+                    :key="item.serviceTitle"
+                  >
+                    <text class="service-label">{{ item.serviceTitle }}</text>
+                    <text class="service-value">{{ item.serviceAmount }}</text>
                  </view>
                </view>
              </view>
@@ -54,7 +66,11 @@

          <!-- 数量选择区域 -->
          <view class="quantity-section">
-            <ModuleTitle title="游客信息" />
+            <ModuleTitle
+              :title="
+                goodsData.commodityTypeCode === '0' ? '订房信息' : '游客信息'
+              "
+            />

            <Stepper v-model="quantity" />
          </view>
@@ -67,7 +83,11 @@
          >
            <FormCard
              v-for="(item, index) in userFormList"
-              :title="`游客${index + 1}`"
+              :title="
+                goodsData.commodityTypeCode === '0'
+                  ? `房间${index + 1}`
+                  : `游客${index + 1}`
+              "
              :form="item"
              :showDeleteIcon="userFormList.length > 1"
              :key="index"
@@ -78,7 +98,7 @@
          </scroll-view>

          <!-- 总价区域 -->
-          <SumCard />
+          <SumCard :referencePrice="goodsData.specificationPrice" :discount="totalPrice" />
        </view>
      </scroll-view>

@@ -107,7 +127,9 @@ import SumCard from "@/components/SumCard/index.vue";
 const props = defineProps({
  goodsData: {
    type: Object,
-    default: () => ({}),
+    default: () => ({
+      commodityTypeCode: "0", // 商品类型 0-酒店 1-门票 2-餐饮
+    }),
  },
 });

--- a/pages/goods/components/GoodInfo/index.vue
+++ b/pages/goods/components/GoodInfo/index.vue
@@ -8,6 +8,15 @@
      <view class="tag-wrapper" v-if="goodsData.timeTag">
        <view class="time-tag">{{ goodsData.timeTag || "随时可退" }}</view>
      </view>
+      <!-- 日历ICON，酒店订单显示 -->
+      <uni-icons
+        class="calender-icon"
+        v-if="isShowCalendar"
+        type="calendar"
+        size="24"
+        color="#00A6FF"
+        @click="showCalendar"
+      />
    </view>

    <!-- 地址区域 -->
@@ -31,9 +40,12 @@
 </template>

 <script setup>
-import { computed, defineProps } from "vue";
+import { computed, defineProps, defineEmits } from "vue";
 import LocationInfo from "@/components/LocationInfo/index.vue";

+// 事件定义
+const emits = defineEmits(["showCalendar"]);
+
 // Props定义
 const props = defineProps({
  goodsData: {
@@ -44,12 +56,23 @@ const props = defineProps({

 // 设施列表 - 使用computed优化性能
 const facilitiesList = computed(() => {
-  if (props.goodsData.commodityTag && props.goodsData.commodityTag.length) {
-    return props.goodsData.commodityTag;
+  if (
+    props.goodsData.commodityFacilityList &&
+    props.goodsData.commodityFacilityList.length
+  ) {
+    return props.goodsData.commodityFacilityList;
  }

  return [];
 });
+
+// 日历弹窗
+const showCalendar = () => emits("showCalendar");
+
+// 是否显示日历按钮
+const isShowCalendar = computed(() => {
+  return props.goodsData.commodityTypeCode === "0";
+});
 </script>

 <style scoped lang="scss">
--- a/pages/goods/components/GoodInfo/styles/index.scss
+++ b/pages/goods/components/GoodInfo/styles/index.scss
@@ -1,9 +1,10 @@
 .good-info {
  background: #fff;
-  margin-bottom: 12px;

  // 标题区域
  .title-section {
+    display: flex;
+    align-items: center;
    margin-bottom: 12px;

    .title {
@@ -11,8 +12,10 @@
      color: #333;
      font-weight: 600;
      line-height: 1.4;
-      display: block;
-      margin-bottom: 8px;
+      flex: 0 280px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
    }

    .tag-wrapper {
@@ -27,11 +30,14 @@
        border: 1px solid #f55726;
      }
    }
+
+    .calender-icon {
+      margin-left: auto;
+    }
  }

  // 地址区域
  .address-section {
-    margin-bottom: 12px;
    padding: 12px 0;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
@@ -52,6 +58,8 @@

  // 设施信息区域
  .facilities-section {
+    margin-top: 12px;
+
    .facilities-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
--- a/pages/goods/index.vue
+++ b/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">
--- a/request/api/GoodsApi.js
+++ b/request/api/GoodsApi.js
@@ -4,4 +4,9 @@ const goodsDetail = (args) => {
  return request.post("/hotelBiz/commodity/commodityDetail", args);
 };

-export { goodsDetail };
+// 订单支付
+const orderPay = (args) => {
+  return request.post("/hotelBiz/trade/order", args);
+};
+
+export { goodsDetail, orderPay };
--- a/request/api/OrderApi.js
+++ b/request/api/OrderApi.js
@@ -19,11 +19,6 @@ const preOrder = (args) => {
  return request.post("/hotelBiz/trade/preOrder", args);
 };

-// 订单支付
-const orderPay = (args) => {
-  return request.post("/hotelBiz/trade/order", args);
-};
-
 // 订单取消
 const orderCancel = (args) => {
  return request.post("/hotelBiz/trade/cancelRefund", args);
@@ -44,7 +39,6 @@ export {
  userWorkOrderList,
  userOrderDetail,
  preOrder,
-  orderPay,
  orderCancel,
  orderRefund,
  orderPayNow,