ieplus-app/src/pagesStudy/pages/video/index/index.vue

<template>
  <ie-page>
    <z-paging ref="paging" v-model="knowledgeList" :auto="false" :loading-more-enabled="false"
      :safe-area-inset-bottom="true" :hide-no-more-by-limit="10" @query="handleQuery">
      <template #top>
        <ie-navbar title="视频课程" />
        <uv-tabs :current="current" keyName="label" :list="subjects" :scrollable="false" @change="handleTabChange" />
        <uv-line margin="0" />
      </template>
      <view class="h-[8px] bg-back" />
      <uv-collapse ref="collapse" :border="false">
        <uv-collapse-item v-for="item in knowledgeList" :key="item.code" :data="item" :duration="200" :lazy="true" :load="handleLoad">
          <template #title="{ expanded, loading }">
            <view class="flex items-center justify-between">
              <view class="flex items-center gap-10">
                <uv-icon name="arrow-right" size="14" color="#888" custom-class="transition-transform duration-300"
                  :class="{ 'rotate-90': expanded }" />
                <uv-loading-icon v-if="loading" mode="spinner" size="16"></uv-loading-icon>
                <view>{{ item.label }}</view>
              </view>
            </view>
          </template>
          <template #right-icon>
            <view></view>
          </template>
          <template #default="{ expanded }">
            <view class="pl-20">
              <view v-for="child in item.children" :key="child.name" class="flex items-center gap-20 mb-20">
                <ie-image :src="child.img" custom-class="w-100 h-64" />
                <view class="flex-1 min-w-1 ellipsis-1 text-28 text-fore-title">{{ child.name }}</view>
                <view
                  class="px-20 py-8 border border-solid border-primary rounded-full text-24 text-primary flex items-center gap-8"
                  @click.stop="handlePlay(item, child)">
                  <uv-icon name="play-circle" size="16" color="var(--primary-color)" />
                  <text>播放</text>
                </view>
              </view>
            </view>
          </template>
        </uv-collapse-item>
      </uv-collapse>
    </z-paging>
  </ie-page>
</template>

<script lang="ts" setup>
import { getVideoCourseSubjects, getVideoCourseKnowledges, getVideoCourseList } from '@/api/modules/study';
import type { Study } from '@/types';
import { useTransferPage } from '@/hooks/useTransferPage';

const { transferTo, routes } = useTransferPage();
const paging = ref<ZPagingInstance>();
const subjects = ref<Study.VideoCourseSubject[]>([]);
const current = ref(0);
const knowledgeList = ref<Study.VideoCourseKnowledge[]>([]);

const handleQuery = (page: number, size: number) => {
  getVideoCourseKnowledges(subjects.value[current.value].code).then(res => {
    paging.value?.completeByNoMore(res.rows, true);
  });
}
const handleTabChange = (e: any) => {
  current.value = e.index;
  paging.value?.reload();
}
const handlePlay = (parent: Study.VideoCourseKnowledge, data: Study.VideoCourse) => {
  transferTo(routes.pageCourseVideoPlay, {
    data: {
      knowledge: parent,
      video: data,
    }
  });
}
const handleLoad = async (data: Study.VideoCourseKnowledge, callback: () => {}) => {
  const queryParams = {
    pageNum: 1,
    pageSize: 1000,
    subject: subjects.value[current.value].code,
    knowledge: data.code,
  } as Study.VideoCourseRequestDTO;
  getVideoCourseList(queryParams).then(res => {
    data.children = res.rows;
    callback();
  });
}
const loadData = async () => {
  const queryParams = {
    pageNum: 1,
    pageSize: 1000,
    type: 1,
  } as Study.VideoCourseSubjectRequestDTO;
  getVideoCourseSubjects(queryParams).then(res => {
    subjects.value = res.rows;
    setTimeout(() => {
      paging.value?.reload();
    }, 100);
  });
}
onLoad(() => {
  loadData();
});
</script>