labsop_scientific_h5/pages/project/components/detail/ProjectMembers.vue

<template>
  <view class="module-container">
    <!-- 成员列表容器 -->
    <view class="member-list" v-if="memberList?.length">
      <view class="member-item" v-for="(row, index) in memberList" :key="index">
        <!-- 默认头像装饰 -->
        <image src="/static/imgs/tabBar/my.png" mode="aspectFit" class="avatar"></image>
        
        <view class="member-info">
          <!-- 姓名与身份标签 -->
          <view class="header">
            <text class="m-name">{{ row.memberName }}</text>
            <text class="m-tag m-role">{{ getRoleName(row.projectRole) }}</text>
            <text class="m-tag m-type">{{ getMemberTypeName(row.memberType) }}</text>
          </view>
          
          <!-- 详情信息区块 -->
          <view class="m-detail">
            <CommonInfoRow 
              label="学位" 
              :value="getDictLabel('sci_academic_degree', row.degree) || '-'" 
            />
            <CommonInfoRow 
              label="职称" 
              :value="row.technicalTitle || '-'" 
            />
            <CommonInfoRow 
              label="所属部门" 
              :value="row.deptName || '-'" 
            />
            <CommonInfoRow 
              label="负责内容" 
              :value="row.responsibleContent || '-'" 
            />
            <CommonInfoRow 
              label="贡献率(%)" 
              :value="row.contributionRate || '-'" 
            />
            <CommonInfoRow 
              label="签署顺序" 
              :value="row.order || '-'" 
              noBorder
            />
          </view>
        </view>
      </view>
    </view>
    
    <!-- 空状态展示 -->
    <view v-else class="empty-wrap">
      <uv-empty mode="data" text="暂无成员信息"></uv-empty>
    </view>
  </view>
</template>

<script setup lang="ts">
import { useDict } from '@/hooks/useDict';
import { computed } from 'vue';
import type { ProjectMember } from '@/types/project';
import { projectRoleOptions, memberTypeOptions } from '@/constants';
import CommonInfoRow from '@/components/ui/CommonInfoRow.vue';

/**
 * 接收父组件传递的属性
 * projectId: 项目内码
 * projectType: 项目分类标识
 * projectData: 包含完整成员列表的项目基本信息对象
 */
const props = defineProps<{
  projectId: number;
  projectType: string;
  projectData: any;
}>();

// 使用字典 hooks 获取学位职称的明细标签
const { getDictLabel } = useDict('sci_academic_degree');

/**
 * 计算属性：成员列表
 * 针对不同类型的项目，后端返回的成员列表字段名存差异，此处统一进行向下兼容提取
 */
const memberList = computed<ProjectMember[]>(() => {
  return props.projectData?.memberList || 
         props.projectData?.member || 
         [];
});

/**
 * 获取项目角色显示文本
 * @param roleVal 字典数值形式的状态
 * @returns 对应的中文解释说明
 */
const getRoleName = (roleVal: string) => {
  const match = projectRoleOptions.find(o => o.dictValue === roleVal);
  return match ? match.dictLabel : '未知角色';
};

/**
 * 获取人员类型显示文本
 * @param typeVal 类型代码值
 * @returns 对应人员类型的文字标识（本院/非本院...）
 */
const getMemberTypeName = (typeVal: string) => {
  const match = memberTypeOptions.find(o => o.dictValue === typeVal);
  return match ? match.dictLabel : '未知类型';
};
</script>

<style lang="scss" scoped>
.module-container {
  padding: 30rpx;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.03);

  .member-list {
    .member-item {
      display: flex;
      align-items: flex-start;
      padding: 30rpx 0;
      border-bottom: 2rpx dashed #f5f5f5;
      
      &:last-child { border-bottom: none; }
      
      .avatar {
        width: 88rpx;
        height: 88rpx;
        border-radius: 50%;
        background-color: #f0f4ff;
        margin-right: 24rpx;
        border: 2rpx solid #e1e8ff;
      }
      
      .member-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        
        .header {
          display: flex;
          align-items: center;
          margin-bottom: 16rpx;
          flex-wrap: wrap;
          gap: 12rpx;
          
          .m-name { 
            font-size: 32rpx; 
            color: #343A3F; 
            font-weight: bold; 
          }
          
          .m-tag {
            font-size: 20rpx;
            padding: 4rpx 12rpx;
            border-radius: 6rpx;
          }
          
          .m-role {
            background-color: #e6f4ff;
            color: #1677ff;
            border: 2rpx solid #91caff;
          }
          
          .m-type {
            background-color: #f6ffed;
            color: #52c41a;
            border: 2rpx solid #b7eb8f;
          }
        }
        .m-detail {
          background-color: #fafbfc;
          padding: 16rpx;
          border-radius: 12rpx;
        }
      }
    }
  }

  .empty-wrap {
    padding: 60rpx 0;
    display: flex;
    justify-content: center;
  }
}
</style>