更新

src/views/co-ai/index.tsx

@@ -1,5 +1,6 @@
 import {
   TransitionGroup,
+  computed,
   defineComponent,
   nextTick,
   onMounted,
@@ -15,6 +16,7 @@ import {
   List,
   Loading,
   NoticeBar,
+  Popover,
   Popup,
   showLoadingToast,
   showToast
@@ -59,8 +61,9 @@ export default defineComponent({
       typeIndex: 0,
       /** 音乐Index */
       musicIndex: 0,
-      /** 显示简谱 */
-      isShowJianpu: true,
+      /** 显示哪种曲谱 */
+      showMusicImg: 'staff' as 'staff' | 'first' | 'fixed',
+      popoverShow: false,
       /** 教材列表 */
       types: [] as any[],
       /** 音乐列表 */
@@ -80,6 +83,31 @@ export default defineComponent({
     });
     const downRef = ref();
     const showGuide = ref(false);
+
+    const _actions = computed(() => {
+      return [
+        {
+          value: 'staff',
+          text: '五线谱'
+        },
+        {
+          value: 'first',
+          text: '首调'
+        },
+        {
+          value: 'fixed',
+          text: '固定调'
+        }
+      ].map((item, index) => {
+        return {
+          ...item,
+          color:
+            data.showMusicImg === item.value ? 'var(--van-primary-color)' : '',
+          className: data.showMusicImg === item.value ? 'fontBlod' : ''
+        };
+      });
+    });
+
     // 返回
     const goback = () => {
       postMessage({ api: 'goBack' });
@@ -351,7 +379,7 @@ export default defineComponent({
                 <div class={styles['right-musicName']}>
                   {data.musics[data.musicIndex]?.musicSheetName}
                 </div>
-                {data.isShowJianpu ? (
+                {data.showMusicImg === 'first' ? (
                   <>
                     <TransitionGroup name="van-fade">
                       {data.musics[data.musicIndex]?.musicSvg
@@ -368,6 +396,23 @@ export default defineComponent({
                         })}
                     </TransitionGroup>
                   </>
+                ) : data.showMusicImg === 'fixed' ? (
+                  <>
+                    <TransitionGroup name="van-fade">
+                      {data.musics[data.musicIndex]?.musicJianSvg
+                        ?.split(',')
+                        .map((item: any, index: number) => {
+                          return (
+                            <img
+                              class={styles.staff}
+                              src={item + '?v=' + Date.now()}
+                              key={item}
+                              crossorigin="anonymous"
+                            />
+                          );
+                        })}
+                    </TransitionGroup>
+                  </>
                 ) : (
                   <>
                     <TransitionGroup name="van-fade">
@@ -390,11 +435,22 @@ export default defineComponent({
             </div>
 
             <div class={styles.rightBtns}>
-              <img
-                id="coai-1"
-                src={data.isShowJianpu ? icon_jianpuActive : icon_jianpu}
-                onClick={() => (data.isShowJianpu = !data.isShowJianpu)}
-              />
+              <Popover
+                v-model:show={data.popoverShow}
+                class={styles.popover}
+                actions={_actions.value}
+                placement="top-start"
+                onSelect={(item: any) => {
+                  data.showMusicImg = item.value;
+                  data.popoverShow = false;
+                }}
+                // onSelect={onSelect}
+              >
+                {{
+                  reference: () => <img id="coai-1" src={icon_jianpuActive} />
+                }}
+              </Popover>
+
               <img id="coai-2" src={icon_down} onClick={handleSave} />
               <div class={styles.rightBtnsRight} id="coai-3">
                 <img src={icons.icon_start} onClick={() => handleGoto()} />

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

@@ -199,8 +199,10 @@ export default defineComponent({
           return;
         }
         localStorage.setItem('lastTime', item.id);
+        console.log(item, 'item');
         const query = queryString.stringify({
           id: item.id,
+          lessonCoursewareId: item.lessonCoursewareId,
           name: item.name,
           tab: props.tab // 当前切换的是哪个类型
         });

src/views/courseware-list/index.tsx

@@ -17,6 +17,7 @@ import {
   Tab,
   Tabs,
   Tag,
+  popoverProps,
   showConfirmDialog,
   showDialog,
   showToast
@@ -66,12 +67,14 @@ export default defineComponent({
   setup() {
     const router = useRouter();
     const popoverShow = ref(false);
+    const bookVersionList = ref([] as any);
     // 返回
     const goback = () => {
       postMessage({ api: 'goBack' });
     };
     const forms = reactive({
-      currentGradeNum: 0,
+      currentGradeNum: null,
+      bookVersionId: null,
       page: 1,
       rows: 999,
       type: 'COURSEWARE'
@@ -86,10 +89,10 @@ export default defineComponent({
         };
       });
     });
-    const onSelect = (action: any, index: number) => {
-      forms.currentGradeNum = index;
-      handleChange();
-    };
+    // const onSelect = (action: any, index: number) => {
+    //   forms.currentGradeNum = index;
+    //   handleChange();
+    // };
     const isShowGuide = ref(false);
     const data = reactive({
       list: [] as any[],
@@ -108,9 +111,11 @@ export default defineComponent({
         const tenantId =
           schoolInfos.length > 0 ? schoolInfos[0].tenantId : null;
         if (tenantId) {
-          await api_tenantInfoDetail({
+          const { data } = await api_tenantInfoDetail({
             id: tenantId
           });
+
+          bookVersionList.value = data.bookVersionList || [];
         }
       } catch {
         //
@@ -418,10 +423,14 @@ export default defineComponent({
             <div class={styles.searchList}>
               <div class={styles.popoverTitle}>教材版本</div>
               <div class={[styles.popupList, styles.versionList]}>
-                <Tag plain round>
-                  人教版
-                </Tag>
-                <Tag round>人音版</Tag>
+                {bookVersionList.value.map((item: any) => (
+                  <Tag
+                    plain={forms.bookVersionId === item.bookVersionId}
+                    round
+                    onClick={() => (forms.bookVersionId = item.bookVersionId)}>
+                    {item.bookVersionName}
+                  </Tag>
+                ))}
               </div>
 
               <div class={styles.popoverTitle}>选择年级</div>
@@ -438,8 +447,21 @@ export default defineComponent({
             </div>
 
             <div class={styles.btnGroup}>
-              <Button round>重置</Button>
-              <Button round class={styles.btnSure}>
+              <Button
+                round
+                onClick={() => {
+                  forms.bookVersionId = null;
+                  forms.currentGradeNum = null;
+                }}>
+                重置
+              </Button>
+              <Button
+                round
+                class={styles.btnSure}
+                onClick={() => {
+                  getData();
+                  popoverShow.value = false;
+                }}>
                 确认
               </Button>
             </div>

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

@@ -51,6 +51,22 @@
       border: none;
       line-height: 18px;
     }
+
+    .van-collapse-item__content {
+      padding-top: 0;
+      background-color: transparent;
+    }
+  }
+
+  .item {
+    display: flex;
+    align-items: center;
+    margin-top: 15px;
+
+    span {
+      color: #131415;
+      font-size: 12px;
+    }
   }
 
   .arrow {
@@ -58,4 +74,27 @@
     height: 12px;
     margin-right: 5px;
   }
+
+  .itemImage {
+    width: 15px;
+    height: 15px;
+    margin-right: 6px;
+  }
+
+  .activeItem {
+    background: #ECF8FF;
+    border-radius: 9px;
+
+    :global {
+      .van-cell {
+        color: #1C9AF7;
+        font-weight: 600;
+      }
+    }
+  }
+
+  .itemActive {
+    font-weight: 500;
+    color: #1C9AF7;
+  }
 }

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

@@ -1,14 +1,26 @@
-import { defineComponent, reactive } from 'vue';
+import { defineComponent, reactive, toRefs } from 'vue';
 import styles from './chapter.module.less';
 import iconMenuChapter from '../image/icon-menu-chapter.svg';
-import { Collapse, CollapseItem, Icon, Image } from 'vant';
+import { Collapse, CollapseItem, Icon, Image, showToast } from 'vant';
 import chapterDown from '../image/chapter-down-arrow.svg';
 import chapterDefault from '../image/chapter-default-arrow.svg';
 import chapterVideo from '../image/chapter-video.svg';
 
 export default defineComponent({
   name: 'chapter',
-  setup() {
+  props: {
+    detail: {
+      type: Object,
+      default: () => []
+    },
+    itemActive: {
+      type: String,
+      default: ''
+    }
+  },
+  emits: ['handleSelect'],
+  setup(props, { emit }) {
+    const { detail, itemActive } = toRefs(props);
     const pointData = reactive({
       active: ''
     });
@@ -27,87 +39,60 @@ export default defineComponent({
             }}
             border={false}
             accordion>
-            <CollapseItem
-              center
-              class={styles.collapseItem}
-              border={false}
-              isLink={false}
-              title={'第一种'}
-              name={1}>
-              {{
-                default: () => (
-                  <>
-                    <div
-                      class={[
-                        styles.item
-                        // props.itemActive == n.id ? styles.itemActive : ''
-                      ]}
-                      onClick={() => {
-                        // emit('handleSelect', {
-                        //   itemActive: n.id,
-                        //   tabActive: item.id,
-                        //   tabName: item.name
-                        // });
-                      }}>
-                      <Image src={chapterVideo} class={styles.itemImage} />
-                      <span style={{ width: '80%' }} class="van-ellipsis">
-                        章节名称
-                      </span>
-                    </div>
-                    <div
-                      class={[
-                        styles.item
-                        // props.itemActive == n.id ? styles.itemActive : ''
-                      ]}
-                      onClick={() => {
-                        // emit('handleSelect', {
-                        //   itemActive: n.id,
-                        //   tabActive: item.id,
-                        //   tabName: item.name
-                        // });
-                      }}>
-                      <Image src={chapterVideo} class={styles.itemImage} />
-                      <span style={{ width: '80%' }} class="van-ellipsis">
-                        章节名称
-                      </span>
-                    </div>
-                  </>
-                ),
-                icon: () => <img class={styles.arrow} src={chapterDefault} />
-              }}
-            </CollapseItem>
-            <CollapseItem
-              center
-              class={styles.collapseItem}
-              border={false}
-              isLink={false}
-              title={'第二种'}
-              name={1}>
-              {{
-                default: () => (
-                  <>
-                    <div
-                      class={[
-                        styles.item
-                        // props.itemActive == n.id ? styles.itemActive : ''
-                      ]}
-                      onClick={() => {
-                        // emit('handleSelect', {
-                        //   itemActive: n.id,
-                        //   tabActive: item.id,
-                        //   tabName: item.name
-                        // });
-                      }}>
-                      <Image src={chapterVideo} class={styles.itemImage} />
-                      <span style={{ width: '80%' }} class="van-ellipsis">
-                        章节名称
-                      </span>
-                    </div>
-                  </>
-                ),
-                icon: () => <img class={styles.arrow} src={chapterDefault} />
-              }}
-            </CollapseItem>
+            {detail.value.map((item: any) => (
+              <CollapseItem
+                center
+                class={[
+                  styles.collapseItem,
+                  pointData.active === item.id ? styles.activeItem : ''
+                ]}
+                border={false}
+                isLink={false}
+                title={item.name}
+                titleClass={'van-ellipsis'}
+                titleStyle={{ width: '80%' }}
+                name={item.id}>
+                {{
+                  default: () => (
+                    <>
+                      {item.knowledgeList.map((know: any) => (
+                        <div
+                          class={[
+                            styles.item,
+                            itemActive.value == know.id ? styles.itemActive : ''
+                          ]}
+                          onClick={() => {
+                            if (!know.containMaterial) {
+                              showToast('暂无课件，不法切换');
+                              return;
+                            }
+                            emit('handleSelect', {
+                              itemActive: know.id,
+                              tabActive: item.id,
+                              tabName: item.name
+                            });
+                          }}>
+                          <Image src={chapterVideo} class={styles.itemImage} />
+                          <span style={{ width: '80%' }} class="van-ellipsis">
+                            {know.name}
+                          </span>
+                        </div>
+                      ))}
+                    </>
+                  ),
+                  icon: () => (
+                    <img
+                      class={styles.arrow}
+                      src={
+                        pointData.active === item.id
+                          ? chapterDown
+                          : chapterDefault
+                      }
+                    />
+                  )
+                }}
+              </CollapseItem>
+            ))}
           </Collapse>
         </div>
       </div>

src/views/courseware-play/index.tsx

@@ -38,6 +38,7 @@ import {
 } from './api';
 import VideoItem from './component/video-item';
 import Chapter from './component/chapter';
+import { api_lessonCoursewareDetail } from '../courseware-list/api';
 
 export default defineComponent({
   name: 'CoursewarePlay',
@@ -102,10 +103,24 @@ export default defineComponent({
       window.removeEventListener('message', iframeHandle);
     });
 
+    const getCourseDetail = async () => {
+      try {
+        const res = await api_lessonCoursewareDetail(
+          route.query.lessonCoursewareId as any
+        );
+        if (res?.code == 200 && Array.isArray(res?.data?.lessonList)) {
+          data.courseDetails = res.data.lessonList || [];
+        }
+      } catch {
+        //
+      }
+    };
+
     const route = useRoute();
     const headeRef = ref();
     const data = reactive({
       knowledgePointList: [] as any,
+      courseDetails: [] as any,
       itemList: [] as any,
       videoRefs: {} as any[]
     });
@@ -120,11 +135,11 @@ export default defineComponent({
       timer: null as any,
       item: null as any
     });
-    const getDetail = async () => {
+    const getDetail = async (knowledgeId?: string) => {
       let courseList: any[] = [];
       if (route.query.tab == 'course') {
         const res = await api_classLessonCoursewareQuery({
-          coursewareDetailKnowledgeId: route.query.id,
+          coursewareDetailKnowledgeId: knowledgeId || route.query.id,
           page: 1,
           rows: -1
         });
@@ -145,7 +160,7 @@ export default defineComponent({
         }
       } else {
         const res = await api_lessonCoursewareKnowledgeDetailDetail({
-          lessonCoursewareKnowledgeDetailId: route.query.id
+          lessonCoursewareKnowledgeDetailId: knowledgeId || route.query.id
         });
         if (res?.code === 200 && Array.isArray(res.data)) {
           courseList = res.data || [];
@@ -197,6 +212,7 @@ export default defineComponent({
         }
       });
       getDetail();
+      getCourseDetail();
       window.addEventListener('message', iframeHandle);
     });
 
@@ -552,7 +568,13 @@ export default defineComponent({
           round
           v-model:show={popupData.chapterOpen}
           onClose={handleClosePopup}>
-          <Chapter />
+          <Chapter
+            detail={data.courseDetails}
+            onHandleSelect={(item: any) => {
+              console.log(item, 'item');
+              getDetail(item.itemActive);
+            }}
+          />
         </Popup>
       </div>
     );