youxi-app/pages/catalog/index.uvue

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { fetchSubjectAppInfo } from '@/services/subject/info'
import type { SubjectCatalogResult } from '@/services/subject/catalog'
import type { SubjectCourseResult } from '@/services/subject/course'
import Lock from '@/components/lock.uvue'
import Progress from './components/progress.uvue'
import Back from '@/components/back.uvue'
import Loading from '@/components/loading.uvue'
import { config } from '@/config'
import { dict } from '@/.cool/store'
import { router } from "@/.cool";

const isLoading = ref(true)
const visible = ref<boolean>(false)
const dataList = ref<SubjectCatalogResult[]>([])
const catalog = ref<SubjectCatalogResult>()
const courseList = ref<SubjectCourseResult>()
async function getDataList() {
  const id = dict.getValueByLabelMapByType('index_subject_id')['物理']
  const res = await fetchSubjectAppInfo({ id })
  dataList.value = res.catalogList || []
  catalog.value = res?.catalogList?.[0]
  courseList.value = res?.courseList || []
}
onMounted(async () => {
  try {
    await getDataList()
    isLoading.value = false
  } catch (err) {
    console.log(err);
    isLoading.value = false
  }
})
const cardsScrollView = ref<any>(null)
const categoryRefs = ref<any>()

function handleDetail(item: SubjectCatalogResult) {
  // if (!item.payFlag && !item.trialPlay) {
  //   uni.showToast({
  //     title: '请先购买',
  //     icon: 'none'
  //   })
  //   return
  // }
  router.push({
    path: "/pages/catalog/detail",
    query: {
      id: item.id,
    }
  });
}
function handleSelect(val: SubjectCatalogResult) {
  catalog.value = val
  visible.value = false
  uni.createSelectorQuery().select(`.category-${val.id}`).boundingClientRect().exec((rect) => {
    if (cardsScrollView.value && rect[0]) {
      cardsScrollView.value.scrollTo({
        left: rect[0].left - dict.getWindowHeight() / 2, // 减去顶部偏移
        animated: true
      })
    }
  })
}
async function onScroll(e: any) {
  console.log();
  dataList.value.forEach(async (category) => {
    const selector = `.category-${category.id}`
    await uni.createSelectorQuery().selectAll(selector).boundingClientRect().exec((rects) => {
      // 检查元素是否在可视区域内
      for (const rect of rects[0]) {
        if (rect.left <= (dict.getWindowHeight() / 2)) {
          catalog.value = category
        }
      }
    })
  })
}
</script>

<template>
  <Loading v-show="isLoading" />
  <cl-page v-show="!isLoading">
    <Back />
    <img src="https://oss.xiaoxiongcode.com/static/home/2.png" alt="" class="w-full h-full object-cover" />
    <!-- 精灵图动画 -->
    <cl-image src="https://oss.xiaoxiongcode.com/static/home/3.gif" mode="heightFix"
      class="!absolute bottom-0 left-0 !w-[44vh] !h-[55vh] z-[1]" />
    <view>

    </view>
    <!-- 顶部右侧光标签 -->
    <view class="light-tag" @tap="visible = true">
      <image class="light-icon" v-if="catalog?.fileList?.[0]?.url" :src="config.baseUrl + catalog?.fileList?.[0]?.url">
      </image>
      <text class="light-text">{{ catalog?.name }}</text>
      <cl-icon name="arrow-left-right-line" color="primary"></cl-icon>
    </view>
    <view class="boxs">
      <scroll-view class="scroll-view_H" direction="horizontal" :show-scrollbar="false" ref="cardsScrollView"
        @scroll="onScroll">
        <view class="scroll-view-item_H bg-[white]" v-for="course in courseList || []"
          :class="`category-${course.catalogId}`" :key="course.id" @tap="handleDetail(course)" ref="categoryRefs">
          <cl-image :src="config.baseUrl + course?.fileList?.[0]?.url" mode="scaleToFill"
            class="!w-full !h-[28vh] mb-[5px] rounded-xl"></cl-image>
          <text class="text-[4vh] font-bold">{{
            course.sortNum }}、{{
              course.mainTitle }}</text>
          <text class="text-[3vh] text-[#666]">{{
            course.assistantTitle }}</text>
          <view>
            <Progress :num="2" :percentage="course.courseUserProgress ? course.courseUserProgress?.status + 1 : 0" />
          </view>
          <Lock v-if="!course.trialPlay && !course.payFlag" :record="course" isPay />
        </view>
      </scroll-view>
    </view>
    <!-- <view class="footer">
      <view>
        <cl-image src="https://oss.xiaoxiongcode.com/static/home/4.png" mode="heightFix"
          class=" !h-[40px] mb-[2px] rounded-xl"></cl-image>
        <text class="text-[14px] text-white font-bold text-stroke-custom">虚拟实验</text>
      </view>
      <view>
        <cl-image src="https://oss.xiaoxiongcode.com/static/home/5.png" mode="heightFix"
          class=" !h-[40px] mb-[2px] rounded-xl"></cl-image>
        <text class="text-[14px] text-white font-bold text-stroke-custom">我的收获</text>
      </view>
      <view>
        <cl-image src="https://oss.xiaoxiongcode.com/static/home/6.png" mode="heightFix"
          class=" !h-[40px] mb-[2px] rounded-xl"></cl-image>
        <text class="text-[14px] text-white font-bold text-stroke-custom">学习报告</text>
      </view>
    </view> -->
    <cl-popup v-model="visible" :show-header="false" direction="center" :size="600">
      <view class="p-4">
        <cl-row :gutter="0">
          <cl-col :span="6" v-for="item in dataList || []" :key="item.id" :pt="{
            className: '!p-2'
          }" @tap="handleSelect(item)">
            <view class="select-item" :class="{ selected: item.id === catalog?.id }">
              <image :src="config.baseUrl + item?.fileList?.[0]?.url" class="w-[30rpx] h-[30rpx] mb-[2px]"></image>
              <text>{{ item.name }}</text>
            </view>
          </cl-col>
        </cl-row>
      </view>
    </cl-popup>
  </cl-page>
</template>



<style lang="scss" scoped>
.boxs {
  @apply w-[calc(100vw-52vh)] h-[57vh] absolute top-1/2 left-[50vh] z-[1];
  transform: translateY(-50%);
}

.scroll-view_H {
  width: 100%;
  height: 100%;
  flex-direction: row;
}

.scroll-view-item_H {
  @apply w-[50vh] h-[57vh] mr-[20px] rounded-2xl border-[5px] border-[#1D4BD9] border-solid border-b-[10px] p-1 flex items-center justify-between relative;
}

.light-tag {
  @apply absolute top-3 left-1/2 z-[1] flex flex-row items-center bg-white px-3 py-2 font-bold rounded-full shadow-md;
  transform: translateX(-50%);

  .light-icon {
    width: 20px;
    height: 20px;
    margin-right: 3px;
  }

  .light-text {
    font-size: 16px;
    min-width: 100px;
    padding-right: 5px;
  }
}

.select-item {
  @apply flex items-center justify-center rounded-xl border-[3px] border-[#1D4BD9] border-solid border-b-[5px] px-4 py-2 font-bold;
}

.selected {
  @apply border-green-500;
}

.footer {
  @apply absolute bottom-2 right-5 z-[1] flex flex-row items-center justify-center gap-4;
}

.text-stroke-custom {
  color: white;
  text-shadow:
    /* 左上角投影 */
    -1px -1px 0 #1D4BD9,
    /* 右上角投影 */
    1px -1px 0 #1D4BD9,
    /* 左下角投影 */
    -1px 1px 0 #1D4BD9,
    /* 右下角投影 */
    1px 1px 0 #1D4BD9;

}
</style>