diff --git a/common/server/interface/sq.js b/common/server/interface/sq.js
index 05a85d7..d979f78 100644
--- a/common/server/interface/sq.js
+++ b/common/server/interface/sq.js
@@ -9,7 +9,7 @@ import request from '@/common/system/request';
 export const getReservationList = async (index = 1, size = 20) => {
     console.log('getReservationList', index, size);
 
-    const res = await request.getOrCache("sq/GetReservationList", { pageIndex: index, pageSize: size }, 5);
+    const res = await request.getOrCache("sq/GetReservationList", { pageIndex: index, pageSize: size }, 1);
     if (res.code == 0) {
         return res.data;
     }
@@ -149,7 +149,8 @@ export const joinReservation = async (joinData) => {
     if (res.code == 0) {
         return {
             success: true,
-            message: res.msg || '加入预约成功'
+            message: res.msg || '加入预约成功',
+            data: res.data.reservation_id
         };
     }
     return {
diff --git a/components/com/index/ReservationPopup.vue b/components/com/index/ReservationPopup.vue
index 5059072..d28fb36 100644
--- a/components/com/index/ReservationPopup.vue
+++ b/components/com/index/ReservationPopup.vue
@@ -119,8 +119,11 @@
 
 <script setup>
 import { ref, computed } from 'vue'
-import { userInfo } from '@/common/server/user'
-import { showModalConfirm } from '@/common/utils'
+import { userInfo, isLogin } from '@/common/server/user'
+import { showModalConfirm, requestSubscribeMessage, requestPayment } from '@/common/utils'
+import { getSubscribeMessage } from '@/common/server/config'
+import { usePay } from '@/common/server/interface/user'
+import { joinReservation, cancelReservation } from '@/common/server/interface/sq'
 
 // 组件引用
 const popup = ref(null)
@@ -208,21 +211,185 @@ const getGenderText = (genderLimit) => {
 }
 
 // 处理加入组局
-const handleJoin = () => {
-	// 触发父组件的加入事件  reservationData.value
-	console.log("reservationData.value", reservationData.value);
+const handleJoin = async () => {
+	// 检查登录状态
+	var isLoginSuccess = await isLogin();
+	if (!isLoginSuccess) {
+		close();
+		uni.navigateTo({
+			url: '/pages/me/login'
+		});
+		return;
+	}
 
+	try {
+		// 获取订阅消息
+		var messageId = await getSubscribeMessage(reservationData.value.deposit_fee);
+		console.log("messageId", messageId);
+		var subscribeMessage = await requestSubscribeMessage(messageId);
+		console.log("message", subscribeMessage);
+
+		// 显示加载状态
+		uni.showLoading({
+			title: '加入中...'
+		});
+
+		// 准备加入数据
+		const joinData = {
+			ReservationsId: reservationData.value.id,
+			important_data: {}
+		};
+
+		var resPay = null;
+		// 如果有鸽子费，需要先支付
+		if (reservationData.value.deposit_fee > 0) {
+			resPay = await usePay(reservationData.value.deposit_fee);
+			if (resPay == null) {
+				uni.hideLoading();
+				uni.showToast({
+					title: '鸽子费订单创建失败，请重新尝试！',
+					icon: 'none'
+				});
+				return;
+			}
+			subscribeMessage.result.paymentId = resPay.paymentId;
+		}
+
+		// 准备重要数据
+		var important_data = "";
+		if (subscribeMessage.result != null) {
+			important_data = JSON.stringify(subscribeMessage.result);
+		}
+		joinData.important_data = important_data;
+
+		// 调用加入预约接口
+		const result = await joinReservation(joinData);
+		uni.hideLoading();
+		console.log("join result", result);
+
+		if (!result.success) {
+			uni.showToast({
+				title: result.message,
+				icon: 'none'
+			});
+			return;
+		}
+
+		// 如果有鸽子费，进行支付
+		if (reservationData.value.deposit_fee > 0 && resPay != null) {
+			var payRes = await requestPayment(resPay);
+			if (payRes.success) {
+				uni.showToast({
+					title: '鸽子费支付成功，加入组局成功！',
+					icon: 'success'
+				});
+			} else {
+				uni.showToast({
+					title: '鸽子费支付失败，请重新加入！',
+					icon: 'none'
+				});
+				await cancelReservation(result.data, "鸽子费支付失败，请重新加入！");
+				return;
+			}
+		} else {
+			uni.showToast({
+				title: '加入组局成功！',
+				icon: 'success'
+			});
+		}
+
+		// 关闭弹窗
+		close();
+		// 触发刷新列表事件
+		emit('refreshList');
+
+	} catch (error) {
+		uni.hideLoading();
+		console.error('加入组局失败:', error);
+		uni.showToast({
+			title: '加入失败，请重试',
+			icon: 'none'
+		});
+	}
 }
+//取消组局
 const cancelJoin = async () => {
 	var res = await showModalConfirm('提示', '确定要取消组局吗？')
 	if (res) {
-		console.log("reservationData.value", reservationData.value);
+		try {
+			// 显示加载状态
+			uni.showLoading({
+				title: '取消中...'
+			});
+
+			// 调用取消预约接口
+			const result = await cancelReservation(reservationData.value.id, "发起者取消组局");
+			uni.hideLoading();
+			console.log("cancel result", result);
+
+			if (result.success) {
+				uni.showToast({
+					title: '取消组局成功！',
+					icon: 'success'
+				});
+				// 关闭弹窗
+				close();
+				// 触发刷新列表事件
+				emit('refreshList');
+			} else {
+				uni.showToast({
+					title: result.message,
+					icon: 'none'
+				});
+			}
+		} catch (error) {
+			uni.hideLoading();
+			console.error('取消组局失败:', error);
+			uni.showToast({
+				title: '取消失败，请重试',
+				icon: 'none'
+			});
+		}
 	}
 }
+//退出组局
 const exitJoin = async () => {
 	var res = await showModalConfirm('提示', '确定要退出组局吗？')
 	if (res) {
-		console.log("reservationData.value", reservationData.value);
+		try {
+			// 显示加载状态
+			uni.showLoading({
+				title: '退出中...'
+			});
+
+			// 调用取消预约接口（参与者退出）
+			const result = await cancelReservation(reservationData.value.id, "参与者退出组局");
+			uni.hideLoading();
+			console.log("exit result", result);
+
+			if (result.success) {
+				uni.showToast({
+					title: '退出组局成功！',
+					icon: 'success'
+				});
+				// 关闭弹窗
+				close();
+				// 触发刷新列表事件
+				emit('refreshList');
+			} else {
+				uni.showToast({
+					title: result.message,
+					icon: 'none'
+				});
+			}
+		} catch (error) {
+			uni.hideLoading();
+			console.error('退出组局失败:', error);
+			uni.showToast({
+				title: '退出失败，请重试',
+				icon: 'none'
+			});
+		}
 	}
 }
 // 打开用户信息弹窗
@@ -232,7 +399,7 @@ const openUserPop = (user) => {
 }
 
 // 定义事件
-const emit = defineEmits(['openUserPop'])
+const emit = defineEmits(['openUserPop', 'refreshList'])
 
 // 暴露方法给父组件
 defineExpose({
diff --git a/pages/appointment/appointment-page.vue b/pages/appointment/appointment-page.vue
index 0854163..9352072 100644
--- a/pages/appointment/appointment-page.vue
+++ b/pages/appointment/appointment-page.vue
@@ -318,6 +318,24 @@ const gameRuleRangeChange = (e) => {
 	console.log('gameRuleRangeChange:', e)
 }
 
+// 获取玩法类型文本
+const getGameTypeText = (gameTypeValue) => {
+	if (!gameTypeValue || gameTypeValue === 0) {
+		return '';
+	}
+	const gameType = gameTypeRange.value.find(item => item.value === gameTypeValue);
+	return gameType ? gameType.text : '';
+}
+
+// 获取具体规则文本
+const getGameRuleText = (gameRuleValue) => {
+	if (!gameRuleValue || gameRuleValue === 0) {
+		return '';
+	}
+	const gameRule = gameRuleRange.value.find(item => item.value === gameRuleValue);
+	return gameRule ? gameRule.text : '';
+}
+
 const smokingOptions = ref([
 	{ value: 2, text: '不禁烟' },
 	{ value: 1, text: '禁烟' },
@@ -476,6 +494,10 @@ const submitReservation = async () => {
 			important_data: {}
 		}
 
+		// 将玩法类型和具体规则从数字转换为字符串
+		submitData.game_type = getGameTypeText(submitData.game_type);
+		submitData.game_rule = getGameRuleText(submitData.game_rule);
+
 		var resPay = null;
 		if (submitData.deposit_fee > 0) {
 			resPay = await usePay(submitData.deposit_fee);
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 56fdba4..4eba855 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -38,7 +38,7 @@
 
 
 		<!-- 预约信息弹窗组件 -->
-		<ReservationPopup ref="reservationPopup" @openUserPop="openUserPop" />
+		<ReservationPopup ref="reservationPopup" @openUserPop="openUserPop" @refreshList="refreshData" />