393 lines
9.1 KiB
Vue
393 lines
9.1 KiB
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> |