zhjwxt/uniapp/pages/academic/home/index.vue

<template>
  <view class="main_box">
    <view class="main_section">
      <!--教务待办事项-->
      <view class="section_3">
        <view class="title_box">
          <view class="top_box">
            <text>教务待办</text>
            <view></view>
          </view>
          <view class="line"></view>
        </view>
        <view class="ul" v-if="infoData.todo_list && infoData.todo_list.length > 0">
          <view class="li" v-for="(v,k) in infoData.todo_list" :key="k" @click="openViewTodoDetail(v)">
            <view class="top_box">
              <view class="title">任务：{{ v.title }}</view>
              <view class="title">创建时间：{{ v.create_time }}</view>
              <view class="title">截止时间：{{ v.deadline }}</view>
            </view>
            <view class="botton_box">
              <view class="box">
                <view>优先级：{{ v.priority_text }}</view>
                <view>
                  查看
                  <fui-icon size="35" color="#fff" name="arrowright"></fui-icon>
                </view>
              </view>
            </view>
            <view
                v-if="v.status == 'pending'"
                class="tag"
                style="background:#007ACC;">待处理
            </view>
            <view
                v-if="v.status == 'processing'"
                class="tag"
                style="background:#fad24e;">处理中
            </view>
            <view
                v-if="v.status == 'completed'"
                class="tag"
                style="background:#29d3b4;">已完成
            </view>
          </view>
        </view>
        <view v-else class="empty_box">
          <image src="/static/images/empty.png" mode="aspectFit"></image>
          <text>暂无待办事项</text>
        </view>
      </view>

      <!--统计数据-->
      <view class="section_3">
        <view class="title_box">
          <view class="top_box">
            <text>数据统计</text>
            <view></view>
          </view>
          <view class="line"></view>
        </view>
        <view class="stats_grid">
          <view class="stat_item" @click="openViewStats('students')">
            <view class="stat_number">{{ infoData.student_count || 0 }}</view>
            <view class="stat_label">学员总数</view>
          </view>
          <view class="stat_item" @click="openViewStats('courses')">
            <view class="stat_number">{{ infoData.course_count || 0 }}</view>
            <view class="stat_label">课程总数</view>
          </view>
          <view class="stat_item" @click="openViewStats('teachers')">
            <view class="stat_number">{{ infoData.teacher_count || 0 }}</view>
            <view class="stat_label">教师总数</view>
          </view>
          <view class="stat_item" @click="openViewStats('classes')">
            <view class="stat_number">{{ infoData.class_count || 0 }}</view>
            <view class="stat_label">班级总数</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import apiRoute from '@/api/apiRoute.js';

export default {
  data() {
    return {
      infoData: {
        todo_list: [],
        student_count: 0,
        course_count: 0,
        teacher_count: 0,
        class_count: 0
      }
    }
  },
  onShow() {
    this.init()
  },
  methods: {
    async init() {
      try {
        // 获取教务首页数据
        const res = await apiRoute.getAcademicHomeData();
        if (res && res.code === 1) {
          this.infoData = res.data;
        }
      } catch (error) {
        console.error('获取教务数据失败:', error);
      }
    },
    
    // 打开待办事项详情
    openViewTodoDetail(item) {
      this.$navigateTo({
        url: `/pages/academic/todo/detail?id=${item.id}`
      });
    },
    
    // 打开统计页面
    openViewStats(type) {
      this.$navigateTo({
        url: `/pages/academic/stats/index?type=${type}`
      });
    }
  }
}
</script>

<style lang="less" scoped>
.main_box {
  width: 100%;
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 140rpx;
}

.main_section {
  padding: 30rpx;
}

.section_3 {
  margin-bottom: 30rpx;
}

.title_box {
  .top_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    
    text {
      font-size: 36rpx;
      font-weight: bold;
      color: #007ACC;
    }
  }
  
  .line {
    height: 4rpx;
    background: linear-gradient(to right, #007ACC, #4DA6FF);
    border-radius: 2rpx;
  }
}

.ul {
  margin-top: 30rpx;
}

.li {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 122, 204, 0.1);
  position: relative;
  
  .top_box {
    .title {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 15rpx;
      line-height: 1.4;
    }
  }
  
  .botton_box {
    margin-top: 20rpx;
    
    .box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #007ACC;
      color: #fff;
      padding: 20rpx 30rpx;
      border-radius: 15rpx;
      font-size: 26rpx;
      margin-bottom: 10rpx;
    }
  }
  
  .tag {
    position: absolute;
    top: 30rpx;
    right: 30rpx;
    padding: 10rpx 20rpx;
    border-radius: 20rpx;
    color: #fff;
    font-size: 22rpx;
  }
}

.empty_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  
  image {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 30rpx;
    opacity: 0.5;
  }
  
  text {
    color: #999;
    font-size: 28rpx;
  }
}

.stats_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20rpx;
  margin-top: 30rpx;
}

.stat_item {
  background: #fff;
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
  text-align: center;
  box-shadow: 0 4rpx 20rpx rgba(0, 122, 204, 0.1);
  
  .stat_number {
    font-size: 48rpx;
    font-weight: bold;
    color: #007ACC;
    margin-bottom: 10rpx;
  }
  
  .stat_label {
    font-size: 26rpx;
    color: #666;
  }
}
</style>