intelligent-etmf-system-applet/pages/home/index.vue

<template>
  <view class="home-page">
    <!-- 顶部渐变背景区域 -->
    <view class="header-bg" :style="{ paddingTop: statusBarHeight + 'px' }">
      <view class="header-content">
        <text class="header-title">智能eTMF小程序</text>
      </view>
    </view>
    
    <!-- 页面内容 -->
    <view class="page-content">
      <!-- 搜索框 -->
      <view class="search-box">
        <image class="search-icon" src="/static/pages/home/search.png" mode="aspectFit" />
        <input 
          class="search-input" 
          placeholder="输入要搜索的文档名称"
          placeholder-class="search-placeholder"
          v-model="searchKeyword"
          @confirm="handleSearch"
        />
      </view>
      
      <!-- 轮播图 -->
      <view class="banner-section">
        <swiper 
          class="banner-swiper" 
          :indicator-dots="true" 
          :autoplay="true" 
          :interval="3000"
          :duration="500"
          indicator-color="rgba(255, 255, 255, 0.5)"
          indicator-active-color="#1ec9c9"
        >
          <swiper-item v-for="(item, index) in bannerList" :key="index">
            <image class="banner-image" :src="item.image" mode="aspectFill" />
          </swiper-item>
        </swiper>
      </view>
      
      <!-- 智能扫描卡片 -->
      <view class="scan-card" @click="handleGoToScan">
        <view class="scan-icon-wrapper">
          <image class="scan-icon" src="/static/pages/home/scan-icon.png" mode="aspectFit" />
        </view>
        <view class="scan-info">
          <text class="scan-title">智能扫描</text>
          <text class="scan-desc">快速的扫描上传文档进行递交文档</text>
        </view>
      </view>
      
      <!-- 最近文档 -->
      <view class="recent-section">
        <view class="section-header">
          <text class="section-title">最近文档</text>
          <view class="more-btn" @click="handleViewMore">
            <text class="more-text">查看更多</text>
            <text class="more-arrow">›</text>
          </view>
        </view>
        
        <view class="document-list">
          <view 
            v-for="(doc, index) in recentDocuments" 
            :key="index"
            class="document-item"
            @click="handleDocumentClick(doc)"
          >
            <image class="doc-thumbnail" :src="doc.thumbnail" mode="aspectFill" />
            <view class="doc-info">
              <text class="doc-name">{{ doc.name }}</text>
              <text class="doc-meta">{{ doc.date }} | 共{{ doc.pages }}页</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 底部导航栏 -->
    <TabBar current-tab="home" />
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import TabBar from '@/components/TabBar/index.vue'

const { t } = useI18n()

// 状态栏高度
const statusBarHeight = ref(0)

// 搜索关键词
const searchKeyword = ref('')

// 轮播图数据
const bannerList = ref([
  {
    image: '/static/pages/home/banner1.png'
  },
  {
    image: '/static/pages/home/banner2.png'
  }
])

// 最近文档数据
const recentDocuments = ref([
  {
    id: 1,
    name: 'HFSLKD_SKD_测试文档名称1',
    date: '2025/11/12 11:12',
    pages: 5,
    thumbnail: '/static/pages/home/doc-thumb.png'
  },
  {
    id: 2,
    name: 'HFSLKD_SKD_测试文档名称1',
    date: '2025/11/12 11:12',
    pages: 5,
    thumbnail: '/static/pages/home/doc-thumb.png'
  },
  {
    id: 3,
    name: 'HFSLKD_SKD_测试文档名称1',
    date: '2025/11/12 11:12',
    pages: 5,
    thumbnail: '/static/pages/home/doc-thumb.png'
  },
  {
    id: 4,
    name: 'HFSLKD_SKD_测试文档名称1',
    date: '2025/11/12 11:12',
    pages: 5,
    thumbnail: '/static/pages/home/doc-thumb.png'
  },
  {
    id: 5,
    name: 'HFSLKD_SKD_测试文档名称1',
    date: '2025/11/12 11:12',
    pages: 5,
    thumbnail: '/static/pages/home/doc-thumb.png'
  }
])

onMounted(() => {
  // 获取系统信息
  const windowInfo = uni.getWindowInfo()
  statusBarHeight.value = windowInfo.statusBarHeight || 0
})

// 搜索
const handleSearch = () => {
  if (!searchKeyword.value.trim()) {
    uni.showToast({
      title: '请输入搜索关键词',
      icon: 'none'
    })
    return
  }
  
  uni.showToast({
    title: `搜索: ${searchKeyword.value}`,
    icon: 'none'
  })
  // TODO: 实现搜索功能
}

// 跳转到扫描页面
const handleGoToScan = () => {
  uni.reLaunch({
    url: '/pages/scan/index'
  })
}

// 查看更多文档
const handleViewMore = () => {
  uni.showToast({
    title: '查看更多文档',
    icon: 'none'
  })
  // TODO: 跳转到文档列表页
}

// 点击文档
const handleDocumentClick = (doc) => {
  uni.showToast({
    title: `打开文档: ${doc.name}`,
    icon: 'none'
  })
  // TODO: 跳转到文档详情页
}
</script>

<style lang="scss" scoped>
.home-page {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
  padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
  
  // 顶部渐变背景
  .header-bg {
    background: linear-gradient(180deg, #1ec9c9 0%, #1eb8b8 100%);
    
    .header-content {
      padding: 0 24rpx 16rpx;
      
      .header-title {
        font-size: 32rpx;
        font-weight: 600;
        color: #ffffff;
        display: block;
        padding: 12rpx 0;
        line-height: 1.4;
      }
    }
  }
  
  // 页面内容
  .page-content {
    flex: 1;
    padding: 0 24rpx 24rpx;
    margin-top: -12rpx;
    
    // 搜索框
    .search-box {
      background: #ffffff;
      border-radius: 16rpx;
      padding: 20rpx 24rpx;
      display: flex;
      align-items: center;
      margin-bottom: 24rpx;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
      
      .search-icon {
        width: 32rpx;
        height: 32rpx;
        margin-right: 16rpx;
      }
      
      .search-input {
        flex: 1;
        font-size: 28rpx;
        color: #333333;
      }
      
      .search-placeholder {
        color: #999999;
      }
    }
    
    // 轮播图
    .banner-section {
      margin-bottom: 24rpx;
      
      .banner-swiper {
        width: 100%;
        height: 280rpx;
        border-radius: 16rpx;
        overflow: hidden;
        
        .banner-image {
          width: 100%;
          height: 100%;
        }
      }
    }
    
    // 智能扫描卡片
    .scan-card {
      background: #ffffff;
      border-radius: 16rpx;
      padding: 32rpx 24rpx;
      display: flex;
      align-items: center;
      margin-bottom: 24rpx;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
      
      &:active {
        background-color: #f8f8f8;
      }
      
      .scan-icon-wrapper {
        width: 88rpx;
        height: 88rpx;
        background: linear-gradient(135deg, #1ec9c9 0%, #17b3b3 100%);
        border-radius: 16rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 24rpx;
        
        .scan-icon {
          width: 56rpx;
          height: 56rpx;
        }
      }
      
      .scan-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 8rpx;
        
        .scan-title {
          font-size: 32rpx;
          font-weight: 600;
          color: #333333;
        }
        
        .scan-desc {
          font-size: 24rpx;
          color: #999999;
          line-height: 1.4;
        }
      }
    }
    
    // 最近文档
    .recent-section {
      .section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 24rpx;
        
        .section-title {
          font-size: 32rpx;
          font-weight: 600;
          color: #333333;
        }
        
        .more-btn {
          display: flex;
          align-items: center;
          gap: 4rpx;
          
          .more-text {
            font-size: 26rpx;
            color: #999999;
          }
          
          .more-arrow {
            font-size: 36rpx;
            color: #999999;
            font-weight: 300;
          }
        }
      }
      
      .document-list {
        .document-item {
          background: #ffffff;
          border-radius: 16rpx;
          padding: 24rpx;
          display: flex;
          align-items: center;
          margin-bottom: 16rpx;
          box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
          
          &:active {
            background-color: #f8f8f8;
          }
          
          .doc-thumbnail {
            width: 100rpx;
            height: 120rpx;
            border-radius: 8rpx;
            margin-right: 24rpx;
            background-color: #f0f0f0;
          }
          
          .doc-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 12rpx;
            
            .doc-name {
              font-size: 28rpx;
              font-weight: 500;
              color: #333333;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            
            .doc-meta {
              font-size: 24rpx;
              color: #999999;
            }
          }
        }
      }
    }
  }
}
</style>