feat: 商品详情的价格的计算处理

2025-09-16 20:39:17 +08:00
parent 8d0c93206b
commit 6443b67d15
5 changed files with 142 additions and 13 deletions
--- a/components/Calender/index.vue
+++ b/components/Calender/index.vue
@@ -93,9 +93,7 @@ const props = defineProps({
  // 价格数据数组
  priceData: {
    type: Array,
-    default: () => [
-      {date: '', price: '-', stock: '0'}
-    ],
+    default: () => [{ date: "", price: "-", stock: "0" }],
  },

  // 默认选中日期
@@ -209,8 +207,8 @@ const getPriceForDate = (dateStr) => {
  if (!props.priceData || !Array.isArray(props.priceData)) {
    return null;
  }
-  
-  const priceItem = props.priceData.find(item => item.date === dateStr);
+
+  const priceItem = props.priceData.find((item) => item.date === dateStr);
  return priceItem ? priceItem.price : null;
 };

@@ -387,22 +385,58 @@ const handleRangeSelection = (dateInfo) => {
      return;
    }

+    // 生成范围内所有日期的数组
+    const dateRange = generateDateRange(rangeStart.value, rangeEnd.value);
+
    emit("range-select", {
      startDate: rangeStart.value,
      endDate: rangeEnd.value,
      startPrice: getPriceForDate(rangeStart.value),
      endPrice: getPriceForDate(rangeEnd.value),
      totalDays: daysBetween,
+      dateRange: dateRange, // 新增：范围内所有日期的数组
    });
  }
 };

+// 生成日期范围内所有日期的数组
+const generateDateRange = (startDate, endDate) => {
+  const dateRange = [];
+  const start = new Date(startDate);
+  const end = new Date(endDate);
+
+  // 如果是同一天，只返回一个日期
+  if (startDate === endDate) {
+    return [
+      {
+        date: startDate,
+        price: getPriceForDate(startDate),
+      },
+    ];
+  }
+
+  // 生成范围内所有日期
+  const current = new Date(start);
+  while (current <= end) {
+    const dateStr = current.toISOString().split("T")[0];
+    dateRange.push({
+      date: dateStr,
+      price: getPriceForDate(dateStr),
+    });
+    current.setDate(current.getDate() + 1);
+  }
+
+  return dateRange;
+};
+
 // 计算两个日期之间的天数
 const calculateDaysBetween = (startDate, endDate) => {
  const start = new Date(startDate);
  const end = new Date(endDate);
  const diffTime = Math.abs(end - start);
-  return Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+  const days = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+  // 如果是同一天，返回1天而不是0天
+  return days === 0 ? 1 : days;
 };

 // 监听visible属性变化，控制uni-popup显示
@@ -441,4 +475,4 @@ onBeforeUnmount(() => {
 <style lang="scss" scoped>
 // 引入样式文件
@import "./styles/index.scss";
-</style>
+</style>
--- a/components/Calender/styles/index.scss
+++ b/components/Calender/styles/index.scss
@@ -1,7 +1,7 @@
 // 颜色系统
 $primary-color: #1890ff;
 $primary-light: #e6f7ff;
-$primary-dark: #0050b3;
+$primary-dark: #1890ff;

 // 中性色
 $text-primary: #262626;
--- a/pages/goods/components/GoodConfirm/index.vue
+++ b/pages/goods/components/GoodConfirm/index.vue
@@ -39,8 +39,18 @@
                }}</view>
                <view class="goods-price">
                  <text class="currency">¥</text>
-                  <text class="price">
-                    {{ goodsData.specificationPrice || 399 }}
+                  <template v-if="goodsData.commodityTypeCode === '0'">
+                    <text class="price">
+                      {{ goodsData.calculatedTotalPrice || 0 }}
+                    </text>
+                    <text class="price-desc">
+                      ({{ goodsData.startDate }}至{{ goodsData.endDate }}) 共{{
+                        goodsData.totalDays
+                      }}晚
+                    </text>
+                  </template>
+                  <text v-else class="price">
+                    {{ goodsData.specificationPrice || 0 }}
                  </text>
                </view>
                <view
@@ -95,7 +105,11 @@

          <!-- 总价区域 -->
          <SumCard
-            :referencePrice="goodsData.specificationPrice"
+            :referencePrice="
+              goodsData.commodityTypeCode === '0'
+                ? goodsData.calculatedTotalPrice
+                : goodsData.specificationPrice
+            "
            :discount="totalPrice"
          />
        </view>
@@ -180,7 +194,10 @@ const isDeleting = ref(false); // 标志位，防止删除时watch冲突

 // 计算属性
 const totalPrice = computed(() => {
-  const price = props.goodsData?.specificationPrice || DEFAULT_PRICE;
+  const price =
+    props.goodsData?.commodityTypeCode === "0"
+      ? props.goodsData?.calculatedTotalPrice
+      : props.goodsData?.specificationPrice || 0;
  return (price * quantity.value).toFixed(0);
 });

--- a/pages/goods/components/GoodConfirm/styles/index.scss
+++ b/pages/goods/components/GoodConfirm/styles/index.scss
@@ -92,6 +92,13 @@
          font-weight: 600;
          margin-left: 2px;
        }
+
+        .price-desc {
+          font-size: 14px;
+          color: #999;
+          font-weight: 400;
+          margin-left: 12px;
+        }
      }

      .goods-service-list {
--- a/pages/goods/index.vue
+++ b/pages/goods/index.vue
@@ -38,7 +38,7 @@
    <view class="footer">
      <view class="left">
        <text class="label">价格：</text>
-        <text class="price">{{ goodsData.specificationPrice || 399 }}</text>
+        <text class="price">{{ calculatedTotalPrice }}</text>
      </view>
      <view class="buy-button" @click="showConfirmPopup">立即抢购</view>
    </view>
@@ -103,20 +103,34 @@ const selectedDate = ref({
 });
 const priceData = ref([]);

+// 计算的总价格
+const calculatedTotalPrice = ref(0);
+
 // 获取商品详情数据
 const goodsInfo = async (params) => {
  const res = await goodsDetail(params);

  goodsData.value = res.data;

+  // 初始化计算价格
+  calculatedTotalPrice.value = goodsData.value.specificationPrice || 0;
+
  // 判断是酒店类型订单再获取获取商品日价格及库存
  if (goodsData.value.commodityTypeCode === "0") {
+    configGoodsData();
    getGoodsDailyPrice({
      commodityId: goodsData.value.commodityId,
    });
  }
 };

+const configGoodsData = () => {
+  goodsData.value.startDate = selectedDate.value.startDate;
+  goodsData.value.endDate = selectedDate.value.endDate;
+  goodsData.value.totalDays = selectedDate.value.totalDays;
+  goodsData.value.calculatedTotalPrice = calculatedTotalPrice.value;
+};
+
 // 获取商品日价格及库存
 const getGoodsDailyPrice = async (params) => {
  const res = await commodityDailyPriceList(params);
@@ -272,6 +286,63 @@ const handleDateSelect = (data) => {
    totalDays: data.totalDays,
  };

+  // 根据商品类型计算价格
+  if (goodsData.value.commodityTypeCode === "0") {
+    // 酒店类型：计算dateRange总价格，排除最后一天（同一天除外）
+    if (data.dateRange && Array.isArray(data.dateRange)) {
+      // 获取默认价格作为回退值
+      const defaultPrice = Number(goodsData.value.specificationPrice) || 0;
+
+      // 检查价格是否有效的函数
+      const isValidPrice = (price) => {
+        return (
+          price !== null &&
+          price !== undefined &&
+          price !== "" &&
+          price !== "-" &&
+          !isNaN(Number(price)) &&
+          Number(price) > 0
+        );
+      };
+
+      // 如果是同一天（数组长度为1），使用该天的价格
+      if (data.dateRange.length === 1) {
+        const dayPrice = data.dateRange[0].price;
+        calculatedTotalPrice.value = isValidPrice(dayPrice)
+          ? Number(dayPrice)
+          : defaultPrice;
+        console.log(
+          "同一天选择，价格:",
+          calculatedTotalPrice.value,
+          "(原价格:",
+          dayPrice,
+          ")"
+        );
+      } else {
+        // 多天选择，排除最后一天
+        const dateRangeExcludingLast = data.dateRange.slice(0, -1);
+        calculatedTotalPrice.value = dateRangeExcludingLast.reduce(
+          (total, dateItem) => {
+            const dayPrice = dateItem.price;
+            const priceToAdd = isValidPrice(dayPrice)
+              ? Number(dayPrice)
+              : defaultPrice;
+            return total + priceToAdd;
+          },
+          0
+        );
+        console.log(
+          "酒店类型计算总价格(排除最后一天):",
+          calculatedTotalPrice.value
+        );
+      }
+      configGoodsData();
+    }
+  } else {
+    // 非酒店类型：如果没有dateRange，使用默认价格
+    calculatedTotalPrice.value = goodsData.value.specificationPrice || 0;
+  }
+
  // 日历组件会自动关闭，无需手动设置
  calendarVisible.value = false;
 };