zhxy-jsd/src/pages/view/routine/yishiyice/zy/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">{{ 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 { typesFindTreeByZylxApi } 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 typesFindTreeByZylxApi({ 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>