zhxy-jzd/src/pages/base/home/index.vue

<template>
  <view class="home-page">
    <view class="content-container">
      <!-- 用户信息卡片 -->
      <view class="user-info-card" v-if="curXs">
					<view class="banner-content">
						<image src="/static/base/home/2211.png" class="banner-img"></image>
						<view class="banner-overlay">
						</view>
				</view>
        <!-- 学生信息 -->
        <XsPicker :is-bar="false" @change="switchXs" />
    
        <view class="glxs-btn" @click="goToGlxs">
          <u-icon name="plus" size="12" color="#fff"></u-icon>
          <text>新增学生</text>
        </view>
      </view>

      <!-- 功能菜单 -->
      <view class="menu-section">
        <view class="section-title">
          <text class="title-text">校园服务</text>
          <view class="title-line"></view>
        </view>
        <view class="grid-menu">
          <view
            v-for="(item, index) in menuItems"
            :key="index"
            class="grid-item"
            @click="handleMenuClick(item)"
          >
            <view class="grid-icon-container">
              <view class="icon-background"></view>
              <image :src="item.icon" class="grid-icon"></image>
            </view>
            <text class="grid-text">{{ item.title }}</text>
          </view>
        </view>
      </view>

      <!-- 通知公告 -->
      <view class="notice-section">
        <view class="section-title">
          <text class="title-text">通知公告</text>
          <view class="title-line"></view>
        </view>

        <view class="notice-list">
          <view
            v-for="(notice, index) in announcements"
            :key="index"
            class="notice-item"
            @click="goToDetail(notice)"
          >
            <view class="notice-icon">
              <u-icon name="bell" size="20" color="#4A90E2"></u-icon>
            </view>
            <view class="notice-content">
              <text class="notice-title">{{ notice.title }}</text>
              <text class="notice-desc">{{ notice.description }}</text>
              <view class="notice-footer">
                <text class="notice-date">{{ notice.releaseTime }}</text>
                <view class="notice-arrow">
                  <u-icon name="arrow-right" size="12" color="#C8C9CC"></u-icon>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import XsPicker from "@/pages/base/components/XsPicker/index.vue"
import { cmsArticlePageApi } from "@/api/base/server";
import { useUserStore } from "@/store/modules/user";
import { useDataStore } from "@/store/modules/data";
const { getCurXs } = useUserStore();
const { setData, getAppCode } = useDataStore();

// 菜单项数据
const menuItems = ref([
  {
    title: "班级课表",
    icon: "/static/base/home/book-read-line.png",
    path: "/pages/base/class-schedule/index",
  },
  {
    title: "成绩查询",
    icon: "/static/base/home/file-search-line.png",
    path: "/pages/base/grades/list",
  },
  {
     title: "在线请假",
     icon: "/static/base/home/draft-line.png",
     path: "/pages/base/leave-request/index",
  },
  // TODO:需求待协商硬件对接
  // {
  //   title: "进出校园",
  //   icon: "/static/base/home/file-transfer-line.png",
  //   path: "/pages/base/campus-access/index",
  // },  
  {
    title: "家校沟通",
    icon: "/static/base/home/file-transfer-line.png",
    path: "/pages/base/jl/index",
  },
  {
    title: "兴趣课",
    icon: "/static/base/home/file-text-line.png",
    path: "/pages/base/interest-class/index",
  },
  {
    title: "俱乐部",
    icon: "/static/base/home/contacts-book-3-line.png",
    path: "/pages/base/club/index",
  },
]);

// 通知公告数据
const announcements = ref<any>([
	{
	  "id": 2142746416,
	  "createdTime": "2024-10-10 09:37:45",
	  "updatedTime": "2024-10-12 15:47:44",
	  "createdUserName": "管理员",
	  "updatedUserName": "管理员",
	  "title": "值周学生常规规范",
	  "columnId": 24,
	  "sort": 1,
	  "description": "",
	  "releaseTime": "2024-10-10 09:32:36",
	  "author": "",
	  "source": "",
	  "content": "<p style=\"text-align: center;\"><br></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">1.值周前一周放假前清楚自己常规检查的位楼栋、楼层和班级；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">2.检查时段包括早读、大课间、下午眼保健操。</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">3.检查内容。</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px; font-family: 黑体;\"><strong>早读八看：</strong></span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑴看是否有教师值守；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑵看值守教师是否长时间玩手机；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑶看黑板上的值日课程贴是否填写；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑷看同学是否到班即读，有无疯玩打闹；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑸看课桌椅、讲桌是否整齐、整洁；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑹看红领巾佩戴(队徽)情况；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑺看教室、走廊是否有垃圾；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑻看黑板上是否书写(课件)有早读的内容和要求。</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px; font-family: 黑体;\"><strong>大课间七看：</strong></span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑴看是否认真组织室内操；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑵看室外操班级是否留有学生在教室且打闹；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑶看室内操是否安静、动用是否整齐；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑷看是否有教师值守室内操；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑸看教室、走廊地面是否有垃圾；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑹看室外操班级桌面是否收拾整洁；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑺看室外操班级是否关闭用电设备。</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px; font-family: 黑体;\"><strong>眼保健操五看：</strong></span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑴看是否按要求组织眼保健操；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑵看做操时是否关灯；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑶看是否有学生讲话、未做、未闭眼做操；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑷看教室、走廊地面是否整洁；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑸看走廊书吧是否整齐。</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span s
	  "columnName": "师、生值周工作要求",
	  "pk": 2142746416
	}
])

// 当前选中的学生
let curXs = computed(() => getCurXs)

let pageParams = ref({
	page: 1,
	rows: 10,
  appCode: getAppCode
})

const goToGlxs = () => {
	uni.navigateTo({
		url: "/pages/base/home/glxs",
	});
}

// 处理菜单点击
function handleMenuClick(item: any) {
  console.log("点击菜单:", item.title);
  if (item.path) {
    uni.navigateTo({
      url: item.path,
    });
  }
}

// 切换学生
function switchXs(xs: any) {
  getArticleList();
}

// 跳转到详情页面
function goToDetail(notice: any) {
	setData(notice)
	uni.navigateTo({
		url: '/pages/base/home/detail'
	})
}

const getArticleList = async () => { 
  const params = Object.assign({}, pageParams.value, { njmcId: curXs.value.njmcId });
	cmsArticlePageApi(params).then(res => {
		announcements.value = res.rows;
  })
  .catch((error) => {
		// 接口调用失败
		console.error("调用检查通知公告接口失败:", error);
  });
};

onMounted(async () => {
  getArticleList();
});
</script>

<style lang="scss" scoped>
.home-page {
  background-color: #ffffff;
  min-height: 100vh;
  position: relative;
}

.content-container {
  padding: 15px;
  position: relative;
  z-index: 1;
}

/* 用户信息卡片 */
.user-info-card {
  position: relative;
  background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%);
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 20px;
  margin-top: 20px;
  box-shadow: 0 12px 40px rgba(74, 144, 226, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.8);
  overflow: hidden;

  .banner-content {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
    
    .banner-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .banner-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, rgba(74, 144, 226, 0.8) 0%, rgba(53, 122, 189, 0.9) 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      
    }
  }

  .glxs-btn {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center; 
    gap: 4px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
    color: #ffffff;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
    transition: all 0.3s ease;
    flex-shrink: 0;
    min-width: 60px;
    height: 16px;
    
    text {
      line-height: 1;
    }
  }
}

/* 功能菜单 */
.menu-section {
  margin-bottom: 25px;
  
  .section-title {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding: 0 5px;
    
    .title-text {
      font-size: 18px;
      font-weight: 600;
      color: #303133;
      position: relative;
      padding-left: 12px;
      
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 16px;
        background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
        border-radius: 2px;
      }
    }
    
    .title-line {
      flex: 1;
      height: 1px;
      background: linear-gradient(90deg, #e0e6ed 0%, transparent 100%);
      margin-left: 20px;
    }
  }
  
  .grid-menu {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(74, 144, 226, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.8);
    
    .grid-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 20px 10px;
      transition: all 0.3s ease;
      border-radius: 12px;
      position: relative;
      
      &:active {
        transform: scale(0.95);
        background-color: rgba(74, 144, 226, 0.05);
      }
      
      .grid-icon-container {
        position: relative;
        width: 48px;
        height: 48px;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        
        .icon-background {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border-radius: 12px;
          background: linear-gradient(135deg, #f0f4ff 0%, #e6f0ff 100%);
          box-shadow: 0 2px 8px rgba(74, 144, 226, 0.15);
        }
        
        .grid-icon {
          position: relative;
          z-index: 1;
          width: 28px;
          height: 28px;
          object-fit: contain;
        }
      }
      
      .grid-text {
        font-size: 13px;
        font-weight: 500;
        color: #303133;
        text-align: center;
        line-height: 1.2;
      }
    }
  }
}

/* 通知公告 */
.notice-section {
  .section-title {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding: 0 5px;
    
    .title-text {
      font-size: 18px;
      font-weight: 600;
      color: #303133;
      position: relative;
      padding-left: 12px;
      
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 16px;
        background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
        border-radius: 2px;
      }
    }
    
    .title-line {
      flex: 1;
      height: 1px;
      background: linear-gradient(90deg, #e0e6ed 0%, transparent 100%);
      margin-left: 20px;
    }
  }
  
  .notice-list {
    .notice-item {
      display: flex;
      align-items: flex-start;
      background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%);
      padding: 18px;
      margin-bottom: 12px;
      border-radius: 16px;
      box-shadow: 0 8px 24px rgba(74, 144, 226, 0.18);
      border: 1px solid rgba(255, 255, 255, 0.8);
      transition: all 0.3s ease;
      
      &:active {
        transform: translateY(-2px);
        box-shadow: 0 12px 36px rgba(74, 144, 226, 0.25);
      }
      
      .notice-icon {
        width: 50px;
        height: 50px;
        background: linear-gradient(135deg, #f0f4ff 0%, #e6f0ff 100%);
        border-radius: 12px;
        margin-right: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(74, 144, 226, 0.15);
        flex-shrink: 0;
      }
      
      .notice-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-width: 0;
        
        .notice-title {
          font-size: 15px;
          font-weight: 600;
          color: #303133;
          margin-bottom: 8px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          line-height: 1.3;
        }
        
        .notice-desc {
          font-size: 13px;
          color: #606266;
          margin-bottom: 12px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          flex: 1;
          line-height: 1.4;
        }
        
        .notice-footer {
          display: flex;
          align-items: center;
          justify-content: space-between;
          
          .notice-date {
            font-size: 12px;
            color: #909399;
            font-weight: 400;
            line-height: 1;
          }
          
          .notice-arrow {
            width: 20px;
            height: 20px;
            background-color: #f5f7fa;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
          }
        }
      }
    }
  }
}

/* 响应式优化 */
@media (max-width: 375px) {
  .content-container {
    padding: 12px;
  }

  .grid-menu .grid-item {
    padding: 15px 8px;
  }
}
</style>