修改问题

src/views/courseware-list/component/book/index.tsx

@@ -53,7 +53,6 @@ export default defineComponent({
       isClick: false,
       coursewareList: [] as any
     });
-    const showSelectCourseware = ref(false);
     const isEnd = ref(false);
     const step = ref(0);
 

src/views/courseware-list/index.module.less

@@ -19,11 +19,20 @@
   transition: opacity 0.3s ease-in-out;
 
   .back {
+    display: flex;
+    align-items: center;
     img {
       width: 34px;
       height: 34px;
       display: block;
     }
+
+    span {
+      padding-left: 12px;
+      font-weight: 500;
+      font-size: 18px;
+      color: #333333;
+    }
   }
 }
 

src/views/courseware-list/index.tsx

@@ -15,7 +15,7 @@ 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';
+import { browser, chunkArray, getRandomKey } from '@/helpers/utils';
 
 export const BOOK_DATA = {
   grades: [
@@ -65,6 +65,7 @@ export default defineComponent({
       details: [] as any[],
       bookData: {} as any,
       bookLessonId: '',
+      showBookLock: false, // 打开书本锁
       showBook: false,
       book: {} as DOMRect
     });
@@ -113,17 +114,20 @@ export default defineComponent({
       const res = await api_lessonCoursewareStudentPage({
         ...more,
         bookVersionId: bookVersionId == -1 ? null : bookVersionId,
+        customFlag: bookVersionId == -1 ? true : null,
         currentGradeNum: currentGradeNum ? currentGradeNum : ''
       });
       if (res?.code === 200 && Array.isArray(res?.data?.rows)) {
         // 只有在第一页的时候才会赋值上次上课记录
         if (res?.data?.current == 1) {
           data.courseRecord = res?.data?.extra;
+          data.courseRecord.id &&
+            (data.courseRecord.key = getRandomKey() + data.courseRecord.id);
         }
 
         const result = res.data.rows.map((item: any) => {
           item.load = false;
-          item.key = Date.now() + item.id;
+          item.key = getRandomKey() + item.id;
           return item;
         });
 
@@ -165,15 +169,16 @@ export default defineComponent({
         data.bookLessonId = item.id;
       }
 
-      handleCreateContainer(item.id);
+      handleCreateContainer(item.key);
       handleRender(() => {
         data.showBook = true;
+        data.showBookLock = false;
       });
     };
 
     const handleCreateContainer = (id: string) => {
       const box = document.querySelector(
-        `[data-id="${id}"]`
+        `[data-key="${id}"]`
       ) as unknown as HTMLElement;
       if (!box) return;
       const rect = box.getBoundingClientRect();
@@ -187,6 +192,8 @@ export default defineComponent({
       });
     };
     const handleOpen = async (item: any) => {
+      if (data.showBookLock) return;
+      data.showBookLock = true;
       await getDetail(item);
     };
 
@@ -195,6 +202,7 @@ export default defineComponent({
         <div class={styles.head} style={{ opacity: data.showBook ? 0 : '' }}>
           <div class={styles.back} onClick={goback}>
             <img src={icon_back} />
+            <span>全部教材</span>
           </div>
           <Button
             class={[
@@ -263,6 +271,7 @@ export default defineComponent({
                   <img src={useTime} class={styles.useTime} />
                   <Image
                     data-id={data.courseRecord.id}
+                    data-key={data.courseRecord.key}
                     class={[
                       styles.cover,
                       data.courseRecord.load ? styles.loaded : ''
@@ -315,6 +324,7 @@ export default defineComponent({
                             <div class={styles.item}>
                               <Image
                                 data-id={item.id}
+                                data-key={item.key}
                                 class={[
                                   styles.cover,
                                   item.load ? styles.loaded : ''

src/views/courseware-play/component/chapter-course.module.less

@@ -97,8 +97,10 @@
       &.active {
         border: 2px solid #daecff;
         background: #f2f8ff;
-        .title {
-          color: #1CACF1;
+        :global {
+          .van-notice-bar {
+            color: #1CACF1;
+          }
         }
       }
       .currentImg {
@@ -110,14 +112,18 @@
       }
 
       .title {
-        font-weight: 600;
-        font-size: 13px;
-        color: #333333;
-        line-height: 18px;
         max-width: 165px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
+      }
+
+      :global {
+        .van-notice-bar {
+          height: 18px;
+          background: transparent;
+          padding: 0;
+          font-size: 13px;
+          font-weight: 600;
+          color: #333;
+        }
       }
 
       .timers {

src/views/courseware-play/component/chapter-course.tsx

@@ -1,8 +1,9 @@
-import { defineComponent, reactive, toRefs, watch } from 'vue';
+import { defineComponent, toRefs } from 'vue';
 import styles from './chapter-course.module.less';
 import iconMenuChapter from '../image/icon-course-c.svg';
 import iconCourseTimer from '../image/icon-course-timer.svg';
 import iconCurrentImg from '../image/icon-current-img.png';
+import { NoticeBar } from 'vant';
 
 export default defineComponent({
   name: 'chapter',
@@ -58,10 +59,11 @@ export default defineComponent({
                             ? styles.active
                             : ''
                         ]}
+                        key={item.courseId}
                         onClick={() => {
                           emit('handleSelect', {
                             itemActive: item.courseId
-                          })
+                          });
                         }}>
                         {itemActive.value === item.courseId ? (
                           <img src={iconCurrentImg} class={styles.currentImg} />
@@ -69,7 +71,9 @@ export default defineComponent({
                           ''
                         )}
 
-                        <div class={styles.title}>{item.courseName}</div>
+                        <div class={styles.title}>
+                          <NoticeBar text={item.courseName} scrollable={itemActive.value === item.courseId} />
+                        </div>
                         <div class={styles.timers}>
                           <img
                             src={iconCourseTimer}

src/views/courseware-play/component/points.tsx

@@ -139,6 +139,7 @@ export default defineComponent({
                 title={know.name}
                 titleClass={'van-ellipsis'}
                 titleStyle={{ width: '80%' }}
+                key={know.id}
                 name={know.id}>
                 {{
                   default: () =>

src/views/courseware-play/index.tsx

@@ -808,12 +808,7 @@ export default defineComponent({
           const detailIndex = data.courseDetails.findIndex(
             (item: any) => item.courseId === data.courseId
           );
-          console.log({
-            1: detailIndex + 1 >= data.courseDetails.length - 1,
-            detailIndex,
-            length: data.courseDetails.length
-          })
-          if (detailIndex + 1 >= data.courseDetails.length - 1) {
+          if (detailIndex + 1 <= data.courseDetails.length - 1) {
             changeCourseWareItem(
               {
                 id: data.courseDetails[detailIndex + 1].courseId,

src/views/courseware-play/select-courseware-tip/index.module.less

@@ -61,7 +61,7 @@
 
     img {
       width: 111px;
-
+      height: 35px;
     }
   }
 }