feat: 实现了日历的选择组件与快速预定的接口请求联动

pages/module/booking/QuickBookingComponent.vue

@@ -1,9 +1,7 @@
 <template>
 	<view class="container">
-		<view class="calendar"></view>
-		
-		<view v-for="item in commodityGroupDTOList" :key="item.title">
-			
+		<QuickBookingCalender class="calendar" @update:date="onDateSelected" />
+		<view v-for="item in commodityGroupDTOList" :key="commodityGroupKey(item.title)">
 			<QuickBookingContentList :commodityDTO="item" />
 		</view>
 		
@@ -11,24 +9,49 @@
 </template>
 
 <script setup>
+	import QuickBookingCalender from './QuickBookingCalender.vue'
 	import QuickBookingContentList from './QuickBookingContentList.vue'
 	import { ref, nextTick } from 'vue'
 	import { onMounted } from 'vue'
 	import { quickBookingComponent } from '@/request/api/MainPageDataApi'
 	import { SCROLL_TO_BOTTOM } from '@/constant/constant'
 
+	const selectedDate = ref({});
+
 	const commodityGroupDTOList = ref([])
+	const formattedDate = ref('')
 
 	const loadQuickBookingComponent = async () => {
-		const res = await quickBookingComponent('2025-07-29')
+	    formattedDate.value = formatDate(selectedDate.value.fullDate || new Date());
+		const res = await quickBookingComponent(formattedDate.value)
 		if(res.code === 0 && res.data) {
-			commodityGroupDTOList.value.push(...res.data.commodityGroupDTOList)
-			
+			commodityGroupDTOList.value = res.data.commodityGroupDTOList
 			nextTick(() => {
-				uni.$emit(SCROLL_TO_BOTTOM, true)
+				setTimeout(() => {
+					uni.$emit(SCROLL_TO_BOTTOM, true)
+				}, 300)
 			});
 		}
 	}
+	
+	const onDateSelected = (date) => {
+		console.log('Selected date:', date);
+		selectedDate.value = date;
+		loadQuickBookingComponent();
+	};
+
+	// 格式化日期为 yyyy-MM-dd
+	const formatDate = (date) => {
+		const d = new Date(date);
+		const year = d.getFullYear();
+		const month = String(d.getMonth() + 1).padStart(2, '0');
+		const day = String(d.getDate()).padStart(2, '0');
+		return `${year}-${month}-${day}`;
+	};
+	
+	const commodityGroupKey = (title) => {
+		return `${title}${formattedDate.value}`
+	}
 
 	onMounted(() => {
 		console.log('=============')
@@ -47,7 +70,6 @@
 			width: 100%;
 			height: 58px;
 			margin: 12px 0 6px;
-			background-color: rgba(140,236,255,0.24);	
 		}