classroom-app/src/views/knowledge-library/index.tsx

import MHeader from '@/components/m-header';
import MSticky from '@/components/m-sticky';
import { defineComponent, onMounted, reactive } from 'vue';
import styles from './index.module.less';
import { useRoute, useRouter } from 'vue-router';
import { Button, Collapse, CollapseItem, Image } from 'vant';
import request from '@/helpers/request';
import library1 from './images/library-1.png';
import library2 from './images/library-2.png';
import library3 from './images/library-3.png';
import { useEventListener, useWindowScroll } from '@vueuse/core';

export default defineComponent({
  name: 'knowledge-ligrary',
  setup() {
    const router = useRouter();
    const route = useRoute();

    const forms = reactive({
      cid: route.query.cid,
      list: [] as any,
      activeNames: null,
      background: 'transparent',
      color: '#fff'
    });

    const getList = async () => {
      try {
        const { data } = await request.post(
          '/edu-app/lessonCourseware/queryStudentLessonDetail',
          {
            requestType: 'form',
            data: {
              lessonCoursewareId: forms.cid
            }
          }
        );
        forms.list = data;
        if (data && data.length > 0) {
          forms.activeNames = data[0].lessonCoursewareDetailId;
        }
      } catch {
        //
      }
    };

    const getBg = (index: number) => {
      if (index % 3 === 1) {
        return library1;
      } else if (index % 3 === 2) {
        return library2;
      } else if (index % 3 === 0) {
        return library3;
      }
    };

    onMounted(() => {
      useEventListener(document, 'scroll', () => {
        const { y } = useWindowScroll();
        if (y.value > 52) {
          forms.background = '#fff';
          forms.color = '#323333';
        } else {
          forms.background = 'transparent';
          forms.color = '#fff';
        }
      });
      getList();
    });
    return () => (
      <div class={styles.knowledgeLibrary}>
        <MSticky position="top">
          <MHeader
            border={false}
            background={forms.background}
            color={forms.color}>
            {{
              right: () => (
                <div
                  class={[styles.wroingBtn]}
                  onClick={() => router.push('/wroing-book')}>
                  <i class={styles.iconWroing}></i>错题本
                </div>
              )
            }}
          </MHeader>
        </MSticky>

        <div class={styles.btnGroup}>
          <Button
            class={styles.btnPractice}
            round
            onClick={() =>
              router.push({
                path: '/practice-mode',
                query: { lessonCoursewareId: forms.cid }
              })
            }></Button>
          <Button class={styles.btnTest} round></Button>
        </div>

        <div class={[styles.containerSection, styles.librarySection]}>
          <Collapse v-model={forms.activeNames} accordion border={false}>
            {forms.list.map((item: any) => (
              <CollapseItem
                title={item.lessonCoursewareDetailName}
                name={item.lessonCoursewareDetailId}
                value={forms.activeNames === 1 ? '收起' : '展开'}
                border={false}>
                {item.knowledgeDetails &&
                  item.knowledgeDetails.map((detail: any, index: number) => (
                    <div
                      class={styles.unitItem}
                      onClick={() =>
                        router.push({
                          path: '/unit-detail',
                          query: {
                            detailId: detail.lessonCoursewareDetailId
                          }
                        })
                      }>
                      <Image
                        class={styles.unitImg}
                        lazyLoad
                        src={getBg(index)}
                      />
                      <p class={styles.name}>
                        <span>{detail.name}</span>
                      </p>
                    </div>
                  ))}
              </CollapseItem>
            ))}
          </Collapse>
        </div>
      </div>
    );
  }
});