diff --git a/common/server/interface/sq.js b/common/server/interface/sq.js
index 4bd6989..f11ad0e 100644
--- a/common/server/interface/sq.js
+++ b/common/server/interface/sq.js
@@ -14,4 +14,43 @@ export const getReservationList = async (index = 1, size = 20) => {
         return res.data;
     }
     return null;
+}
+
+/**
+ * 获取我的预约记录
+ * @param {number} type 0 参与者，1发起者
+ * @param {number} index 起始页
+ * @param {number} size 页大小
+ * @returns {Promise<any>}
+ */
+export const getMyReservation = async (type = 0, index = 1, size = 10) => {
+    const res = await request.get("sq/GetMyReservation", { 
+        type: type, 
+        index: index, 
+        size: size 
+    });
+    if (res.code == 0) {
+        return res.data;
+    }
+    return null;
+}
+
+/**
+ * 获取正在进行的预约
+ * @returns {Promise<any>}
+ */
+export const getMyUseReservation = async () => {
+    const res = await request.get("sq/GetMyUseReservation");
+    if (res.code == 0) {
+        return res.data;
+    }
+    return null;
+}
+
+
+
+export const sqInterface = {
+    getReservationList,
+    getMyReservation,
+    getMyUseReservation
 }
\ No newline at end of file
diff --git a/pages/me/appointment-record-page.vue b/pages/me/appointment-record-page.vue
index f7226ab..a13bbea 100644
--- a/pages/me/appointment-record-page.vue
+++ b/pages/me/appointment-record-page.vue
@@ -8,64 +8,59 @@
 		</view>
 
 		<view class="row" style="width: 90%; margin: 30rpx auto 0; font-size: 26rpx;">
-			<text :style="currentIndex == 0?'color:#FA0D0D':'color:#000000'" @click="click1()">我发起的</text>
+			<text :style="currentIndex == 0 ? 'color:#FA0D0D' : 'color:#000000'" @click="click1()">我参与的</text>
 
-			<text style="margin-left: 50rpx;" :style="currentIndex == 1?'color:#FA0D0D':'color:#000000'"
-				@click="click2()">我参与的</text>
+			<text style="margin-left: 50rpx;" :style="currentIndex == 1 ? 'color:#FA0D0D' : 'color:#000000'"
+				@click="click2()">我发起的</text>
 		</view>
 
 
 		<view class="" style="width: 100%;  overflow-y: auto; margin-top: 30rpx;">
-
 			<view class="column" style="width: 90%; margin: 0 auto 0; font-size: 24rpx;">
+				<!-- 加载状态 -->
+				<view v-if="loading" class="loading-container">
+					<text>加载中...</text>
+				</view>
 
-				<view class="" v-for="(item,index) in 4"
+				<!-- 空状态 -->
+				<view v-else-if="reservationList.length === 0" class="empty-container">
+					<text>暂无预约记录</text>
+				</view>
+
+				<!-- 预约记录列表 -->
+				<view v-else class="reservation-item" v-for="item in reservationList" :key="item.id"
 					style="width: 100%; border-radius: 10rpx; background-color: #F2F3F5; margin-bottom: 40rpx;">
-
 					<view class="column" style="width: 95%; margin: 20rpx auto 20rpx;">
+						<view class="row title" style="justify-content: space-between;">
+							<view style="title">{{ item.title || '麻将预约' }}</view>
+							<view style="font-size:24rpx;" :style="getStatusStyle(item.status)">{{
+								getStatusText(item.status) }}</view>
+						</view>
 
-
-						<view class="row" style="justify-content: space-between;">
-							<text>通宵，来高手</text>
-							<text>已结束</text>
+						<view class="row row-text" style="align-items: center; margin-top: 20rpx;">
+							<text style="margin-left: 20rpx;">{{ formatTimeRange(item.start_time, item.end_time)
+							}}</text>
 						</view>
 
 						<view class="row" style="align-items: center; margin-top: 20rpx;">
-							<image src="/static/time.png" style="width: 30rpx; height: 30rpx;" mode=""></image>
-							<text style="margin-left: 20rpx;">2025/08/27 20:00 ~ 2025/08/28 04：30 \n共8小时30分钟</text>
+							<text style="margin-left: 20rpx;" class="row-text">{{ item.room_name || '' }}</text>
 						</view>
 
 						<view class="row" style="align-items: center; margin-top: 20rpx;">
-							<image src="/static/location.png" style="width: 30rpx; height: 30rpx;" mode=""></image>
-							<text style="margin-left: 20rpx;">305包厢-大包，4人</text>
-						</view>
-
-						<view class="row" style="align-items: center; margin-top: 20rpx;">
-							<image src="/static/requirement.png" style="width: 30rpx; height: 30rpx;" mode=""></image>
-							<text style="margin-left: 20rpx;">可吸烟、男、信誉≧4.0</text>
-						</view>
-
-
-						<view class="row" style="align-items: center; margin-top: 40rpx;">
-
-							<image src="" v-for="(item,index) in 4"
-								style="width: 40rpx; height: 40rpx; background-color: aquamarine; border-radius: 50%; margin-right: 20rpx;"
-								mode=""></image>
-
-							<view class="center" @click="openEvaluatePop()"
+							<text style="margin-left: 20rpx;" class="row-text">已约牌友：</text>
+							<image v-for="(participant, pIndex) in item.participants" :key="pIndex"
+								:src="participant.avatarImage || '/static/default-avatar.png'"
+								style="width: 40rpx; height: 40rpx; border-radius: 50%; margin-right: 20rpx;"
+								mode="aspectFill">
+							</image>
+							<view class="center" @click="openEvaluatePop(item)"
 								style="width: 120rpx; height: 30px; background-color: #1989FA; border-radius: 10rpx; margin-left: auto;">
 								<text style="font-size: 24rpx; color: white;">牌友评价</text>
 							</view>
 						</view>
-
-
-
 					</view>
-
 				</view>
-
 			</view>
-
 		</view>
 	</view>
 
@@ -81,12 +76,9 @@
 					请对每位牌友进行评价
 				</text>
 
-				<view class="row" @click="openUserPop()"
+				<view class="row"
 					style="width: 100%; background-color: #F2F3F5; border-radius: 10rpx; padding-top: 20rpx; padding-bottom: 20rpx; margin-top: 20rpx;">
-					<image src=""
-						style="width: 40rpx; height: 40rpx; background-color: aqua; border-radius: 50rpx; margin-left: 20rpx;"
-						mode=""></image>
-					<text style="font-size: 24rpx; margin-left: 20rpx;">树下的胖子</text>
+					<up-picker :show="show" :columns="array"></up-picker>
 
 					<image src="/static/down.png"
 						style="width: 40rpx; height: 40rpx; margin-left: auto; margin-right: 20rpx;" mode=""></image>
@@ -155,13 +147,13 @@
 
 		<view class="" style="width: 400rpx; background-color: white; border-radius: 10rpx; padding: 20rpx;">
 
-			<view class="row" v-for="(item,index) in 3"
+			<view class="row" v-for="(user, userIndex) in currentReservation" :key="userIndex"
 				style="width: 100%; background-color: #F2F3F5; border-radius: 10rpx; padding-top: 20rpx; padding-bottom: 20rpx; margin-top: 20rpx;">
-				<image src=""
+				<image :src="user.avatarImage || '/static/default-avatar.png'"
 					style="width: 40rpx; height: 40rpx; background-color: aqua; border-radius: 50rpx; margin-left: 20rpx;"
 					mode=""></image>
 
-				<text style="font-size: 24rpx; margin-left: 20rpx;">树下的胖子</text>
+				<text style="font-size: 24rpx; margin-left: 20rpx;">{{ user.nickName }}</text>
 
 			</view>
 
@@ -172,65 +164,185 @@
 
 </template>
 
-<script>
-	export default {
-		data() {
-			return {
+<script setup>
+import { ref, onMounted, watch } from 'vue'
+import { sqInterface } from '@/common/server/interface/sq.js'
 
-				currentIndex: 0,
-				rateValue1: 0,
-				rateValue2: 0,
-				keepAppointment: '',
-				readonly: false,
+// 响应式数据
+const currentIndex = ref(0)
+const loading = ref(false)
+const reservationList = ref([])
+const rateValue1 = ref(0)
+const rateValue2 = ref(0)
+const keepAppointment = ref('')
+const readonly = ref(false)
+const currentReservation = ref(null)
 
-			}
-		},
-		methods: {
-
-			goBack() {
-				// 返回上一页
-				uni.navigateBack({
-					delta: 1
-				});
-			},
-
-			click1() {
-				this.currentIndex = 0;
-			},
-			click2() {
-				this.currentIndex = 1;
-			},
-
-			openEvaluatePop() {
-				this.$refs.evaluatePop.open();
-			},
-
-			openUserPop() {
-				this.$refs.userPop.open();
-			},
-
-
-			keepAppointmentChange(e) {
-				this.keepAppointment = e.detail.value;
-
-				if (this.keepAppointment == "r1") {
-					this.readonly = false;
-				} else {
-					this.readonly = true;
-					this.rateValue1 = 0;
-					this.rateValue2 = 0;
-				}
-
-			}
+var array = ['中国', '美国', '巴西', '日本']
+var index = 0
+const show = ref(false);
+const bindPickerChange = (e) => {
 
+}
+// 弹窗引用
+const evaluatePop = ref(null)
+const userPop = ref(null)
 
+// 获取预约记录
+const getReservationList = async (type = 0) => {
+	try {
+		loading.value = true
+		const data = await sqInterface.getMyReservation(type, 1, 20)
+		if (data) {
+			reservationList.value = data
 		}
+	} catch (error) {
+		console.error('获取预约记录失败:', error)
+		uni.showToast({
+			title: '获取预约记录失败',
+			icon: 'none'
+		})
+	} finally {
+		loading.value = false
 	}
+}
+
+// 标签切换
+const click1 = () => {
+	currentIndex.value = 0
+}
+
+const click2 = () => {
+	currentIndex.value = 1
+}
+
+// 监听标签切换
+watch(currentIndex, (newIndex) => {
+	getReservationList(newIndex)
+})
+
+// 打开评价弹窗
+const openEvaluatePop = (reservation) => {
+	currentReservation.value = reservation
+	evaluatePop.value.open()
+}
+
+// 打开用户选择弹窗
+const openUserPop = () => {
+	userPop.value.open()
+}
+
+// 赴约状态改变
+const keepAppointmentChange = (e) => {
+	keepAppointment.value = e.detail.value
+
+	if (keepAppointment.value === "r1") {
+		readonly.value = false
+	} else {
+		readonly.value = true
+		rateValue1.value = 0
+		rateValue2.value = 0
+	}
+}
+
+// 格式化时间范围
+const formatTimeRange = (startTime, endTime) => {
+	if (!startTime || !endTime) return '时间未设置'
+
+	const start = new Date(startTime)
+	const end = new Date(endTime)
+
+	const startStr = `${start.getFullYear()}-${String(start.getMonth() + 1).padStart(2, '0')}-${String(start.getDate()).padStart(2, '0')} ${String(start.getHours()).padStart(2, '0')}:${String(start.getMinutes()).padStart(2, '0')}`
+	const endStr = `${end.getFullYear()}-${String(end.getMonth() + 1).padStart(2, '0')}-${String(end.getDate()).padStart(2, '0')} ${String(end.getHours()).padStart(2, '0')}:${String(end.getMinutes()).padStart(2, '0')}`
+
+	// 计算时长
+	const duration = end - start
+	const hours = Math.floor(duration / (1000 * 60 * 60))
+	const minutes = Math.floor((duration % (1000 * 60 * 60)) / (1000 * 60))
+
+	return `${startStr} ~ ${endStr}`
+}
+
+// 获取状态文本
+const getStatusText = (status) => {
+	const statusMap = {
+		0: '进行中',
+		1: '已结束',
+		2: '已结束'
+	}
+	return statusMap[status] || '未知状态'
+}
+
+// 获取状态样式
+const getStatusStyle = (status) => {
+	const styleMap = {
+		0: 'color: #1989FA',
+		1: 'color: #999',
+		2: 'color: #999'
+	}
+	return styleMap[status] || 'color: #999'
+}
+
+// 返回上一页
+const goBack = () => {
+	uni.navigateBack({
+		delta: 1
+	})
+}
+
+// 页面加载时获取数据
+onMounted(() => {
+	getReservationList(0)
+})
 </script>
 
-<style lang="scss">
-	.content {
-		width: 100%;
-		height: 100vh;
+<style lang="scss" scoped>
+@import 'uview-plus/theme.scss';
+.content {
+	width: 100%;
+	height: 100vh;
+	background: #F7F7F7;
+}
+
+.title {
+
+	font-family: PingFang SC, PingFang SC;
+	font-weight: 500;
+	font-size: 35rpx;
+	color: #322A2A;
+	text-align: left;
+	font-style: normal;
+	text-transform: none;
+}
+
+.row-text {
+	font-family: PingFang SC, PingFang SC;
+	font-weight: 400;
+	font-size: 30rpx;
+	color: #575757;
+	text-align: left;
+	font-style: normal;
+	text-transform: none;
+}
+
+.loading-container,
+.empty-container {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 400rpx;
+	font-size: 28rpx;
+	color: #999;
+}
+
+.reservation-item {
+	background: linear-gradient(180deg, #D7F0DD 0%, #FFFFFF 100%);
+	box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.25);
+	border-radius: 46rpx 46rpx 46rpx 46rpx;
+	transition: transform 0.2s;
+
+	&:active {
+		transform: scale(0.98);
 	}
+}
 </style>
\ No newline at end of file