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

<template>
  <view class="teaching-resource-page">
    <!-- 主要内容区域 -->
    <view class="main-content">
      <!-- 左侧课程列表 -->
      <view class="left-panel">
        <scroll-view class="subject-list" scroll-y="true" show-scrollbar="false">
          <view 
            class="subject-item" 
            v-for="(subject, index) in subjectList" 
            :key="subject.id"
            :class="{ active: selectedSubjectIndex === index }"
            @click="selectSubject(index)"
          >
            <text class="subject-name">{{ subject.name }}</text>
          </view>
        </scroll-view>
      </view>

      <!-- 右侧内容区域 -->
      <view class="right-panel">
        <!-- 资源类型 -->
        <view class="resource-section" v-if="currentSubject.resourceTypes && currentSubject.resourceTypes.length > 0">
          <view class="section-title">资源类型</view>
          <view class="type-grid">
            <view 
              class="type-item" 
              v-for="(type, index) in currentSubject.resourceTypes" 
              :key="index"
              @click="goToResourceList('type', type)"
            >
              <text class="type-text">{{ type }}</text>
            </view>
          </view>
        </view>

        <!-- 年级选择 -->
        <view class="grade-section" v-if="currentSubject.grades && currentSubject.grades.length > 0">
          <view class="section-title">年级</view>
          <view class="grade-grid">
            <view 
              class="grade-item" 
              v-for="(grade, index) in currentSubject.grades" 
              :key="index"
              @click="goToResourceList('grade', grade)"
            >
              <text class="grade-text">{{ grade }}</text>
            </view>
          </view>
        </view>

        <!-- 空状态 -->
        <view class="empty-state" v-if="!currentSubject.name">
          <text class="empty-text">请从左侧选择学科</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive, ref, computed, onMounted } from "vue";

// 定义数据接口
interface Subject {
  id: string;
  name: string;
  description: string;
  resourceTypes?: string[];
  grades?: string[];
}

// 响应式数据
const selectedSubjectIndex = ref(1); // 默认选中数学

// 模拟课程数据
const subjectList = reactive<Subject[]>([
  {
    id: 'chinese',
    name: '语文',
    description: '语言文字运用与文学鉴赏',
    resourceTypes: ['课件', '教案', '学案', '作业', '试卷'],
    grades: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级']
  },
  {
    id: 'math',
    name: '数学',
    description: '数学思维与逻辑推理',
    resourceTypes: ['题集', '素材', '备课综合'],
    grades: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级']
  },
  {
    id: 'english',
    name: '英语',
    description: '英语听说读写综合能力',
    resourceTypes: ['课件', '音频', '视频', '练习'],
    grades: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级']
  },
  {
    id: 'moral',
    name: '道德与法治',
    description: '品德修养与法律意识',
    resourceTypes: [],
    grades: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级']
  },
  {
    id: 'science',
    name: '科学',
    description: '科学探究与实验操作',
    resourceTypes: ['实验', '课件', '视频'],
    grades: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级']
  },
  {
    id: 'it',
    name: '信息科技',
    description: '信息技术与编程思维',
    resourceTypes: ['软件', '教程', '项目'],
    grades: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级']
  },
  {
    id: 'music',
    name: '音乐',
    description: '音乐欣赏与艺术表现',
    resourceTypes: ['音频', '乐谱', '视频'],
    grades: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级']
  },
  {
    id: 'art',
    name: '美术',
    description: '美术创作与艺术鉴赏',
    resourceTypes: ['图片', '视频', '作品'],
    grades: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级']
  },
  {
    id: 'pe',
    name: '体育',
    description: '体育运动与健康生活',
    resourceTypes: ['视频', '规则', '训练'],
    grades: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级']
  },
  {
    id: 'labor',
    name: '劳动技术',
    description: '劳动实践与技能培养',
    resourceTypes: ['教程', '工具', '项目'],
    grades: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级']
  },
  {
    id: 'expand',
    name: '拓展',
    description: '综合素质拓展活动',
    resourceTypes: ['活动', '方案', '素材'],
    grades: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级']
  },
  {
    id: 'psychology',
    name: '心理健康',
    description: '心理健康与情感教育',
    resourceTypes: ['课件', '测试', '案例'],
    grades: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级']
  },
  {
    id: 'practice',
    name: '综合实践',
    description: '综合实践活动课程',
    resourceTypes: ['方案', '案例', '工具'],
    grades: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级']
  },
  {
    id: 'calligraphy',
    name: '书法',
    description: '书法艺术与汉字文化',
    resourceTypes: ['字帖', '视频', '作品'],
    grades: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级']
  }
]);

// 计算属性
const currentSubject = computed(() => {
  return subjectList[selectedSubjectIndex.value] || {};
});



// 方法
const selectSubject = (index: number) => {
  selectedSubjectIndex.value = index;
};

// 跳转到资源列表页面
const goToResourceList = (filterType: string, filterValue: string) => {
  const subject = currentSubject.value;
  const params = {
    subjectId: subject.id,
    subjectName: subject.name,
    filterType: filterType,
    filterValue: filterValue
  };
  
  const queryString = Object.entries(params).map(([key, value]) => `${key}=${encodeURIComponent(value)}`).join('&');
  
  uni.navigateTo({
    url: `/pages/view/routine/JiaoXueZiYuan/indexList?${queryString}`
  });
};



onMounted(() => {
  // 页面加载完成后的初始化操作
  console.log('教学资源页面加载完成');
});
</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;
  }
  
  &:hover {
    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>