From 05ad1348cf7b9ec80590919c3f23c2cb2c077e70 Mon Sep 17 00:00:00 2001
From: zpc <zpc1131@gamil.com>
Date: Mon, 8 Dec 2025 01:08:53 +0800
Subject: [PATCH] 321

---
 common/env.js                          |   11 +-
 pages/appointment/appointment-page.vue |    4 +
 pages/appointment/book-room-page.vue   | 1075 ++++++++++++------------
 3 files changed, 570 insertions(+), 520 deletions(-)

diff --git a/common/env.js b/common/env.js
index b0d7375..4c3b536 100644
--- a/common/env.js
+++ b/common/env.js
@@ -6,11 +6,12 @@
 // 开发环境配置
 const development = {
     // API基础URL
-    // baseUrl: 'https://sqqp.zpc-xy.com',
-    // baseUrl: 'http://1.15.21.245:2401',
-    // host: ['https://sqqp.zpc-xy.com'],
-    baseUrl: 'http://192.168.1.24:2016',
-    host: ['http://192.168.1.24:2016'],
+    baseUrl: 'https://sqqp.zpc-xy.com',
+    host: ['https://sqqp.zpc-xy.com'],
+    // baseUrl: 'http://192.168.195.15:2401',
+    // host: ['http://192.168.195.15:2401'],
+	// baseUrl: 'http://192.168.1.24:2016',
+	// host: ['http://192.168.1.24:2016'],
     imageUrl: 'https://guyu-1308826010.cos.ap-shanghai.myqcloud.com',
 
 };
diff --git a/pages/appointment/appointment-page.vue b/pages/appointment/appointment-page.vue
index e2a6ed3..b6aeb8a 100644
--- a/pages/appointment/appointment-page.vue
+++ b/pages/appointment/appointment-page.vue
@@ -1131,6 +1131,10 @@ const onCustomDepositInput = (val) => {
 					maxPlayerCount.value = detail.capacity;
 					const t = [];
 					peopleText.value = "请选择游玩人数";
+					t.push({
+						value: 1,
+						text:'无需组局'
+					});
 					for (let i = 2; i <= detail.capacity; i++) {
 						t.push({
 							value: i,
diff --git a/pages/appointment/book-room-page.vue b/pages/appointment/book-room-page.vue
index a3f0033..ab9597a 100644
--- a/pages/appointment/book-room-page.vue
+++ b/pages/appointment/book-room-page.vue
@@ -5,16 +5,16 @@
 			<view style="flex: 1;"></view>
 			<text class="page-title">发起预约</text>
 			<view class="row" style="width: 90%; height: 120rpx; margin: 20rpx auto 0;">
-				<view class="column center" v-for="(item,index) in dateList" :key="index" :style="setBgColor(index)"
+				<view class="column center" v-for="(item, index) in dateList" :key="index" :style="setBgColor(index)"
 					@click="clickTime(index)" style="width: 96rpx; height: 100%;">
-					<text style="font-size: 26rpx;">{{item.time}}</text>
-					<text style="font-size: 22rpx;">{{item.weekday}}</text>
+					<text style="font-size: 26rpx;">{{ item.time }}</text>
+					<text style="font-size: 22rpx;">{{ item.weekday }}</text>
 
 				</view>
 			</view>
 		</view>
 
-		<text style="margin-top: 20rpx; margin-left: 32rpx; font-size: 24rpx;">营业时间：早00点 至 晚23点</text>
+		<text style="margin-top: 20rpx; margin-left: 32rpx; font-size: 24rpx;">{{ getBusinessAnnouncement() }}</text>
 
 		<view class="row"
 			style="width: 686rpx; height: 56rpx; background-color: #2ED9BF; border-radius: 5rpx; margin: 20rpx auto 0; align-items: center;">
@@ -24,12 +24,12 @@
 		</view>
 
 		<view class="" style="width: 100%; flex: 1; margin-top: 12rpx; overflow-y: auto;">
-			
+
 			<!-- 加载状态 -->
 			<view v-if="loading" class="center" style="padding: 60rpx 0;">
 				<text style="color: #999;">加载中...</text>
 			</view>
-			
+
 			<!-- 空数据提示 -->
 			<view v-else-if="roomList.length === 0" class="center" style="padding: 60rpx 0;">
 				<text style="color: #999;">暂无房间数据</text>
@@ -56,8 +56,8 @@
 				<text v-if="item.status === 'using'"
 					style="font-size: 20rpx; position: absolute; top: 10rpx; right: 16rpx; color: #FF9901;">当前使用中</text>
 
-				<view class="center" @click.stop="handleReservation(item)"
-					style="width: 92rpx; height: 46rpx; background-color: #20BBA4; border-radius: 52rpx; font-size: 26rpx; color: white; position: absolute; bottom: 94rpx; right: 10rpx;">
+				<view class="center reservation-btn" :class="{ 'reservation-btn-disabled': !hasAvailableSlots(item) }"
+					@click.stop="hasAvailableSlots(item) && handleReservation(item)">
 					预约
 				</view>
 
@@ -72,8 +72,10 @@
 
 				<view class="row" style="align-items: center; position: absolute; left: 10rpx; bottom: 14rpx;">
 
-					<view class="column center" style="margin-right: 20rpx;" v-for="slot in item.time_slots" :key="slot.slot_type">
-						<view :style="{ width: '70rpx', height: '4rpx', backgroundColor: getSlotColor(slot.status) }"></view>
+					<view class="column center" style="margin-right: 20rpx;" v-for="slot in item.time_slots"
+						:key="slot.slot_type">
+						<view :style="{ width: '70rpx', height: '4rpx', backgroundColor: getSlotColor(slot.status) }">
+						</view>
 						<text style="font-size: 12rpx; margin-top: 4rpx;">{{ slot.slot_name }}</text>
 					</view>
 
@@ -90,32 +92,27 @@
 				<view class="popup-close" @click="closeRoomDetail">
 					<text style="font-size: 40rpx; color: #999;">×</text>
 				</view>
-				
+
 				<!-- 加载状态 -->
 				<view v-if="roomDetailLoading" class="popup-loading center">
 					<text style="color: #999;">加载中...</text>
 				</view>
-				
+
 				<!-- 房间详情内容 -->
 				<scroll-view v-else-if="roomDetail" scroll-y class="popup-content" :style="{ maxHeight: '80vh' }">
 					<!-- 图片轮播 -->
 					<view class="detail-swiper-container">
-						<swiper v-if="roomDetailImages && roomDetailImages.length > 0" 
-							class="detail-swiper" 
-							:indicator-dots="roomDetailImages.length > 1" 
-							:autoplay="false" 
-							:circular="true"
-							indicator-color="rgba(255, 255, 255, 0.5)"
-							indicator-active-color="#20BBA4">
+						<swiper v-if="roomDetailImages && roomDetailImages.length > 0" class="detail-swiper"
+							:indicator-dots="roomDetailImages.length > 1" :autoplay="false" :circular="true"
+							indicator-color="rgba(255, 255, 255, 0.5)" indicator-active-color="#20BBA4">
 							<swiper-item v-for="(img, index) in roomDetailImages" :key="index">
 								<image :src="img" mode="aspectFill" class="detail-swiper-image"></image>
 							</swiper-item>
 						</swiper>
-						<image v-else :src="roomDetail.image_url || '/static/default_room.jpg'" 
-							mode="aspectFill" 
+						<image v-else :src="roomDetail.image_url || '/static/default_room.jpg'" mode="aspectFill"
 							class="detail-swiper-image"></image>
 					</view>
-					
+
 					<!-- 房间基本信息 -->
 					<view class="detail-section">
 						<view class="detail-title-row">
@@ -128,7 +125,7 @@
 							</view>
 						</view>
 						<text class="detail-room-type">{{ roomDetail.room_type_name }}</text>
-						
+
 						<view class="detail-price-row">
 							<text class="detail-price-label">标准价：</text>
 							<text class="detail-price-value">{{ roomDetail.standard_price_desc || '价格详询' }}</text>
@@ -137,19 +134,19 @@
 							<text class="detail-price-label">会员价：</text>
 							<text class="detail-price-member">{{ roomDetail.member_price_desc || '详询' }}</text>
 						</view>
-						
+
 						<view class="detail-info-row">
 							<text class="detail-info-label">可容纳人数：</text>
 							<text class="detail-info-value">{{ roomDetail.capacity || 0 }}人</text>
 						</view>
 					</view>
-					
+
 					<!-- 房间描述 -->
 					<view v-if="roomDetail.description" class="detail-section">
 						<text class="detail-section-title">房间描述</text>
 						<text class="detail-description">{{ roomDetail.description }}</text>
 					</view>
-					
+
 					<!-- 设施标签 -->
 					<view v-if="roomDetail.amenities && roomDetail.amenities.length > 0" class="detail-section">
 						<text class="detail-section-title">房间设施</text>
@@ -159,7 +156,7 @@
 							</view>
 						</view>
 					</view>
-					
+
 					<!-- 时段状态 -->
 					<view class="detail-section">
 						<text class="detail-section-title">时段状态</text>
@@ -167,10 +164,10 @@
 							<view v-for="slot in roomDetail.time_slots" :key="slot.slot_type" class="time-slot-item">
 								<view class="time-slot-header">
 									<text class="time-slot-name">{{ slot.slot_name }}</text>
-									<view :style="{ 
-										width: '12rpx', 
-										height: '12rpx', 
-										borderRadius: '50%', 
+									<view :style="{
+										width: '12rpx',
+										height: '12rpx',
+										borderRadius: '50%',
 										backgroundColor: getSlotColor(slot.status),
 										marginLeft: '12rpx'
 									}"></view>
@@ -178,21 +175,25 @@
 								<view class="time-slot-content">
 									<text class="time-slot-status">{{ getSlotStatusText(slot.status) }}</text>
 									<view class="time-slot-price">
-										<text class="time-slot-price-text">标准：{{ slot.price_desc_standard || '详询' }}</text>
-										<text class="time-slot-price-text member">会员：{{ slot.price_desc_member || '详询' }}</text>
+										<text class="time-slot-price-text">标准：{{ slot.price_desc_standard || '详询'
+										}}</text>
+										<text class="time-slot-price-text member">会员：{{ slot.price_desc_member || '详询'
+										}}</text>
 									</view>
 								</view>
 							</view>
 						</view>
 					</view>
 				</scroll-view>
-				
+
 				<!-- 底部操作按钮 -->
 				<view v-if="roomDetail && !roomDetailLoading" class="popup-footer">
 					<view class="popup-btn secondary" @click="closeRoomDetail">
 						<text>关闭</text>
 					</view>
-					<view v-if="roomDetail.can_reserve" class="popup-btn primary" @click="handleReservationFromDetail">
+					<view v-if="roomDetail.can_reserve"
+						:class="hasAvailableSlots(roomDetail) ? 'popup-btn primary' : 'popup-btn disabled'"
+						@click="hasAvailableSlots(roomDetail) && handleReservationFromDetail()">
 						<text>立即预约</text>
 					</view>
 				</view>
@@ -203,541 +204,585 @@
 </template>
 
 <script>
-	import { getAvailableDates, getRoomListWithSlotsNew, getRoomDetail } from '@/common/server/interface/sq.js';
-	
-	export default {
-		data() {
-			return {
-				currentTimeIndex: 0,
-				dateList: [],
-				value: false,
-				roomList: [],
-				loading: false,
-				selectedDate: null, // 当前选中的日期时间戳
-				roomDetail: null, // 房间详情数据
-				roomDetailLoading: false, // 房间详情加载状态
-			}
+import { getAvailableDates, getRoomListWithSlotsNew, getRoomDetail } from '@/common/server/interface/sq.js';
+import { getConfigData } from '@/common/server/config';
+export default {
+	data() {
+		return {
+			currentTimeIndex: 0,
+			dateList: [],
+			value: false,
+			roomList: [],
+			loading: false,
+			selectedDate: null, // 当前选中的日期时间戳
+			roomDetail: null, // 房间详情数据
+			roomDetailLoading: false, // 房间详情加载状态
+			configData: null,
+		}
+	},
+
+	onLoad() {
+		this.loadDates();
+		getConfigData().then(data => {
+			this.configData = data;
+		});
+	},
+
+	methods: {
+		change(e) {
+			console.log('change', e);
+			// 开关切换时重新加载房间列表
+			this.loadRoomList();
+		},
+		getBusinessAnnouncement() {
+			return this.configData.config.businessAnnouncement??"营业时间：早00点 至 晚23点";
 		},
 
-		onLoad() {
-			this.loadDates();
-		},
-
-		methods: {
-			change(e) {
-				console.log('change', e);
-				// 开关切换时重新加载房间列表
-				this.loadRoomList();
-			},
-			
-			/**
-			 * 加载可选日期列表
-			 */
-			async loadDates() {
-				try {
-					const res = await getAvailableDates();
-					if (res && res.length > 0) {
-						// 将接口返回的数据格式转换为页面使用的格式
-						this.dateList = res.map(item => ({
-							time: item.dateText,
-							weekday: item.dateDisplay,
-							timestamp: item.date // 保存时间戳用于查询
-						}));
-						// 默认选中第一个日期（今天）
-						this.selectedDate = this.dateList[0].timestamp;
-						this.currentTimeIndex = 0;
-						// 加载房间列表
-						this.loadRoomList();
-					}
-				} catch (error) {
-					console.error('加载日期列表失败', error);
-					uni.showToast({
-						title: '加载日期失败',
-						icon: 'none'
-					});
+		/**
+		 * 加载可选日期列表
+		 */
+		async loadDates() {
+			try {
+				const res = await getAvailableDates();
+				if (res && res.length > 0) {
+					// 将接口返回的数据格式转换为页面使用的格式
+					this.dateList = res.map(item => ({
+						time: item.dateText,
+						weekday: item.dateDisplay,
+						timestamp: item.date // 保存时间戳用于查询
+					}));
+					// 默认选中第一个日期（今天）
+					this.selectedDate = this.dateList[0].timestamp;
+					this.currentTimeIndex = 0;
+					// 加载房间列表
+					this.loadRoomList();
 				}
-			},
-			
-			/**
-			 * 从 dateDisplay 中提取星期部分
-			 * @param {string} dateDisplay 例如："12月06日 周五"
-			 * @returns {string} 例如："周五"
-			 */
-			extractWeekday(dateDisplay) {
-				const parts = dateDisplay.split(' ');
-				return parts.length > 1 ? parts[1] : '';
-			},
-			
-			/**
-			 * 加载房间列表
-			 */
-			async loadRoomList() {
-				if (!this.selectedDate) return;
-				
-				this.loading = true;
-				try {
-					const showOnlyAvailable = this.value; // 开关状态
-					const currentTimeSlot = this.getCurrentTimeSlot();
-					
-					const res = await getRoomListWithSlotsNew(
-						this.selectedDate,
-						showOnlyAvailable,
-						showOnlyAvailable ? currentTimeSlot : null
-					);
-					
-					if (res) {
-						this.roomList = res;
-					} else {
-						this.roomList = [];
-					}
-				} catch (error) {
-					console.error('加载房间列表失败', error);
-					uni.showToast({
-						title: '加载房间失败',
-						icon: 'none'
-					});
-					this.roomList = [];
-				} finally {
-					this.loading = false;
-				}
-			},
-			
-			/**
-			 * 获取当前时段类型
-			 * @returns {number} 0=凌晨, 1=上午, 2=下午, 3=晚上
-			 */
-			getCurrentTimeSlot() {
-				const hour = new Date().getHours();
-				if (hour >= 0 && hour < 6) return 0;   // 凌晨
-				if (hour >= 6 && hour < 12) return 1;  // 上午
-				if (hour >= 12 && hour < 18) return 2; // 下午
-				return 3;                              // 晚上
-			},
-			
-			/**
-			 * 根据时段状态获取背景色
-			 * @param {string} status available/reserved/unavailable/using
-			 * @returns {string} 颜色值
-			 */
-			getSlotColor(status) {
-				const colorMap = {
-					'available': '#52c41a',    // 绿色
-					'reserved': '#FF9901',     // 橙色
-					'unavailable': '#E6E6E6',  // 灰色
-					'using': '#1890ff'         // 蓝色
-				};
-				return colorMap[status] || '#E6E6E6';
-			},
-
-			//设置背景
-			setBgColor(index) {
-				if (this.currentTimeIndex == index) {
-					return {
-						backgroundColor: "#20BBA4",
-						color: "#FFFFFF",
-					}
-				} else {
-					return {
-						backgroundColor: "#FFFFFF",
-						color: "#000000",
-					}
-				}
-			},
-
-			clickTime(index) {
-				this.currentTimeIndex = index;
-				this.selectedDate = this.dateList[index].timestamp;
-				// 切换日期时重新加载房间列表
-				this.loadRoomList();
-			},
-			
-			/**
-			 * 点击预约按钮
-			 */
-			handleReservation(room) {
-				if (!room || !room.id) return;
-				
-				// 跳转到预约页面，传递房间信息
-				const params = {
-					roomId: room.id,
-					roomName: room.name || '未知房间',
-					date: this.selectedDate, // 选中的日期时间戳
-				};
-				
-				// 如果有容量信息，也传递
-				if (room.capacity) {
-					params.capacity = room.capacity;
-				}
-				
-				const query = Object.keys(params)
-					.map(key => `${key}=${encodeURIComponent(params[key])}`)
-					.join('&');
-				
-				uni.navigateTo({
-					url: `/pages/appointment/appointment-page?${query}`
+			} catch (error) {
+				console.error('加载日期列表失败', error);
+				uni.showToast({
+					title: '加载日期失败',
+					icon: 'none'
 				});
-			},
-			
-			/**
-			 * 点击房间卡片，显示详情弹窗
-			 */
-			async handleRoomClick(room) {
-				if (!room || !room.id) return;
-				
-				this.roomDetailLoading = true;
-				this.roomDetail = null;
-				
-				// 打开弹窗
-				this.$refs.roomDetailPopup.open();
-				
-				try {
-					const detail = await getRoomDetail(room.id, this.selectedDate);
-					if (detail) {
-						this.roomDetail = detail;
-					} else {
-						uni.showToast({
-							title: '获取房间详情失败',
-							icon: 'none'
-						});
-						this.closeRoomDetail();
-					}
-				} catch (error) {
-					console.error('加载房间详情失败', error);
+			}
+		},
+
+		/**
+		 * 从 dateDisplay 中提取星期部分
+		 * @param {string} dateDisplay 例如："12月06日 周五"
+		 * @returns {string} 例如："周五"
+		 */
+		extractWeekday(dateDisplay) {
+			const parts = dateDisplay.split(' ');
+			return parts.length > 1 ? parts[1] : '';
+		},
+
+		/**
+		 * 加载房间列表
+		 */
+		async loadRoomList() {
+			if (!this.selectedDate) return;
+
+			this.loading = true;
+			try {
+				const showOnlyAvailable = this.value; // 开关状态
+				const currentTimeSlot = this.getCurrentTimeSlot();
+
+				const res = await getRoomListWithSlotsNew(
+					this.selectedDate,
+					showOnlyAvailable,
+					showOnlyAvailable ? currentTimeSlot : null
+				);
+
+				if (res) {
+					this.roomList = res;
+				} else {
+					this.roomList = [];
+				}
+			} catch (error) {
+				console.error('加载房间列表失败', error);
+				uni.showToast({
+					title: '加载房间失败',
+					icon: 'none'
+				});
+				this.roomList = [];
+			} finally {
+				this.loading = false;
+			}
+		},
+
+		/**
+		 * 获取当前时段类型
+		 * @returns {number} 0=凌晨, 1=上午, 2=下午, 3=晚上
+		 */
+		getCurrentTimeSlot() {
+			const hour = new Date().getHours();
+			if (hour >= 0 && hour < 6) return 0;   // 凌晨
+			if (hour >= 6 && hour < 12) return 1;  // 上午
+			if (hour >= 12 && hour < 18) return 2; // 下午
+			return 3;                              // 晚上
+		},
+
+		/**
+		 * 根据时段状态获取背景色
+		 * @param {string} status available/reserved/unavailable/using
+		 * @returns {string} 颜色值
+		 */
+		getSlotColor(status) {
+			const colorMap = {
+				'available': '#52c41a',    // 绿色
+				'reserved': '#FF9901',     // 橙色
+				'unavailable': '#E6E6E6',  // 灰色
+				'using': '#1890ff'         // 蓝色
+			};
+			return colorMap[status] || '#E6E6E6';
+		},
+
+		//设置背景
+		setBgColor(index) {
+			if (this.currentTimeIndex == index) {
+				return {
+					backgroundColor: "#20BBA4",
+					color: "#FFFFFF",
+				}
+			} else {
+				return {
+					backgroundColor: "#FFFFFF",
+					color: "#000000",
+				}
+			}
+		},
+
+		clickTime(index) {
+			this.currentTimeIndex = index;
+			this.selectedDate = this.dateList[index].timestamp;
+			// 切换日期时重新加载房间列表
+			this.loadRoomList();
+		},
+
+		/**
+		 * 点击预约按钮
+		 */
+		handleReservation(room) {
+			if (!room || !room.id) return;
+
+			// 跳转到预约页面，传递房间信息
+			const params = {
+				roomId: room.id,
+				roomName: room.name || '未知房间',
+				date: this.selectedDate, // 选中的日期时间戳
+			};
+
+			// 如果有容量信息，也传递
+			if (room.capacity) {
+				params.capacity = room.capacity;
+			}
+
+			const query = Object.keys(params)
+				.map(key => `${key}=${encodeURIComponent(params[key])}`)
+				.join('&');
+
+			uni.navigateTo({
+				url: `/pages/appointment/appointment-page?${query}`
+			});
+		},
+
+		/**
+		 * 点击房间卡片，显示详情弹窗
+		 */
+		async handleRoomClick(room) {
+			if (!room || !room.id) return;
+
+			this.roomDetailLoading = true;
+			this.roomDetail = null;
+
+			// 打开弹窗
+			this.$refs.roomDetailPopup.open();
+
+			try {
+				const detail = await getRoomDetail(room.id, this.selectedDate);
+				if (detail) {
+					this.roomDetail = detail;
+				} else {
 					uni.showToast({
-						title: '加载房间详情失败',
+						title: '获取房间详情失败',
 						icon: 'none'
 					});
 					this.closeRoomDetail();
-				} finally {
-					this.roomDetailLoading = false;
 				}
-			},
-			
-			/**
-			 * 关闭房间详情弹窗
-			 */
-			closeRoomDetail() {
-				this.$refs.roomDetailPopup.close();
-				this.roomDetail = null;
-			},
-			
-			/**
-			 * 从详情弹窗中点击预约
-			 */
-			handleReservationFromDetail() {
-				if (this.roomDetail) {
-					this.closeRoomDetail();
-					// 延迟一下，等弹窗关闭动画完成
-					setTimeout(() => {
-						// 从详情中获取房间信息并跳转
-						const params = {
-							roomId: this.roomDetail.id,
-							roomName: this.roomDetail.name || '未知房间',
-							date: this.selectedDate,
-						};
-						
-						if (this.roomDetail.capacity) {
-							params.capacity = this.roomDetail.capacity;
-						}
-						
-						const query = Object.keys(params)
-							.map(key => `${key}=${encodeURIComponent(params[key])}`)
-							.join('&');
-						
-						uni.navigateTo({
-							url: `/pages/appointment/appointment-page?${query}`
-						});
-					}, 300);
-				}
-			},
-			
-			/**
-			 * 获取时段状态文本
-			 */
-			getSlotStatusText(status) {
-				const statusMap = {
-					'available': '可预约',
-					'reserved': '已预约',
-					'unavailable': '不可预约',
-					'using': '使用中'
-				};
-				return statusMap[status] || '未知';
+			} catch (error) {
+				console.error('加载房间详情失败', error);
+				uni.showToast({
+					title: '加载房间详情失败',
+					icon: 'none'
+				});
+				this.closeRoomDetail();
+			} finally {
+				this.roomDetailLoading = false;
 			}
 		},
-		
-		computed: {
-			/**
-			 * 计算属性：房间图片列表
-			 */
-			roomDetailImages() {
-				if (!this.roomDetail) return [];
-				if (this.roomDetail.images && this.roomDetail.images.length > 0) {
-					return this.roomDetail.images;
-				}
-				if (this.roomDetail.image_url) {
-					return [this.roomDetail.image_url];
-				}
-				return [];
+
+		/**
+		 * 关闭房间详情弹窗
+		 */
+		closeRoomDetail() {
+			this.$refs.roomDetailPopup.close();
+			this.roomDetail = null;
+		},
+
+		/**
+		 * 从详情弹窗中点击预约
+		 */
+		handleReservationFromDetail() {
+			if (this.roomDetail) {
+				this.closeRoomDetail();
+				// 延迟一下，等弹窗关闭动画完成
+				setTimeout(() => {
+					// 从详情中获取房间信息并跳转
+					const params = {
+						roomId: this.roomDetail.id,
+						roomName: this.roomDetail.name || '未知房间',
+						date: this.selectedDate,
+					};
+
+					if (this.roomDetail.capacity) {
+						params.capacity = this.roomDetail.capacity;
+					}
+
+					const query = Object.keys(params)
+						.map(key => `${key}=${encodeURIComponent(params[key])}`)
+						.join('&');
+
+					uni.navigateTo({
+						url: `/pages/appointment/appointment-page?${query}`
+					});
+				}, 300);
 			}
+		},
+
+		/**
+		 * 获取时段状态文本
+		 */
+		getSlotStatusText(status) {
+			const statusMap = {
+				'available': '可预约',
+				'reserved': '已预约',
+				'unavailable': '不可预约',
+				'using': '使用中'
+			};
+			return statusMap[status] || '未知';
+		},
+
+		/**
+		 * 判断房间是否还有可预约的时段
+		 * @param {Object} room 房间对象
+		 * @returns {boolean} true表示还有可预约时段，false表示已全部约满
+		 */
+		hasAvailableSlots(room) {
+			if (!room || !room.time_slots || !Array.isArray(room.time_slots)) {
+				return false;
+			}
+			// 检查是否有状态为 'available' 的时段
+			return room.time_slots.some(slot => slot.status === 'available');
+		}
+	},
+
+	computed: {
+		/**
+		 * 计算属性：房间图片列表
+		 */
+		roomDetailImages() {
+			if (!this.roomDetail) return [];
+			if (this.roomDetail.images && this.roomDetail.images.length > 0) {
+				return this.roomDetail.images;
+			}
+			if (this.roomDetail.image_url) {
+				return [this.roomDetail.image_url];
+			}
+			return [];
 		}
 	}
+}
 </script>
 
 <style lang="scss">
-	.content {
-		width: 100%;
-		height: 100vh;
-		background-color: #F7F7F7;
-	}
+.content {
+	width: 100%;
+	height: 100vh;
+	background-color: #F7F7F7;
+}
 
-	/* 页面标题 */
-	.page-title {
-		margin-top: 100rpx;
-		text-align: center;
-		margin-bottom: 20rpx;
-	}
+/* 页面标题 */
+.page-title {
+	margin-top: 100rpx;
+	text-align: center;
+	margin-bottom: 20rpx;
+}
 
-	/* 房间详情弹窗样式 */
-	.room-detail-popup {
-		width: 680rpx;
-		max-height: 80vh;
-		background-color: #FFFFFF;
-		border-radius: 20rpx;
-		position: relative;
-		overflow: hidden;
-	}
+/* 房间详情弹窗样式 */
+.room-detail-popup {
+	width: 680rpx;
+	max-height: 80vh;
+	background-color: #FFFFFF;
+	border-radius: 20rpx;
+	position: relative;
+	overflow: hidden;
+}
 
-	.popup-close {
-		position: absolute;
-		top: 10rpx;
-		right: 10rpx;
-		width: 60rpx;
-		height: 60rpx;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		z-index: 10;
-		background-color: rgba(0, 0, 0, 0.3);
-		border-radius: 50%;
-	}
+.popup-close {
+	position: absolute;
+	top: 10rpx;
+	right: 10rpx;
+	width: 60rpx;
+	height: 60rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: 10;
+	background-color: rgba(0, 0, 0, 0.3);
+	border-radius: 50%;
+}
 
-	.popup-loading {
-		padding: 100rpx 0;
-		min-height: 400rpx;
-	}
+.popup-loading {
+	padding: 100rpx 0;
+	min-height: 400rpx;
+}
 
-	.popup-content {
-		width: 100%;
-	}
+.popup-content {
+	width: 100%;
+}
 
-	/* 图片轮播容器 */
-	.detail-swiper-container {
-		width: 100%;
-		height: 400rpx;
-		background-color: #DEDEDE;
-	}
+/* 图片轮播容器 */
+.detail-swiper-container {
+	width: 100%;
+	height: 400rpx;
+	background-color: #DEDEDE;
+}
 
-	.detail-swiper {
-		width: 100%;
-		height: 100%;
-	}
+.detail-swiper {
+	width: 100%;
+	height: 100%;
+}
 
-	.detail-swiper-image {
-		width: 100%;
-		height: 100%;
-	}
+.detail-swiper-image {
+	width: 100%;
+	height: 100%;
+}
 
-	/* 详情区域 */
-	.detail-section {
-		padding: 30rpx;
-		border-bottom: 1rpx solid #F0F0F0;
-	}
+/* 详情区域 */
+.detail-section {
+	padding: 30rpx;
+	border-bottom: 1rpx solid #F0F0F0;
+}
 
-	.detail-section:last-child {
-		border-bottom: none;
-	}
+.detail-section:last-child {
+	border-bottom: none;
+}
 
-	.detail-title-row {
-		display: flex;
-		align-items: center;
-		margin-bottom: 10rpx;
-	}
+.detail-title-row {
+	display: flex;
+	align-items: center;
+	margin-bottom: 10rpx;
+}
 
-	.detail-room-name {
-		font-size: 36rpx;
-		font-weight: bold;
-		color: #262626;
-		flex: 1;
-	}
+.detail-room-name {
+	font-size: 36rpx;
+	font-weight: bold;
+	color: #262626;
+	flex: 1;
+}
 
-	.detail-status-tag {
-		padding: 4rpx 16rpx;
-		border-radius: 8rpx;
-		font-size: 20rpx;
-	}
+.detail-status-tag {
+	padding: 4rpx 16rpx;
+	border-radius: 8rpx;
+	font-size: 20rpx;
+}
 
-	.detail-status-tag.using {
-		background-color: #FF9901;
-		color: #FFFFFF;
-	}
+.detail-status-tag.using {
+	background-color: #FF9901;
+	color: #FFFFFF;
+}
 
-	.detail-status-tag.available {
-		background-color: #52c41a;
-		color: #FFFFFF;
-	}
+.detail-status-tag.available {
+	background-color: #52c41a;
+	color: #FFFFFF;
+}
 
-	.detail-room-type {
-		font-size: 24rpx;
-		color: #999999;
-		margin-bottom: 20rpx;
-	}
+.detail-room-type {
+	font-size: 24rpx;
+	color: #999999;
+	margin-bottom: 20rpx;
+}
 
-	.detail-price-row {
-		display: flex;
-		align-items: center;
-		margin-bottom: 10rpx;
-	}
+.detail-price-row {
+	display: flex;
+	align-items: center;
+	margin-bottom: 10rpx;
+}
 
-	.detail-price-label {
-		font-size: 24rpx;
-		color: #666666;
-	}
+.detail-price-label {
+	font-size: 24rpx;
+	color: #666666;
+}
 
-	.detail-price-value {
-		font-size: 28rpx;
-		color: #262626;
-		font-weight: 500;
-	}
+.detail-price-value {
+	font-size: 28rpx;
+	color: #262626;
+	font-weight: 500;
+}
 
-	.detail-price-member {
-		font-size: 28rpx;
-		color: #FF0000;
-		font-weight: 500;
-	}
+.detail-price-member {
+	font-size: 28rpx;
+	color: #FF0000;
+	font-weight: 500;
+}
 
-	.detail-info-row {
-		display: flex;
-		align-items: center;
-		margin-top: 20rpx;
-	}
+.detail-info-row {
+	display: flex;
+	align-items: center;
+	margin-top: 20rpx;
+}
 
-	.detail-info-label {
-		font-size: 24rpx;
-		color: #666666;
-	}
+.detail-info-label {
+	font-size: 24rpx;
+	color: #666666;
+}
 
-	.detail-info-value {
-		font-size: 24rpx;
-		color: #262626;
-	}
+.detail-info-value {
+	font-size: 24rpx;
+	color: #262626;
+}
 
-	.detail-section-title {
-		font-size: 28rpx;
-		font-weight: bold;
-		color: #262626;
-		margin-bottom: 20rpx;
-		display: block;
-	}
+.detail-section-title {
+	font-size: 28rpx;
+	font-weight: bold;
+	color: #262626;
+	margin-bottom: 20rpx;
+	display: block;
+}
 
-	.detail-description {
-		font-size: 26rpx;
-		color: #666666;
-		line-height: 1.6;
-	}
+.detail-description {
+	font-size: 26rpx;
+	color: #666666;
+	line-height: 1.6;
+}
 
-	/* 设施标签 */
-	.amenities-container {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 16rpx;
-	}
+/* 设施标签 */
+.amenities-container {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 16rpx;
+}
 
-	.amenity-tag {
-		padding: 8rpx 20rpx;
-		background-color: #F5F5F5;
-		border-radius: 8rpx;
-		font-size: 24rpx;
-		color: #666666;
-	}
+.amenity-tag {
+	padding: 8rpx 20rpx;
+	background-color: #F5F5F5;
+	border-radius: 8rpx;
+	font-size: 24rpx;
+	color: #666666;
+}
 
-	/* 时段状态 */
-	.time-slots-container {
-		display: flex;
-		flex-direction: column;
-		gap: 20rpx;
-	}
+/* 时段状态 */
+.time-slots-container {
+	display: flex;
+	flex-direction: column;
+	gap: 20rpx;
+}
 
-	.time-slot-item {
-		background-color: #F8F8F8;
-		border-radius: 12rpx;
-		padding: 20rpx;
-	}
+.time-slot-item {
+	background-color: #F8F8F8;
+	border-radius: 12rpx;
+	padding: 20rpx;
+}
 
-	.time-slot-header {
-		display: flex;
-		align-items: center;
-		margin-bottom: 12rpx;
-	}
+.time-slot-header {
+	display: flex;
+	align-items: center;
+	margin-bottom: 12rpx;
+}
 
-	.time-slot-name {
-		font-size: 26rpx;
-		font-weight: 500;
-		color: #262626;
-	}
+.time-slot-name {
+	font-size: 26rpx;
+	font-weight: 500;
+	color: #262626;
+}
 
-	.time-slot-content {
-		display: flex;
-		flex-direction: column;
-		gap: 8rpx;
-	}
+.time-slot-content {
+	display: flex;
+	flex-direction: column;
+	gap: 8rpx;
+}
 
-	.time-slot-status {
-		font-size: 24rpx;
-		color: #666666;
-	}
+.time-slot-status {
+	font-size: 24rpx;
+	color: #666666;
+}
 
-	.time-slot-price {
-		display: flex;
-		align-items: center;
-		gap: 20rpx;
-	}
+.time-slot-price {
+	display: flex;
+	align-items: center;
+	gap: 20rpx;
+}
 
-	.time-slot-price-text {
-		font-size: 22rpx;
-		color: #666666;
-	}
+.time-slot-price-text {
+	font-size: 22rpx;
+	color: #666666;
+}
 
-	.time-slot-price-text.member {
-		color: #FF0000;
-	}
+.time-slot-price-text.member {
+	color: #FF0000;
+}
 
-	/* 底部操作按钮 */
-	.popup-footer {
-		display: flex;
-		align-items: center;
-		padding: 20rpx 30rpx;
-		border-top: 1rpx solid #F0F0F0;
-		gap: 20rpx;
-	}
+/* 底部操作按钮 */
+.popup-footer {
+	display: flex;
+	align-items: center;
+	padding: 20rpx 30rpx;
+	border-top: 1rpx solid #F0F0F0;
+	gap: 20rpx;
+}
 
-	.popup-btn {
-		flex: 1;
-		height: 80rpx;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		border-radius: 12rpx;
-		font-size: 28rpx;
-		font-weight: 500;
-	}
+.popup-btn {
+	flex: 1;
+	height: 80rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 12rpx;
+	font-size: 28rpx;
+	font-weight: 500;
+}
 
-	.popup-btn.secondary {
-		background-color: #F5F5F5;
-		color: #666666;
-	}
+.popup-btn.secondary {
+	background-color: #F5F5F5;
+	color: #666666;
+}
 
-	.popup-btn.primary {
-		background-color: #20BBA4;
-		color: #FFFFFF;
-	}
+.popup-btn.primary {
+	background-color: #20BBA4;
+	color: #FFFFFF;
+}
+
+.popup-btn.disabled {
+	background-color: #CCCCCC;
+	color: #FFFFFF;
+	opacity: 0.6;
+}
+
+/* 房间列表预约按钮样式 */
+.reservation-btn {
+	width: 92rpx;
+	height: 46rpx;
+	background-color: #20BBA4;
+	border-radius: 52rpx;
+	font-size: 26rpx;
+	color: white;
+	position: absolute;
+	bottom: 94rpx;
+	right: 10rpx;
+}
+
+.reservation-btn-disabled {
+	background-color: #CCCCCC;
+	opacity: 0.8;
+}
 </style>
\ No newline at end of file