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

<template>
  <view class="team-page">
    <!-- 加载状态 -->
    <Loading v-if="pageLoading" type="page" :loading="true" />

    <template v-else>
      <!-- 有数据 -->
      <template v-if="items.length > 0">
        <!-- 自定义导航栏 -->
        <Navbar title="团队" :show-back="false" background-color="#F5A623" text-color="light" />

        <!-- 顶部 tab 栏，可横向滚动 -->
        <scroll-view 
          scroll-x 
          :scroll-left="scrollLeft"
          class="tab-scroll"
          :show-scrollbar="false"
        >
          <view class="tab-list">
            <view 
              v-for="(item, index) in items"
              :key="item.id"
              class="tab-item"
              :class="{ 'tab-item--active': activeIndex === index }"
              @click="handleTabClick(index)"
            >
              <!-- icon 区域 -->
              <view class="tab-icon-wrap">
                <!-- icon -->
                <image 
                  v-if="activeIndex === index && item.activeIconUrl"
                  :src="item.activeIconUrl"
                  mode="aspectFit"
                  class="tab-icon"
                />
                <image 
                  v-else-if="item.iconUrl"
                  :src="item.iconUrl"
                  mode="aspectFit"
                  class="tab-icon"
                />
              </view>
              <!-- 标题 -->
              <text class="tab-title">{{ item.title }}</text>
            </view>
          </view>
        </scroll-view>

        <!-- 详情图片 -->
        <view class="detail-content">
          <image 
            :src="currentItem.imageUrl"
            mode="widthFix"
            class="detail-image"
          />
        </view>
      </template>

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

<script setup>
/**
 * 团队页面
 * 顶部可配置 tab 栏（标题+icon），点击切换对应详情图片
 * tab 超出屏幕时可横向滚动
 */
import { ref, computed, onMounted } from 'vue'
import { getTeamInfo } from '@/api/team.js'
import Loading from '@/components/Loading/index.vue'
import Navbar from '@/components/Navbar/index.vue'

// 页面状态
const pageLoading = ref(true)
const items = ref([])
const activeIndex = ref(0)
const scrollLeft = ref(0)

// 当前选中项
const currentItem = computed(() => {
  return items.value[activeIndex.value] || {}
})

/**
 * 切换 tab
 */
function handleTabClick(index) {
  activeIndex.value = index
}

/**
 * 加载团队介绍数据
 */
async function loadTeamInfo() {
  pageLoading.value = true
  try {
    const res = await getTeamInfo()
    if (res && res.code === 0 && res.data) {
      // 优先使用新版 items 数据
      if (res.data.items && res.data.items.length > 0) {
        items.value = res.data.items
      } else if (res.data.images && res.data.images.length > 0) {
        // 兼容旧版：纯图片列表
        items.value = res.data.images.map((url, index) => ({
          id: index,
          title: `介绍${index + 1}`,
          iconUrl: '',
          activeIconUrl: '',
          imageUrl: typeof url === 'string' ? url : (url.imageUrl || '')
        }))
      }
    }
  } catch (error) {
    console.error('加载团队介绍失败:', error)
    uni.showToast({ title: '加载失败，请稍后重试', icon: 'none' })
  } finally {
    pageLoading.value = false
  }
}

onMounted(() => {
  loadTeamInfo()
})
</script>

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

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

// tab 横向滚动区域
.tab-scroll {
  white-space: nowrap;
  background-color: $bg-white;
  padding: $spacing-lg 0;
}

.tab-list {
  display: inline-flex;
  padding: 0 $spacing-lg;
  gap: $spacing-xl;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 140rpx;
}

.tab-icon-wrap {
  position: relative;
  width: 100rpx;
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: $spacing-xs;
}

.tab-icon {
  width: 64rpx;
  height: 64rpx;
}

.tab-title {
  font-size: $font-size-sm;
  color: $text-secondary;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140rpx;
}

.tab-item--active {
  .tab-title {
    color: $text-color;
    font-weight: $font-weight-medium;
  }
}

// 详情图片区域
.detail-content {
  width: 100%;
}

.detail-image {
  width: 100%;
  display: block;
}

// 空状态
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;

  .empty-icon {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: $spacing-lg;
  }

  .empty-text {
    font-size: $font-size-md;
    color: $text-placeholder;
  }
}
</style>