|
@@ -0,0 +1,401 @@
|
|
|
|
|
+<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>
|