合并

src/views/knowledge-library/index.module.less

@@ -100,15 +100,48 @@
         margin-right: 6px;
         background: linear-gradient(to bottom, #259CFE, #3FC2FF);
       }
+
+      span {
+        max-width: 200px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
     }
   }
 
-  .unitImg {
-    width: 100%;
+  .unitItem {
+    position: relative;
     max-height: 154px;
 
-    &+.unitImg {
+    &+.unitItem {
       margin-top: 12px;
     }
+
+    .name {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 2;
+      font-size: 16px;
+      font-weight: bold;
+      color: #781714;
+      line-height: 19px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      span {
+        max-width: 70%;
+        text-align: center;
+      }
+    }
+  }
+
+  .unitImg {
+    width: 100%;
+    max-height: 154px;
   }
 }

src/views/knowledge-library/index.tsx

@@ -1,33 +1,83 @@
-import OEmpty from '@/components/m-empty';
 import MHeader from '@/components/m-header';
 import MSticky from '@/components/m-sticky';
-import { defineComponent, reactive } from 'vue';
+import { defineComponent, onMounted, reactive } from 'vue';
 import styles from './index.module.less';
-import { useRouter } from 'vue-router';
+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: 1
+      activeNames: null,
+      background: 'transparent',
+      color: '#fff'
     });
 
-    const getList = () => {
-      // console.log('1');
+    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="transparent">
+          <MHeader
+            border={false}
+            background={forms.background}
+            color={forms.color}>
             {{
               right: () => (
                 <div
-                  class={styles.wroingBtn}
+                  class={[styles.wroingBtn]}
                   onClick={() => router.push('/wroing-book')}>
                   <i class={styles.iconWroing}></i>错题本
                 </div>
@@ -37,53 +87,44 @@ export default defineComponent({
         </MSticky>
 
         <div class={styles.btnGroup}>
-          <Button class={styles.btnPractice}></Button>
-          <Button class={styles.btnTest}></Button>
+          <Button class={styles.btnPractice} round></Button>
+          <Button class={styles.btnTest} round></Button>
         </div>
 
         <div class={[styles.containerSection, styles.librarySection]}>
           <Collapse v-model={forms.activeNames} accordion border={false}>
-            <CollapseItem
-              title={'第一单元'}
-              name={1}
-              value={forms.activeNames === 1 ? '收起' : '展开'}
-              border={false}>
-              <Image
-                class={styles.unitImg}
-                onClick={() => router.push('/unit-detail')}
-                lazyLoad
-                src={
-                  'https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/a0c89db386a44702acf8ae61fe74c201_mergeImage.png'
-                }
-              />
-
-              <Image
-                class={styles.unitImg}
-                onClick={() => router.push('/unit-detail')}
-                lazyLoad
-                src={
-                  'https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/a0c89db386a44702acf8ae61fe74c201_mergeImage.png'
-                }
-              />
-            </CollapseItem>
-
-            <CollapseItem
-              title={'第二单元'}
-              name={2}
-              value={forms.activeNames === 2 ? '收起' : '展开'}
-              border={false}>
-              <Image
-                class={styles.unitImg}
-                onClick={() => router.push('/unit-detail')}
-                lazyLoad
-                src={
-                  'https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/a0c89db386a44702acf8ae61fe74c201_mergeImage.png'
-                }
-              />
-            </CollapseItem>
+            {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>
-        {/* <OEmpty description="暂无阶段自测" /> */}
       </div>
     );
   }

src/views/knowledge-library/unit-detail.tsx

@@ -1,18 +1,60 @@
 import MHeader from '@/components/m-header';
 import MSticky from '@/components/m-sticky';
-import { defineComponent } from 'vue';
+import { defineComponent, onMounted, reactive } from 'vue';
 import styles from './index.module.less';
-import { useRouter } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { Image } from 'vant';
+import request from '@/helpers/request';
+import { useEventListener, useWindowScroll } from '@vueuse/core';
 
 export default defineComponent({
   name: 'wroing-book',
   setup() {
     const router = useRouter();
+    const route = useRoute();
+
+    const forms = reactive({
+      detailId: route.query.detailId,
+      background: 'transparent',
+      color: '#fff'
+    });
+
+    const getList = async () => {
+      try {
+        const { data } = await request.post(
+          '/edu-app/lessonCourseware/queryStudentLessonDetail',
+          {
+            requestType: 'form',
+            data: {
+              lessonCoursewareId: forms.detailId
+            }
+          }
+        );
+      } catch {
+        //
+      }
+    };
+
+    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="transparent">
+          <MHeader
+            border={false}
+            background={forms.background}
+            color={forms.color}>
             {{
               right: () => (
                 <div

src/views/student-register/shop-mall/modal/add-goods-cart/index.tsx

@@ -137,7 +137,7 @@ export default defineComponent({
         let isExist = false; // 是否存在 是否是同一个商品，同一个sku
         studentRegisterStore.getGoods.forEach((goods: any) => {
           if (
-            goods.id === body.productId &&
+            goods.productId === body.productId &&
             goods.productSkuId === body.productSkuId
           ) {
             isExist = true;