ieplus-app/src/pagesStudy/pages/knowledge-practice/knowledge-practice.vue

<template>
  <ie-page>
    <z-paging ref="pagingRef" v-model="treeData" :loading-more-enabled="false" :auto="false" @query="loadKnowledgeList">
      <template #top>
        <ie-navbar :title="pageTitle" />
        <uv-tabs :list="subjectList" key-name="subjectName" @click="handleChangeTab" :scrollable="true"></uv-tabs>
        <view class="px-30 py-16 bg-back">
          <view class="flex items-center justify-end gap-x-4" @click="handleViewHistory">
            <uv-icon name="clock" size="16" color="#31A0FC"></uv-icon>
            <text class="text-28 text-primary">查看记录</text>
            <uv-icon name="arrow-right" size="16" color="#31A0FC"></uv-icon>
          </view>
        </view>
      </template>
      <view class="px-40">
        <knowledgeTree :tree-data="treeData" @start-practice="handleStartPractice" />
      </view>
    </z-paging>
  </ie-page>
</template>

<script lang="ts" setup>
import IePage from '@/components/ie-page/ie-page.vue';
import { useTransferPage } from '@/hooks/useTransferPage';
import { getSubjectList, getKnowledgeList } from '@/api/modules/study';
import knowledgeTree from '@/pagesStudy/components/knowledge-tree.vue';
import { Study } from '@/types';
import { EnumPaperType, EnumUserRole } from '@/common/enum';
import { useUserStore } from '@/store/userStore';
import { useAuth } from '@/hooks/useAuth';

const { prevData, transferTo } = useTransferPage();
const currentSubjectIndex = ref<number>(-1);
const userStore = useUserStore();
const pagingRef = ref<ZPagingInstance>();

const { hasPermission } = useAuth();
const pageTitle = computed(() => {
  const { isVHS, directed, questionType } = prevData.value;
  if (isVHS) {
    if (questionType === 0) {
      return '知识点练习';
    } else if (questionType === 2) {
      return '必刷题';
    }
  } else {
    if (directed) {
      return '定向刷题';
    } else {
      return '全量刷题';
    }
  }
});
const currentSubjectId = computed(() => {
  if (subjectList.value.length > 0 && currentSubjectIndex.value >= 0) {
    return subjectList.value[currentSubjectIndex.value].subjectId;
  }
  return null;
});
const subjectList = ref<Study.Subject[]>([]);
const treeData = ref<Study.KnowledgeNode[]>([]);
const handleChangeTab = (item: any) => {
  currentSubjectIndex.value = item.index;
}
const handleViewHistory = () => {
  transferTo('/pagesStudy/pages/knowledge-practice-history/knowledge-practice-history', {
    data: {
      directed: prevData.value.directed
    }
  });
}
const loadKnowledgeList = async () => {
  if (!currentSubjectId.value) {
    return;
  }
  try {
    uni.$ie.showLoading();
    const { data } = await getKnowledgeList({
      subjectId: currentSubjectId.value,
      directed: prevData.value.directed
    });
    treeData.value = data as Study.KnowledgeNode[];
    if (data.length) {
      pagingRef.value?.complete(data);
    } else {
      pagingRef.value?.complete(false);
    }
  } catch (error) {
    console.log(error);
    pagingRef.value?.complete(false);
  } finally {
    uni.$ie.hideLoading();
  }
}

const handleStartPractice = async (node: Study.KnowledgeNode) => {
  const hasAuth = hasPermission([EnumUserRole.VIP, EnumUserRole.AGENT, EnumUserRole.TEACHER]);
  if (hasAuth) {
    transferTo('/pagesStudy/pages/exam-start/exam-start', {
      data: {
        name: '知识点练习-' + node.name,
        paperType: EnumPaperType.PRACTICE,
        practiceInfo: {
          name: node.name,
          relateId: node.id,
          directed: prevData.value.directed
        },
      }
    });
  }
}

watch(() => currentSubjectIndex.value, () => {
  pagingRef.value?.reload();
}, {
  immediate: false
});

const loadData = async () => {
  const { isVHS, directed, subjectType } = prevData.value;
  try {
    const params = {} as Study.SubjectListRequestDTO;
    if (isVHS) {
      params.subjectType = subjectType;
    } else {
      params.directed = !!directed;
    }
    const { data } = await getSubjectList(params);
    subjectList.value = data.map(item => ({ subjectId: item.subjectId, subjectName: item.subjectName }));
    currentSubjectIndex.value = 0;
  } catch (error) { }
}
onLoad(() => {
  loadData();
});
onShow(() => {
  nextTick(() => {
    if (subjectList.value.length > 0) {
      pagingRef.value?.refresh();
    }
  });
});
</script>

<style></style>