feat: 商品详情的价格的计算处理
This commit is contained in:
@@ -93,9 +93,7 @@ const props = defineProps({
|
|||||||
// 价格数据数组
|
// 价格数据数组
|
||||||
priceData: {
|
priceData: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default: () => [
|
default: () => [{ date: "", price: "-", stock: "0" }],
|
||||||
{date: '', price: '-', stock: '0'}
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
|
|
||||||
// 默认选中日期
|
// 默认选中日期
|
||||||
@@ -209,8 +207,8 @@ const getPriceForDate = (dateStr) => {
|
|||||||
if (!props.priceData || !Array.isArray(props.priceData)) {
|
if (!props.priceData || !Array.isArray(props.priceData)) {
|
||||||
return null;
|
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;
|
return priceItem ? priceItem.price : null;
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -387,22 +385,58 @@ const handleRangeSelection = (dateInfo) => {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 生成范围内所有日期的数组
|
||||||
|
const dateRange = generateDateRange(rangeStart.value, rangeEnd.value);
|
||||||
|
|
||||||
emit("range-select", {
|
emit("range-select", {
|
||||||
startDate: rangeStart.value,
|
startDate: rangeStart.value,
|
||||||
endDate: rangeEnd.value,
|
endDate: rangeEnd.value,
|
||||||
startPrice: getPriceForDate(rangeStart.value),
|
startPrice: getPriceForDate(rangeStart.value),
|
||||||
endPrice: getPriceForDate(rangeEnd.value),
|
endPrice: getPriceForDate(rangeEnd.value),
|
||||||
totalDays: daysBetween,
|
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 calculateDaysBetween = (startDate, endDate) => {
|
||||||
const start = new Date(startDate);
|
const start = new Date(startDate);
|
||||||
const end = new Date(endDate);
|
const end = new Date(endDate);
|
||||||
const diffTime = Math.abs(end - start);
|
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显示
|
// 监听visible属性变化,控制uni-popup显示
|
||||||
@@ -441,4 +475,4 @@ onBeforeUnmount(() => {
|
|||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
// 引入样式文件
|
// 引入样式文件
|
||||||
@import "./styles/index.scss";
|
@import "./styles/index.scss";
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
// 颜色系统
|
// 颜色系统
|
||||||
$primary-color: #1890ff;
|
$primary-color: #1890ff;
|
||||||
$primary-light: #e6f7ff;
|
$primary-light: #e6f7ff;
|
||||||
$primary-dark: #0050b3;
|
$primary-dark: #1890ff;
|
||||||
|
|
||||||
// 中性色
|
// 中性色
|
||||||
$text-primary: #262626;
|
$text-primary: #262626;
|
||||||
|
|||||||
@@ -39,8 +39,18 @@
|
|||||||
}}</view>
|
}}</view>
|
||||||
<view class="goods-price">
|
<view class="goods-price">
|
||||||
<text class="currency">¥</text>
|
<text class="currency">¥</text>
|
||||||
<text class="price">
|
<template v-if="goodsData.commodityTypeCode === '0'">
|
||||||
{{ goodsData.specificationPrice || 399 }}
|
<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>
|
</text>
|
||||||
</view>
|
</view>
|
||||||
<view
|
<view
|
||||||
@@ -95,7 +105,11 @@
|
|||||||
|
|
||||||
<!-- 总价区域 -->
|
<!-- 总价区域 -->
|
||||||
<SumCard
|
<SumCard
|
||||||
:referencePrice="goodsData.specificationPrice"
|
:referencePrice="
|
||||||
|
goodsData.commodityTypeCode === '0'
|
||||||
|
? goodsData.calculatedTotalPrice
|
||||||
|
: goodsData.specificationPrice
|
||||||
|
"
|
||||||
:discount="totalPrice"
|
:discount="totalPrice"
|
||||||
/>
|
/>
|
||||||
</view>
|
</view>
|
||||||
@@ -180,7 +194,10 @@ const isDeleting = ref(false); // 标志位,防止删除时watch冲突
|
|||||||
|
|
||||||
// 计算属性
|
// 计算属性
|
||||||
const totalPrice = computed(() => {
|
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);
|
return (price * quantity.value).toFixed(0);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -92,6 +92,13 @@
|
|||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
margin-left: 2px;
|
margin-left: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.price-desc {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #999;
|
||||||
|
font-weight: 400;
|
||||||
|
margin-left: 12px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.goods-service-list {
|
.goods-service-list {
|
||||||
|
|||||||
@@ -38,7 +38,7 @@
|
|||||||
<view class="footer">
|
<view class="footer">
|
||||||
<view class="left">
|
<view class="left">
|
||||||
<text class="label">价格:</text>
|
<text class="label">价格:</text>
|
||||||
<text class="price">{{ goodsData.specificationPrice || 399 }}</text>
|
<text class="price">{{ calculatedTotalPrice }}</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="buy-button" @click="showConfirmPopup">立即抢购</view>
|
<view class="buy-button" @click="showConfirmPopup">立即抢购</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -103,20 +103,34 @@ const selectedDate = ref({
|
|||||||
});
|
});
|
||||||
const priceData = ref([]);
|
const priceData = ref([]);
|
||||||
|
|
||||||
|
// 计算的总价格
|
||||||
|
const calculatedTotalPrice = ref(0);
|
||||||
|
|
||||||
// 获取商品详情数据
|
// 获取商品详情数据
|
||||||
const goodsInfo = async (params) => {
|
const goodsInfo = async (params) => {
|
||||||
const res = await goodsDetail(params);
|
const res = await goodsDetail(params);
|
||||||
|
|
||||||
goodsData.value = res.data;
|
goodsData.value = res.data;
|
||||||
|
|
||||||
|
// 初始化计算价格
|
||||||
|
calculatedTotalPrice.value = goodsData.value.specificationPrice || 0;
|
||||||
|
|
||||||
// 判断是酒店类型订单再获取获取商品日价格及库存
|
// 判断是酒店类型订单再获取获取商品日价格及库存
|
||||||
if (goodsData.value.commodityTypeCode === "0") {
|
if (goodsData.value.commodityTypeCode === "0") {
|
||||||
|
configGoodsData();
|
||||||
getGoodsDailyPrice({
|
getGoodsDailyPrice({
|
||||||
commodityId: goodsData.value.commodityId,
|
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 getGoodsDailyPrice = async (params) => {
|
||||||
const res = await commodityDailyPriceList(params);
|
const res = await commodityDailyPriceList(params);
|
||||||
@@ -272,6 +286,63 @@ const handleDateSelect = (data) => {
|
|||||||
totalDays: data.totalDays,
|
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;
|
calendarVisible.value = false;
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user