321 lines
7.0 KiB
Vue
321 lines
7.0 KiB
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>(categoryList.value[0]);
|
||
|
||
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 () {
|
||
const params = {
|
||
resourType: curCe.value.key, // 修改参数名为resourType，与后端一致
|
||
category: curCategory.value.key,
|
||
};
|
||
|
||
console.log('选择的参数:', {
|
||
科目: curType.value?.title,
|
||
年级: curNj.value?.title,
|
||
上下册: curCe.value?.title,
|
||
资源类型: curCategory.value?.label,
|
||
传递参数: params
|
||
});
|
||
|
||
setData(params);
|
||
uni.navigateTo({
|
||
url: `/pages/view/routine/JiaoXueZiYuan/indexList`
|
||
});
|
||
}
|
||
|
||
// 页面加载完成后的初始化操作
|
||
onMounted(async () => {
|
||
const res = await typesFindTreeApi();
|
||
typeTree.value = res.result || [];
|
||
console.log('教学资源页面加载完成', res);
|
||
|
||
// 默认选择语文科目
|
||
if (typeTree.value.length > 0) {
|
||
// 查找语文科目
|
||
const chineseSubject = typeTree.value.find(item =>
|
||
item.title && (item.title.includes('语文') || item.title.includes('语文'))
|
||
);
|
||
|
||
if (chineseSubject) {
|
||
// 选择语文科目
|
||
selectType(chineseSubject);
|
||
} else {
|
||
// 如果没找到语文，选择第一个科目
|
||
selectType(typeTree.value[0]);
|
||
}
|
||
}
|
||
});
|
||
</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> |