commit

frontend/src/pages/activity/team/index.vue

@@ -59,7 +59,7 @@
             <div class="section-badge">{{ team.groupUsers.length }}</div>
           </div>
           <div class="member-grid">
-            <div class="member-grid-item" v-for="member in team.groupUsers" :key="member.id">
+            <div class="member-grid-item" v-for="member in team.groupUsers" :key="member.id" @click="openUserDetail(member)">
               <div class="member-name">
                 {{ member.userName }}
                 <t-tag theme="danger" size="small" v-if="member.isLeader">队长</t-tag>
@@ -144,6 +144,15 @@
       </div>
     </template>
   </t-dialog>
+
+  <t-popup v-model:visible="showUserDetailPicker" placement="bottom" destroy-on-close style="height: 50%">
+    <view class="member-picker">
+      <view class="picker-header">
+        <text class="picker-title">成员信息</text>
+        <t-icon name="close" @click="showUserDetailPicker = false"/>
+      </view>
+    </view>
+  </t-popup>
 </template>
 
 <script setup>
@@ -175,11 +184,12 @@ let team = ref(null);
 // 申请成为队长弹框提示
 const leaderConfirmVisible = ref(false)
 
-const handleMenuOpened = () => {
-
-}
-
-const handleMenuClosed = () => {
+// 用户详情弹框
+const showUserDetailPicker=ref(false)
+// 打开用户详情
+const openUserDetail = (val) => {
+  showUserDetailPicker.value = true
+  console.log(val)
 }
 
 const actChange = (val) => {
@@ -262,6 +272,69 @@ onLoad(() => {
 .content-area {
   padding: 0 16px 24px;
 }
+/*用户弹框*/
+.member-picker {
+  background-color: #fff;
+  border-radius: 16px 16px 0 0;
+  padding: 20px;
+
+  .picker-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+
+    .picker-title {
+      font-size: 18px;
+      font-weight: 600;
+      color: #333;
+    }
+  }
+
+  .picker-subtitle {
+    font-size: 14px;
+    color: #ff5f5c;
+    margin-bottom: 20px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid #f0f0f0;
+  }
+
+  .member-list {
+    max-height: 50vh;
+    overflow-y: auto;
+    margin-bottom: 20px;
+    padding: 0 4px;
+  }
+
+  .member-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 0;
+    border-bottom: 1px solid #f5f5f5;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    &--disabled {
+      opacity: 0.7;
+    }
+
+    .member-status {
+      font-size: 12px;
+      color: #52c41a;
+    }
+
+    :deep(.t-checkbox) {
+      margin: 0;
+    }
+  }
+
+  .picker-footer {
+    padding-top: 12px;
+  }
+}
 
 /* 团队卡片 */
 .team-card {