diff --git a/manifest.json b/manifest.json
index 56b8a1c..b427066 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,6 +1,6 @@
 {
-    "name" : "mahjong_group",
-    "appid" : "__UNI__6A23109",
+    "name" : "山雀搭子",
+    "appid" : "__UNI__60D9924",
     "description" : "",
     "versionName" : "1.0.0",
     "versionCode" : "100",
diff --git a/pages.json b/pages.json
index ace6059..200ebc8 100644
--- a/pages.json
+++ b/pages.json
@@ -97,6 +97,29 @@
 			"style": {
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path": "pages/me/my-message-page",
+			"style": {
+				"navigationBarTitleText": "",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path" : "pages/appointment/book-room-page",
+			"style" : 
+			{
+				"navigationBarTitleText" : "",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path" : "pages/me/my-earnings-page",
+			"style" : 
+			{
+				"navigationBarTitleText" : "",
+				"navigationStyle": "custom"
+			}
 		}
 	],
 	"globalStyle": {
@@ -118,7 +141,8 @@
 				"text": "首页"
 			},
 			{
-				"pagePath": "pages/appointment/appointment-page",
+				// "pagePath": "pages/appointment/appointment-page",
+				"pagePath": "pages/appointment/book-room-page",
 				"iconPath": "/static/tabbar/appointment.png",
 				"selectedIconPath": "/static/tabbar/appointment_s.png",
 				"text": "预约"
diff --git a/pages/appointment/appointment-page.vue b/pages/appointment/appointment-page.vue
index d26957b..20c8464 100644
--- a/pages/appointment/appointment-page.vue
+++ b/pages/appointment/appointment-page.vue
@@ -1,100 +1,102 @@
 <template>
 	<com-page-container-base ref="_containerBase">
 		<view class="content column">
-
 			<text class="page-title">发起预约</text>
+			<view class="column" style="overflow-y: auto;">
 
-			<card-container marginTop="30rpx">
-				<label-field label="预定时长">
-					<tag-select :options="timeRange" v-model="timeRangeValue" @change="onTimeRangeChange" />
-				</label-field>
-				<view :style="{ height: lineHeight }"></view>
-				<time-select-cell label="开始时间" icon="@@:app/static/time_start.png" @select="openUpDatesTimePicker">
-					{{ getDayDescription(reservationInfo.start_time * 1000) }}
-				</time-select-cell>
-				<view :style="{ height: lineHeight }"></view>
-				<time-select-cell label="结束时间" icon="@@:app/static/time_end.png" @select="openUpDatesTimePickerEnd">
-					{{ getDayDescription(reservationInfo.end_time * 1000) }}
-				</time-select-cell>
-				<view :style="{ height: lineHeight }"></view>
-				<time-select-cell label="房间" @select="openRoomPicker">
-					{{ getRoomPickerName() }}
-				</time-select-cell>
-			</card-container>
+				<card-container marginTop="30rpx">
+					<label-field label="预定时长">
+						<tag-select :options="timeRange" v-model="timeRangeValue" @change="onTimeRangeChange" />
+					</label-field>
+					<view :style="{ height: lineHeight }"></view>
+					<time-select-cell label="开始时间" icon="@@:app/static/time_start.png" @select="openUpDatesTimePicker">
+						{{ getDayDescription(reservationInfo.start_time * 1000) }}
+					</time-select-cell>
+					<view :style="{ height: lineHeight }"></view>
+					<time-select-cell label="结束时间" icon="@@:app/static/time_end.png" @select="openUpDatesTimePickerEnd">
+						{{ getDayDescription(reservationInfo.end_time * 1000) }}
+					</time-select-cell>
+					<view :style="{ height: lineHeight }"></view>
+					<time-select-cell label="房间" @select="openRoomPicker">
+						{{ getRoomPickerName() }}
+					</time-select-cell>
+				</card-container>
 
-			<card-container marginTop="30rpx">
+				<card-container marginTop="30rpx">
 
-				<label-field label="组局名称">
-					<view class="input-wrapper">
-						<up-input placeholder="请输入内容" border="surround" v-model="reservationInfo.title"></up-input>
-					</view>
-				</label-field>
+					<label-field label="组局名称">
+						<view class="input-wrapper">
+							<up-input placeholder="请输入内容" border="surround" v-model="reservationInfo.title"></up-input>
+						</view>
+					</label-field>
 
-				<view :style="{ height: lineHeight }"></view>
-				<label-field label="人数">
-					<uni-data-select v-model="reservationInfo.player_count" :placeholder="peopleText"
-						:localdata="peopleRange"></uni-data-select>
-				</label-field>
-				<view :style="{ height: lineHeight }"></view>
-				<label-field label="玩法类型">
-					<uni-data-select v-model="reservationInfo.game_type" placeholder="请选择玩法类型"
-						:localdata="gameTypeRange" @change="gameTypeRangeChange"></uni-data-select>
-				</label-field>
-				<view :style="{ height: lineHeight }"></view>
-				<label-field label="具体规则">
-					<uni-data-select v-model="reservationInfo.game_rule" :placeholder="gameRuleText"
-						:localdata="gameRuleRange" @change="gameRuleRangeChange"></uni-data-select>
-				</label-field>
-				<view :style="{ height: lineHeight }"></view>
-				<label-field label="其他补充">
-					<view class="input-wrapper">
-						<up-input placeholder="请输入其他补充内容" v-model="reservationInfo.extra_info"></up-input>
-					</view>
-				</label-field>
+					<view :style="{ height: lineHeight }"></view>
+					<label-field label="人数">
+						<uni-data-select v-model="reservationInfo.player_count" :placeholder="peopleText"
+							:localdata="peopleRange"></uni-data-select>
+					</label-field>
+					<view :style="{ height: lineHeight }"></view>
+					<label-field label="玩法类型">
+						<uni-data-select v-model="reservationInfo.game_type" placeholder="请选择玩法类型"
+							:localdata="gameTypeRange" @change="gameTypeRangeChange"></uni-data-select>
+					</label-field>
+					<view :style="{ height: lineHeight }"></view>
+					<label-field label="具体规则">
+						<uni-data-select v-model="reservationInfo.game_rule" :placeholder="gameRuleText"
+							:localdata="gameRuleRange" @change="gameRuleRangeChange"></uni-data-select>
+					</label-field>
+					<view :style="{ height: lineHeight }"></view>
+					<label-field label="其他补充">
+						<view class="input-wrapper">
+							<up-input placeholder="请输入其他补充内容" v-model="reservationInfo.extra_info"></up-input>
+						</view>
+					</label-field>
 
-			</card-container>
+				</card-container>
 
 
-			<card-container marginTop="30rpx">
-				<label-slect-field label="是否禁烟">
-					<view style="height: 61rpx;display: flex;justify-content: left;align-items: center;">
-						<com-appointment-radio-select :options="smokingOptions" v-model="reservationInfo.is_smoking" />
-					</view>
-				</label-slect-field>
-				<view :style="{ height: lineHeight }"></view>
-				<label-slect-field label="性别">
-					<view style="height: 61rpx;display: flex;justify-content: left;align-items: center;">
-						<com-appointment-radio-select :options="genderOptions" v-model="reservationInfo.gender_limit" />
-					</view>
-				</label-slect-field>
-				<view :style="{ height: lineHeight }"></view>
-				<label-slect-field label="年龄范围">
-					<view @click="openAgePicker"
-						style="height: 61rpx;display: flex;justify-content: left;align-items: center;"
-						class="clickable-row">
-						{{ getAgeRangeText() }}
-					</view>
-				</label-slect-field>
-				<view :style="{ height: lineHeight }"></view>
-				<label-slect-field label="信誉">
-					<view class="flex-center-row" style="height: 61rpx;">
-						<text class="inline-label" style="margin-top: 12rpx;">大于等于</text>
-						<view class="counter-container">
-							<view @click="decrement" :disabled="currentValue <= 0">
-								<uni-icons type="minus" size="24" color="#00AC4E" />
-							</view>
-							<view class="counter-value">
-								{{ currentValue.toFixed(1) }}
-							</view>
-							<view @click="increment" :disabled="currentValue >= 5">
-								<uni-icons type="plus" size="24" color="#00AC4E" />
+				<card-container marginTop="30rpx">
+					<label-slect-field label="是否禁烟">
+						<view style="height: 61rpx;display: flex;justify-content: left;align-items: center;">
+							<com-appointment-radio-select :options="smokingOptions"
+								v-model="reservationInfo.is_smoking" />
+						</view>
+					</label-slect-field>
+					<view :style="{ height: lineHeight }"></view>
+					<label-slect-field label="性别">
+						<view style="height: 61rpx;display: flex;justify-content: left;align-items: center;">
+							<com-appointment-radio-select :options="genderOptions"
+								v-model="reservationInfo.gender_limit" />
+						</view>
+					</label-slect-field>
+					<view :style="{ height: lineHeight }"></view>
+					<label-slect-field label="年龄范围">
+						<view @click="openAgePicker"
+							style="height: 61rpx;display: flex;justify-content: left;align-items: center;"
+							class="clickable-row">
+							{{ getAgeRangeText() }}
+						</view>
+					</label-slect-field>
+					<view :style="{ height: lineHeight }"></view>
+					<label-slect-field label="信誉">
+						<view class="flex-center-row" style="height: 61rpx;">
+							<text class="inline-label" style="margin-top: 12rpx;">大于等于</text>
+							<view class="counter-container">
+								<view @click="decrement" :disabled="currentValue <= 0">
+									<uni-icons type="minus" size="24" color="#00AC4E" />
+								</view>
+								<view class="counter-value">
+									{{ currentValue.toFixed(1) }}
+								</view>
+								<view @click="increment" :disabled="currentValue >= 5">
+									<uni-icons type="plus" size="24" color="#00AC4E" />
+								</view>
 							</view>
 						</view>
-					</view>
-				</label-slect-field>
-			</card-container>
+					</label-slect-field>
+				</card-container>
 
-			<card-container marginTop="30rpx">
+				<card-container marginTop="30rpx">
 
                 <label-slect-field label="鸽子费">
                     <com-appointment-radio-select :options="depositOptions" v-model="reservationInfo.deposit_fee" />
@@ -109,21 +111,22 @@
 				<text class="note-text">鸽子费（保证金），参与人需缴纳鸽子费。若有参与者在预约后没有赴约，其鸽子费由在场的所有人平分。组局成功或失败后鸽子费将全额返还。</text>
 			</card-container>
 
-			<view class="action-row">
-				<view class="center reset-button" @click="resetForm">
-					<text style="margin: 20rpx;">重置</text>
+				<view class="action-row">
+					<view class="center reset-button" @click="resetForm">
+						<text style="margin: 20rpx;">重置</text>
+					</view>
+					<view class="center submit-button action-submit" @click="submitReservation">
+						<text style="margin: 20rpx; color: white;">发起预约</text>
+					</view>
 				</view>
-				<view class="center submit-button action-submit" @click="submitReservation">
-					<text style="margin: 20rpx; color: white;">发起预约</text>
+
+				<view class="center note-container" @click="tipsShow">
+
+					<!-- <text class="muted-text">组局成功后，发起者可通过店员领取线下红包</text> -->
 				</view>
+
+
 			</view>
-
-			<view class="center note-container" @click="tipsShow">
-
-				<!-- <text class="muted-text">组局成功后，发起者可通过店员领取线下红包</text> -->
-			</view>
-
-
 		</view>
 		<com-appointment-picker-data ref="roomPickerRef" />
 		<up-picker title="年龄范围选择" :show="agePickerVisible" :columns="agePickerColumns" :keyName="'text'"
@@ -160,234 +163,245 @@
 </template>
 
 <script setup>
-import {
-	ref,
-	watch
-} from 'vue';
-import {
-	getConfigData, getSubscribeMessage
-} from '@/common/server/config'
-import { usePay } from '@/common/server/interface/user'
-import {
-	requestSubscribeMessage,
-	requestPayment
-} from '@/common/utils'
-import {
-	getDayDescription,
-	ceilMinuteToNext5
-} from '@/common/system/timeUtile';
-import { isLogin } from '@/common/server/user'
-import {
-	forEach,
-	union
-} from 'lodash';
-import {
+	import {
+		ref,
+		watch
+	} from 'vue';
+	import {
+		getConfigData,
+		getSubscribeMessage
+	} from '@/common/server/config'
+	import {
+		usePay
+	} from '@/common/server/interface/user'
+	import {
+		requestSubscribeMessage,
+		requestPayment
+	} from '@/common/utils'
+	import {
+		getDayDescription,
+		ceilMinuteToNext5
+	} from '@/common/system/timeUtile';
+	import {
+		isLogin
+	} from '@/common/server/user'
+	import {
+		forEach,
+		union
+	} from 'lodash';
+	import {
 
-	getDetail
-} from '@/common/server/index'
+		getDetail
+	} from '@/common/server/index'
 
-import TimeSelectCell from '@/components/com/appointment/time-select-cell.vue'
-import LabelField from '@/components/com/appointment/label-field.vue'
-import LabelSlectField from '@/components/com/appointment/label-slect-field.vue'
-import CardContainer from '@/components/com/appointment/card-container.vue'
-import TagSelect from '@/components/com/appointment/tag-select.vue'
-import ComAppointmentPickerData from '@/components/com/appointment/picker-data.vue'
-import ComAppointmentRadioSelect from '@/components/com/appointment/radio-select.vue'
-import {
-	getReservationRoomList, addSQReservation, cancelReservation, canCreateSQReservation
-} from '@/common/server/interface/sq'
-const _containerBase = ref(null)
-const submitPopupRef = ref(null)
-// 年龄选择器状态
-const agePickerVisible = ref(false)
-const agePickerColumns = ref([[], []])
-const agePickerDefaultIndex = ref([0, 0])
-const reservationData = ref(null)
-const lineHeight = ref("15rpx")
-const timeRange = ref(["2小时", "3小时", "4小时", "自定义"])
-const timeRangeValue = ref("")
-// 房间选项
-const roomOptions = ref([])
-const roomPickerRef = ref(null)
-//提交表单数据
-const reservationInfo = ref({
-	room_id: 0, //房间id 非空
-	room_name: '请选择房间', //房间名称 
-	start_time: 0, //开始时间 时间戳 非空
-	end_time: 0, //结束时间  时间戳 非空
-	max_age: 0, //最大年龄  默认0
-	min_age: 0, //最小年龄 非空
-	title: '', //组局名称 非空
-	extra_info: '', //其它说明 可为空
-	game_rule: '', //具体规则 非空 
-	game_type: '', //玩法类型 非空
-	gender_limit: 0, //性别限制 
-	is_smoking: 2, //是否禁烟
-	credit_limit: 0, //信誉限制
-	deposit_fee: 0, //鸽子费
-	player_count: 0, //人数
-});
-//自动计算结束时间
-const onTimeRangeChange = async (val) => {
-	timeRangeValue.value = val;
-	console.log('timeRange change:', val)
-	if (val != "") {
-		await openUpDatesTimePicker(false);
-		if (reservationInfo.value.start_time > 0) {
-			var str = val;
-			if (str == "2小时") {
-				reservationInfo.value.end_time = reservationInfo.value.start_time + 2 * 60 * 60;
-			} else if (str == "3小时") {
-				reservationInfo.value.end_time = reservationInfo.value.start_time + 3 * 60 * 60;
-			} else if (str == "4小时") {
-				reservationInfo.value.end_time = reservationInfo.value.start_time + 4 * 60 * 60;
-			} else {
-				await openUpDatesTimePickerEnd(false);
+	import TimeSelectCell from '@/components/com/appointment/time-select-cell.vue'
+	import LabelField from '@/components/com/appointment/label-field.vue'
+	import LabelSlectField from '@/components/com/appointment/label-slect-field.vue'
+	import CardContainer from '@/components/com/appointment/card-container.vue'
+	import TagSelect from '@/components/com/appointment/tag-select.vue'
+	import ComAppointmentPickerData from '@/components/com/appointment/picker-data.vue'
+	import ComAppointmentRadioSelect from '@/components/com/appointment/radio-select.vue'
+	import {
+		getReservationRoomList,
+		addSQReservation,
+		cancelReservation,
+		canCreateSQReservation
+	} from '@/common/server/interface/sq'
+	const _containerBase = ref(null)
+	const submitPopupRef = ref(null)
+	// 年龄选择器状态
+	const agePickerVisible = ref(false)
+	const agePickerColumns = ref([
+		[],
+		[]
+	])
+	const agePickerDefaultIndex = ref([0, 0])
+	const reservationData = ref(null)
+	const lineHeight = ref("15rpx")
+	const timeRange = ref(["2小时", "3小时", "4小时", "自定义"])
+	const timeRangeValue = ref("")
+	// 房间选项
+	const roomOptions = ref([])
+	const roomPickerRef = ref(null)
+	//提交表单数据
+	const reservationInfo = ref({
+		room_id: 0, //房间id 非空
+		room_name: '请选择房间', //房间名称 
+		start_time: 0, //开始时间 时间戳 非空
+		end_time: 0, //结束时间  时间戳 非空
+		max_age: 0, //最大年龄  默认0
+		min_age: 0, //最小年龄 非空
+		title: '', //组局名称 非空
+		extra_info: '', //其它说明 可为空
+		game_rule: '', //具体规则 非空 
+		game_type: '', //玩法类型 非空
+		gender_limit: 0, //性别限制 
+		is_smoking: 2, //是否禁烟
+		credit_limit: 0, //信誉限制
+		deposit_fee: 0, //鸽子费
+		player_count: 0, //人数
+	});
+	//自动计算结束时间
+	const onTimeRangeChange = async (val) => {
+		timeRangeValue.value = val;
+		console.log('timeRange change:', val)
+		if (val != "") {
+			await openUpDatesTimePicker(false);
+			if (reservationInfo.value.start_time > 0) {
+				var str = val;
+				if (str == "2小时") {
+					reservationInfo.value.end_time = reservationInfo.value.start_time + 2 * 60 * 60;
+				} else if (str == "3小时") {
+					reservationInfo.value.end_time = reservationInfo.value.start_time + 3 * 60 * 60;
+				} else if (str == "4小时") {
+					reservationInfo.value.end_time = reservationInfo.value.start_time + 4 * 60 * 60;
+				} else {
+					await openUpDatesTimePickerEnd(false);
+				}
 			}
 		}
 	}
-}
-const getRoomPickerName = () => {
-	return reservationInfo.value.room_name;
-}
-const tipsShow = () => {
-	submitPopupRef.value.open()
-}
+	const getRoomPickerName = () => {
+		return reservationInfo.value.room_name;
+	}
+	const tipsShow = () => {
+		submitPopupRef.value.open()
+	}
 
-const openUpDatesTimePicker = async (isManual = true) => {
-	var now = reservationInfo.value.start_time * 1000;
-	var min = Date.now();
-	min += 1000 * 60 * 30;
-	min = ceilMinuteToNext5(min).valueOf();
-	if (reservationInfo.value.start_time == 0) {
-		now = Date.now();
-		now += 1000 * 60 * 30;
-		now = ceilMinuteToNext5(now).valueOf();
-	}
-	const startTime = await _containerBase.value.openUpDatesTimePicker(now, min, "预约开始时间")
-	// 直接设置到表单对象，毫秒转秒
-	reservationInfo.value.start_time = Math.floor(startTime / 1000)
-	// 手动选择时间则切换为"自定义"
-	if (isManual) {
-		timeRangeValue.value = "自定义"
-	}
-}
-const openUpDatesTimePickerEnd = async (isManual = true) => {
-	if (reservationInfo.value.start_time == 0) {
-		uni.showToast({
-			title: '请先选择开始时间',
-			icon: 'none'
-		})
-		return;
-	}
-	var now = reservationInfo.value.end_time * 1000;
-	var min = (reservationInfo.value.start_time * 1000 + 1000 * 60 * 30);
-	if (now == 0) {
-		now = (reservationInfo.value.start_time * 1000 + 1000 * 60 * 30);
-	}
-	//minDate+1000*60*30 最小间隔30分钟
-	const endTime = await _containerBase.value.openUpDatesTimePicker(now, min, "预约结束时间")
-	// 直接设置到表单对象，毫秒转秒
-	reservationInfo.value.end_time = Math.floor(endTime / 1000)
-	// 手动选择时间则切换为"自定义"
-	if (isManual) {
-		timeRangeValue.value = "自定义"
-	}
-}
-const maxPlayerCount = ref(0)
-const openRoomPicker = async () => {
-	// 需先选择有效的开始/结束时间
-	if (!reservationInfo.value.start_time || !reservationInfo.value.end_time) {
-		uni.showToast({
-			title: '请先选择开始和结束时间',
-			icon: 'none'
-		})
-		return
-	}
-	if (reservationInfo.value.end_time <= reservationInfo.value.start_time) {
-		uni.showToast({
-			title: '结束时间需晚于开始时间',
-			icon: 'none'
-		})
-		return
-	}
-	// 无数据则尝试拉取
-	if (!roomOptions.value || roomOptions.value.length === 0) {
-		await tryLoadRooms()
-	}
-	if (!roomOptions.value || roomOptions.value.length === 0) {
-		uni.showToast({
-			title: '暂无可预约房间',
-			icon: 'none'
-		})
-		return
-	}
-	const selected = await roomPickerRef.value.show({
-		options: roomOptions.value,
-		valueKey: 'id',
-		labelKey: 'name',
-		modelValue: reservationInfo.value.room_id
-	})
-	if (selected) {
-		reservationInfo.value.room_id = selected.id
-		reservationInfo.value.room_name = selected.name
-		maxPlayerCount.value = selected.capacity
-
-	}
-}
-
-const peopleRange = ref([])
-const peopleText = ref("请先选择房间");
-const gameTypeRange = ref([])
-const gameRuleRange = ref([])
-const gameRuleText = ref("请先选择玩法类型");
-const gameTypeRangeChange = (e) => {
-	console.log('gameTypeRangeChange:', e)
-	// gameRuleRange.value
-	if (e == 0) {
-		gameRuleRange.value = [];
-		reservationInfo.value.game_rule = 0;
-		gameRuleText.value = "请先选择玩法类型";
-	} else {
-		var f = gameTypeRange.value.find(it => it.value == e);
-		console.log('f', f);
-		gameRuleText.value = "请选择具体规则";
-		var temp = [];
-
-		if (f.children != null && f.children.length > 0) {
-
-			f.children.forEach(e => {
-				temp.push({
-					value: e.id,
-					text: e.name
-				})
-			})
+	const openUpDatesTimePicker = async (isManual = true) => {
+		var now = reservationInfo.value.start_time * 1000;
+		var min = Date.now();
+		min += 1000 * 60 * 30;
+		min = ceilMinuteToNext5(min).valueOf();
+		if (reservationInfo.value.start_time == 0) {
+			now = Date.now();
+			now += 1000 * 60 * 30;
+			now = ceilMinuteToNext5(now).valueOf();
+		}
+		const startTime = await _containerBase.value.openUpDatesTimePicker(now, min, "预约开始时间")
+		// 直接设置到表单对象，毫秒转秒
+		reservationInfo.value.start_time = Math.floor(startTime / 1000)
+		// 手动选择时间则切换为"自定义"
+		if (isManual) {
+			timeRangeValue.value = "自定义"
 		}
-		gameRuleRange.value = temp;
-
 	}
-}
-const gameRuleRangeChange = (e) => {
-	console.log('gameRuleRangeChange:', e)
-}
-
-// 获取玩法类型文本
-const getGameTypeText = (gameTypeValue) => {
-	if (!gameTypeValue || gameTypeValue === 0) {
-		return '';
+	const openUpDatesTimePickerEnd = async (isManual = true) => {
+		if (reservationInfo.value.start_time == 0) {
+			uni.showToast({
+				title: '请先选择开始时间',
+				icon: 'none'
+			})
+			return;
+		}
+		var now = reservationInfo.value.end_time * 1000;
+		var min = (reservationInfo.value.start_time * 1000 + 1000 * 60 * 30);
+		if (now == 0) {
+			now = (reservationInfo.value.start_time * 1000 + 1000 * 60 * 30);
+		}
+		//minDate+1000*60*30 最小间隔30分钟
+		const endTime = await _containerBase.value.openUpDatesTimePicker(now, min, "预约结束时间")
+		// 直接设置到表单对象，毫秒转秒
+		reservationInfo.value.end_time = Math.floor(endTime / 1000)
+		// 手动选择时间则切换为"自定义"
+		if (isManual) {
+			timeRangeValue.value = "自定义"
+		}
 	}
-	const gameType = gameTypeRange.value.find(item => item.value === gameTypeValue);
-	return gameType ? gameType.text : '';
-}
+	const maxPlayerCount = ref(0)
+	const openRoomPicker = async () => {
+		// 需先选择有效的开始/结束时间
+		if (!reservationInfo.value.start_time || !reservationInfo.value.end_time) {
+			uni.showToast({
+				title: '请先选择开始和结束时间',
+				icon: 'none'
+			})
+			return
+		}
+		if (reservationInfo.value.end_time <= reservationInfo.value.start_time) {
+			uni.showToast({
+				title: '结束时间需晚于开始时间',
+				icon: 'none'
+			})
+			return
+		}
+		// 无数据则尝试拉取
+		if (!roomOptions.value || roomOptions.value.length === 0) {
+			await tryLoadRooms()
+		}
+		if (!roomOptions.value || roomOptions.value.length === 0) {
+			uni.showToast({
+				title: '暂无可预约房间',
+				icon: 'none'
+			})
+			return
+		}
+		const selected = await roomPickerRef.value.show({
+			options: roomOptions.value,
+			valueKey: 'id',
+			labelKey: 'name',
+			modelValue: reservationInfo.value.room_id
+		})
+		if (selected) {
+			reservationInfo.value.room_id = selected.id
+			reservationInfo.value.room_name = selected.name
+			maxPlayerCount.value = selected.capacity
 
-// 获取具体规则文本
-const getGameRuleText = (gameRuleValue) => {
-	if (!gameRuleValue || gameRuleValue === 0) {
-		return '';
+		}
+	}
+
+	const peopleRange = ref([])
+	const peopleText = ref("请先选择房间");
+	const gameTypeRange = ref([])
+	const gameRuleRange = ref([])
+	const gameRuleText = ref("请先选择玩法类型");
+	const gameTypeRangeChange = (e) => {
+		console.log('gameTypeRangeChange:', e)
+		// gameRuleRange.value
+		if (e == 0) {
+			gameRuleRange.value = [];
+			reservationInfo.value.game_rule = 0;
+			gameRuleText.value = "请先选择玩法类型";
+		} else {
+			var f = gameTypeRange.value.find(it => it.value == e);
+			console.log('f', f);
+			gameRuleText.value = "请选择具体规则";
+			var temp = [];
+
+			if (f.children != null && f.children.length > 0) {
+
+				f.children.forEach(e => {
+					temp.push({
+						value: e.id,
+						text: e.name
+					})
+				})
+			}
+			gameRuleRange.value = temp;
+
+		}
+	}
+	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 gameRule = gameRuleRange.value.find(item => item.value === gameRuleValue);
-	return gameRule ? gameRule.text : '';
-}
 
 const smokingOptions = ref([
 	{ value: 2, text: '不禁烟' },
@@ -418,126 +432,126 @@ const onCustomDepositInput = (val) => {
     customDeposit.value = String(n)
 }
 
-const increment = () => {
-	if (currentValue.value < 5) {
-		currentValue.value += 0.5
-		if (currentValue.value > 5) {
-			currentValue.value = 5
+	const increment = () => {
+		if (currentValue.value < 5) {
+			currentValue.value += 0.5
+			if (currentValue.value > 5) {
+				currentValue.value = 5
+			}
+			// 同步到表单对象
+			reservationInfo.value.credit_limit = currentValue.value
 		}
-		// 同步到表单对象
-		reservationInfo.value.credit_limit = currentValue.value
 	}
-}
 
-const decrement = () => {
-	if (currentValue.value > 0) {
-		currentValue.value -= 0.5
-		if (currentValue.value < 0) {
-			currentValue.value = 0
+	const decrement = () => {
+		if (currentValue.value > 0) {
+			currentValue.value -= 0.5
+			if (currentValue.value < 0) {
+				currentValue.value = 0
+			}
+			// 同步到表单对象
+			reservationInfo.value.credit_limit = currentValue.value
 		}
-		// 同步到表单对象
-		reservationInfo.value.credit_limit = currentValue.value
-	}
-}
-
-const changeLog = (e) => {
-	console.log('change事件:', e)
-}
-
-// 表单验证方法
-const validateForm = () => {
-	const info = reservationInfo.value
-
-	// 必填字段验证
-	if (!info.room_id || info.room_id === 0) {
-		uni.showToast({
-			title: '请选择房间',
-			icon: 'none'
-		})
-		return false
 	}
 
-	if (!info.start_time || info.start_time === 0) {
-		uni.showToast({
-			title: '请选择开始时间',
-			icon: 'none'
-		})
-		return false
+	const changeLog = (e) => {
+		console.log('change事件:', e)
 	}
 
-	if (!info.end_time || info.end_time === 0) {
-		uni.showToast({
-			title: '请选择结束时间',
-			icon: 'none'
-		})
-		return false
+	// 表单验证方法
+	const validateForm = () => {
+		const info = reservationInfo.value
+
+		// 必填字段验证
+		if (!info.room_id || info.room_id === 0) {
+			uni.showToast({
+				title: '请选择房间',
+				icon: 'none'
+			})
+			return false
+		}
+
+		if (!info.start_time || info.start_time === 0) {
+			uni.showToast({
+				title: '请选择开始时间',
+				icon: 'none'
+			})
+			return false
+		}
+
+		if (!info.end_time || info.end_time === 0) {
+			uni.showToast({
+				title: '请选择结束时间',
+				icon: 'none'
+			})
+			return false
+		}
+
+		if (info.end_time <= info.start_time) {
+			uni.showToast({
+				title: '结束时间需晚于开始时间',
+				icon: 'none'
+			})
+			return false
+		}
+
+		if (!info.title || info.title.trim() === '') {
+			uni.showToast({
+				title: '请输入组局名称',
+				icon: 'none'
+			})
+			return false
+		}
+
+		if (!info.player_count || info.player_count === 0) {
+			uni.showToast({
+				title: '请选择游玩人数',
+				icon: 'none'
+			})
+			return false
+		}
+
+		if (!info.game_type || info.game_type === 0) {
+			uni.showToast({
+				title: '请选择玩法类型',
+				icon: 'none'
+			})
+			return false
+		}
+
+		if (!info.game_rule || info.game_rule === 0) {
+			uni.showToast({
+				title: '请选择具体规则',
+				icon: 'none'
+			})
+			return false
+		}
+
+		// 年龄范围验证（如果设置了年龄限制）
+		if (info.min_age > 0 && info.max_age > 0 && info.min_age > info.max_age) {
+			uni.showToast({
+				title: '最小年龄不能大于最大年龄',
+				icon: 'none'
+			})
+			return false
+		}
+
+		return true
 	}
 
-	if (info.end_time <= info.start_time) {
-		uni.showToast({
-			title: '结束时间需晚于开始时间',
-			icon: 'none'
-		})
-		return false
-	}
-
-	if (!info.title || info.title.trim() === '') {
-		uni.showToast({
-			title: '请输入组局名称',
-			icon: 'none'
-		})
-		return false
-	}
-
-	if (!info.player_count || info.player_count === 0) {
-		uni.showToast({
-			title: '请选择游玩人数',
-			icon: 'none'
-		})
-		return false
-	}
-
-	if (!info.game_type || info.game_type === 0) {
-		uni.showToast({
-			title: '请选择玩法类型',
-			icon: 'none'
-		})
-		return false
-	}
-
-	if (!info.game_rule || info.game_rule === 0) {
-		uni.showToast({
-			title: '请选择具体规则',
-			icon: 'none'
-		})
-		return false
-	}
-
-	// 年龄范围验证（如果设置了年龄限制）
-	if (info.min_age > 0 && info.max_age > 0 && info.min_age > info.max_age) {
-		uni.showToast({
-			title: '最小年龄不能大于最大年龄',
-			icon: 'none'
-		})
-		return false
-	}
-
-	return true
-}
-
-// 提交预约方法
-const submitReservation = async () => {
-	var isLoginSucces = await isLogin();
-	if (!isLoginSucces) {
-		uni.navigateTo({
-			url: '/pages/me/login'
-		});
-		return;
-	}
-	// 验证表单
-	if (!validateForm()) {
-		return
-	}
+	// 提交预约方法
+	const submitReservation = async () => {
+		var isLoginSucces = await isLogin();
+		if (!isLoginSucces) {
+			uni.navigateTo({
+				url: '/pages/me/login'
+			});
+			return;
+		}
+		// 验证表单
+		if (!validateForm()) {
+			return
+		}
 
 
     try {
@@ -571,24 +585,24 @@ const submitReservation = async () => {
 			important_data: {}
 		}
 
-		// 将玩法类型和具体规则从数字转换为字符串
-		submitData.game_type = getGameTypeText(submitData.game_type);
-		submitData.game_rule = getGameRuleText(submitData.game_rule);
-		var important_data = "";
-		if (subscribeMessage.result != null) {
-			important_data = JSON.stringify(subscribeMessage.result);
-		}
-		submitData.important_data = important_data;
-		// 检测是否能创建预约 ，如果不能创建则提示并中断
-		const canCreateRes = await canCreateSQReservation(submitData)
-		if (!canCreateRes || canCreateRes.canCreate !== true) {
-			uni.hideLoading()
-			uni.showToast({
-				title: (canCreateRes && canCreateRes.message) ? canCreateRes.message : '当前条件不可创建预约',
-				icon: 'none'
-			})
-			return
-		}
+			// 将玩法类型和具体规则从数字转换为字符串
+			submitData.game_type = getGameTypeText(submitData.game_type);
+			submitData.game_rule = getGameRuleText(submitData.game_rule);
+			var important_data = "";
+			if (subscribeMessage.result != null) {
+				important_data = JSON.stringify(subscribeMessage.result);
+			}
+			submitData.important_data = important_data;
+			// 检测是否能创建预约 ，如果不能创建则提示并中断
+			const canCreateRes = await canCreateSQReservation(submitData)
+			if (!canCreateRes || canCreateRes.canCreate !== true) {
+				uni.hideLoading()
+				uni.showToast({
+					title: (canCreateRes && canCreateRes.message) ? canCreateRes.message : '当前条件不可创建预约',
+					icon: 'none'
+				})
+				return
+			}
 
 		var resPay = null;
         if (submitData.deposit_fee > 0) {
@@ -607,323 +621,342 @@ const submitReservation = async () => {
 			submitData.important_data = important_data;
 		}
 
-		// TODO: 调用后端API提交预约
-		// 调用后端API提交预约
-		const result = await addSQReservation(submitData)
-		uni.hideLoading()
-		console.log("result", result);
-		if (!result.success) {
-			uni.showToast({
-				title: result.message,
-				icon: 'none'
-			})
-			return;
-		}
-		if (submitData.deposit_fee > 0 && resPay != null) {
-			var payRes = await requestPayment(resPay);
-			if (payRes.success) {
+			// TODO: 调用后端API提交预约
+			// 调用后端API提交预约
+			const result = await addSQReservation(submitData)
+			uni.hideLoading()
+			console.log("result", result);
+			if (!result.success) {
 				uni.showToast({
-					title: '鸽子费支付成功',
-					icon: 'success'
-				})
-			} else {
-				await cancelReservation(result.data, "鸽子费支付失败，请重新预约！");
-				uni.showToast({
-					title: '鸽子费支付失败，请重新预约！',
+					title: result.message,
 					icon: 'none'
 				})
 				return;
 			}
-			console.log("payRes", payRes);
-		}
-		var share_id = result.data;
-		var detailData = await getDetail(share_id);
-		if (detailData != null) {
-			reservationData.value = detailData;
-			tipsShow();
-		} else {
+			if (submitData.deposit_fee > 0 && resPay != null) {
+				var payRes = await requestPayment(resPay);
+				if (payRes.success) {
+					uni.showToast({
+						title: '鸽子费支付成功',
+						icon: 'success'
+					})
+				} else {
+					await cancelReservation(result.data, "鸽子费支付失败，请重新预约！");
+					uni.showToast({
+						title: '鸽子费支付失败，请重新预约！',
+						icon: 'none'
+					})
+					return;
+				}
+				console.log("payRes", payRes);
+			}
+			var share_id = result.data;
+			var detailData = await getDetail(share_id);
+			if (detailData != null) {
+				reservationData.value = detailData;
+				tipsShow();
+			} else {
 
-			// 提交成功
+				// 提交成功
+				uni.showToast({
+					title: '预约提交成功',
+					icon: 'success'
+				})
+			}
+			// 可以跳转到其他页面或重置表单
+			// uni.navigateBack() // 返回上一页
+			// 或者重置表单
+			resetForm()
+
+		} catch (error) {
+			uni.hideLoading()
+			console.error('提交预约失败:', error)
 			uni.showToast({
-				title: '预约提交成功',
-				icon: 'success'
+				title: '提交失败，请重试',
+				icon: 'none'
 			})
 		}
-		// 可以跳转到其他页面或重置表单
-		// uni.navigateBack() // 返回上一页
-		// 或者重置表单
-		resetForm()
-
-	} catch (error) {
-		uni.hideLoading()
-		console.error('提交预约失败:', error)
-		uni.showToast({
-			title: '提交失败，请重试',
-			icon: 'none'
-		})
 	}
-}
 
-// 重置表单方法（可选）
-const resetForm = () => {
-	reservationInfo.value = {
-		room_id: 0,
-		room_name: '请选择房间',
-		start_time: 0,
-		end_time: 0,
-		max_age: 0,
-		min_age: 0,
-		title: '',
-		extra_info: '',
-		game_rule: '',
-		game_type: '',
-		gender_limit: 0,
-		is_smoking: 2,
-		credit_limit: 0,
-		deposit_fee: 0,
-		player_count: 0,
-	}
-	currentValue.value = 0
-	timeRangeValue.value = ""
-	gameRuleRange.value = []
-	peopleRange.value = []
-	peopleText.value = "请先选择房间"
-	gameRuleText.value = "请先选择玩法类型"
-}
-
-// 当开始或结束时间变化时自动刷新房间
-watch([() => reservationInfo.value.start_time, () => reservationInfo.value.end_time], async ([s, e]) => {
-	await tryLoadRooms()
-})
-
-watch(() => reservationInfo.value.room_id, async (newId, oldId) => {
-	console.log('room_id changed:', oldId, '->', newId);
-	if (newId == 0) {
-		reservationInfo.value.player_count = 0;
-		peopleRange.value = [];
-		peopleText.value = "请先选择房间";
-	} else {
-		var t = [];
-		peopleText.value = "请选择游玩人数";
-		for (let i = 2; i <= maxPlayerCount.value; i++) {
-			t.push({
-				value: i,
-				text: i + '人'
-			});
+	// 重置表单方法（可选）
+	const resetForm = () => {
+		reservationInfo.value = {
+			room_id: 0,
+			room_name: '请选择房间',
+			start_time: 0,
+			end_time: 0,
+			max_age: 0,
+			min_age: 0,
+			title: '',
+			extra_info: '',
+			game_rule: '',
+			game_type: '',
+			gender_limit: 0,
+			is_smoking: 2,
+			credit_limit: 0,
+			deposit_fee: 0,
+			player_count: 0,
 		}
-		console.log("peopleRange.value ", maxPlayerCount.value, t);
-		if (reservationInfo.value.player_count > maxPlayerCount.value) {
+		currentValue.value = 0
+		timeRangeValue.value = ""
+		gameRuleRange.value = []
+		peopleRange.value = []
+		peopleText.value = "请先选择房间"
+		gameRuleText.value = "请先选择玩法类型"
+	}
+
+	// 当开始或结束时间变化时自动刷新房间
+	watch([() => reservationInfo.value.start_time, () => reservationInfo.value.end_time], async ([s, e]) => {
+		await tryLoadRooms()
+	})
+
+	watch(() => reservationInfo.value.room_id, async (newId, oldId) => {
+		console.log('room_id changed:', oldId, '->', newId);
+		if (newId == 0) {
 			reservationInfo.value.player_count = 0;
+			peopleRange.value = [];
+			peopleText.value = "请先选择房间";
+		} else {
+			var t = [];
+			peopleText.value = "请选择游玩人数";
+			for (let i = 2; i <= maxPlayerCount.value; i++) {
+				t.push({
+					value: i,
+					text: i + '人'
+				});
+			}
+			console.log("peopleRange.value ", maxPlayerCount.value, t);
+			if (reservationInfo.value.player_count > maxPlayerCount.value) {
+				reservationInfo.value.player_count = 0;
+			}
+			peopleRange.value = t;
 		}
-		peopleRange.value = t;
-	}
-});
+	});
 
-// 拉取可预约房间
-const tryLoadRooms = async () => {
-	if (!reservationInfo.value.start_time || !reservationInfo.value.end_time) return
-	if (reservationInfo.value.end_time <= reservationInfo.value.start_time) return
-	const list = await getReservationRoomList(reservationInfo.value.start_time, reservationInfo.value.end_time)
-	// list.push()
-	if (Array.isArray(list)) {
-		roomOptions.value = Array.isArray(list) ? list : []
-	} else {
-		roomOptions.value = []
-	}
-	// 若当前选中房间不在可选列表中，则清空
-	console.log("房间id==>", reservationInfo.value.room_id, "房间列表==>", roomOptions.value);
+	// 拉取可预约房间
+	const tryLoadRooms = async () => {
+		if (!reservationInfo.value.start_time || !reservationInfo.value.end_time) return
+		if (reservationInfo.value.end_time <= reservationInfo.value.start_time) return
+		const list = await getReservationRoomList(reservationInfo.value.start_time, reservationInfo.value.end_time)
+		// list.push()
+		if (Array.isArray(list)) {
+			roomOptions.value = Array.isArray(list) ? list : []
+		} else {
+			roomOptions.value = []
+		}
+		// 若当前选中房间不在可选列表中，则清空
+		console.log("房间id==>", reservationInfo.value.room_id, "房间列表==>", roomOptions.value);
 
-	if (!roomOptions.value.some(it => it.id === reservationInfo.value.room_id)) {
-		reservationInfo.value.room_id = 0;
-		reservationInfo.value.room_name = '请选择房间';
+		if (!roomOptions.value.some(it => it.id === reservationInfo.value.room_id)) {
+			reservationInfo.value.room_id = 0;
+			reservationInfo.value.room_name = '请选择房间';
+		}
 	}
-}
-onLoad(async () => {
-	const config = await getConfigData();
-	console.log('config', config);
-	if (config != null && config.config != null) {
-		gameTypeRange.value = [...config.config.playingMethodOptions];
+	onLoad(async () => {
+		const config = await getConfigData();
+		console.log('config', config);
+		if (config != null && config.config != null) {
+			gameTypeRange.value = [...config.config.playingMethodOptions];
+		}
+	})
+	onShow(async () => {
+		// resetForm();
+	})
+	// 年龄列构建与显示/文案
+	const buildAgeColumns = () => {
+		const minList = [{
+			value: 0,
+			text: '不限'
+		}]
+		for (let i = 18; i <= 80; i++) minList.push({
+			value: i,
+			text: String(i)
+		})
+		const maxList = [{
+			value: 0,
+			text: '不限'
+		}]
+		for (let i = 18; i <= 80; i++) maxList.push({
+			value: i,
+			text: String(i)
+		})
+		agePickerColumns.value = [minList, maxList]
 	}
-})
-onShow(async () => {
-	// resetForm();
-})
-// 年龄列构建与显示/文案
-const buildAgeColumns = () => {
-	const minList = [{ value: 0, text: '不限' }]
-	for (let i = 18; i <= 80; i++) minList.push({ value: i, text: String(i) })
-	const maxList = [{ value: 0, text: '不限' }]
-	for (let i = 18; i <= 80; i++) maxList.push({ value: i, text: String(i) })
-	agePickerColumns.value = [minList, maxList]
-}
-const getAgeRangeText = () => {
-	const { min_age, max_age } = reservationInfo.value
-	if (min_age == 0 && max_age == 0) {
-		return '不限'
+	const getAgeRangeText = () => {
+		const {
+			min_age,
+			max_age
+		} = reservationInfo.value
+		if (min_age == 0 && max_age == 0) {
+			return '不限'
+		}
+		const minText = min_age === 0 ? '不限' : min_age + '岁'
+		const maxText = max_age === 0 ? '不限' : max_age + '岁'
+		return minText + ' - ' + maxText
 	}
-	const minText = min_age === 0 ? '不限' : min_age + '岁'
-	const maxText = max_age === 0 ? '不限' : max_age + '岁'
-	return minText + ' - ' + maxText
-}
-const openAgePicker = () => {
-	buildAgeColumns()
-	// 计算默认索引
-	const { min_age, max_age } = reservationInfo.value
-	const [mins, maxs] = agePickerColumns.value
-	const findIndexByValue = (arr, val) => {
-		const idx = arr.findIndex(it => Number(it.value) === Number(val))
-		return idx >= 0 ? idx : 0
+	const openAgePicker = () => {
+		buildAgeColumns()
+		// 计算默认索引
+		const {
+			min_age,
+			max_age
+		} = reservationInfo.value
+		const [mins, maxs] = agePickerColumns.value
+		const findIndexByValue = (arr, val) => {
+			const idx = arr.findIndex(it => Number(it.value) === Number(val))
+			return idx >= 0 ? idx : 0
+		}
+		agePickerDefaultIndex.value = [
+			findIndexByValue(mins, min_age ?? 0),
+			findIndexByValue(maxs, max_age ?? 0),
+		]
+		agePickerVisible.value = true
 	}
-	agePickerDefaultIndex.value = [
-		findIndexByValue(mins, min_age ?? 0),
-		findIndexByValue(maxs, max_age ?? 0),
-	]
-	agePickerVisible.value = true
-}
-const onAgePickerConfirm = (e) => {
-	// uview-plus up-picker confirm 回调 e.value 为两列所选对象数组
-	const selected = e && e.value ? e.value : []
-	const min = selected[0] ? Number(selected[0].value) : 0
-	const max = selected[1] ? Number(selected[1].value) : 0
-	// 若最小值大于最大值，自动交换或归零“不限”优先
-	let minAge = min
-	let maxAge = max
-	if (minAge !== 0 && maxAge !== 0 && minAge > maxAge) {
-		[minAge, maxAge] = [maxAge, minAge]
+	const onAgePickerConfirm = (e) => {
+		// uview-plus up-picker confirm 回调 e.value 为两列所选对象数组
+		const selected = e && e.value ? e.value : []
+		const min = selected[0] ? Number(selected[0].value) : 0
+		const max = selected[1] ? Number(selected[1].value) : 0
+		// 若最小值大于最大值，自动交换或归零“不限”优先
+		let minAge = min
+		let maxAge = max
+		if (minAge !== 0 && maxAge !== 0 && minAge > maxAge) {
+			[minAge, maxAge] = [maxAge, minAge]
+		}
+		reservationInfo.value.min_age = minAge
+		reservationInfo.value.max_age = maxAge
+		agePickerVisible.value = false
 	}
-	reservationInfo.value.min_age = minAge
-	reservationInfo.value.max_age = maxAge
-	agePickerVisible.value = false
-}
 </script>
 
 <style lang="scss">
-.content {
-	width: 100%;
-	height: 100vh;
-	overflow-y: auto;
-	background-color: #F7F7F7;
-}
+	.content {
+		width: 100%;
+		height: 100vh;
+		background-color: #F7F7F7;
+	}
 
-/* 页面标题 */
-.page-title {
-	margin-top: 100rpx;
-	text-align: center;
-}
+	/* 页面标题 */
+	.page-title {
+		margin-top: 100rpx;
+		text-align: center;
+		margin-bottom: 20rpx;
+	}
 
-/* 输入外层统一样式 */
-.input-wrapper {
-	border: 1px solid #515151;
-	border-radius: 4px;
-}
+	/* 输入外层统一样式 */
+	.input-wrapper {
+		border: 1px solid #515151;
+		border-radius: 4px;
+	}
 
-/* 可点击的行（年龄范围显示） */
-.clickable-row {
-	font-size: 28rpx;
-	width: 100%;
-	display: flex;
-	align-items: center;
-	height: 60rpx;
-}
+	/* 可点击的行（年龄范围显示） */
+	.clickable-row {
+		font-size: 28rpx;
+		width: 100%;
+		display: flex;
+		align-items: center;
+		height: 60rpx;
+	}
 
-/* 内联标签（信誉左侧“⼤于等于”） */
-.inline-label {
-	font-size: 25.86rpx;
-	width: 120rpx;
-}
+	/* 内联标签（信誉左侧“⼤于等于”） */
+	.inline-label {
+		font-size: 25.86rpx;
+		width: 120rpx;
+	}
 
-/* 通用居中容器 */
-.center {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
+	/* 通用居中容器 */
+	.center {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
 
-/* 提交按钮容器样式 */
-.submit-button {
-	width: 90%;
-	border-radius: 10rpx;
-	margin: 30rpx auto 0;
-	background-color: #00AC4E;
-}
+	/* 提交按钮容器样式 */
+	.submit-button {
+		width: 90%;
+		border-radius: 10rpx;
+		margin: 30rpx auto 0;
+		background-color: #00AC4E;
+	}
 
-/* 操作区一行布局：重置 + 发起 */
-.action-row {
-    width: 90%;
-    margin: 30rpx auto 0;
-    display: flex;
-    gap: 20rpx;
-}
+	/* 操作区一行布局：重置 + 发起 */
+	.action-row {
+		width: 90%;
+		margin: 30rpx auto 0;
+		display: flex;
+		gap: 20rpx;
+	}
 
-.reset-button {
-    flex: 0 0 30%;
-    height: 88rpx;
-    border-radius: 10rpx;
-    background-color: #FFFFFF;
-    color: #333;
-}
+	.reset-button {
+		flex: 0 0 30%;
+		height: 88rpx;
+		border-radius: 10rpx;
+		background-color: #FFFFFF;
+		color: #333;
+	}
 
-.action-submit {
-    flex: 1 1 auto;
-    height: 88rpx;
-    margin: 0; /* 覆盖原有 submit-button 的外边距，使其与 reset 同行 */
-}
+	.action-submit {
+		flex: 1 1 auto;
+		height: 88rpx;
+		margin: 0;
+		/* 覆盖原有 submit-button 的外边距，使其与 reset 同行 */
+	}
 
-/* 备注容器及文本 */
-.note-container {
-	width: 90%;
-	margin: 20rpx auto 20rpx;
-}
+	/* 备注容器及文本 */
+	.note-container {
+		width: 90%;
+		margin: 20rpx auto 20rpx;
+	}
 
-.muted-text {
-	color: #979797;
-	font-size: 24rpx;
-}
+	.muted-text {
+		color: #979797;
+		font-size: 24rpx;
+	}
 
-.note-text {
-	font-size: 24rpx;
-	margin-left: 20rpx;
-	margin-bottom: 20rpx;
-}
+	.note-text {
+		font-size: 24rpx;
+		margin-left: 20rpx;
+		margin-bottom: 20rpx;
+	}
 
-.counter-container {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
+	.counter-container {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
 
-.counter-btn {
-	width: 80rpx;
-	height: 80rpx;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	border-radius: 50%;
-	padding: 0;
-	line-height: 1;
-}
+	.counter-btn {
+		width: 80rpx;
+		height: 80rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 50%;
+		padding: 0;
+		line-height: 1;
+	}
 
-.minus-btn {
-	background-color: #f5f5f5;
-	border: 1px solid #eee;
-}
+	.minus-btn {
+		background-color: #f5f5f5;
+		border: 1px solid #eee;
+	}
 
 
-.counter-value {
-	width: 90rpx;
-	text-align: center;
-	font-size: 28rpx;
-	font-weight: 500;
-	color: #333;
-}
+	.counter-value {
+		width: 90rpx;
+		text-align: center;
+		font-size: 28rpx;
+		font-weight: 500;
+		color: #333;
+	}
 
-.custom-select ::v-deep .uni-input-input {
-	/* 正常状态下的边框颜色 */
-	border: 1px solid #007aff !important;
-	border-radius: 6px;
-}
+	.custom-select ::v-deep .uni-input-input {
+		/* 正常状态下的边框颜色 */
+		border: 1px solid #007aff !important;
+		border-radius: 6px;
+	}
 
-.flex-center-row {
-	display: flex;
-}
+	.flex-center-row {
+		display: flex;
+	}
 </style>
\ No newline at end of file
diff --git a/pages/appointment/book-room-page.vue b/pages/appointment/book-room-page.vue
new file mode 100644
index 0000000..c4cb6ee
--- /dev/null
+++ b/pages/appointment/book-room-page.vue
@@ -0,0 +1,176 @@
+<template>
+	<view class="content column">
+
+		<view class="column" style="width: 100%; height: 308rpx; background-color: white;">
+			<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" :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>
+
+				</view>
+			</view>
+		</view>
+
+		<text style="margin-top: 20rpx; margin-left: 32rpx; font-size: 24rpx;">营业时间：早XX点 至 晚XX点</text>
+
+		<view class="row"
+			style="width: 686rpx; height: 56rpx; background-color: #2ED9BF; border-radius: 5rpx; margin: 20rpx auto 0; align-items: center;">
+			<text style="font-size: 22rpx; color: #262626; margin-left: 16rpx;">查看当前时段空闲时间</text>
+			<up-switch style="margin-right: 16rpx; margin-left: auto; " v-model="value" @change="change"
+				size="20"></up-switch>
+		</view>
+
+		<view class="" style="width: 100%; flex: 1; margin-top: 12rpx; overflow-y: auto;">
+
+			<view class="" v-for="(item,index) in roomList"
+				style="position: relative; width: 706rpx; height: 270rpx; border-radius: 20rpx; background-color: white; margin: 0 auto 20rpx;">
+
+
+				<image src=""
+					style="width: 180rpx; height: 156rpx; background-color: #DEDEDE; border-radius: 14rpx; position: absolute; top: 10rpx; left: 10rpx;"
+					mode=""></image>
+
+				<view class="column" style=" position: absolute; left: 200rpx; top: 20rpx;">
+					<text style="font-size: 28rpx;">房间号或房间名</text>
+					<text style="font-size: 20rpx;">房间类型</text>
+
+					<text style="font-size: 24rpx; margin-top: 24rpx;">¥30/4小时</text>
+					<text style="font-size: 24rpx; color: #FF0000;">会员价¥30/5小时</text>
+				</view>
+
+				<text
+					style="font-size: 20rpx; position: absolute; top: 10rpx; right: 16rpx; color: #FF9901;">当前使用中</text>
+
+				<view class="center"
+					style="width: 92rpx; height: 46rpx; background-color: #20BBA4; border-radius: 52rpx; font-size: 26rpx; color: white; position: absolute; bottom: 94rpx; right: 10rpx;">
+					预约
+				</view>
+
+				<view class="row" style="align-items: center; position: absolute; left: 10rpx; bottom: 60rpx;">
+					<view style="width: 24rpx; height: 4rpx; background-color: #FF9901;"></view>
+					<text style="font-size: 16rpx; color: #323232; margin-left: 8rpx;">已预定时段</text>
+					<view style="width: 24rpx; height: 4rpx; background-color: #E6E6E6; margin-left: 22rpx;"></view>
+					<text style="font-size: 16rpx; color: #323232; margin-left: 8rpx;">已预定时段</text>
+				</view>
+
+				<view class="row" style="align-items: center; position: absolute; left: 10rpx; bottom: 14rpx;">
+
+					<view class="column center" style="margin-right: 20rpx;">
+						<view style="width: 70rpx; height: 4rpx; background-color: #FF9901;"></view>
+						<text style="font-size: 12rpx; margin-top: 4rpx;">凌晨</text>
+					</view>
+					<view class="column center" style="margin-right: 20rpx;">
+						<view style="width: 70rpx; height: 4rpx; background-color: #E6E6E6;"></view>
+						<text style="font-size: 12rpx; margin-top: 4rpx;">上午</text>
+					</view>
+					<view class="column center" style="margin-right: 20rpx;">
+						<view style="width: 70rpx; height: 4rpx; background-color: #FF9901;"></view>
+						<text style="font-size: 12rpx; margin-top: 4rpx;">下午</text>
+					</view>
+					<view class="column center" style="margin-right: 20rpx;">
+						<view style="width: 70rpx; height: 4rpx; background-color: #E6E6E6;"></view>
+						<text style="font-size: 12rpx; margin-top: 4rpx;">晚上</text>
+					</view>
+
+				</view>
+			</view>
+
+
+		</view>
+
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				currentTimeIndex: 0,
+				dateList: [],
+				value: false,
+				roomList: [1, 2, 3, 4, 5, 6],
+			}
+		},
+
+		onLoad() {
+			this.getDateList();
+		},
+
+		methods: {
+			change(e) {
+				console.log('change', e);
+			},
+			/**
+			 * 生成日期列表：当天+后续6天，共7天
+			 */
+			getDateList() {
+				const list = [];
+				const today = new Date(); // 当天日期（用于判断是否为今天）
+				const weekNames = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
+
+				for (let i = 0; i < 7; i++) {
+					const current = new Date();
+					current.setDate(today.getDate() + i); // 计算第i天的日期
+
+					// 1. 处理时间格式：月.日（如10.1、12.30）
+					const month = current.getMonth() + 1; // 月份从0开始
+					const day = current.getDate();
+					const time = `${month}.${day}`;
+
+					// 2. 处理星期显示：当天显示“今天”，其他显示周几
+					let weekday;
+					if (i === 0) {
+						weekday = "今天"; // 当天
+					} else {
+						const weekIndex = current.getDay(); // 0=周日，6=周六
+						weekday = weekNames[weekIndex];
+					}
+
+					list.push({
+						time,
+						weekday
+					});
+				}
+
+				this.dateList = list;
+			},
+
+			//设置背景
+			setBgColor(index) {
+				if (this.currentTimeIndex == index) {
+					return {
+						backgroundColor: "#20BBA4",
+						color: "#FFFFFF",
+					}
+				} else {
+					return {
+						backgroundColor: "#FFFFFF",
+						color: "#000000",
+					}
+				}
+			},
+
+			clickTime(index) {
+				this.currentTimeIndex = index;
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.content {
+		width: 100%;
+		height: 100vh;
+		background-color: #F7F7F7;
+	}
+
+	/* 页面标题 */
+	.page-title {
+		margin-top: 100rpx;
+		text-align: center;
+		margin-bottom: 20rpx;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/me/me-page.vue b/pages/me/me-page.vue
index 4070d0f..d8a1bd7 100644
--- a/pages/me/me-page.vue
+++ b/pages/me/me-page.vue
@@ -154,7 +154,8 @@ const commonActions = [
 	{ label: '常见问题', icon: '@@:app/static/me/cjwt.png', action: 'faq' },
 	{ label: '黑名单', icon: '@@:app/static/me/hmd.png', action: 'blacklist' },
 	{ label: '联系我们', icon: '@@:app/static/me/lxwm.png', action: 'contact' },
-
+	{ label: '我的消息', icon: '@@:app/static/me/lxwm.png', action: 'message' },
+	{ label: '我的收益', icon: '@@:app/static/me/lxwm.png', action: 'revenue' },
 ]
 
 const handleCommonAction = (item) => {
@@ -192,6 +193,16 @@ const handleCommonAction = (item) => {
 				url: '/pages/other/agreement?type=about'
 			});
 			break;
+		case 'message':
+			uni.navigateTo({
+				url: '/pages/me/my-message-page'
+			});
+			break;
+		case 'revenue':
+			uni.navigateTo({
+				url: '/pages/me/my-earnings-page'
+			});
+			break;
 		default:
 			uni.showToast({ title: '敬请期待', icon: 'none' });
 			break;
diff --git a/pages/me/my-earnings-page.vue b/pages/me/my-earnings-page.vue
new file mode 100644
index 0000000..951afd2
--- /dev/null
+++ b/pages/me/my-earnings-page.vue
@@ -0,0 +1,176 @@
+<template>
+	<view class="content column">
+		<view class="row" style="width: 90%; margin: 100rpx auto 0; justify-content: space-between;">
+			<image src="/static/back.png" style="width: 40rpx; height: 40rpx;" @click="goBack()" mode=""></image>
+			<text style="font-size: 30rpx;">我的收益</text>
+			<view style="width: 40rpx;"></view>
+		</view>
+
+
+		<view class="" style="width: 728rpx; height: 2rpx; background-color: #EBEBEB; margin: 40rpx auto 0;"></view>
+
+
+		<view class="column"
+			style="width: 686rpx; height: 282rpx; box-shadow: 0 0 18rpx rgba(0, 0, 0, 0.08); margin: 20rpx auto 0; background-color: white; border-radius: 10rpx;">
+
+			<view class="row">
+				<view class="column" style="margin-top: 20rpx; margin-left: 24rpx;">
+					<text style="font-size: 28rpx;">待提取收益（元）</text>
+					<text style="font-size: 48rpx;">0.00</text>
+				</view>
+				<view class="column" style="margin-top: 20rpx; margin-left: auto; margin-right: 22rpx;">
+					<text style="font-size: 28rpx;">已提取收益（元）</text>
+					<text style="font-size: 48rpx;">0.00</text>
+				</view>
+			</view>
+
+			<view class="center" @click="reflectShow = true"
+				style="width: 640rpx; height: 76rpx; background-color: #00AC4E; border-radius: 48rpx; margin: 44rpx auto 0; font-size: 30rpx; color: #FFFFFF;">
+				去提现
+			</view>
+
+		</view>
+
+
+		<view class="center" style="color: #00A2FF; font-size: 24rpx; margin: 20rpx;" @click="show = true">
+			<text>点击查看收益规则＞＞</text>
+		</view>
+
+		<view class="column"
+			style="width: 686rpx; height: 744rpx; background-color: #FFFFFF; box-shadow: 0 0 18rpx rgba(0, 0, 0, 0.08); margin: 0 auto 0;">
+
+			<view class="row" style="width: 100%; height: 96rpx; background-color: #00AC4E;">
+				<view class="center" style="flex: 1;" :style="setColor(0)" @click="clickTab(0)">
+					收益记录
+				</view>
+				<view class="center" style="flex: 1;" :style="setColor(1)" @click="clickTab(1)">
+					提现记录
+				</view>
+			</view>
+
+
+			<view v-if="currentIndex == 0" class="row" style="font-size: 28rpx; margin-top: 20rpx;">
+				<view class="center" style="flex: 1;">时间</view>
+				<view class="center" style="flex: 1;">房号/房名</view>
+				<view class="center" style="flex: 1;">房费</view>
+				<view class="center" style="flex: 1;">收益</view>
+			</view>
+
+			<view v-else class="row" style="font-size: 28rpx; margin-top: 20rpx;">
+				<view class="center" style="flex: 1;">时间</view>
+				<view class="center" style="flex: 1;">提现金额</view>
+				<view class="center" style="flex: 1;">状态</view>
+			</view>
+
+			<view class="" v-if="currentIndex == 0" style="width: 100%; flex: 1; margin-top: 16rpx;">
+				<view class="row" v-for="(item,index) in dataList"
+					style="font-size: 28rpx; color: #555555; margin-bottom: 20rpx;">
+					<view class="center" style="flex: 1;">2025/1/1</view>
+					<view class="center" style="flex: 1;">305（大包）</view>
+					<view class="center" style="flex: 1;">￥12</view>
+					<view class="center" style="flex: 1;">￥0.12</view>
+				</view>
+			</view>
+			<view class="" v-else style="width: 100%; flex: 1; margin-top: 16rpx;">
+				<view class="row" v-for="(item,index) in dataList"
+					style="font-size: 28rpx; color: #555555; margin-bottom: 20rpx;">
+					<view class="center" style="flex: 1;">2025/1/1</view>
+					<view class="center" style="flex: 1;">￥12</view>
+					<view class="center" style="flex: 1;">提现中</view>
+				</view>
+			</view>
+
+		</view>
+
+
+		<up-popup v-model:show="show" @close="close" @open="open" :round="10" mode="center" :closeable="true">
+			<view style="width: 656rpx;">
+				<view class="center" style="margin-top: 28rpx;">规则说明</view>
+				<view class="center" style="width: 80%; margin: 44rpx auto 20rpx;">
+					正文正文正文正文正文正文正文正文正文正文正文正
+					文正文正文正文正文正文正文正文正文正文正文正文
+					正文正文正文正文正文正文正文
+				</view>
+
+			</view>
+		</up-popup>
+
+		<up-popup v-model:show="reflectShow" @close="close" @open="open" :round="10" mode="center" :closeable="true">
+			<view style="width: 656rpx;">
+				<view class="center" style="margin-top: 28rpx;">提现申请</view>
+				<view class="center"
+					style="width: 90%; height: 114rpx; margin: 26rpx auto 20rpx; background-color: rgba(0,172,78,0.37); border-radius: 30rpx;">
+					<up-input placeholder="请输入要提现的金额" placeholderStyle="color:'#818181'" border="none"
+						inputAlign="center" fontSize="32rpx" v-model="value"></up-input>
+				</view>
+
+				<view class="row" style="width: 90%; margin: 0 auto 0;">
+					<text style="font-size: 28rpx; color: #818181;">最高可提现0.00元</text>
+					<text style="font-size: 28rpx; color: #00A2FF; margin-left: auto;">全部提现</text>
+				</view>
+
+				<view class="center"
+					style="width: 304rpx; height: 90rpx; background-color: #00AC4E; color: #FFFFFF; margin: 30rpx auto 0; font-size: 32rpx;">
+					申请提现
+				</view>
+
+			</view>
+		</up-popup>
+
+	</view>
+
+
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				currentIndex: 0,
+				show: false,
+				reflectShow: false,
+				dataList: [1, 2, 3, 4, 5, 6],
+				value: ''
+			}
+		},
+		methods: {
+			// 返回上一页
+			goBack() {
+				uni.navigateBack({
+					delta: 1
+				})
+			},
+
+			setColor(index) {
+				if (this.currentIndex == index) {
+					return {
+						color: '#FFFFFF',
+					}
+				} else {
+					return {
+						color: '#686868',
+					}
+				}
+			},
+
+			clickTab(index) {
+				this.currentIndex = index;
+			},
+			open() {
+
+			},
+			close() {
+
+			},
+
+		}
+	}
+</script>
+
+<style lang="scss">
+	.content {
+		width: 100%;
+		height: 100vh;
+		background: #F7F7F7;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/me/my-message-page.vue b/pages/me/my-message-page.vue
new file mode 100644
index 0000000..11f2680
--- /dev/null
+++ b/pages/me/my-message-page.vue
@@ -0,0 +1,87 @@
+<template>
+	<view class="content column">
+		<view class="row" style="width: 90%; margin: 100rpx auto 0; justify-content: space-between;">
+			<image src="/static/back.png" style="width: 40rpx; height: 40rpx;" @click="goBack()" mode=""></image>
+			<text style="font-size: 30rpx;">我的消息</text>
+			<view style="width: 40rpx;"></view>
+		</view>
+
+		<view class="row" style="width: 100%; margin-top: 40rpx; margin-left: 56rpx;">
+			<view class="center" @click="clickTab(index)"
+				style="margin-right: 20rpx; width: 134rpx; height: 48rpx; font-size: 26rpx; border-radius: 34rpx;"
+				:style="setBgColor(index)" v-for="(item,index) in teabList">
+				{{item}}
+			</view>
+		</view>
+
+		<view class="" style="width: 100%; height: 1rpx; background-color: #EBEBEB; margin-top: 20rpx;"></view>
+
+		<view class="column"
+			style="width: 100%; flex: 1; margin-top: 20rpx; overflow-y: auto;">
+			<view class="column" v-for="(item,index) in messageList"
+				style="width: 686rpx; margin: 0rpx auto 30rpx; background-color: white; border-radius: 32rpx; ">
+				<text style="font-size: 32rpx; margin-top: 22rpx; margin-left: 30rpx;">标题标题标题</text>
+
+				<text
+					style="font-size: 32rpx; margin-top: 10rpx; margin-left: 30rpx;">正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文
+					正文正文正文正文正文正文正文</text>
+
+				<text
+					style="font-size: 32rpx; margin-top: 70rpx; margin-left: auto; margin-right: 18rpx; margin-bottom: 10rpx;">2025//1/1
+					11：12</text>
+
+			</view>
+		</view>
+
+
+
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				currentIndex: 0,
+				teabList: ["全部", "私信"],
+				messageList: [1, 2, 3, 4, 5]
+			}
+		},
+		methods: {
+			// 返回上一页
+			goBack() {
+				uni.navigateBack({
+					delta: 1
+				})
+			},
+
+			setBgColor(index) {
+				if (this.currentIndex == index) {
+					return {
+						backgroundColor: '#C4FFDF',
+						color: '#00AC4E',
+						border: 'solid 1rpx #00AC4E',
+					}
+				} else {
+					return {
+						backgroundColor: '#FFFFFF',
+						color: '#000000',
+						border: 'solid 1rpx #EBEBEB',
+					}
+				}
+			},
+
+			clickTab(index) {
+				this.currentIndex = index;
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.content {
+		width: 100%;
+		height: 100vh;
+		background: #F7F7F7;
+	}
+</style>
\ No newline at end of file