youxi-app/pages/math/index.uvue

<script setup lang='ts'>
import Back from '@/components/back.uvue'
import Loading from '@/components/loading.uvue'
import { ref, onMounted, nextTick } from 'vue'
import { type SubjectCatalogResult, querySubjectCatalog } from '@/services/subject/catalog'
import { type SubjectCourseResult, getSubjectCoursePage } from '@/services/subject/course'
import { config } from '@/config'
import { dict } from '@/.cool/store'

const isLoading = ref(true)
const dataList = ref<SubjectCatalogResult[]>([])
const catalog = ref<SubjectCatalogResult>()
const courseList = ref<SubjectCourseResult[]>()
const cardsScrollView = ref<any>(null)
const pageNum = ref(1)
async function getDataList() {
  const id = dict.getValueByLabelMapByType('index_subject_id')['数学']
  const res = await querySubjectCatalog({
    subjectId: id, dataScope: {
      sortBy: 'asc',
      sortName: 'sortNum',
    }
  })
  dataList.value = res || []
  catalog.value = res?.[0] as SubjectCatalogResult
  handleSelect(catalog.value)
}
async function handleSelect(val: SubjectCatalogResult) {
  catalog.value = val
  pageNum.value = 1
  await getInfo()
  cardsScrollView.value.scrollTo({
    top: 0, // 减去顶部偏移
    animated: true
  })
}
async function getInfo() {
  const res = await getSubjectCoursePage({
    catalogId: catalog.value?.id, pageNum: pageNum.value, dataScope: {
      sortBy: 'asc',
      sortName: 'sort_num',
    },
  })
  courseList.value = res.rows || []
}
async function handleScrollToLower() {

}
onMounted(async () => {
  await getDataList()
  isLoading.value = false
})
</script>
<template>
  <Loading v-show="isLoading" />
  <cl-page v-show="!isLoading">
    <Back />
    <!-- 顶部标题栏 -->
    <image mode="aspectFill" src="https://oss.xiaoxiongcode.com/static/home/math-bg.png" alt=""
      class="w-full h-full object-cover" />
    <view class="content">
      <!-- 左侧导航菜单 -->
      <view class="w-[20vw] h-[100vh] bg-[#116FE988] pt-[70px] pb-[20px] px-[20px]">
        <scroll-view direction="vertical" :show-scrollbar="false" class="sidebar" @scrolltolower="handleScrollToLower">
          <view v-for="category in dataList" :key="category.id" class="sidebar-item"
            :class="{ active: catalog?.id === category.id }" @tap="handleSelect(category)">
            <!-- <cl-image :src="category?.ossIconPath" mode="heightFix" class="!h-[28px]"></cl-image> -->
            {{ category.name }}
          </view>
        </scroll-view>
      </view>
      <!-- 右侧卡片网格 -->
      <view class="cards-container">
        <view class="header">
          {{ catalog?.name }}
        </view>
        <scroll-view direction="vertical" :show-scrollbar="false" class="cards" ref="cardsScrollView"
          @scroll="onScroll">
          <view class="grid grid-cols-4 gap-4">
            <view class="card" v-for="card in courseList" :key="card.id" :class="`category-${card.catalogId}`"
              ref="categoryRefs">
              <view class="w-full h-[11vw] rounded-xl overflow-hidden">
                <image :src="card?.ossIconPath" mode="aspectFill" class="w-full h-full object-cover"></image>
              </view>
              <cl-text ellipsis :pt="{
                className: '!text-[1.5vw] !font-bold'
              }">{{
                card.sortNum }}、{{
                  card.mainTitle }}</cl-text>
              <cl-text ellipsis color="#666" :pt="{
                className: '!text-[1.2vw]'
              }">{{
                card.assistantTitle }}</cl-text>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </cl-page>
</template>
<style lang="scss" scoped>
.header {
  @apply absolute left-1/2 top-5 text-[#333] font-bold text-xl px-4 py-1 rounded-full;
  transform: translateX(-50%);
  text-align: center;
  background-color: #fff;

  .title-tabs {
    @apply flex flex-row items-center justify-center rounded-full;
    background-color: #9AD2FA;

    .tab {
      @apply rounded-full;
      padding: 5px 10px;
      font-size: 16px;
      transition: all 0.3s ease;

      &.active {
        background-color: white;
        color: #1E88E5;
        font-weight: bold;
      }
    }
  }
}

.content {
  display: flex;
  flex-direction: row;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

  .sidebar {
    height: calc(100vh - 90px);

    .sidebar-item {
      @apply text-white rounded-full py-1 px-2 cursor-pointer flex flex-row items-center;
      margin-bottom: 8px;
      transition: all 0.3s ease;
      font-size: 1.5vw;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 100%;

      &.active {
        background-color: rgba(255, 255, 255, 1);
        color: #1E88E5;
        font-weight: bold;
      }

      .sidebar-icon {
        font-size: 28px;
        margin-right: 2px;
      }
    }
  }

  .cards-container {
    @apply relative;
    flex: 1;
    width: 100%;
    padding: 20px;
    padding-top: 70px;
    // background: linear-gradient(0deg, #2EB2FD, #0B85F4);

    .cards {
      height: calc(100vh - 90px);
    }

    .category-section {
      margin-bottom: 40px;

      .category-title {
        @apply text-white font-bold text-xl mb-4;
      }
    }

    .card {
      @apply rounded-2xl border-[3px] border-[#1D4BD9] border-solid border-b-[6px] relative p-1 bg-white pb-3;
      // background-color: rgba(255, 255, 255, 0.9);
      // border-radius: 16px;
      // padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      aspect-ratio: 8/9;

      .card-content {
        width: 100%;
        height: 120px;
        background-color: #E3F2FD;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 12px;
        aspect-ratio: 3/4;

        .question-mark {
          font-size: 60px;
          font-weight: bold;
          color: #1E88E5;
        }
      }

      .card-title {
        @apply text-center font-bold absolute left-0 w-full text-[#0E3E87] text-[1.5vw];
        bottom: 13%;
      }
    }
  }
}
</style>