labsop_scientific_h5/pages/project/index.vue

<template>
  <view class="project-container">
    <!-- 顶部固定搜索区域 -->
    <view class="search-header">
      <!-- 搜索输入框 -->
      <view class="search-row">
        <uv-input placeholder="请输入项目名称" v-model="queryParams.projectName" prefixIcon="search"
          prefixIconStyle="color: #999; font-size: 32rpx;" clearable shape="circle"
          customStyle="background-color: #f5f7fa; border: none;"></uv-input>
      </view>

      <!-- 状态与角色过滤 -->
      <view class="filter-row">
        <!-- 状态选择 Picker 触发器 -->
        <view class="status-picker-wrap" @click="openPicker">
          <text class="status-text">{{ currentStatusLabel }}</text>
          <uv-icon name="arrow-down-fill" size="10" color="#666" customStyle="margin-left: 8rpx"></uv-icon>
        </view>

        <!-- 我负责/我参与 切换 -->
        <view class="role-tabs">
          <view class="role-tab" :class="{ active: queryParams.operatorType === '10' }"
            @click="queryParams.operatorType = '10'">我负责的</view>
          <view class="role-tab" :class="{ active: queryParams.operatorType === '20' }"
            @click="queryParams.operatorType = '20'">我参与的</view>
          <view class="role-tab" :class="{ active: queryParams.operatorType === '30' }"
            @click="queryParams.operatorType = '30'">全部</view>
        </view>
      </view>

      <!-- 项目类型切换 -->
      <view class="type-tabs">
        <uv-tabs :list="tabList" :current="currentTab" @change="onTabChange"
          :activeStyle="{ color: '#1c9bfd', fontWeight: 'bold', transform: 'scale(1.05)' }"
          :inactiveStyle="{ color: '#666' }" lineColor="#1c9bfd" lineWidth="40"
          :itemStyle="{ height: '88rpx', flex: 1 }" :scrollable="false"></uv-tabs>
      </view>
    </view>

    <!-- 列表区域 -->
    <view class="list-container">
      <VerticalProject v-if="currentTab === 0" :queryParams="queryParams" @goDetail="goDetail"></VerticalProject>
      <HorizontalProject v-if="currentTab === 1" :queryParams="queryParams" @goDetail="goDetail"></HorizontalProject>
      <SpontaneityProject v-if="currentTab === 2" :queryParams="queryParams" @goDetail="goDetail"></SpontaneityProject>
    </view>

    <!-- 状态拾取器 -->
    <uv-picker ref="statusPicker" :columns="statusColumns" keyName="dictLabel" @confirm="onStatusConfirm"></uv-picker>

  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import VerticalProject from './components/VerticalProject.vue';
import HorizontalProject from './components/HorizontalProject.vue';
import SpontaneityProject from './components/SpontaneityProject.vue';
import { projectStatusOptions } from '@/constants/index';

// 查询条件
const queryParams = ref({
  projectName: '',
  projectStatus: '',
  operatorType: '10'
});

const currentTab = ref(0);
const tabList = ref([{ name: '纵向项目' }, { name: '横向项目' }, { name: '校内项目' }]);

const currentStatusLabel = computed(() => {
  const item = projectStatusOptions.find(s => s.dictValue === queryParams.value.projectStatus);
  return item && item.dictValue !== '' ? item.dictLabel : '项目状态';
});

const statusColumns = computed(() => [projectStatusOptions]);
const statusPicker = ref<any>(null);

const openPicker = () => {
  const idx = projectStatusOptions.findIndex(s => s.dictValue === queryParams.value.projectStatus);
  if (idx !== -1 && statusPicker.value?.setIndexs) {
    statusPicker.value.setIndexs([idx]);
  }
  statusPicker.value?.open();
};

const onStatusConfirm = (e: any) => {
  queryParams.value.projectStatus = e.value[0].dictValue;
};

const onTabChange = (e: any) => {
  currentTab.value = e.index;
};

const goDetail = (item: any) => {
  // 跳转到统一或者独立的详情页（这里使用了带参数的统一详情页）
  uni.navigateTo({
    url: `/pages/project/detail?type=${item._type}&id=${item.id}`
  });
};

onLoad((options: any) => {
  if (options.tabIndex) {
    currentTab.value = Number(options.tabIndex);
  }
});
</script>

<style lang="scss" scoped>
.project-container {
  height: calc(100vh - var(--window-top));
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
  box-sizing: border-box;
}

.search-header {
  background-color: #fff;
  padding: 20rpx 30rpx 0;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);
  position: sticky;
  top: 0;
  z-index: 99;

  .search-row {
    margin-bottom: 24rpx;
  }

  .filter-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10rpx;
    height: 70rpx;

    .status-picker-wrap {
      display: flex;
      align-items: center;
      background-color: #f5f7fa;
      height: 60rpx;
      padding: 0 16rpx 0 20rpx;
      border-radius: 30rpx;
      flex-shrink: 0;

      .status-text {
        font-size: 26rpx;
        color: #666;
        max-width: 140rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .role-tabs {
      display: flex;
      background-color: #f5f7fa;
      border-radius: 40rpx;
      padding: 6rpx;

      .role-tab {
        font-size: 24rpx;
        color: #666;
        padding: 10rpx 28rpx;
        border-radius: 34rpx;
        transition: all 0.3s;

        &.active {
          background-color: #1c9bfd;
          color: #fff;
          font-weight: 500;
          box-shadow: 0 4rpx 8rpx rgba(28, 155, 253, 0.3);
        }
      }
    }
  }

  .type-tabs {
    margin-top: 10rpx;
  }
}

.list-container {
  padding: 30rpx;
  flex: 1;
  overflow: hidden;
  box-sizing: border-box;
}
</style>