feat: 实现关联人员列表及解绑功能

pages/index/related-members.vue

@@ -4,22 +4,33 @@
     <view class="member-page">
       <scroll-view scroll-y class="member-list">
         <view
-          v-for="(item, index) in state.memberList" 
+          v-for="(item, index) in memberList"
-          :key="index" 
+          :key="item.id || index"
           class="member-item"
         >
-          <!-- 左侧图标 -->
+          <!-- 左侧头像 -->
-          <image class="member-icon" src="/static/img/yz-icon1.png" mode="aspectFit" />
+          <image
+            class="member-avatar"
+            :src="item.facePhotoUrl || '/static/img/person.png'"
+            mode="aspectFill"
+          />
 
           <!-- 中间信息 -->
-          <text class="member-info">{{ item.role }}：{{ item.name }}</text>
+          <view class="member-info-wrap">
+            <text class="member-name">{{ item.name }}</text>
+            <text class="member-role">{{ item.relationDesc }}</text>
+          </view>
 
           <!-- 右侧解除绑定（非业主显示） -->
-          <text v-if="item.showUnbind" class="unbind-btn" @tap.stop="handleUnbind(item)">解除绑定</text>
+          <text
+            v-if="!item.isOwner"
+            class="unbind-btn"
+            @tap.stop="handleUnbind(item)"
+          >解除绑定</text>
         </view>
 
         <!-- 空状态 -->
-        <view v-if="state.memberList.length === 0" class="empty-state">
+        <view v-if="memberList.length === 0" class="empty-state">
           <text class="empty-text">暂无关联人员</text>
         </view>
       </scroll-view>
@@ -33,25 +44,45 @@
 </template>
 
 <script setup>
-import { reactive } from 'vue';
+import { ref } from 'vue';
+import { onLoad } from '@dcloudio/uni-app';
+import MemberApi from '@/sheep/api/community/member';
+import sheep from '@/sheep';
 
-// 关联人员列表数据
+// 关联人员列表
-const state = reactive({
+const memberList = ref([]);
-  memberList: [
+// 当前房屋ID
-    { role: '业主', name: '王德福', showUnbind: false },
+const houseId = ref(null);
-    { role: '业主家属', name: '王德福', showUnbind: true },
+
-    { role: '租户', name: '王玉华', showUnbind: true },
+// 页面加载
-  ]
+onLoad((options) => {
+  // 优先从页面参数获取房屋ID，否则从用户状态获取
+  houseId.value = options.houseId || sheep.$store('user').userInfo.currentHouseId;
+  if (houseId.value) {
+    loadMemberList();
+  }
 });
 
+// 加载关联人员列表
+async function loadMemberList() {
+  const { code, data } = await MemberApi.getRelationList(houseId.value);
+  if (code === 0 && Array.isArray(data)) {
+    memberList.value = data;
+  }
+}
+
 // 解除绑定
 const handleUnbind = (item) => {
   uni.showModal({
     title: '提示',
     content: `确定要解除与 ${item.name} 的关联吗？`,
-    success: (res) => {
+    success: async (res) => {
       if (res.confirm) {
-        console.log('解除绑定:', item);
+        const { code, data } = await MemberApi.unbind(item.id);
+        if (code === 0 && data) {
+          uni.showToast({ title: '解除成功', icon: 'success' });
+          loadMemberList();
+        }
       }
     }
   });
@@ -84,22 +115,39 @@ const goBack = () => {
   display: flex;
   align-items: center;
 
-  /* 左侧图标 */
+  /* 左侧头像 */
-  .member-icon {
+  .member-avatar {
-    width: 40rpx;
+    width: 72rpx;
-    height: 40rpx;
+    height: 72rpx;
+    border-radius: 50%;
     flex-shrink: 0;
-    margin-right: 16rpx;
+    margin-right: 20rpx;
+    background-color: #F5F5F5;
   }
 
-  /* 角色和姓名 */
+  /* 信息区域 */
-  .member-info {
+  .member-info-wrap {
     flex: 1;
-    font-size: 28rpx;
+    display: flex;
-    color: #333333;
+    flex-direction: column;
+    justify-content: center;
     overflow: hidden;
-    text-overflow: ellipsis;
+  }
-    white-space: nowrap;
+
+  /* 姓名 */
+  .member-name {
+    font-size: 30rpx;
+    color: #333333;
+    font-weight: 500;
+    line-height: 1.4;
+  }
+
+  /* 角色 */
+  .member-role {
+    font-size: 24rpx;
+    color: #999999;
+    margin-top: 4rpx;
+    line-height: 1.4;
   }
 
   /* 解除绑定按钮 */

sheep/api/community/member.js

@@ -0,0 +1,30 @@
+import request from '@/sheep/request';
+
+const MemberApi = {
+  // 查询关联人员列表
+  getRelationList: (houseId) => {
+    return request({
+      url: '/community/member-house/relation-list',
+      method: 'GET',
+      data: { houseId },
+      custom: {
+        showLoading: true,
+        auth: true,
+      },
+    });
+  },
+  // 解除绑定
+  unbind: (id) => {
+    return request({
+      url: '/community/member-house/unbind',
+      method: 'DELETE',
+      data: { id },
+      custom: {
+        showLoading: true,
+        auth: true,
+      },
+    });
+  },
+};
+
+export default MemberApi;