index.vue 15.3 KB

Raw Blame History Permalink

<!--
 * @Date: 2026-01-31
 * @Description: 资料列表页 - 已改造为 NutTabs 版本
-->
<template>
  <view class="h-screen bg-[#F9FAFB] flex flex-col">
    <view class="bg-[#F9FAFB] z-10">
      <NavHeader :title="pageTitle" />

      <view class="px-[32rpx] mt-[32rpx]">
        <SearchBar
          v-model="searchValue"
          placeholder="搜索资料..."
          @search="onSearch"
        />
      </view>
    </view>

    <!-- Tabs Container -->
    <view class="flex-1 min-h-0 flex flex-col">
      <nut-tabs v-model="activeTabId">
        <!-- 自定义标签栏 -->
        <template #titles>
          <view class="filter-tabs-wrapper">
            <view
              v-for="item in tabsData"
              :key="item.id"
              :class="[
                'filter-tab-item',
                activeTabId === item.id ? 'filter-tab-active' : 'filter-tab-inactive'
              ]"
              @tap="onTabClick(item.id)"
            >
              <text class="filter-tab-text">{{ item.name }}</text>
            </view>
          </view>
        </template>
      </nut-tabs>

      <!-- 列表容器（独立于 nut-tab-pane） -->
      <view class="flex-1 min-h-0 overflow-y-auto px-[32rpx] pb-[calc(160rpx+env(safe-area-inset-bottom))] box-border">
        <view class="flex flex-col gap-[24rpx]">
          <view v-for="(item, index) in currentList" :key="index"
            class="material-item bg-white rounded-[24rpx] p-[24rpx] shadow-sm transition-all duration-200 border border-gray-50 flex flex-row"
            :style="{ animationDelay: `${index * 50}ms` }">

            <view
              class="w-[88rpx] h-[88rpx] mr-[24rpx] flex-shrink-0 flex items-center justify-center bg-gradient-to-br from-blue-50 to-blue-100 rounded-[20rpx] shadow-inner self-start">
              <image
                :src="getDocumentIcon(item.fileName)"
                class="w-[48rpx] h-[48rpx]"
                mode="aspectFit"
              />
            </view>

            <view class="flex-1 min-w-0">
              <h3 class="text-[#1F2937] text-[30rpx] font-bold leading-[1.4] line-clamp-2 mb-[8rpx]">
                {{ item.title }}
              </h3>
              <p class="text-[#6B7280] text-[24rpx] leading-[1.4] line-clamp-1 mb-[16rpx]">
                {{ item.desc }}
              </p>

              <view class="flex items-center gap-[12rpx] mb-[20rpx]">
                <view
                  class="inline-flex items-center justify-center px-[12rpx] py-[4rpx] bg-gray-100 text-gray-500 text-[20rpx] font-medium rounded-[8rpx]">
                  {{ getDocumentLabel(item.fileName) }}
                </view>
                <view class="text-[#9CA3AF] text-[22rpx]">
                  {{ item.size }}
                </view>
              </view>

              <view class="h-[1rpx] bg-gray-100 my-[20rpx]"></view>

              <ListItemActions
                :viewable="true"
                :collectable="true"
                :collected="item.collected"
                @view="onView(item)"
                @collect="toggleCollect(item)"
                @delete="onDelete(item)"
              />
            </view>
          </view>

          <!-- 空状态 -->
          <view v-if="currentList.length === 0" class="flex flex-col items-center justify-center py-[100rpx]">
            <text class="text-gray-400 text-[28rpx]">暂无相关资料</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useLoad } from '@tarojs/taro'
import NavHeader from '@/components/NavHeader.vue'
import SearchBar from '@/components/SearchBar.vue'
import ListItemActions from '@/components/ListItemActions/index.vue'
import { useListItemClick, ListType } from '@/composables/useListItemClick'
import { getDocumentIcon, getDocumentLabel } from '@/utils/documentIcons'
import Taro from '@tarojs/taro'

const searchValue = ref('')
const activeTabId = ref('')

/**
 * 页面标题
 */
const pageTitle = ref('资料列表')

/**
 * 资料数据源
 */
const allList = ref([
  {
    title: '2024年保险代理人考试大纲.pdf',
    desc: '最新考试范围与重点解析',
    size: '2.1MB',
    iconName: 'order',
    iconColor: '#EF4444',
    collected: true,
    fileName: '2024年保险代理人考试大纲.pdf',
    downloadUrl: 'https://cdn.ipadbiz.cn/manulife/document/1_%E7%BE%8E4%B9%90%E7%88%B1%E8%A7%89%E6%95%99%E8%82%B22024%E9%A1%B9%E7%9B%AE%E5%9B%BE%E5%BD%B1%E4%BB%8B%E7%BB%8D_.pdf'
  },
  {
    title: '历年真题汇总及解析.pdf',
    desc: '2019-2023年真题完整版',
    size: '5.3MB',
    iconName: 'order',
    iconColor: '#EF4444',
    collected: false,
    fileName: '历年真题汇总及解析.pdf',
    downloadUrl: 'https://cdn.ipadbiz.cn/manulife/document/1_%E7%BE%8E4%B9%90%E7%88%B1%E8%A7%89%E6%95%99%E8%82%B22024%E9%A1%B9%E7%9B%AE%E5%9B%BE%E5%BD%B1%E4%BB%8B%E7%BB%8D_.pdf'
  },
  {
    title: '考试技巧与经验分享.pdf',
    desc: '高分学员备考心得',
    size: '1.8MB',
    iconName: 'order',
    iconColor: '#EF4444',
    collected: false,
    fileName: '考试技巧与经验分享.pdf',
    downloadUrl: 'https://cdn.ipadbiz.cn/manulife/document/1_%E7%BE%8E4%B9%90%E7%88%B1%E8%A7%89%E6%95%99%E8%82%B22024%E9%A1%B9%E7%9B%AE%E5%9B%BE%E5%BD%B1%E4%BB%8B%E7%BB%8D_.pdf'
  },
  {
    title: '保险基础知识速记手册.pdf',
    desc: '核心知识点快速记忆',
    size: '3.2MB',
    iconName: 'order',
    iconColor: '#EF4444',
    collected: false,
    fileName: '保险基础知识速记手册.pdf',
    downloadUrl: 'https://cdn.ipadbiz.cn/manulife/document/1_%E7%BE%8E4%B9%90%E7%88%B1%E8%A7%89%E6%95%99%E8%82%B22024%E9%A1%B9%E7%9B%AE%E5%9B%BE%E5%BD%B1%E4%BB%8B%E7%BB%8D_.pdf'
  },
  {
    title: '模拟试卷10套及答案.pdf',
    desc: '考前冲刺模拟练习',
    size: '4.5MB',
    iconName: 'order',
    iconColor: '#EF4444',
    collected: true,
    fileName: '模拟试卷10套及答案.pdf',
    downloadUrl: 'https://cdn.ipadbiz.cn/manulife/document/1_%E7%BE%8E4%B9%90%E7%88%B1%E8%A7%89%E6%95%99%E8%82%B22024%E9%A1%B9%E7%9B%AE%E5%9B%BE%E5%BD%B1%E4%BB%8B%E7%BB%8D_.pdf'
  },
  {
    title: '法律法规重点条款解读.pdf',
    desc: '保险相关法规详解',
    size: '2.8MB',
    iconName: 'order',
    iconColor: '#EF4444',
    collected: false,
    fileName: '法律法规重点条款解读.pdf',
    downloadUrl: 'https://cdn.ipadbiz.cn/manulife/document/1_%E7%BE%8E4%B9%90%E7%88%B1%E8%A7%89%E6%95%99%E8%82%B22024%E9%A1%B9%E7%9B%AE%E5%9B%BE%E5%BD%B1%E4%BB%8B%E7%BB%8D_.pdf'
  },
  {
    title: '考试常见易错题分析.pdf',
    desc: '高频错题归纳总结',
    size: '1.5MB',
    iconName: 'order',
    iconColor: '#EF4444',
    collected: false,
    fileName: '考试常见易错题分析.pdf',
    downloadUrl: 'https://cdn.ipadbiz.cn/manulife/document/1_%E7%BE%8E4%B9%90%E7%88%B1%E8%A7%89%E6%95%99%E8%82%B22024%E9%A1%B9%E7%9B%AE%E5%9B%E5%BD%B1%E4%BB%8B%E7%BB%8D_.pdf'
  },
  {
    title: '案例分析题库及解答.pdf',
    desc: '实务案例精选练习',
    size: '3.9MB',
    iconName: 'order',
    iconColor: '#EF4444',
    collected: false,
    fileName: '案例分析题库及解答.pdf',
    downloadUrl: 'https://cdn.ipadbiz.cn/manulife/document/1_%E7%BE%8E4%B9%90%E7%88%B1%E8%A7%89%E6%95%99%E8%82%B22024%E9%A1%B9%E7%9B%AE%E5%9B%BE%E5%BD%B1%E4%BB%8B%E7%BB%8D_.pdf'
  },
  {
    title: '考前冲刺复习资料.pdf',
    desc: '最后一周复习要点',
    size: '2.3MB',
    iconName: 'order',
    iconColor: '#EF4444',
    collected: false,
    fileName: '考前冲刺复习资料.pdf',
    downloadUrl: 'https://cdn.ipadbiz.cn/manulife/document/1_%E7%BE%8E4%B9%90%E7%88%B1%E8%A7%89%E6%95%99%E8%82%B22024%E9%A1%B9%E7%9B%AE%E5%9B%BE%E5%BD%B1%E4%BB%8B%E7%BB%8D_.pdf'
  },
  {
    title: '考场注意事项及答题技巧.pdf',
    desc: '应试策略与时间分配',
    size: '1.2MB',
    iconName: 'order',
    iconColor: '#EF4444',
    collected: false,
    fileName: '考场注意事项及答题技巧.pdf',
    downloadUrl: 'https://cdn.ipadbiz.cn/manulife/document/1_%E7%BE%8E4%B9%90%E7%88%B1%E8%A7%89%E6%95%99%E8%82%B22024%E9%A1%B9%E7%9B%AE%E5%9B%E5%BD%B1%E4%BB%8B%E7%BB%8D_.pdf'
  },
  {
    title: '2024产品手册-旗舰版.pptx',
    desc: '核心卖点与条款速览',
    size: '6.8MB',
    iconName: 'order',
    iconColor: '#EF4444',
    collected: false,
    fileName: '2024产品手册-旗舰版.pptx',
    downloadUrl: 'https://cdn.ipadbiz.cn/manulife/document/1_%E7%BE%8E4%B9%90%E7%88%B1%E8%A7%89%E6%95%99%E8%82%B22024%E9%A1%B9%E7%9B%AE%E5%9B%E5%BD%B1%E4%BB%8B%E7%BB%8D_.pdf'
  },
  {
    title: '新人成长训练营课程表.xlsx',
    desc: '培训计划与日程安排',
    size: '0.9MB',
    iconName: 'order',
    iconColor: '#EF4444',
    collected: true,
    fileName: '新人成长训练营课程表.xlsx',
    downloadUrl: 'https://cdn.ipadbiz.cn/manulife/document/1_%E7%BE%8E4%B9%90%E7%88%B1%E8%A7%82%E6%95%99%E8%82%B22024%E9%A1%B9%E7%9B%AE%E5%9B%BE%E5%BD%B1%E4%BB%8B%E7%BB%8D_.pdf'
  },
  {
    title: '高客访谈案例集.docx',
    desc: '高净值客户沟通案例',
    size: '3.4MB',
    iconName: 'order',
    iconColor: '#EF4444',
    collected: false,
    fileName: '高客访谈案例集.docx',
    downloadUrl: 'https://cdn.ipadbiz.cn/manulife/document/1_%E7%BE%8E4%B9%90%E7%88%B1%E8%A7%82%E6%95%99%E8%82%B22024%E9%A1%B9%E7%9B%AE%E5%9B%BE%E5%BD%B1%E4%BB%8B%E7%BB%8D_.pdf'
  },
  {
    title: '合规操作指引2024.pdf',
    desc: '最新合规要点与流程',
    size: '2.6MB',
    iconName: 'order',
    iconColor: '#EF4444',
    collected: true,
    fileName: '合规操作指引2024.pdf',
    downloadUrl: 'https://cdn.ipadbiz.cn/manulife/document/1_%E7%BE%8E4%B9%90%E7%88%B1%E8%A7%82%E6%95%99%E8%82%B22024%E9%A1%B9%E7%9B%AE%E5%9B%BE%E5%BD%B1%E4%BB%8B%E7%BB%8D_.pdf'
  },
  {
    title: '客户需求分析模板.xlsx',
    desc: '快速梳理家庭需求',
    size: '0.6MB',
    iconName: 'order',
    iconColor: '#EF4444',
    collected: false,
    fileName: '客户需求分析模板.xlsx',
    downloadUrl: 'https://cdn.ipadbiz.cn/manulife/document/1_%E7%BE%8E4%B9%90%E7%88%B1%E8%A7%82%E6%95%99%E8%82%B22024%E9%A1%B9%E7%9B%AE%E5%9B%BE%E5%BD%B1%E4%BB%8B%E7%BB%8D_.pdf'
  },
  {
    title: '线上展业话术脚本.txt',
    desc: '直播场景话术与流程',
    size: '0.2MB',
    iconName: 'order',
    iconColor: '#EF4444',
    collected: false,
    fileName: '线上展业话术脚本.txt',
    downloadUrl: 'https://cdn.ipadbiz.cn/manulife/document/1_%E7%BE%8E4%B9%90%E7%88%B1%E8%A7%82%E6%95%99%E8%82%B22024%E9%A1%B9%E7%9B%AE%E5%9B%BE%E5%BD%B1%E4%BB%8B%E7%BB%8D_.pdf'
  }
])

/**
 * 资料分类及列表数据
 *
 * @description 包含分类信息和对应的资料列表
 */
const tabsData = ref([
  { id: '', name: '全部资料', list: [] },
  { id: 'exam', name: '考试资料', list: [] },
  { id: 'product', name: '产品手册', list: [] },
  { id: 'training', name: '培训材料', list: [] },
  { id: 'case', name: '案例分享', list: [] },
])

/**
 * 初始化数据分布
 * @description 根据分类规则将 allList 中的数据分配到各个 tab 中
 */
const initTabsData = () => {
  tabsData.value.forEach((tab, index) => {
    if (tab.id === '') {
      tab.list = [...allList.value]
    } else {
      // 模拟分类逻辑：根据索引取余分配
      // 保持与原逻辑一致：result = result.filter((_, i) => (i + index) % (index + 2) === 0)
      tab.list = allList.value.filter((_, i) => (i + index) % (index + 2) === 0)
    }
  })
}

/**
 * 当前选中 Tab 的列表数据
 * @description 根据 activeTabId 获取对应 tab 的列表数据
 */
const currentList = computed(() => {
  // 找到当前选中的 tab
  const currentTab = tabsData.value.find(tab => tab.id === activeTabId.value)
  if (!currentTab) return []

  // 如果有搜索关键词，进行过滤
  if (!searchValue.value) return currentTab.list

  const keyword = searchValue.value.toLowerCase()
  return currentTab.list.filter(item =>
    item.title.toLowerCase().includes(keyword) ||
    item.desc.toLowerCase().includes(keyword)
  )
})

/**
 * 页面加载时接收参数
 */
useLoad((options) => {
  console.log('[Material List] 页面参数:', options)

  if (options.title) {
    pageTitle.value = options.title
  }

  if (options.categoryId) {
    activeTabId.value = options.categoryId
    console.log('[Material List] 初始分类:', activeTabId.value)

    // 如果有特定的加载逻辑，可以在这里调用
    // loadMaterialsByCategory(activeTabId.value)
  }

  // 初始化数据
  initTabsData()
})

/**
 * Tab 点击处理
 */
const onTabClick = (id) => {
  activeTabId.value = id
  // 可以在这里触发加载逻辑
  // loadMaterialsByCategory(id)
}

/**
 * 根据分类 ID 加载资料列表 (模拟)
 */
const loadMaterialsByCategory = async (id) => {
  try {
    Taro.showLoading({ title: '加载中...', mask: true })

    // 模拟 API 调用
    await new Promise(resolve => setTimeout(resolve, 500))

    console.log(`[Material List] 已刷新分类 "${id}" 的资料列表`)

    Taro.hideLoading()
  } catch (error) {
    console.error('[Material List] 加载资料列表失败:', error)
    Taro.hideLoading()
  }
}

/**
 * 搜索处理函数
 */
const onSearch = () => {
  console.log('Searching for:', searchValue.value)
  console.log('当前分类:', activeTabId.value)
}

/**
 * 使用文件列表点击处理器
 */
const { handleClick: onView } = useListItemClick({
  listType: ListType.FILE,
  onAfterClick: (item) => {
    console.log('用户打开了资料:', item.title)
  }
})

/**
 * 切换收藏状态
 */
const toggleCollect = (item) => {
  item.collected = !item.collected
  Taro.showToast({
    title: item.collected ? '已收藏' : '已取消收藏',
    icon: 'success',
    duration: 1000
  })
}

/**
 * 删除资料
 */
const onDelete = (item) => {
  Taro.showModal({
    title: '提示',
    content: '确定要删除该资料吗？',
    success: (res) => {
      if (res.confirm) {
        // 从 allList 中删除
        const index = allList.value.findIndex(i => i.title === item.title)
        if (index !== -1) {
          allList.value.splice(index, 1)
          // 重新初始化 tabsData
          initTabsData()
          Taro.showToast({ title: '已删除', icon: 'success' })
        }
      }
    }
  })
}
</script>

<style lang="less">
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.material-item {
  animation: slideIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

// FilterTabs 风格的标签栏
.filter-tabs-wrapper {
  display: flex;
  overflow-x: auto;
  padding: 24rpx 32rpx;
  gap: 24rpx;
  transition: all 0.3s ease;
  background-color: #F9FAFB;

  // 隐藏滚动条
  &::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  -ms-overflow-style: none;
  scrollbar-width: none;
}

.filter-tab-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 32rpx;
  border-radius: 9999rpx;
  white-space: nowrap;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.filter-tab-active {
  background-color: #2563EB; // 蓝色背景
  color: #fff;
}

.filter-tab-inactive {
  background-color: #F3F4F6; // 灰色背景
  color: #6B7280;
}

.filter-tab-text {
  font-size: 28rpx;
  font-weight: 500;
}

// 覆盖 NutUI Tabs 默认样式，隐藏原有的头部和内容（因为我们使用自定义头部和外部列表）
:deep(.nut-tabs__titles) {
  display: none;
}

:deep(.nut-tabs__content) {
  display: none;
}
</style>