学生端课件章节列表：上次查看的标注

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

@@ -64,7 +64,9 @@
 
 .wrap {
     position: relative;
-    padding: 20Px;
+    padding: 14Px;
+    height: 100%;
+    overflow-y: auto;
 
     .item {
         display: flex;
@@ -74,12 +76,12 @@
         font-weight: 600;
         color: #333;
         line-height: 20Px;
-        padding: 10Px 0;
+        padding: 6Px 0;
         word-break:break-all;
     }
 
     .des {
-        padding-left: 12px;
+        padding-left: 10px;
         font-size: 12px;
     }
 
@@ -87,4 +89,10 @@
         width: 22px;
         height: 22px;
     }
+    .last{
+        font-size: 12Px;
+        color: #FF5A56;
+        margin-left: 6px;
+        font-weight: 400;
+    }
 }

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

@@ -14,7 +14,7 @@ import { useRouter } from 'vue-router';
 import { postMessage } from '@/helpers/native-message';
 import { showToast } from 'vant';
 import queryString from 'query-string';
-import CoursewareDetail from '@/custom-plugins/guide-page/courseware-detail'
+import CoursewareDetail from '@/custom-plugins/guide-page/courseware-detail';
 export default defineComponent({
   name: 'the-book',
   props: {
@@ -34,6 +34,7 @@ export default defineComponent({
   emits: ['close'],
   setup(props, { emit }) {
     const router = useRouter();
+    const lastTime = localStorage.getItem('lastTime');
     const data = reactive({
       show: false,
       width: 0,
@@ -41,7 +42,7 @@ export default defineComponent({
       transform: '',
       list: [] as any[][]
     });
-    const showGuide = ref(false)
+    const showGuide = ref(false);
     const handleCreate = (key: string, url: string) => {
       return new Promise((resolve, reject) => {
         const _s = document.head.querySelector(`script[data-key="${key}"]`);
@@ -102,21 +103,18 @@ export default defineComponent({
         bookWrap.style.transform = data.transform = transform;
         bookWrap.style.transition = 'transform 0s';
         nextTick(() => {
-
           requestAnimationFrame(() => {
             requestAnimationFrame(() => {
               bookWrap.style.transition = 'transform 1s';
               bookWrap.style.transform = '';
               data.show = true;
               timer = setTimeout(() => {
-
                 book.turn('page', 2);
-
               }, 500);
 
               setTimeout(() => {
                 showGuide.value = true;
-              }, 1500)
+              }, 1500);
             });
           });
         });
@@ -190,12 +188,14 @@ export default defineComponent({
         return;
       }
       if (item.id) {
+        localStorage.setItem('lastTime', item.id);
         const query = queryString.stringify({
           id: item.id,
           name: item.name
-        })
-        const url = location.origin + location.pathname + '#/courseware-play?' + query;
-        console.log("🚀 ~ url:", url)
+        });
+        const url =
+          location.origin + location.pathname + '#/courseware-play?' + query;
+        console.log('🚀 ~ url:', url);
         postMessage({
           api: 'openWebView',
           content: {
@@ -226,24 +226,33 @@ export default defineComponent({
                     <div class="gradient"></div>
                     <div class={styles.wrap}>
                       {list.map((item: any, index: number) => {
-                        return <>
-
-                          <div
-                            class={[styles.item, item.id && styles.des]}
-                            onTouchstart={(e: TouchEvent) => {
-                              e.stopPropagation();
-                            }}
-                            onClick={(e: Event) => {
-                              e.stopPropagation();
-                              handleOpenPlay(item);
-                            }}>
-                            <div class={styles.name} >{item.name}</div>
-                            {item.id ? (
-                              <img id={index == 1 ? 'coursewareDetail-0' : ''} class={styles.icon} src={icon_play} />
-                            ) : null}
-                          </div>
-
-                        </>
+                        return (
+                          <>
+                            <div
+                              class={[styles.item, item.id && styles.des]}
+                              onTouchstart={(e: TouchEvent) => {
+                                e.stopPropagation();
+                              }}
+                              onClick={(e: Event) => {
+                                e.stopPropagation();
+                                handleOpenPlay(item);
+                              }}>
+                              <div class={styles.name}>
+                                {item.name}
+                                {lastTime === item.id && (
+                                  <span class={styles.last}>上次观看</span>
+                                )}
+                              </div>
+                              {item.id ? (
+                                <img
+                                  id={index == 1 ? 'coursewareDetail-0' : ''}
+                                  class={styles.icon}
+                                  src={icon_play}
+                                />
+                              ) : null}
+                            </div>
+                          </>
+                        );
                       })}
                     </div>
                   </div>
@@ -256,10 +265,7 @@ export default defineComponent({
           )}
         </div>
         {showGuide.value ? <CoursewareDetail></CoursewareDetail> : null}
-
       </div>
     );
   }
 });
-
-