课件列表

src/views/courseList/index.module.less

@@ -14,6 +14,14 @@
     margin-right: 30px;
     border-radius: 4px 8px 8px 4px;
     box-shadow: 0px 2px 6px 0px rgba(221, 168, 133, 0.67);
+    overflow: hidden;
+    :global{
+      .van-image__loading{
+        position: relative;
+        min-height: 130px;
+        animation: van-skeleton-blink var(--van-skeleton-duration) ease-in-out infinite;
+      }
+    }
   }
 
   .contentTitle {

src/views/courseList/index.tsx

@@ -8,8 +8,12 @@ import {
   Grid,
   GridItem,
   Icon,
+  Image,
+  Loading,
   showConfirmDialog,
   showToast,
+  Skeleton,
+  SkeletonImage,
   Space
 } from 'vant'
 import { defineComponent, onMounted, reactive, onUnmounted } from 'vue'
@@ -39,8 +43,23 @@ export default defineComponent({
     // const catchList = store
     const data = reactive({
       loading: true,
+      detail: {
+        cover: '',
+        name: '',
+        des: ''
+      },
       list: [] as any
     })
+
+    /** 获取课件详情 */
+    const getDetail = async () => {
+      const res: any = await request.get(`${state.platformApi}/lessonCourseware/detail/${route.query.id}`)
+      if (res?.data){
+        data.detail.cover = res.data.coverImg
+        data.detail.name = res.data.name
+        data.detail.des = res.data.lessonTargetDesc
+      }
+    }
     const getList = async () => {
       data.loading = true
       if (route.query.courseScheduleId) {
@@ -71,6 +90,7 @@ export default defineComponent({
       data.loading = false
     }
     onMounted(() => {
+      getDetail()
       getList()
       listenerMessage('downloadCoursewareToCache', getProgress)
     })
@@ -215,11 +235,16 @@ export default defineComponent({
         </OSticky>
 
         <div class={styles.periodContent}>
-          <img class={styles.cover} src={'https://gyt.ks3-cn-beijing.ksyuncs.com/courseware/1678340522843.png'} />
+          <Image class={styles.cover} src={data.detail.cover}>
+            {{
+              loading: () => <Loading />, 
+            }}
+          </Image>
+          {/* <img class={styles.cover} src={data.detail.cover} /> */}
           <div>
-            <div class={styles.contentTitle}>小号第三学期 (上册)</div>
+            <div class={styles.contentTitle}>{data.detail.name}</div>
             <div class={styles.contentLabel}>
-              教学目标：让学生了解小号乐器的组成，学习呼吸的方式，学习基础的嘴形以及乐理知识。让学生了解小号乐器的组成。
+              教学目标：{data.detail.des}
             </div>
           </div>
         </div>
@@ -257,7 +282,7 @@ export default defineComponent({
                     value: () => (
                       <>
                         {isSelect ? (
-                          <Button class={[styles.baseBtn, styles.look]}>选择</Button>
+                          <Button disabled={isLock} class={[styles.baseBtn, isLock ? styles.disable : styles.look]}>选择</Button>
                         ) : item.knowledgePointList ? (
                           <>
                             {item.hasCache ? (

src/views/lessonCourseware/component/CourseItem/index.module.less

@@ -93,6 +93,13 @@
         width: 100%;
         box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
         max-height: 140px;
+        :global{
+            .van-image__loading{
+                position: relative;
+                min-height: 130px;
+                animation: van-skeleton-blink var(--van-skeleton-duration) ease-in-out infinite;
+            }
+        }
     }
 
     .name {

src/views/lessonCourseware/component/CourseItem/index.tsx

@@ -2,6 +2,7 @@ import { defineComponent, PropType } from 'vue'
 import styles from './index.module.less'
 import iconTop from './image/icon-top.png'
 import iconLock from './image/icon-lock.png'
+import { Image, Loading } from 'vant'
 
 export default defineComponent({
   name: 'CourseItem',
@@ -35,7 +36,12 @@ export default defineComponent({
             return (
               <div class={styles.item} onClick={() => emit('itemClick', item)}>
                 <div class={styles.cover}>
-                  <img class={styles.coverImg} src={item.coverImg} />
+                  <Image class={styles.coverImg} src={item.coverImg}>
+                    {{
+                      loading: () => <Loading />, 
+                    }}
+                  </Image>
+                  {/* <img class={styles.coverImg} src={item.coverImg} /> */}
                   {/* {item.delFlag && <div class={styles.model}>
                     <img src={iconLock} />
                     <div>未解锁</div>