diff --git a/common/server/interface/user.js b/common/server/interface/user.js
index fcdc80a..71e5b2e 100644
--- a/common/server/interface/user.js
+++ b/common/server/interface/user.js
@@ -85,4 +85,56 @@ export const editUserInfo = async (nickName, avatar, sex, birthday) => {
         return true;
     }
     return false;
-}
\ No newline at end of file
+}
+
+/**
+ * 获取黑名单列表
+ * @returns {Promise<any>}
+ */
+export const getMyBlackList = async () => {
+    const res = await request.get("user/GetMyBlackList");
+    if (res.code == 0) {
+        return res.data;
+    }
+    return null;
+}
+
+/**
+ * 添加黑名单
+ * @param {*} userId 要拉黑的用户ID
+ * @returns {Promise<boolean>}
+ */
+export const addUserBlack = async (userId) => {
+    const res = await request.post("user/AddUserBlack", { id: userId });
+    if (res.code == 0) {
+        return true;
+    }
+    return false;
+}
+
+/**
+ * 取消拉黑名单
+ * @param {*} userId 要取消拉黑的用户ID
+ * @returns {Promise<boolean>}
+ */
+export const cancelUserBlack = async (userId) => {
+    const res = await request.post("user/CancelUserBlack", { id: userId });
+    if (res.code == 0) {
+        return true;
+    }
+    return false;
+}
+
+export const userInterface = {
+    getAnonymousLogin,
+    ueWxPhoneNumberLogin,
+    anonymousLogin,
+    useWxAnonymousLogin,
+    getUserInfo,
+    editUserInfo,
+    getMyBlackList,
+    addUserBlack,
+    cancelUserBlack
+}
+
+
diff --git a/common/server/sq.js b/common/server/sq.js
new file mode 100644
index 0000000..e69de29
diff --git a/common/server/user.js b/common/server/user.js
index d678335..74e55c8 100644
--- a/common/server/user.js
+++ b/common/server/user.js
@@ -1,5 +1,5 @@
 // 导入用户相关的接口函数
-import { getUserInfo, editUserInfo, anonymousLogin as anonymousLoginInterface } from '@/common/server/interface/user'
+import { getUserInfo, editUserInfo, anonymousLogin as anonymousLoginInterface, userInterface } from '@/common/server/interface/user'
 import { ref } from 'vue'
 import throttle from 'lodash/throttle';
 
@@ -150,4 +150,7 @@ export const anonymousLogin = async () => {
         console.error('匿名登录失败:', error);
         clearUserStorage();
     }
-};
\ No newline at end of file
+};
+
+
+ 
\ No newline at end of file
diff --git a/pages/me/blacklist-page.vue b/pages/me/blacklist-page.vue
index 4523854..46277ca 100644
--- a/pages/me/blacklist-page.vue
+++ b/pages/me/blacklist-page.vue
@@ -1,71 +1,167 @@
 <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=" overflow-y: auto; margin-top: 30rpx;">
-
 			<view class="column" style="width: 90%; margin: 0 auto 0;">
+				<!-- 加载状态 -->
+				<view v-if="loading" class="loading-container">
+					<text>加载中...</text>
+				</view>
 
-				<view class="column" v-for="(item,index) in 10"
-					style="width: 100%; background-color: #E9E9E9; border-radius: 10rpx; margin-bottom: 10rpx;">
+				<!-- 空状态 -->
+				<view v-else-if="blackList.length === 0" class="empty-container">
+					<text>暂无黑名单用户</text>
+				</view>
 
+				<!-- 黑名单列表 -->
+				<view v-else class="column item" v-for="(item, index) in blackList" :key="item.id"
+					style="width: 100%;margin-bottom: 10rpx;">
 					<view class="row" style="align-items: center;">
-						<image src=""
+						<image :src="item.blockedAvatarImage || '/static/default-avatar.png'"
 							style="width: 130rpx; height: 130rpx; background-color: burlywood; border-radius: 50%; margin: 20rpx;"
-							mode="">
+							mode="aspectFill">
 						</image>
 
 						<view class="column" style="font-size: 24rpx; margin-left: 30rpx;">
-							<text>苏嘉辉</text>
-							<text style="margin-top: 20rpx;">UID：123456</text>
+							<text>{{ item.blockedNickName || '未知用户' }}</text>
+							<text style="margin-top: 20rpx;">UID：{{ item.blockedUserId }}</text>
 						</view>
 
-						<view class="center"
-							style="width: 180rpx; height: 80rpx; background-color: #1989FA; font-size: 26rpx; border-radius: 10rpx; margin-left: auto; margin-right: 20rpx;">
-							取消拉黑
+						<view class="center cancel-btn"
+							style="width: 180rpx; height: 80rpx; background-color: #1989FA; font-size: 26rpx; border-radius: 10rpx; margin-left: auto; margin-right: 20rpx;"
+							@click="handleCancelBlack(item.blockedUserId, index)">
+							{{ cancelingIndex === index ? '取消中...' : '取消拉黑' }}
 						</view>
 					</view>
 
-					<text
-						style="margin-top: 20rpx; font-size: 24rpx; margin-left: 20rpx; margin-bottom: 20rpx;">拉黑时间：2025/08/13
-						13：56</text>
-
+					<text style="margin-top: 20rpx; font-size: 24rpx; margin-left: 20rpx; margin-bottom: 20rpx;">
+						拉黑时间：{{ formatDate(item.createdTime) }}
+					</text>
 				</view>
-
 			</view>
-
 		</view>
 	</view>
 </template>
 
-<script>
-	export default {
-		data() {
-			return {
+<script setup>
+import { ref, onMounted } from 'vue'
+import { userInterface } from '@/common/server/interface/user.js'
+import { showModalConfirm } from '@/common/utils.js'
+// 响应式数据
+const loading = ref(true)
+const blackList = ref([])
+const cancelingIndex = ref(-1)
 
-			}
-		},
-		methods: {
-			goBack() {
-				// 返回上一页
-				uni.navigateBack({
-					delta: 1
-				});
-			},
+// 获取黑名单列表
+const getBlackList = async () => {
+	try {
+		loading.value = true
+		const data = await userInterface.getMyBlackList()
+		if (data) {
+			blackList.value = data
 		}
+	} catch (error) {
+		console.error('获取黑名单失败:', error)
+		uni.showToast({
+			title: '获取黑名单失败',
+			icon: 'none'
+		})
+	} finally {
+		loading.value = false
 	}
+}
+
+// 取消拉黑
+const handleCancelBlack = async (userId, index) => {
+	try {
+		const res = await showModalConfirm("取消拉黑", "确定将用户移除黑名单吗？");
+		if (!res) {
+			return;
+		}
+		cancelingIndex.value = index
+		const success = await userInterface.cancelUserBlack(userId)
+		if (success) {
+			uni.showToast({
+				title: '已取消拉黑',
+				icon: 'success'
+			})
+			// 从列表中移除
+			blackList.value.splice(index, 1)
+		} else {
+			uni.showToast({
+				title: '取消拉黑失败',
+				icon: 'none'
+			})
+		}
+	} catch (error) {
+		console.error('取消拉黑失败:', error)
+		uni.showToast({
+			title: '取消拉黑失败',
+			icon: 'none'
+		})
+	} finally {
+		cancelingIndex.value = -1
+	}
+}
+
+// 格式化日期
+const formatDate = (dateString) => {
+	if (!dateString) return '未知时间'
+	const date = new Date(dateString)
+	const year = date.getFullYear()
+	const month = String(date.getMonth() + 1).padStart(2, '0')
+	const day = String(date.getDate()).padStart(2, '0')
+	const hours = String(date.getHours()).padStart(2, '0')
+	const minutes = String(date.getMinutes()).padStart(2, '0')
+	return `${year}/${month}/${day} ${hours}:${minutes}`
+}
+
+// 返回上一页
+const goBack = () => {
+	uni.navigateBack({
+		delta: 1
+	})
+}
+
+// 页面加载时获取黑名单
+onMounted(() => {
+	getBlackList()
+})
 </script>
 
 <style lang="scss">
-	.content {
-		width: 100%;
-		height: 100vh;
+.content {
+	width: 100%;
+	height: 100vh;
+	background: #F7F7F7;
+}
+
+.loading-container,
+.empty-container {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 400rpx;
+	font-size: 28rpx;
+	color: #999;
+}
+
+.cancel-btn {
+	transition: opacity 0.3s;
+
+	&:active {
+		opacity: 0.7;
 	}
+}
+
+.item {
+	box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.25);
+	background: #FFFFFF;
+	border-radius: 30rpx;
+}
 </style>
\ No newline at end of file