labsop_scientific_h5/pages/home/index.vue

<!--
 * @Author: wanglj wanglijie@dashoo.cn
 * @Date: 2025-03-11 18:02:10
 * @LastEditors: wanglj wanglijie@dashoo.cn
 * @LastEditTime: 2025-04-10 17:33:26
 * @Description: 首页重构优化 (适配 uni-app)
-->
<template>
  <view class="app-container">
    <view class="card">
      <view class="card-title">常用功能</view>
      <view class="nav">
        <view class="nav-item" v-for="(item, index) in HOME_NAV_LIST" :key="index" @click="onRouterPush(item.path)">
          <image :src="item.icon" mode="aspectFit" />
          <text>{{ item.name }}</text>
        </view>
      </view>
    </view>


    <view class="section-box mt20" v-if="todoStore.list.length">
      <view class="section-header flex justify-between align-center">
        <view class="flex align-center">
          <text class="section-title">待办事项</text>
          <text class="badge">{{ todoStore.total }}</text>
        </view>
        <text class="link" @click="onRouterPush('/pages/todo/index')">查看更多 ></text>
      </view>
      <view class="todo-list">
        <view class="todo-item" v-for="item in todoStore.list" :key="item.taskId">
          <view class="todo-img-placeholder"></view>
          <view class="todo-content">
            <view class="todo-title">{{ item.instTitle || '审批任务' }}</view>
            <view class="todo-info">
              <text class="label">发起人：</text>
              <text class="value">{{ item.startUserName || '-' }}</text>
            </view>
            <view class="todo-time">
              <text class="label">发起时间：</text>
              <text class="value">{{ formatDate(item.createdTime, 'YYYY-MM-DD HH:mm') }}</text>
            </view>
          </view>
          <view class="todo-btn" @click="handleApprove(item)">去处理</view>
        </view>
      </view>
    </view>

    <!-- 报销提醒 -->
    <view class="section-box mt20" v-if="expendseList.length">
      <view class="section-header flex justify-between align-center">
        <text class="section-title">报销提醒</text>
        <text class="link" @click="onRouterPush('/pages/fund/reimbursement-remind/index')">查看更多 ></text>
      </view>
      <view class="fund-list">
        <view class="fund-item" v-for="item in expendseList" :key="item.id"
          @click="onRouterPush(`/pages/fund/reimbursement/edit?id=${item.id}`)">
          <view class="fund-title">{{ `项目编号：${item.projectCode || '-'}` }}</view>
          <view class="fund-footer flex justify-between">
            <text class="user">采购人：{{ item.buyerName || '-' }}</text>
            <text class="date">{{ formatDate(item.createdTime) }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 通知公告列表 -->
    <view class="section-box mt20">
      <view class="section-header flex justify-between align-center">
        <text class="section-title">通知公告</text>
        <text class="link" @click="onRouterPush('/pages/notice/index')">查看更多 ></text>
      </view>
      <view class="notice-card">
        <view class="notice-item" v-for="item in noticeList" :key="item.id"
          @click="onRouterPush(`/pages/notice/detail?id=${item.id}`)">
          <view class="notice-content">
            <view class="notice-title">{{ item.noticeTitle }}</view>
            <view class="notice-date">{{ formatDate(item.noticeTime, 'YYYY-MM-DD HH:mm') }}</view>
          </view>
          <view class="notice-action">
            <text>详情</text>
            <text class="arrow">></text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script name="home" lang="ts" setup>
import { ref } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { useTodoStore } from '@/store/modules/todo';
import type { TodoItem } from '@/types/todo';
import { onRouterPush } from '@/utils/router';
import { formatDate } from '@/utils/date';
import { HOME_NAV_LIST } from '@/constants';
import { useFundApi, useExpenseRemindApi } from '@/api/fund';
import { useSystemApi } from '@/api/system';

const todoStore = useTodoStore();
const fundApi = useFundApi();
const expenseRemindApi = useExpenseRemindApi();
const systemApi = useSystemApi();

/**
 * 状态变量定义
 * noticeList: 轮播图通知公告列表
 */
const noticeList = ref<any[]>([]);
const fundsList = ref<any[]>([]);
const expendseList = ref<any[]>([]);

/**
 * 获取通知公告列表 (GetList)
 */
const getNoticeList = async () => {
  try {
    const res: any = await systemApi.getNoticeList({
      noticeTitle: "",
      pageNum: 1,
      pageSize: 3,
      noticeStatus: "20"
    });
    if (res.code == 200) {
      noticeList.value = res.data?.list || [];
    }
  } catch (err) {
    console.error(err);
  }
};

/**
 * 获取经费认领简要列表
 */
const getFundList = async () => {
  try {
    const res: any = await fundApi.getList({ pageNum: 1, pageSize: 3, status: '10' });
    if (res.code == 200) {
      fundsList.value = res.data?.list || res.list || [];
    }
  } catch (err) {
    console.error(err);
  }
};

/**
 * 获取报销提醒简要列表
 */
const getExpendseList = async () => {
  try {
    const res: any = await expenseRemindApi.getList({ pageNum: 1, pageSize: 3, expenseStatus: '10' });
    if (res.code == 200) {
      expendseList.value = res.data?.list || res.list || [];
    }
  } catch (err) {
    console.error(err);
  }
};

/**
 * 处理审批跳转逻辑
 * 根据待办事项的属性跳转到相应的详情页面
 * @param item 待办事项对象
 */
const handleApprove = (item: TodoItem) => {
  onRouterPush(`/pages/todo/detail?mode=approval&id=${item.id || ''}&taskId=${item.taskId || ''}&taskCode=${item.businessCode || ''}&defCode=${item.defCode || ''}`);
};

/**
 * 页面生命周期：每次显示页面时刷新待办列表
 */
onShow(() => {
  // 调用 store 中的 action 获取最新的首页待办信息
  todoStore.fetchHomeTodoList();
  getFundList();
  getExpendseList();
  getNoticeList();
});
</script>

<style lang="scss" scoped>
.app-container {
  min-height: calc(100vh - var(--window-top) - var(--window-bottom));
  box-sizing: border-box;
  background-color: #f5f7fa;
  padding: 20rpx;

  .flex {
    display: flex;
  }

  .justify-between {
    justify-content: space-between;
  }

  .align-center {
    align-items: center;
  }

  /* 通用卡片样式 */
  .card {
    min-height: 120rpx;
    border-radius: 16rpx;
    background-color: #fff;
    padding: 24rpx;
    box-shadow: 0px 4rpx 20rpx rgba(0, 0, 0, 0.04);

    .card-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #343A3F;
      display: flex;
      align-items: center;

      .link {
        font-weight: normal;
        font-size: 26rpx;
        color: #999;
      }

      &::before {
        display: inline-block;
        content: '';
        width: 8rpx;
        height: 32rpx;
        background-color: #1c9bfd;
        margin-right: 16rpx;
        border-radius: 4rpx;
      }
    }

    .time {
      color: #f69a4d;
      font-size: 24rpx;
    }

    /* 导航 */
    .nav {
      display: flex;
      flex-wrap: wrap;
      margin-top: 20rpx;

      .nav-item {
        flex: 0 0 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 24rpx;

        text {
          font-size: 26rpx;
          color: #585858;
          margin-top: 14rpx;
        }

        image {
          height: 88rpx;
          width: 88rpx;
          padding: 18rpx;
          border-radius: 20rpx;
          box-sizing: border-box;
          box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
        }

        &:nth-child(1) image {
          background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        }

        &:nth-child(2) image {
          background: linear-gradient(135deg, #ff9a44 0%, #fc6076 100%);
        }

        &:nth-child(3) image {
          background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        }

        &:nth-child(4) image {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        &:nth-child(5) image {
          background: linear-gradient(135deg, #ff0844 0%, #ffb199 100%);
        }

        &:nth-child(6) image {
          background: linear-gradient(135deg, #fccb90 0%, #d57eeb 100%);
        }

        &:nth-child(n+7) image {
          background: linear-gradient(135deg, #2af598 0%, #009efd 100%);
        }
      }
    }

  }

  /* 区块通用样式 (待办事项 & 通知公告) */
  .section-box {
    margin-top: 30rpx;

    .section-header {
      margin-bottom: 24rpx;

      .section-title {
        font-size: 34rpx;
        font-weight: bold;
        color: #343A3F;
      }

      .link {
        font-size: 26rpx;
        color: #888;
      }
    }

    .badge {
      background-color: #ff4d4f;
      color: #fff;
      font-size: 20rpx;
      font-weight: bold;
      width: 32rpx;
      height: 32rpx;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 12rpx;
      box-shadow: 0 4rpx 8rpx rgba(255, 77, 79, 0.3);
    }

    .todo-list {
      .todo-item {
        display: flex;
        align-items: center;
        padding: 30rpx 24rpx;
        background-color: #fff;
        margin-bottom: 24rpx;
        border: none;
        box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.05);
        border-radius: 16rpx;

        .todo-img-placeholder {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
          border: none;
          margin-right: 24rpx;
          flex-shrink: 0;
          background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          font-size: 24rpx;
          font-weight: bold;
          box-shadow: 0 6rpx 12rpx rgba(142, 197, 252, 0.4);

          &::after {
            content: "审";
          }
        }

        .todo-content {
          flex: 1;
          overflow: hidden;

          .todo-title {
            font-size: 32rpx;
            font-weight: 600;
            color: #343A3F;
            margin-bottom: 12rpx;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .todo-info {
            font-size: 24rpx;
            margin-bottom: 10rpx;
            display: flex;
            align-items: center;

            .label {
              color: #343A3F;
            }

            .value {
              color: #585858;
            }

            .dept {
              margin-left: 16rpx;
              color: #1c9bfd;
              background: rgba(28, 155, 253, 0.1);
              padding: 2rpx 10rpx;
              border-radius: 6rpx;
            }
          }

          .todo-time {
            font-size: 22rpx;

            .label {
              color: #343A3F;
            }

            .value {
              color: #585858;
            }
          }
        }

        .todo-btn {
          background: linear-gradient(135deg, #1fc199 0%, #15a982 100%);
          color: #fff;
          font-size: 26rpx;
          padding: 12rpx 36rpx;
          border-radius: 30rpx;
          margin-left: 20rpx;
          flex-shrink: 0;
          box-shadow: 0 6rpx 12rpx rgba(31, 193, 153, 0.3);
          font-weight: 500;
        }
      }
    }

    /* 通知公告卡片 */
    .notice-card {
      background-color: #fff;
      border-radius: 16rpx;
      padding: 0 30rpx;
      box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.05);

      .notice-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 29rpx 0;
        border-bottom: 2rpx solid #f5f5f5;

        &:last-child {
          border-bottom: none;
        }

        .notice-content {
          flex: 1;

          .notice-title {
            font-size: 30rpx;
            color: #343A3F;
            margin-bottom: 12rpx;
            font-weight: 500;
          }

          .notice-date {
            font-size: 24rpx;
            color: #aaa;
          }
        }

        .notice-action {
          display: flex;
          align-items: center;
          color: #aaa;
          font-size: 24rpx;

          .arrow {
            margin-left: 8rpx;
          }
        }
      }
    }

    /* 经费列表摘要 */
    .fund-list {
      background-color: #fff;
      border-radius: 16rpx;
      padding: 0 24rpx;
      box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.05);

      .fund-item {
        padding: 24rpx 0;
        border-bottom: 1rpx solid #f2f2f2;

        &:last-child {
          border-bottom: none;
        }

        .fund-title {
          font-size: 28rpx;
          font-weight: bold;
          color: #333;
          margin-bottom: 8rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .fund-footer {
          font-size: 24rpx;
          color: #999;

          .amount {
            font-weight: 500;
            color: #ff9a44;
          }
        }
      }
    }
  }

}
</style>