添加功能

src/router/routes-common.ts

@@ -152,12 +152,18 @@ export default [
       },
       {
         path: '/co-ai',
+        component: () => import('@/views/co-ai/baseIndex'),
+        meta: {
+          title: 'AI学练'
+        }
+      },
+      {
+        path: '/co-ai-detail',
         component: () => import('@/views/co-ai/index'),
         meta: {
           title: 'AI学练'
         }
       },
-
       {
         path: '/courseware-play',
         component: () => import('@/views/courseware-play/index'),

src/views/co-ai/api.ts

@@ -15,3 +15,10 @@ export const api_musicSheetPage = (params: any) => {
     data: params
   });
 };
+
+/**
+ * 曲谱分类列表
+ */
+export const api_musicTagTree = () => {
+  return request.get('/edu-app/musicTag/tree');
+};

src/views/co-ai/baseIndex.module.less

@@ -0,0 +1,297 @@
+.container {
+  position: relative;
+  // width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  background: url('../../common/images/icon_bg.png') no-repeat center center / cover;
+  display: flex;
+  flex-direction: column;
+  padding: 61px 18px 18px 37px;
+}
+
+.back {
+  position: fixed;
+  left: 15px;
+  top: 17px;
+  width: 31px;
+  height: 31px;
+
+  &>img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  &:active {
+    opacity: 0.8;
+  }
+}
+
+.centerSearch {
+  position: absolute;
+  top: 15px;
+  right: 18px;
+
+  // padding: 6px 9px;
+  width: 300px;
+
+  :global {
+
+    .van-search {
+      width: 100%;
+      z-index: 1;
+      padding: 0px 0px;
+    }
+
+    .van-field__control::-webkit-input-placeholder {
+      font-size: 12px;
+    }
+  }
+
+}
+
+
+
+.section {
+  display: flex;
+  // padding: 0 18px 0 27px;
+  height: calc(100vh - 79px);
+
+  .directorySection {
+    width: 111px;
+    // background: #B5E1FF;
+    background: url('./image/d-top.png') no-repeat top center;
+    background-size: contain;
+    border-radius: 18px;
+    margin-right: 15px;
+
+
+
+
+    .directionc {
+      overflow-y: auto;
+      overflow-x: hidden;
+      margin-top: 23px;
+      padding: 12px 7px 12px;
+      background: #B5E1FF;
+      border-radius: 0 0 18px 18px;
+      height: calc(100% - 24px);
+
+      &::-webkit-scrollbar {
+        width: 0;
+        display: none;
+      }
+    }
+
+    .dirItem {
+      text-align: center;
+      font-size: 13px;
+      font-weight: 500;
+      color: #131415;
+      padding: 7px 7px;
+      text-align: center;
+      white-space: nowrap;
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      margin-bottom: 5px;
+
+      &.active {
+        background-color: #fff;
+        background: #FEF8EF;
+        border-radius: 6px;
+        color: #0CA2EA;
+      }
+    }
+  }
+}
+
+.content {
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  &::-webkit-scrollbar {
+    width: 0;
+    display: none;
+  }
+
+  // display: flex;
+  flex: 1;
+  // background-color: #FFFFFF;
+  border-radius: 18px;
+  padding: 0 0 0 16px;
+  background: rgba(255, 255, 255, 0.8);
+  border-radius: 18px;
+  border: 2px solid rgba(255, 255, 255, 0.9);
+  // border-image: linear-gradient(134deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.9)) 2 2;
+
+  .wrap {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    padding-top: 18px;
+    // padding-left: 16px;
+    // height: 100%;
+    // padding: 20px 63px 0;
+
+    &.emtpyWrap {
+      width: 100%;
+      padding-top: 0;
+    }
+  }
+
+  :global {
+    .van-empty {
+      padding-bottom: 0 !important;
+    }
+
+    .van-empty__description {
+      font-size: 14px;
+      color: #fff;
+    }
+
+    .van-empty__image {
+      width: 200px;
+      height: 200px;
+    }
+  }
+}
+
+.wrapItem {
+  position: relative;
+  width: 134px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0 16px;
+  flex-shrink: 0;
+  z-index: 1;
+  margin-bottom: 18px;
+
+  .item {
+    position: relative;
+    margin-bottom: 15px;
+    width: 100%;
+    height: 144px;
+    background-color: #edeff2;
+    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.4);
+
+    img {
+      position: absolute;
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 4px;
+      right: -4px;
+      width: 4px;
+      height: calc(100% - 8px);
+      background-color: #c5c5c5;
+      z-index: 1;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 2px;
+      right: -2px;
+      width: 4px;
+      height: calc(100% - 4px);
+      background-color: #e7e7e7;
+      z-index: 2;
+    }
+  }
+
+  .name {
+    font-size: 13px;
+    font-weight: 400;
+    color: #131415;
+    line-height: 16px;
+    text-align: left;
+  }
+
+  .favoriteBtn {
+    position: absolute;
+    top: 113px;
+    right: 20px;
+    z-index: 3;
+  }
+}
+
+.containerImg {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 170px;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 4px;
+    right: -4px;
+    width: 4px;
+    height: calc(100% - 8px);
+    background-color: #c5c5c5;
+    z-index: 1;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 2px;
+    right: -2px;
+    width: 4px;
+    height: calc(100% - 4px);
+    background-color: #e7e7e7;
+    z-index: 2;
+  }
+}
+
+.cover {
+  position: relative;
+  z-index: 3;
+  display: block;
+  width: 100%;
+  height: 170px;
+  background-color: #edeff2;
+  background-image: url('./image/icon_default.svg');
+  background-repeat: no-repeat;
+  background-position: center center;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 2;
+    background-repeat: no-repeat;
+    background-image: linear-gradient(to right,
+        rgba(0, 0, 0, 0.2) 0,
+        rgba(255, 255, 255, 0.08) 0%,
+        transparent 0.5%),
+      linear-gradient(to right,
+        rgba(0, 0, 0, 0.1) 0.3%,
+        rgba(255, 255, 255, 0.09) 1.1%,
+        transparent 1.3%);
+    background-size: 50% 100%, 50% 100%;
+    background-position: 0% top, 9% top;
+  }
+
+  :global {
+    img {
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+      transition: opacity 0.3s ease-in-out;
+    }
+  }
+
+  &.loaded {
+    img {
+      opacity: 1;
+    }
+  }
+}

src/views/co-ai/baseIndex.tsx

@@ -0,0 +1,252 @@
+import { computed, defineComponent, onMounted, reactive, ref } from 'vue';
+import styles from './baseIndex.module.less';
+import icon_back from './image/icon_back.svg';
+import { Button, Tab, Tabs, showConfirmDialog } from 'vant';
+import {
+  api_lessonCoursewareFavoriteRemove,
+  api_lessonCoursewareFavoriteSave
+} from '../courseware-list/api';
+import { NImage } from 'naive-ui';
+import { state } from '@/state';
+import TheFavorite from '@/components/the-favorite';
+import { useRouter } from 'vue-router';
+import { postMessage } from '@/helpers/native-message';
+import MEmpty from '@/components/m-empty';
+import MSearch from '@/components/m-search';
+import { api_musicSheetCategoriesPage, api_musicTagTree } from './api';
+import queryString from 'query-string';
+
+export default defineComponent({
+  name: 'baseIndex-list',
+  setup() {
+    const router = useRouter();
+    const popoverShow = ref(false);
+    const bookVersionList = ref([] as any);
+    // 返回
+    const goback = () => {
+      postMessage({ api: 'goBack' });
+    };
+    const forms = reactive({
+      // currentGradeNum: null,
+      musicTagId: null,
+      keyword: null,
+      page: 1,
+      rows: 999
+      // type: 'COURSEWARE'
+    });
+    const isShowGuide = ref(false);
+    const data = reactive({
+      list: [] as any[],
+      loading: false,
+      favoriteList: [] as any[],
+      details: [] as any[],
+      bookData: {} as any,
+      showBook: false,
+      book: {} as DOMRect
+    });
+
+    const getTanentList = async () => {
+      try {
+        const { data } = await api_musicTagTree();
+        bookVersionList.value = data || [];
+        if (bookVersionList.value.length > 0) {
+          forms.musicTagId = bookVersionList.value[0].id;
+        }
+      } catch {
+        //
+      }
+    };
+
+    const getList = async () => {
+      data.loading = true;
+      const { musicTagId, ...music } = forms;
+      const res = await api_musicSheetCategoriesPage({
+        musicTagId: [musicTagId],
+        subjectId: state.user.data?.subjectId || '',
+        ...music
+        // currentGradeNum: forms.currentGradeNum ? forms.currentGradeNum : ''
+      });
+      if (res?.code === 200 && Array.isArray(res?.data?.rows)) {
+        data.list = res.data.rows.map((item: any) => {
+          item.load = false;
+          item.key = Date.now() + item.id;
+          return item;
+        });
+      }
+      data.loading = false;
+      isShowGuide.value = true;
+    };
+    onMounted(async () => {
+      await getTanentList();
+      await getList();
+    });
+
+    const handleFavorite = async (item: any) => {
+      if (item.favoriteFlag) {
+        await api_lessonCoursewareFavoriteSave({
+          lessonCoursewareId: item.id
+        });
+      } else {
+        await api_lessonCoursewareFavoriteRemove({
+          lessonCoursewareId: item.id
+        });
+
+        getList();
+      }
+    };
+
+    let timer: any = null;
+    const dubounce = (fn: any, delay: number = 300) => {
+      if (timer) {
+        clearTimeout(timer);
+      }
+      timer = setTimeout(fn, delay);
+    };
+
+    const onDetail = (item: any) => {
+      // router.push({
+      //   path: '/co-ai-detail',
+      //   query: {
+      //     musicTagId: forms.musicTagId,
+      //     id: item.id,
+      //     name: item.name
+      //   }
+      // });
+      const query = queryString.stringify({
+        musicTagId: forms.musicTagId,
+        id: item.id,
+        name: item.name
+      });
+      const url =
+        location.origin + location.pathname + '#/co-ai-detail?' + query;
+      console.log('🚀 ~ url:', url);
+      postMessage({
+        api: 'openWebView',
+        content: {
+          url,
+          orientation: 0,
+          isHideTitle: false,
+          c_orientation: 0 // 0 横屏 1 竖屏
+        }
+      });
+    };
+
+    return () => (
+      <div class={styles.container}>
+        {/* <div class={styles.head} style={{ opacity: data.showBook ? 0 : '' }}>
+          <div class={styles.back} onClick={goback}>
+            <img src={icon_back} />
+          </div>
+        </div> */}
+        <div class={styles.back} onClick={goback}>
+          <img src={icon_back} />
+        </div>
+
+        <div class={styles.centerSearch}>
+          <div id="coai-0">
+            <MSearch
+              class={[
+                'searchNotice'
+                // data.searchNoticeShow ? styles.searchNoticeShow : ''
+              ]}
+              shape="round"
+              background="transparent"
+              clearable={false}
+              placeholder="请输入关键字"
+              // modelValue={forms.keyword}
+              // onFocus={() => (data.searchNoticeShow = false)}
+              // onBlur={val => {
+              //   musicForms.keyword = val?.trim() || '';
+              //   requestAnimationFrame(() => {
+              //     requestAnimationFrame(() => {
+              //       if (musicForms.keyword) {
+              //         data.searchNoticeShow = true;
+              //       }
+              //     });
+              //   });
+              // }}
+              onSearch={val => {
+                forms.keyword = val;
+                getList();
+              }}
+            />
+          </div>
+        </div>
+
+        <div class={styles.section}>
+          <div class={styles.directorySection}>
+            <div class={styles.directionc}>
+              {bookVersionList.value.map((item: any) => (
+                <p
+                  class={[
+                    styles.dirItem,
+                    forms.musicTagId == item.id ? styles.active : ''
+                  ]}
+                  onClick={() => {
+                    forms.musicTagId = item.id;
+                    getList();
+                  }}>
+                  {item.name}
+                </p>
+              ))}
+            </div>
+          </div>
+
+          <div class={styles.content}>
+            <div
+              class={[
+                styles.wrap,
+                data.list.length <= 0 && !data.loading ? styles.emtpyWrap : ''
+              ]}>
+              {data.list.map((item, index) => {
+                return (
+                  <div
+                    class={[
+                      styles.wrapItem,
+                      data.bookData.id === item.id && data.showBook
+                        ? styles.wrapItemHide
+                        : ''
+                    ]}
+                    key={item.key}
+                    onClick={() => onDetail(item)}>
+                    <div class={styles.item}>
+                      <NImage
+                        data-id={item.id}
+                        {...{ id: index == 0 ? 'courseware-0' : '' }}
+                        class={[styles.cover, item.load ? styles.loaded : '']}
+                        objectFit="cover"
+                        src={item.coverImg}
+                        onLoad={() => {
+                          item.load = true;
+                        }}
+                        onError={() => {
+                          item.load = true;
+                        }}
+                      />
+                    </div>
+
+                    <div class={styles.name}>{item.name}</div>
+                    <div
+                      id={index === 0 ? 'courseware-1' : ''}
+                      class={styles.favoriteBtn}
+                      onClick={(e: Event) => {
+                        e.stopPropagation();
+                        item.favoriteFlag = !item.favoriteFlag;
+                        dubounce(() => handleFavorite(item));
+                      }}>
+                      <TheFavorite isFavorite={item.favoriteFlag} />
+                    </div>
+                  </div>
+                );
+              })}
+
+              {data.list.length <= 0 && !data.loading && (
+                <MEmpty image="list" description="暂无数据" />
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+});

src/views/co-ai/index.module.less

@@ -5,7 +5,7 @@
   width: 31px;
   height: 31px;
 
-  & > img {
+  &>img {
     width: 100%;
     height: 100%;
     object-fit: cover;
@@ -16,26 +16,62 @@
   }
 }
 
+.musicCFixed {
+  position: fixed;
+  top: 17px;
+  left: 55px;
+
+  .musicName {
+    font-size: 15px;
+    font-weight: 600;
+    color: #FFFFFF;
+    line-height: 33px;
+  }
+}
+
+.popoverMusic {
+  width: 160px;
+
+  // border: none;
+  --van-popover-action-width: 100%;
+
+  :global {
+    .van-popover__action {
+      // display: flex;
+      // justify-content: center;
+      // align-items: center;
+      // padding: 0;
+      // width: 100%;
+      // height: 36px;
+      // color: #999;
+      // font-size: 13px;
+    }
+
+    .van-popover__content {
+      max-height: 70vh;
+      overflow-x: hidden;
+      overflow-y: auto;
+    }
+  }
+}
+
 .container {
-  background: url('../../common/images/icon_bg.png') no-repeat center center /
-    cover;
-  padding: 47px 12px 20px 54px;
+  background: url('../../common/images/icon_bg.png') no-repeat center center / cover;
+  padding: 63px 18px 18px 37px;
   height: 100vh;
   overflow: hidden;
 }
 
 .content {
   display: flex;
-  height: calc(100vh - 67px);
+  height: calc(100vh - 81px);
   overflow: hidden;
 }
 
 .opacityBg {
-  background: linear-gradient(
-    134deg,
-    rgba(255, 255, 255, 0.75) 0%,
-    rgba(255, 255, 255, 0.34) 100%
-  );
+  background: linear-gradient(134deg,
+      rgba(255, 255, 255, 0.75) 0%,
+      rgba(255, 255, 255, 0.34) 100%);
   border-radius: 18px;
   border: 2px solid #fff;
 }
@@ -43,7 +79,7 @@
 .leftContent {
   position: relative;
   display: flex;
-  width: 45%;
+  width: 37%;
 }
 
 .leftBg {
@@ -64,11 +100,9 @@
   top: 0;
   width: calc(100% - 12px);
   height: 100%;
-  background: linear-gradient(
-    134deg,
-    rgba(255, 255, 255, 0.75) 0%,
-    rgba(255, 255, 255, 0.34) 100%
-  );
+  background: linear-gradient(134deg,
+      rgba(255, 255, 255, 0.75) 0%,
+      rgba(255, 255, 255, 0.34) 100%);
   border-radius: 18px;
   border: 2px solid #fff;
 }
@@ -134,9 +168,11 @@
   padding-right: 12px;
   height: 100%;
   overflow: hidden;
+
   .centerSearch {
     padding: 6px 9px;
   }
+
   :global {
     #coai-0 {
       .van-search {
@@ -144,6 +180,7 @@
         z-index: 1;
         padding: 0px 0px;
       }
+
       .van-field__control::-webkit-input-placeholder {
         font-size: 12px;
       }
@@ -163,10 +200,12 @@
     display: none;
   }
 }
+
 .searchNotice {
   position: fixed;
   padding: 0;
   pointer-events: none;
+
   :global {
     .van-notice-bar {
       padding: 0;
@@ -174,6 +213,7 @@
     }
   }
 }
+
 .searchNoticeShow {
   :global {
     .van-field__control {
@@ -181,6 +221,7 @@
     }
   }
 }
+
 .musicItem {
   position: relative;
   display: flex;
@@ -287,7 +328,7 @@
   background: #fff;
   overflow: hidden;
   border: none;
-  width: 55%;
+  width: 63%;
   border-radius: 18px;
 }
 
@@ -303,7 +344,8 @@
 .staff {
   width: 100%;
 }
-.rightBox{
+
+.rightBox {
   width: 100%;
   height: 100%;
   border-radius: 18px;
@@ -315,19 +357,17 @@
   bottom: 0;
   left: 0;
   right: 0;
-  padding: 0 8px 18px 8px;
+  padding: 0 18px 18px 18px;
   display: flex;
   align-items: flex-end;
   height: 78px;
   background: #fff;
-  background-image: linear-gradient(
-    180deg,
-    rgba(255, 255, 255, 0) 0%,
-    #c1eeff 100%
-  );
+  background-image: linear-gradient(180deg,
+      rgba(255, 255, 255, 0) 0%,
+      #c1eeff 100%);
   border-radius: 0 0 18px 18px;
 
-  & > img {
+  &>img {
     margin: 0 4px;
     height: 30px;
     transition: 0.3s;
@@ -336,11 +376,21 @@
       transform: scale(0.6);
     }
   }
+
+  :global {
+    .van-popover__wrapper {
+      display: flex;
+      align-items: center;
+      margin-right: 12px;
+    }
+  }
+
   .rightBtnsRight {
     transition: 0.3s;
     margin: 0 4px;
     padding: 5px 10px 0;
     margin-left: auto;
+
     img {
       height: 30px;
       animation: scaleBtn 1s ease-in-out infinite;
@@ -386,4 +436,4 @@
       padding: 0;
     }
   }
-}
+}

src/views/co-ai/index.tsx

@@ -13,6 +13,7 @@ import MSearch from '@/components/m-search';
 import icon_play from '@/common/images/icon_play.svg';
 import {
   Empty,
+  Icon,
   List,
   Loading,
   NoticeBar,
@@ -40,23 +41,27 @@ import Coaiguide from '@/custom-plugins/guide-page/coai-guide';
 import { usePageVisibility } from '@vant/use';
 import TheVip from '@/components/the-vip';
 import request from '@/helpers/request';
+import { useRoute } from 'vue-router';
 export default defineComponent({
   name: 'co-ai',
   setup() {
+    const route = useRoute();
     const categorForms = reactive({
       page: 1,
       rows: 999,
-      subjectId: state.user.data?.subjectId || ''
+      subjectId: state.user.data?.subjectId || '',
+      musicTagId: route.query.musicTagId ? [route.query.musicTagId] : []
     });
     const musicForms = reactive({
       page: 1,
       rows: 20,
       status: 1,
       keyword: '', // 关键词
-      musicSheetCategoriesId: ''
+      musicSheetCategoriesId: route.query.id as any
     });
     const titles = rows;
     const data = reactive({
+      musicSheetCategoriesName: route.query.name as any,
       /** 教材Index */
       typeIndex: 0,
       /** 音乐Index */
@@ -64,6 +69,7 @@ export default defineComponent({
       /** 显示哪种曲谱 */
       showMusicImg: 'staff' as 'staff' | 'first' | 'fixed',
       popoverShow: false,
+      popoverMusicShow: false,
       /** 教材列表 */
       types: [] as any[],
       /** 音乐列表 */
@@ -108,6 +114,20 @@ export default defineComponent({
       });
     });
 
+    const _types = computed(() => {
+      return data.types.map((item: any) => {
+        return {
+          ...item,
+          color:
+            musicForms.musicSheetCategoriesId == item.value
+              ? 'var(--van-primary-color)'
+              : '',
+          className:
+            musicForms.musicSheetCategoriesId == item.value ? 'fontBlod' : ''
+        };
+      });
+    });
+
     // 返回
     const goback = () => {
       postMessage({ api: 'goBack' });
@@ -175,10 +195,14 @@ export default defineComponent({
           ...categorForms
         });
         if (res.code === 200 && Array.isArray(res?.data?.rows)) {
-          data.types = res.data.rows;
-          if (!musicForms.musicSheetCategoriesId && data.types.length > 0) {
-            musicForms.musicSheetCategoriesId = data.types[0].id;
-          }
+          const temp: any = [];
+          res.data.rows.forEach((item: any) => {
+            temp.push({
+              value: item.id,
+              text: item.name
+            });
+          });
+          data.types = temp;
         }
       } catch (error) {
         console.log('🚀 ~ error:', error);
@@ -263,11 +287,36 @@ export default defineComponent({
         <div class={styles.back} onClick={goback}>
           <img src={icon_back} />
         </div>
+
+        <div class={styles.musicCFixed}>
+          <Popover
+            v-model:show={data.popoverMusicShow}
+            class={styles.popoverMusic}
+            actions={_types.value}
+            placement="bottom"
+            showArrow={false}
+            onSelect={(item: any) => {
+              // data.showMusicImg = item.value;
+              data.musics = [];
+              musicForms.musicSheetCategoriesId = item.value;
+              data.popoverMusicShow = false;
+              getMusicList();
+            }}>
+            {{
+              reference: () => (
+                <span class={styles.musicName}>
+                  {data.musicSheetCategoriesName}
+                  <Icon name="arrow-down"></Icon>
+                </span>
+              )
+            }}
+          </Popover>
+        </div>
         <div class={styles.content}>
           <div class={[styles.leftContent]}>
             <div class={styles.leftBg2}></div>
-            <div class={styles.leftBg}></div>
-            <div class={styles.types}>
+            {/* <div class={styles.leftBg}></div> */}
+            {/* <div class={styles.types}>
               {data.types.map((item, index) => {
                 return (
                   <div
@@ -293,7 +342,7 @@ export default defineComponent({
                   </div>
                 );
               })}
-            </div>
+            </div> */}
             <div class={styles.center}>
               <div class={styles.centerSearch}>
                 <div id="coai-0">
@@ -312,7 +361,7 @@ export default defineComponent({
                       musicForms.keyword = val?.trim() || '';
                       requestAnimationFrame(() => {
                         requestAnimationFrame(() => {
-                          if (musicForms.keyword){
+                          if (musicForms.keyword) {
                             data.searchNoticeShow = true;
                           }
                         });

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

@@ -204,6 +204,7 @@ export default defineComponent({
         const query = queryString.stringify({
           id: item.id,
           lessonCoursewareId: item.lessonCoursewareId,
+          lessonCoursewareDetailId: item.lessonCoursewareDetailId,
           name: item.name,
           tab: props.tab // 当前切换的是哪个类型
         });
@@ -222,6 +223,8 @@ export default defineComponent({
         //   path: '/courseware-play',
         //   query: {
         //     id: item.id,
+        //     lessonCoursewareId: item.lessonCoursewareId,
+        //     lessonCoursewareDetailId: item.lessonCoursewareDetailId,
         //     name: item.name,
         //     tab: props.tab
         //   }

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

@@ -95,6 +95,9 @@
 
   .itemActive {
     font-weight: 500;
-    color: #1C9AF7;
+
+    span {
+      color: #1C9AF7;
+    }
   }
 }

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

@@ -16,13 +16,17 @@ export default defineComponent({
     itemActive: {
       type: String,
       default: ''
+    },
+    active: {
+      type: String,
+      default: ''
     }
   },
   emits: ['handleSelect'],
   setup(props, { emit }) {
-    const { detail, itemActive } = toRefs(props);
+    const { detail, itemActive, active } = toRefs(props);
     const pointData = reactive({
-      active: ''
+      active: active.value
     });
     return () => (
       <div class={styles.container}>
@@ -71,6 +75,7 @@ export default defineComponent({
                               tabActive: item.id,
                               tabName: item.name
                             });
+                            localStorage.setItem('lastTime', know.id);
                           }}>
                           <Image src={chapterVideo} class={styles.itemImage} />
                           <span style={{ width: '80%' }} class="van-ellipsis">

src/views/courseware-play/index.tsx

@@ -126,6 +126,9 @@ export default defineComponent({
     });
     const activeData = reactive({
       isAutoPlay: true, // 是否自动播放
+      lessonCoursewareId: route.query.lessonCoursewareId,
+      lessonCoursewareDetailId: route.query.lessonCoursewareDetailId,
+      coursewareDetailKnowledgeId: route.query.id,
       nowTime: 0,
       model: true, // 遮罩
       isAnimation: true, // 是否动画
@@ -135,11 +138,11 @@ export default defineComponent({
       timer: null as any,
       item: null as any
     });
-    const getDetail = async (knowledgeId?: string) => {
+    const getDetail = async () => {
       let courseList: any[] = [];
       if (route.query.tab == 'course') {
         const res = await api_classLessonCoursewareQuery({
-          coursewareDetailKnowledgeId: knowledgeId || route.query.id,
+          coursewareDetailKnowledgeId: activeData.coursewareDetailKnowledgeId,
           page: 1,
           rows: -1
         });
@@ -160,7 +163,8 @@ export default defineComponent({
         }
       } else {
         const res = await api_lessonCoursewareKnowledgeDetailDetail({
-          lessonCoursewareKnowledgeDetailId: knowledgeId || route.query.id
+          lessonCoursewareKnowledgeDetailId:
+            activeData.coursewareDetailKnowledgeId
         });
         if (res?.code === 200 && Array.isArray(res.data)) {
           courseList = res.data || [];
@@ -201,9 +205,9 @@ export default defineComponent({
         activeData.model =
           ev.data.show || (ev.data.playState == 'play' ? false : true);
       }
-      if (ev.data?.api === 'api_fingerPreView'){
-        clearInterval(activeData.timer)
-        activeData.model = !ev.data.state
+      if (ev.data?.api === 'api_fingerPreView') {
+        clearInterval(activeData.timer);
+        activeData.model = !ev.data.state;
       }
     };
 
@@ -574,9 +578,14 @@ export default defineComponent({
           onClose={handleClosePopup}>
           <Chapter
             detail={data.courseDetails}
+            itemActive={activeData.coursewareDetailKnowledgeId as any}
+            active={activeData.lessonCoursewareDetailId as any}
             onHandleSelect={(item: any) => {
               console.log(item, 'item');
-              getDetail(item.itemActive);
+              activeData.coursewareDetailKnowledgeId = item.itemActive;
+              activeData.lessonCoursewareDetailId = item.tabActive;
+              getDetail();
+              popupData.chapterOpen = false;
             }}
           />
         </Popup>