mi-assessment/uniapp/pages/team/index.vue

<template>
  <view class="team-page">
    <!-- 自定义导航栏 -->
    <view class="custom-navbar" :style="navbarStyle">
      <view class="navbar-content" :style="{ height: navbarHeight + 'px' }">
        <text class="navbar-title">团队</text>
      </view>
    </view>

    <!-- 导航栏占位 -->
    <view class="navbar-placeholder" :style="{ height: totalNavbarHeight + 'px' }"></view>

    <!-- 页面内容 -->
    <view class="page-content">
      <!-- 加载状态 -->
      <Loading v-if="pageLoading" type="page" :loading="true" />

      <!-- 团队介绍图片 -->
      <view v-else class="team-content">
        <!-- 有数据时显示图片列表 -->
        <template v-if="teamImages.length > 0">
          <image 
            v-for="(item, index) in teamImages"
            :key="index"
            :src="item.imageUrl"
            mode="widthFix"
            class="team-image"
            @load="handleImageLoad(index)"
            @error="handleImageError(index)"
          />
        </template>

        <!-- 无数据时显示空状态 -->
        <view v-else class="empty-state">
          <image 
            src="/static/ic_empty.png" 
            mode="aspectFit" 
            class="empty-icon"
          />
          <text class="empty-text">暂无团队介绍</text>
        </view>
      </view>

      <!-- 底部安全区域 -->
      <view class="safe-bottom"></view>
    </view>
  </view>
</template>

<script setup>
/**
 * 团队页面
 * 展示团队介绍图片
 */
import { ref, computed, onMounted } from 'vue'
import { useNavbar } from '@/composables/useNavbar.js'
import { getTeamInfo } from '@/api/team.js'
import Loading from '@/components/Loading/index.vue'

const { statusBarHeight, navbarHeight, totalNavbarHeight } = useNavbar()

// 页面状态
const pageLoading = ref(true)
const teamImages = ref([])

// 导航栏样式
const navbarStyle = computed(() => ({
  paddingTop: statusBarHeight.value + 'px',
  height: totalNavbarHeight.value + 'px'
}))

/**
 * 加载团队介绍数据
 */
async function loadTeamInfo() {
  pageLoading.value = true
  try {
    const res = await getTeamInfo()
    if (res && res.code === 0 && res.data) {
      // 支持多种数据格式
      if (Array.isArray(res.data)) {
        teamImages.value = res.data
      } else if (res.data.list && Array.isArray(res.data.list)) {
        teamImages.value = res.data.list
      } else if (res.data.images && Array.isArray(res.data.images)) {
        teamImages.value = res.data.images
      } else if (res.data.imageUrl) {
        // 单张图片的情况
        teamImages.value = [{ imageUrl: res.data.imageUrl }]
      } else {
        teamImages.value = []
      }
    }
  } catch (error) {
    console.error('加载团队介绍失败:', error)
    uni.showToast({
      title: '加载失败，请稍后重试',
      icon: 'none'
    })
  } finally {
    pageLoading.value = false
  }
}

/**
 * 图片加载成功
 */
function handleImageLoad(index) {
  console.log(`团队图片 ${index + 1} 加载成功`)
}

/**
 * 图片加载失败
 */
function handleImageError(index) {
  console.error(`团队图片 ${index + 1} 加载失败`)
}

/**
 * 页面加载
 */
onMounted(() => {
  loadTeamInfo()
})
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';

.team-page {
  min-height: 100vh;
  background-color: $bg-color;
}

// 自定义导航栏
.custom-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: $bg-white;
  z-index: 999;
  
  .navbar-content {
    display: flex;
    align-items: center;
    justify-content: center;
    
    .navbar-title {
      font-size: 34rpx;
      font-weight: $font-weight-medium;
      color: $text-color;
    }
  }
}

.navbar-placeholder {
  width: 100%;
}

// 页面内容
.page-content {
  padding-bottom: env(safe-area-inset-bottom);
}

// 团队内容区域
.team-content {
  padding: $spacing-lg;
  
  .team-image {
    width: 100%;
    display: block;
    margin-bottom: $spacing-md;
    border-radius: $border-radius-lg;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
}

// 空状态
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 200rpx 0;
  
  .empty-icon {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: $spacing-lg;
  }
  
  .empty-text {
    font-size: $font-size-md;
    color: $text-placeholder;
  }
}

// 底部安全区域
.safe-bottom {
  height: 40rpx;
  padding-bottom: env(safe-area-inset-bottom);
}
</style>