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">一师一策</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>
    </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 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
  };
  
  console.log('选择的参数:', {
    一师一策: curType.value?.title,
    课程名称: curNj.value?.title,
    传递参数: params
  });
  
  setData(params);
  uni.navigateTo({
    url: `/pages/view/routine/yishiyice/zy/indexList`
  });
}

// 页面加载完成后的初始化操作
onMounted(async () => {
  const res = await typesFindTreeByZylxApi({ zylx: 'ysyc' });
  typeTree.value = res.result || [];
  console.log('一师一策资源页面加载完成', res);
  
  // 默认选择第一个一师一策
  if (typeTree.value.length > 0) {
    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>