feat： 预定组件对接

constant/constant.js

@@ -0,0 +1,2 @@
+
+export const SCROLL_TO_BOTTOM = 'SCROLL_TO_BOTTOM'

pages/booking/QuickBookingComponent.vue

@@ -4,7 +4,7 @@
 		
 		<view v-for="item in commodityGroupDTOList" :key="item.title">
 			
-			<QuickBookingContentList :commodityGroupDTO="item" />
+			<QuickBookingContentList :commodityDTO="item" />
 		</view>
 		
 	</view>
@@ -15,15 +15,16 @@
 	import { defineProps, ref } from 'vue'
 	import { onMounted } from 'vue'
 	import { quickBookingComponent } from '../../request/api/QuickBookingComponent'
-	
+	import { SCROLL_TO_BOTTOM } from '../../constant/constant'
+
 	const commodityGroupDTOList = ref([])
 
 	const loadQuickBookingComponent = async () => {
 		const res = await quickBookingComponent('2025-07-29')
 		if(res.code === 0 && res.data) {
-			commodityGroupDTOList.value = res.data.commodityGroupDTOList
+			commodityGroupDTOList.value.push(...res.data.commodityGroupDTOList)
+			uni.$emit(SCROLL_TO_BOTTOM, true)
 		}
-		console.log(res)
 	}
 
 	onMounted(() => {
@@ -37,10 +38,12 @@
 	.container {
 		width: 100%;
 		flex: 1;
+		margin-bottom: 12px;
 		
 		.calendar {
 			width: 100%;
 			height: 58px;
+			margin: 12px 0 6px;
 			background-color: rgba(140,236,255,0.24);	
 		}
 		

pages/booking/QuickBookingContentList.vue

@@ -6,14 +6,27 @@
 		</view>
 		<view class="container-scroll">
 			<view class="mk-card-item" v-for="(item, index) in commodityDTO.commodityList" :key="item.commodityName">
-				<image :src="item.commodityIcon" mode="widthFix"></image>
+				<view class="card-badge">超值推荐</view>
-				<text>{{ item.commodityName }}</text>
+				<image class="card-img" :src="item.commodityIcon" mode="widthFix" />
-				<view></view>
+				<view class="card-content">
-				<text>·往返观光车票</text>
+					<view class="card-title-column">
-				<text>·营业时间：9:00—22:00</text>
+						<text class="card-title">{{ item.commodityName }}</text>
-				<view>
+						<view class="card-tags">
-					<text>￥120/人</text>
+							<text class="card-tag">随时可退</text>
-					<text> 下单</text>
+							<text class="card-tag">民俗表演</text>
+						</view>
+					</view>
+					<view class="card-desc">· 往返观光车票</view>
+					<view class="card-desc">· 营业时间：9:00-22:00</view>
+					<view class="card-bottom-row">
+						<view class="card-price-row">
+							<text class="card-price-fu">￥</text>
+							<text class="card-price">{{ item.commodityPrice }}</text>
+							<text class="card-unit">/人</text>
+						</view>
+						
+						<text class="card-btn">下单</text>
+					</view>	
 				</view>
 			</view>
 		</view>
@@ -57,7 +70,8 @@
 			display: flex;
 			flex-direction: row;
 			overflow-x: auto;
-			margin-top: 4px;
+			overflow-y: hidden;
+			margin: 4px 0;
 			
 			/* 隐藏滚动条 */
 			scrollbar-width: none; 
@@ -66,27 +80,118 @@
 			}
 			
 			.mk-card-item {
-				display: flex;
+			  position: relative;
-				flex-direction: column;
+			  
+			  display: flex;
+			  flex-direction: column;
+			  align-items: start;
+			  width: 188px;
+			  height: 244px;
+			  background-color: #ffffff;
+			  border-radius: 10px;
+			  margin-right: 8px;
+			  padding-bottom: 12px;
+			  
+			  .card-badge {
+			    position: absolute;
+			    top: 8px;
+			    left: 8px;
+			    background: #ffe7b2;
+			    color: #b97a00;
+			    font-size: 12px;
+			    padding: 2px 8px;
+			    border-radius: 4px;
+			    z-index: 2;
+			  }
+			
+			  .card-img {
+			    width: 188px;
+			    height: 114px;
+			    border-radius: 10px;
+			  }
+			
+			  .card-content {
+				  box-sizing: border-box;
+			    padding: 10px 12px 0 12px;
+			    display: flex;
+			    flex-direction: column;
 				align-items: start;
-				width: 188px;
+			    width: 100%;
-				height: 244px;
+			  }
-				background-color: #ffffff;
+			
-				border-radius: 10px;
+			  .card-title-column {
-				margin-right: 8px;
+			    display: flex;
-				
+			    align-items: start;
-				image {
+				flex-direction: column;
-					width: 188px;
+			  }
-					height: 112px;
+			
+			  .card-title {
+			    font-size: 16px;
+			    font-weight: bold;
+			    color: #222;
+			  }
+			
+			  .card-tags {
+			    display: flex;
+				flex-direction: row;
+				align-items: start;
+			    padding: 6px 0;
+			  }
+			
+			  .card-tag {
+			    background: #f5f5f5;
+			    color: #ff6600;
+			    font-size: 12px;
+			    border-radius: 4px;
+			    padding: 0 6px;
+			    margin-left: 2px;
+			  }
+			
+			  .card-desc {
+			    font-size: 13px;
+			    color: #888;
+			    margin-top: 2px;
+			  }
+			
+			  .card-bottom-row {
+			    display: flex;
+			    align-items: center;
+			    justify-content: space-between;
+			    margin-top: 8px;
+				width: 100%;
+			  }
+			
+			  .card-price-row {
+				.card-price-fu {
+					color: #ff6600;
+					font-size: 11px;
+					font-weight: normal;
 				}
-				text {
+			    
-					padding: 12px;
+				.card-price {
-					text-align: center;
+					color: #ff6600;
-					font-weight: 500;
+					font-size: 16px;
-					font-size: 12px;
+					font-weight: bold;
-					color: #333333;
 				}
-			}
+			    .card-unit {
+			      font-size: 11px;
+			      color: #888;
+			      font-weight: normal;
+			      margin-left: 2px;
+			    }
+			  }
+			
+			  .card-btn {
+			    background: #ff6600;
+			    color: #fff;
+			    font-size: 15px;
+			    border-radius: 20px;
+			    padding: 0 18px;
+			    height: 32px;
+			    line-height: 32px;
+			  }
+			}	
+			
 		}
 	}
 </style>

pages/chat/ChatMainList.vue

@@ -28,7 +28,7 @@
 				  <template v-if="item.msgType === MessageRole.AI">
 						<ChatCardAI class="message-item-ai" :text="item.msg">
 							<template v-if="item.toolCall">								
-								<QuickBookingComponent v-if="item.toolCall.componentName === 'createWorkOrderCard'" />
+								<QuickBookingComponent v-if="item.toolCall.componentName === 'quickBookingCard'" />
 							</template>
 						</ChatCardAI>			  
 				  </template>
@@ -91,6 +91,7 @@
 	import { mainPageData } from '../../request/api/MainPageData';
 	import { conversationMsgList } from '../../request/api/ConversationMsgList';
 	import { recentConversation } from '../../request/api/RecentConversation';
+	import { SCROLL_TO_BOTTOM } from '../../constant/constant'
 		
 	/// 导航栏相关
 	const statusBarHeight = ref(20);
@@ -207,8 +208,17 @@
 	 	getMainPageData()
 		await loadRecentConversation()
 		loadConversationMsgList()
+		addNoticeListener()
 	})
 	
+	const addNoticeListener = () => {
+		uni.$on(SCROLL_TO_BOTTOM, (value) => {
+			setTimeout(() => {
+				scrollToBottom()
+			}, 200)
+		})
+	}
+	
 	/// 获取最近一次的会话id
 	const loadRecentConversation = async() => {
 		const res = await recentConversation()

pages/chat/ChatTopWelcome.vue

@@ -4,7 +4,7 @@
 			<!-- :style="backgroundStyle" -->
 			<view class="top-item1-left">
 				<image :src="initPageImages.welcomeImageUrl"></image>
-				<text>{{ currentDate }} 多云 -3～6℃ ccc </text>						  
+				<text>{{ currentDate }} 多云 -3～6℃ ss </text>						  
 			</view>
 			<view class="top-item1-right">
 				<image :src="initPageImages.logoImageUrl"></image>