zhxy-jsd/src/pages/view/routine/JiaoXueZiYuan/index.vue

<template>
  <BasicLayout>
  <view class="teaching-resource-page">
    <!-- 主要内容区域 -->
    <view class="main-content">
      <!-- 右侧内容区域 -->
      <view class="right-panel">
        <view class="resource-section">
          <view class="section-title">科目</view>
          <view class="type-grid">
            <view class="type-item" :class="{ active: curType && curType.key === type.key }" v-for="(type, index) in typeTree" :key="index"
              @click="selectType(type)">
              <text class="type-text">{{ type.title }}</text>
            </view>
          </view>
        </view>
        <view class="resource-section" v-if="curType && curType.children && curType.children.length > 0">
          <view class="section-title">年级</view>
          <view class="type-grid">
            <view class="type-item" :class="{ active: curNj && curNj.key === type.key }" v-for="(type, index) in curType.children" :key="index"
              @click="selectNj(type)">
              <text class="type-text">{{ type.title }}</text>
            </view>
          </view>
        </view>
        <view class="resource-section" v-if="curNj && curNj.children && curNj.children.length > 0">
          <view class="section-title">上下册</view>
          <view class="type-grid">
            <view class="type-item" :class="{ active: curCe && curCe.key === type.key }" v-for="(type, index) in curNj.children" :key="index"
              @click="selectCe(type)">
              <text class="type-text">{{ type.title }}</text>
            </view>
          </view>
        </view>
        <!-- 资源类型 -->
        <view class="resource-section">
          <view class="section-title">资源类型</view>
          <view class="type-grid">
            <view class="type-item" :class="{ active: curCategory && curCategory.key === type.key }" v-for="(type, index) in categoryList" :key="index"
              @click="selectCategory(type)">
              <text class="type-text">{{ type.label }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
    <template #bottom>
      <view class="white-bg-color  py-5">
        <view class="flex-row items-center pb-10 pt-5">
          <u-button text="查询" class="mx-15" type="primary" @click="goTo"/>
        </view>
      </view>
    </template>
  </BasicLayout>
</template>

<script lang="ts" setup>
import { typesFindTreeApi } from "@/api/base/server";
import { useDataStore } from "@/store/modules/data";
const { setData } = useDataStore();

const typeTree = ref<any>([]);

const categoryList = ref([
  { key: '', label: '不限' },
  { key: '1', label: '课件' },
  { key: '2', label: '教案' },
  { key: '3', label: '学案' },
  { key: '4', label: '作业' },
  { key: '5', label: '试卷' },
  { key: '6', label: '教材' },
  { key: '7', label: '示范课' },
  { key: '8', label: '音视频合集' }
]);

const curType = ref<any>();
const curNj = ref<any>();
const curCe = ref<any>();
const curCategory = ref<any>();

const selectType = (type: any) => {
  curType.value = type;
  curNj.value = curType.value.children[0];
  curCe.value = curNj.value.children[0];
}
const selectNj = (type: any) => {
  curNj.value = type;
  curCe.value = curNj.value.children[0];
}
const selectCe = (type: any) => {
  curCe.value = type;
}

const selectCategory = (type: any) => {
  curCategory.value = type;
}

const goTo = function () { 
  setData({
    resourceType: curCe.value.key,
    category: curCategory.value.key,
  });
  uni.navigateTo({
    url: `/pages/view/routine/JiaoXueZiYuan/indexList`
  });
}

// 页面加载完成后的初始化操作
onMounted(async () => {
  const res = await typesFindTreeApi();
  typeTree.value = res.result || [];
  console.log('教学资源页面加载完成', res);
});
</script>

<style scoped lang="scss">
.teaching-resource-page {
  min-height: 100vh;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
}

// 主要内容区域
.main-content {
  flex: 1;
  display: flex;
  height: 100vh;
}

// 左侧面板
.left-panel {
  width: 280rpx;
  background: #ffffff;
  border-right: 1px solid #e5e5e5;

  .subject-list {
    height: 100%;
  }

  .subject-item {
    padding: 30rpx 20rpx;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;

    .subject-name {
      font-size: 28rpx;
      color: #666666;
      display: block;
    }

    &.active {
      background: #fff3e0;

      .subject-name {
        color: #ff9800;
        font-weight: 600;
      }
    }

    &:hover:not(.active) {
      background: #f8f9fa;
    }
  }
}

// 右侧面板
.right-panel {
  flex: 1;
  background: #ffffff;
  padding: 40rpx;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

// 资源类型和年级区域
.resource-section,
.grade-section {
  margin-bottom: 40rpx;
  flex-shrink: 0;

  .section-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333333;
    margin-bottom: 30rpx;
  }
}

// 资源类型网格
.type-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  margin-bottom: 20rpx;
}

.type-item {
  padding: 20rpx 30rpx;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8rpx;
  cursor: pointer;
  transition: all 0.3s ease;

  .type-text {
    font-size: 28rpx;
    color: #666666;
  }

  &.active {
    border-color: #ff9800;
    background: #fff3e0;

    .type-text {
      color: #ff9800;
    }
  }
}

// 年级网格
.grade-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
}

.grade-item {
  padding: 25rpx 20rpx;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8rpx;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;

  .grade-text {
    font-size: 28rpx;
    color: #666666;
  }

  &:hover {
    border-color: #ff9800;
    background: #fff3e0;

    .grade-text {
      color: #ff9800;
    }
  }
}

// 空状态
.empty-state {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;

  .empty-text {
    font-size: 28rpx;
    color: #999999;
  }
}

// 响应式适配
@media (max-width: 768px) {
  .left-panel {
    width: 150rpx;
  }

  .subject-item {
    padding: 20rpx 10rpx;

    .subject-name {
      font-size: 12px;
    }
  }

  .right-panel {
    padding: 20rpx;
  }

  .tag-item {
    padding: 10rpx 18rpx;

    .tag-text {
      font-size: 12px;
    }
  }
}
</style>