import { defineComponent, onMounted, reactive, ref } from 'vue'; import styles from './index.module.less'; import icon_back from './image/icon_back.svg'; import icon_arrow from './image/icon_arrow.svg'; import useTime from './image/use-time.png'; import { Button, Image, List, Popup, Tag } from 'vant'; import { api_lessonCoursewareStudentPage, api_lessonCoursewareDetail, api_bookVersionPage } from './api'; import TheBook from './component/book'; import { postMessage } from '@/helpers/native-message'; import './jquery.min.1.7.js'; import './turn.js'; import MEmpty from '@/components/m-empty'; import deepClone from '@/helpers/deep-clone'; import { browser, chunkArray } from '@/helpers/utils'; export const BOOK_DATA = { grades: [ // { text: '全部年级', value: '' }, { text: '一年级', value: 1 }, { text: '二年级', value: 2 }, { text: '三年级', value: 3 }, { text: '四年级', value: 4 }, { text: '五年级', value: 5 }, { text: '六年级', value: 6 }, { text: '七年级', value: 7 }, { text: '八年级', value: 8 }, { text: '九年级', value: 9 } ], bookTypes: { LAST: '上册', NEXT: '下册' } as { [key: string]: string } }; export default defineComponent({ name: 'courseware-list', setup() { const popoverShow = ref(false); // const baseBookVersionList = ref([] as any); const bookVersionList = ref([] as any); // 返回 const goback = () => { postMessage({ api: 'goBack' }); }; const coursewareStorage = localStorage.getItem('courseware-list') ? JSON.parse(localStorage.getItem('courseware-list') as any) : {}; const forms = reactive({ currentGradeNum: coursewareStorage.currentGradeNum || null, bookVersionId: coursewareStorage.bookVersionId || (null as any), page: 1, rows: 24 }); const data = reactive({ courseRecord: null as any, // 上课记录 dataShow: true, // list: [] as any[], loading: false, finished: false, // 是否加载完成 details: [] as any[], bookData: {} as any, bookLessonId: '', showBook: false, book: {} as DOMRect }); const getTenantList = async () => { try { const { data } = await api_bookVersionPage({ type: 'COURSEWARE' }); const result = data.rows || []; // baseBookVersionList.value = result.map((item: any) => { // return { // bookVersionId: item.id, // bookVersionName: item.name // }; // }); // ...deepClone(baseBookVerionList.value), bookVersionList.value = result.map((item: any) => { return { bookVersionId: item.id, bookVersionName: item.name }; }); bookVersionList.value.push({ bookVersionId: -1, bookVersionName: '自定义' }); const index = bookVersionList.value.findIndex( (item: any) => item.bookVersionId == coursewareStorage.bookVersionId ); // 判断列表中是存在,缓存的教材数据 if (index < 0) { forms.bookVersionId = null; } } catch (e) { // console.log(e); } }; let isClick = false; const getData = async () => { if (isClick) return; isClick = true; data.loading = true; const { bookVersionId, currentGradeNum, ...more } = forms; const res = await api_lessonCoursewareStudentPage({ ...more, bookVersionId: bookVersionId == -1 ? null : bookVersionId, currentGradeNum: currentGradeNum ? currentGradeNum : '' }); if (res?.code === 200 && Array.isArray(res?.data?.rows)) { // 只有在第一页的时候才会赋值上次上课记录 if (res?.data?.current == 1) { data.courseRecord = res?.data?.extra; } const result = res.data.rows.map((item: any) => { item.load = false; item.key = Date.now() + item.id; return item; }); data.list = data.list.concat( chunkArray(result, data.courseRecord?.id ? 3 : 4) ); forms.page = res.data.current + 1; data.dataShow = data.list.length > 0; data.finished = res.data.current >= res.data.pages; } data.loading = false; isClick = false; }; onMounted(async () => { // window.addEventListener('error', (e: any) => { // console.log(e, 'error'); // }); await getTenantList(); getData(); // 安卓的状态栏 postMessage({ api: 'setStatusBarVisibility', content: { isVisibility: 0 } }); }); /** 学生端根据教材编号获取关联的单元、章节 */ const getDetail = async (item: any) => { const res = await api_lessonCoursewareDetail({ id: item.id }); if (res?.code == 200 && Array.isArray(res?.data?.lessonList)) { data.details = res.data.lessonList || []; data.bookData = res.data; data.bookLessonId = item.id; } handleCreateContainer(item.id); handleRender(() => { data.showBook = true; }); }; const handleCreateContainer = (id: string) => { const box = document.querySelector( `[data-id="${id}"]` ) as unknown as HTMLElement; if (!box) return; const rect = box.getBoundingClientRect(); data.book = rect; }; const handleRender = (fn: any) => { requestAnimationFrame(() => { requestAnimationFrame(() => { fn(); }); }); }; const handleOpen = async (item: any) => { await getDetail(item); }; return () => (
{data.courseRecord ? (
handleOpen(data.courseRecord)}>
{ data.courseRecord.load = true; }}> {{ loading: () => }}
{data.courseRecord.name}
) : ( '' )}
{data.dataShow ? ( {data.list.map(parent => { const sLength = data.courseRecord?.id ? 3 : 4; const length = sLength - parent.length; // 填补空白 const array = []; for (let i = 0; i < length; i++) { array.push(i); } return (
{parent.map((item: any) => (
handleOpen(item)}>
{ item.load = true; }}> {{ loading: () => }}
{item.name}
))} {array.map(() => (
))}
); })}
) : ( // )}
{ data.showBook = false; }} onConfirm={() => { getData(); }} /> {/* 搜索条件 */}
{bookVersionList.value.length > 0 && (
教材版本
{bookVersionList.value.map((item: any) => ( (forms.bookVersionId = item.bookVersionId) }> {item.bookVersionName} ))}
)}
选择年级
{BOOK_DATA.grades.map((item: any) => ( (forms.currentGradeNum = item.value)}> {item.text} ))}
); } });