361 lines
7.4 KiB
Vue
361 lines
7.4 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">{{ topLevelTitle }}</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">{{ secondLevelTitle }}</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>
|
||
</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 { zymlFindTreeByZylxApi } from "@/api/base/server";
|
||
import { useDataStore } from "@/store/modules/data";
|
||
const { setData } = useDataStore();
|
||
|
||
const typeTree = ref<any>([]);
|
||
|
||
const curType = ref<any>();
|
||
const curNj = ref<any>();
|
||
|
||
// 动态接收的资源类型参数
|
||
const zylx = ref<string>('ysyc'); // 默认为一师一策
|
||
|
||
// 立即检查URL参数
|
||
const checkUrlParams = () => {
|
||
const urlZylx = getUrlParams();
|
||
if (urlZylx !== zylx.value) {
|
||
zylx.value = urlZylx;
|
||
console.log('URL参数已更新:', zylx.value);
|
||
}
|
||
};
|
||
|
||
// 动态标题
|
||
const topLevelTitle = computed(() => {
|
||
return zylx.value === 'xkjy' ? '学科教研' : '一师一策';
|
||
});
|
||
|
||
const secondLevelTitle = computed(() => {
|
||
return zylx.value === 'xkjy' ? '教研组' : '课程名称';
|
||
});
|
||
|
||
const selectType = (type: any) => {
|
||
curType.value = type;
|
||
curNj.value = curType.value.children[0];
|
||
}
|
||
const selectNj = (type: any) => {
|
||
curNj.value = type;
|
||
}
|
||
|
||
const goTo = function () {
|
||
const params = {
|
||
resourType: curNj.value.key, // 使用课程名称/教研组的key
|
||
zylx: zylx.value, // 传递资源类型
|
||
};
|
||
|
||
console.log('选择的参数:', {
|
||
[topLevelTitle.value]: curType.value?.title,
|
||
[secondLevelTitle.value]: curNj.value?.title,
|
||
传递参数: params
|
||
});
|
||
|
||
setData(params);
|
||
uni.navigateTo({
|
||
url: `/pages/view/routine/yishiyice/zy/indexList`
|
||
});
|
||
}
|
||
|
||
// 获取URL参数
|
||
const getUrlParams = () => {
|
||
// 方法1：从当前页面实例获取参数
|
||
const pages = getCurrentPages();
|
||
if (pages.length > 0) {
|
||
const currentPage = pages[pages.length - 1];
|
||
const options = (currentPage as any).options || {};
|
||
if (options.zylx) {
|
||
return options.zylx;
|
||
}
|
||
}
|
||
|
||
// 方法2：从URL hash中解析参数
|
||
const hash = window.location.hash;
|
||
if (hash.includes('zylx=')) {
|
||
const match = hash.match(/zylx=([^&]+)/);
|
||
if (match) {
|
||
return match[1];
|
||
}
|
||
}
|
||
|
||
// 方法3：从URL search中解析参数
|
||
const search = window.location.search;
|
||
if (search.includes('zylx=')) {
|
||
const match = search.match(/zylx=([^&]+)/);
|
||
if (match) {
|
||
return match[1];
|
||
}
|
||
}
|
||
|
||
return 'ysyc'; // 默认值
|
||
};
|
||
|
||
// 初始化数据
|
||
const initData = async () => {
|
||
// 重新获取URL参数
|
||
const urlZylx = getUrlParams();
|
||
zylx.value = urlZylx;
|
||
|
||
console.log('资源类型参数:', zylx.value);
|
||
console.log('当前URL:', window.location.href);
|
||
|
||
// 根据资源类型加载对应的数据
|
||
const res = await zymlFindTreeByZylxApi({ zylx: zylx.value });
|
||
typeTree.value = res.result || [];
|
||
console.log(`${topLevelTitle.value}资源页面加载完成`, res);
|
||
|
||
// 默认选择第一个
|
||
if (typeTree.value.length > 0) {
|
||
selectType(typeTree.value[0]);
|
||
}
|
||
};
|
||
|
||
// uni-app 生命周期：页面加载时接收参数
|
||
const onLoad = (options: any) => {
|
||
console.log('onLoad 接收到的参数:', options);
|
||
// 动态获取 zylx 参数，默认为 ysyc
|
||
zylx.value = options?.zylx || 'ysyc';
|
||
};
|
||
|
||
// 页面加载完成后的初始化操作
|
||
onMounted(async () => {
|
||
// 立即检查URL参数
|
||
checkUrlParams();
|
||
await initData();
|
||
|
||
// 添加URL变化监听
|
||
const handleUrlChange = () => {
|
||
checkUrlParams();
|
||
initData();
|
||
};
|
||
|
||
// 监听hash变化
|
||
window.addEventListener('hashchange', handleUrlChange);
|
||
|
||
// 清理监听器
|
||
onUnmounted(() => {
|
||
window.removeEventListener('hashchange', handleUrlChange);
|
||
});
|
||
});
|
||
|
||
// 暴露给 uni-app 生命周期
|
||
defineExpose({
|
||
onLoad
|
||
});
|
||
</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> |