添加页面

src/views/courseware-list/api.ts

@@ -45,3 +45,10 @@ export const api_classLessonCoursewareDetail = (
 ): Promise<any> => {
   return request.get(`/edu-app/classLessonCourseware/detail/${params}`);
 };
+
+/** 版本教材 */
+export const api_tenantInfoDetail = (params: any): Promise<any> => {
+  return request.get(`/edu-app/tenantInfo/detail`, {
+    params: params
+  });
+};

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

@@ -207,22 +207,22 @@ export default defineComponent({
         const url =
           location.origin + location.pathname + '#/courseware-play?' + query;
         console.log('🚀 ~ url:', url);
-        // postMessage({
-        //   api: 'openWebView',
-        //   content: {
-        //     url,
-        //     orientation: 0,
-        //     isHideTitle: false
-        //   }
-        // });
-        router.push({
-          path: '/courseware-play',
-          query: {
-            id: item.id,
-            name: item.name,
-            tab: props.tab
+        postMessage({
+          api: 'openWebView',
+          content: {
+            url,
+            orientation: 0,
+            isHideTitle: false
           }
         });
+        // router.push({
+        //   path: '/courseware-play',
+        //   query: {
+        //     id: item.id,
+        //     name: item.name,
+        //     tab: props.tab
+        //   }
+        // });
       }
     };
     return () => (

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

@@ -3,8 +3,7 @@
   width: 100vw;
   height: 100vh;
   overflow: hidden;
-  background: url('../../common/images/icon_bg.png') no-repeat center center /
-    cover;
+  background: url('../../common/images/icon_bg.png') no-repeat center center / cover;
   display: flex;
   flex-direction: column;
 }
@@ -161,9 +160,11 @@
     height: 170px;
     background-color: #edeff2;
     box-shadow: 0 5px 14px rgba(0, 0, 0, 0.4);
+
     img {
       position: absolute;
     }
+
     &::before {
       content: '';
       position: absolute;
@@ -252,18 +253,14 @@
     height: 100%;
     z-index: 2;
     background-repeat: no-repeat;
-    background-image: linear-gradient(
-        to right,
+    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,
+        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%
-      );
+        transparent 1.3%);
     background-size: 50% 100%, 50% 100%;
     background-position: 0% top, 9% top;
   }
@@ -314,3 +311,87 @@
     transform: translate(-50%, -50%) scale(1);
   }
 }
+
+
+.popupContainer {
+  background: #FFFFFF;
+  border-radius: 12px;
+  width: 298px;
+  padding-top: 12px;
+
+  .searchList {
+    padding: 0 11px;
+    max-height: 58vh;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  .popoverTitle {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    font-weight: 600;
+    color: #333333;
+
+    &::before {
+      content: ' ';
+      display: inline-block;
+      width: 4px;
+      height: 11px;
+      background: #2AA4FE;
+      border-radius: 2px;
+      margin-right: 6px;
+    }
+  }
+
+  .popupList {
+    display: flex;
+    flex-flow: wrap;
+    justify-content: flex-start;
+    gap: 8px 9px;
+    padding-top: 11px;
+    padding-bottom: 14px;
+
+    :global {
+      .van-tag {
+        padding: 7px 24px;
+        height: 30px;
+        font-size: 12px;
+        background: #F6F6F6;
+        border: none;
+        color: #333333;
+      }
+
+      .van-tag--plain {
+        background: rgba(42, 164, 254, 0.08);
+        border: none;
+        color: #2AA4FE;
+      }
+    }
+  }
+
+  .btnGroup {
+    border: 1px solid #F2F2F2;
+    padding: 16px 12px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    :global {
+      .van-button {
+        font-size: 15px;
+        color: #333333;
+        line-height: 22px;
+        padding: 0 48px;
+        height: 37px;
+        font-weight: 400;
+      }
+    }
+
+    .btnSure {
+      background: linear-gradient(135deg, #19F1E1 0%, #0094FF 100%), linear-gradient(73deg, #5BECFF 0%, #259CFE 100%);
+      border: none;
+      color: #fff;
+    }
+  }
+}

src/views/courseware-list/index.tsx

@@ -13,8 +13,10 @@ import {
   Button,
   Image,
   Popover,
+  Popup,
   Tab,
   Tabs,
+  Tag,
   showConfirmDialog,
   showDialog,
   showToast
@@ -26,7 +28,8 @@ import {
   api_lessonCoursewarePage,
   api_lessonCoursewareDetail,
   api_classLessonCoursewarePage,
-  api_classLessonCoursewareDetail
+  api_classLessonCoursewareDetail,
+  api_tenantInfoDetail
 } from './api';
 import { NImage } from 'naive-ui';
 import { state } from '@/state';
@@ -41,7 +44,7 @@ import MEmpty from '@/components/m-empty';
 
 export const BOOK_DATA = {
   grades: [
-    { text: '全部年级', value: '' },
+    // { text: '全部年级', value: '' },
     { text: '一年级', value: 1 },
     { text: '二年级', value: 2 },
     { text: '三年级', value: 3 },
@@ -99,6 +102,21 @@ export default defineComponent({
       book: {} as DOMRect
     });
 
+    const getTanentList = async () => {
+      try {
+        const schoolInfos = state.user.data.schoolInfos;
+        const tenantId =
+          schoolInfos.length > 0 ? schoolInfos[0].tenantId : null;
+        if (tenantId) {
+          await api_tenantInfoDetail({
+            id: tenantId
+          });
+        }
+      } catch {
+        //
+      }
+    };
+
     const getList = async () => {
       data.loading = true;
       const res = await api_lessonCoursewarePage({
@@ -169,6 +187,7 @@ export default defineComponent({
       getData();
     };
     onMounted(() => {
+      getTanentList();
       getData();
     });
 
@@ -270,60 +289,58 @@ export default defineComponent({
                 title: () => <div id="courseware-2">我的收藏</div>
               }}></Tab>
           </Tabs>
-          <Popover
+          <Button
+            class={styles.downBtn}
+            round
+            size="small"
+            onClick={() => (popoverShow.value = true)}
+            {...{ id: 'courseware-3' }}>
+            {/* {BOOK_DATA.grades[forms.currentGradeNum].text} */}
+            筛选
+            {/* <img class={styles.icon} src={icon_arrow} /> */}
+            <svg
+              class={[styles.icon, popoverShow.value ? styles.iconUp : '']}
+              width="9px"
+              height="5px"
+              viewBox="0 0 9 5"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg">
+              <title>三角形</title>
+              <g
+                id="演示用"
+                stroke="none"
+                stroke-width="1"
+                fill="currentColor"
+                fill-rule="evenodd">
+                <g
+                  id="全部教材-筛选"
+                  transform="translate(-769.000000, -35.000000)"
+                  fill="currentColor">
+                  <g id="编组-3" transform="translate(696.000000, 20.000000)">
+                    <g
+                      id="筛选目录备份-2"
+                      transform="translate(13.000000, 7.000000)">
+                      <path
+                        d="M64.8716471,8.41294119 L68.2489659,12.1655176 C68.4336954,12.3707726 68.4170562,12.6869176 68.2118012,12.8716471 C68.1199888,12.9542782 68.0008397,13 67.8773188,13 L61.1226812,13 C60.8465388,13 60.6226812,12.7761424 60.6226812,12.5 C60.6226812,12.3764791 60.668403,12.25733 60.7510341,12.1655176 L64.1283529,8.41294119 C64.3130824,8.20768618 64.6292274,8.19104698 64.8344824,8.37577649 C64.8475136,8.38750459 64.859919,8.39990996 64.8716471,8.41294119 Z"
+                        id="三角形"
+                        transform="translate(64.500000, 10.500000) rotate(-180.000000) translate(-64.500000, -10.500000) "></path>
+                    </g>
+                  </g>
+                </g>
+              </g>
+            </svg>
+          </Button>
+          {/* <Popover
             v-model:show={popoverShow.value}
             class={styles.popover}
             actions={_actions.value}
             onSelect={onSelect}>
             {{
               reference: () => (
-                <Button
-                  class={styles.downBtn}
-                  round
-                  size="small"
-                  {...{ id: 'courseware-3' }}>
-                  {BOOK_DATA.grades[forms.currentGradeNum].text}{' '}
-                  {/* <img class={styles.icon} src={icon_arrow} /> */}
-                  <svg
-                    class={[
-                      styles.icon,
-                      popoverShow.value ? styles.iconUp : ''
-                    ]}
-                    width="9px"
-                    height="5px"
-                    viewBox="0 0 9 5"
-                    version="1.1"
-                    xmlns="http://www.w3.org/2000/svg">
-                    <title>三角形</title>
-                    <g
-                      id="演示用"
-                      stroke="none"
-                      stroke-width="1"
-                      fill="currentColor"
-                      fill-rule="evenodd">
-                      <g
-                        id="全部教材-筛选"
-                        transform="translate(-769.000000, -35.000000)"
-                        fill="currentColor">
-                        <g
-                          id="编组-3"
-                          transform="translate(696.000000, 20.000000)">
-                          <g
-                            id="筛选目录备份-2"
-                            transform="translate(13.000000, 7.000000)">
-                            <path
-                              d="M64.8716471,8.41294119 L68.2489659,12.1655176 C68.4336954,12.3707726 68.4170562,12.6869176 68.2118012,12.8716471 C68.1199888,12.9542782 68.0008397,13 67.8773188,13 L61.1226812,13 C60.8465388,13 60.6226812,12.7761424 60.6226812,12.5 C60.6226812,12.3764791 60.668403,12.25733 60.7510341,12.1655176 L64.1283529,8.41294119 C64.3130824,8.20768618 64.6292274,8.19104698 64.8344824,8.37577649 C64.8475136,8.38750459 64.859919,8.39990996 64.8716471,8.41294119 Z"
-                              id="三角形"
-                              transform="translate(64.500000, 10.500000) rotate(-180.000000) translate(-64.500000, -10.500000) "></path>
-                          </g>
-                        </g>
-                      </g>
-                    </g>
-                  </svg>
-                </Button>
+
               )
             }}
-          </Popover>
+          </Popover> */}
         </div>
 
         <div class={styles.content}>
@@ -395,6 +412,39 @@ export default defineComponent({
           }}
         />
         {isShowGuide.value ? <CoursewareList></CoursewareList> : null}
+
+        <Popup v-model:show={popoverShow.value} class={styles.popupContainer}>
+          <div class={styles.popoverContainer}>
+            <div class={styles.searchList}>
+              <div class={styles.popoverTitle}>教材版本</div>
+              <div class={[styles.popupList, styles.versionList]}>
+                <Tag plain round>
+                  人教版
+                </Tag>
+                <Tag round>人音版</Tag>
+              </div>
+
+              <div class={styles.popoverTitle}>选择年级</div>
+              <div class={[styles.popupList, styles.versionList]}>
+                {BOOK_DATA.grades.map((item: any) => (
+                  <Tag
+                    plain={forms.currentGradeNum === item.value}
+                    round
+                    onClick={() => (forms.currentGradeNum = item.value)}>
+                    {item.text}
+                  </Tag>
+                ))}
+              </div>
+            </div>
+
+            <div class={styles.btnGroup}>
+              <Button round>重置</Button>
+              <Button round class={styles.btnSure}>
+                确认
+              </Button>
+            </div>
+          </div>
+        </Popup>
       </div>
     );
   }

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

@@ -0,0 +1,37 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  min-width: 266px;
+  max-width: 266px;
+  height: 100vh;
+  color: #333;
+  font-size: 12px;
+  box-sizing: border-box;
+  background: #fff;
+}
+
+.pointHead {
+  display: flex;
+  align-items: center;
+  padding: 13px 10px 15px 15px;
+  flex-shrink: 0;
+  font-size: 14px;
+
+  img {
+    width: 16px;
+    height: 16px;
+    margin-right: 7px;
+  }
+}
+
+.content {
+  flex: 1;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 0 20px;
+
+  &::-webkit-scrollbar {
+    width: 0;
+    display: none;
+  }
+}

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

@@ -0,0 +1,18 @@
+import { defineComponent } from 'vue';
+import styles from './chapter.module.less';
+import iconMenuChapter from '../image/icon-menu-chapter.svg';
+
+export default defineComponent({
+  name: 'chapter',
+  setup() {
+    return () => (
+      <div class={styles.container}>
+        <div class={styles.pointHead}>
+          <img src={iconMenuChapter} />
+          切换章节
+        </div>
+        <div class={styles.content}></div>
+      </div>
+    );
+  }
+});

src/views/courseware-play/image/icon-change.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>切片</title>
+    <g id="修改页面8.18" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="3、课件播放加章节" transform="translate(-698.000000, -77.000000)">
+            <g id="编组-5" transform="translate(670.000000, 74.000000)">
+                <g id="编组-4备份" transform="translate(19.000000, 0.000000)">
+                    <g id="编组-2" transform="translate(9.000000, 3.000000)">
+                        <g id="编组-7" transform="translate(4.500000, 4.000000)">
+                            <rect id="矩形" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" x="0" y="0" width="15" height="16" rx="4"></rect>
+                            <g id="编组-3" transform="translate(3.500000, 4.000000)" fill="#FFFFFF">
+                                <rect id="矩形" x="0" y="0" width="8" height="2" rx="1"></rect>
+                                <rect id="矩形备份-2" x="0" y="5" width="6" height="2" rx="1"></rect>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/courseware-play/image/icon-menu-chapter.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="20px" viewBox="0 0 18 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 10</title>
+    <g id="修改页面8.18" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="5、切换单元备份-3" transform="translate(-556.000000, -17.000000)">
+            <g id="编组-9" transform="translate(542.000000, 0.000000)">
+                <g id="编组-10" transform="translate(14.000000, 17.000000)">
+                    <rect id="矩形" fill="#1C9AF7" x="0" y="0" width="18" height="20" rx="5.45454545"></rect>
+                    <rect id="矩形" fill="#FFFFFF" x="4.09090909" y="5" width="9.81818182" height="2.5" rx="1.25"></rect>
+                    <rect id="矩形备份" fill="#FFFFFF" x="4.09090909" y="10" width="7.36363636" height="2.5" rx="1.25"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/courseware-play/index.tsx

@@ -21,6 +21,7 @@ import {
 } from '@/helpers/native-message';
 import MusicScore from './component/musicScore';
 import iconMenu from './image/icon-menu.svg';
+import iconChange from './image/icon-change.svg';
 import iconDian from './image/icon-dian.svg';
 import iconPoint from './image/icon-point.svg';
 import iconUp from './image/icon-up.svg';
@@ -36,6 +37,7 @@ import {
   api_lessonCoursewareKnowledgeDetailDetail
 } from './api';
 import VideoItem from './component/video-item';
+import Chapter from './component/chapter';
 
 export default defineComponent({
   name: 'CoursewarePlay',
@@ -212,7 +214,8 @@ export default defineComponent({
       open: false,
       activeIndex: 0,
       itemActive: '',
-      itemName: ''
+      itemName: '',
+      chapterOpen: false
     });
 
     // 切换素材
@@ -472,6 +475,13 @@ export default defineComponent({
                   }}>
                   <div
                     class={[styles.fullBtn, styles.point]}
+                    onClick={() => (popupData.chapterOpen = true)}>
+                    <img src={iconChange} />
+                    <span>切换</span>
+                  </div>
+
+                  <div
+                    class={[styles.fullBtn, styles.point]}
                     onClick={() => (popupData.open = true)}>
                     <img src={iconMenu} />
                     <span>课件</span>
@@ -514,6 +524,7 @@ export default defineComponent({
           <div class={styles.menu}>{popupData.itemName}</div>
         </div>
 
+        {/* 课件列表 */}
         <Popup
           class={styles.popup}
           style={{ background: 'rgba(0,0,0, 0.75)' }}
@@ -531,6 +542,18 @@ export default defineComponent({
             }}
           />
         </Popup>
+
+        {/* 知识点列表 */}
+        <Popup
+          class={styles.popup}
+          style={{ background: 'rgba(0,0,0, 0.75)' }}
+          overlayClass={styles.overlayClass}
+          position="right"
+          round
+          v-model:show={popupData.chapterOpen}
+          onClose={handleClosePopup}>
+          <Chapter />
+        </Popup>
       </div>
     );
   }