fix

src/views/courseList/index.tsx

@@ -1,6 +1,6 @@
 import request from '@/helpers/request'
 import { state } from '@/state'
-import { Button, Empty, Grid, GridItem, Icon } from 'vant'
+import { Button, Empty, Grid, GridItem, Icon, showToast } from 'vant'
 import { defineComponent, onMounted, reactive } from 'vue'
 import styles from './index.module.less'
 import iconLook from './image/look.svg'
@@ -30,6 +30,8 @@ export default defineComponent({
     const handleClick = (item: any) => {
       if (route.query.code === 'select') {
         console.log('选择课时')
+        setCoursewareDetail(item)
+        return
       }
       router.push({
         path: '/coursewarePlay',
@@ -38,6 +40,24 @@ export default defineComponent({
         }
       })
     }
+    // 绑定课时
+    const setCoursewareDetail = async (item: any) => {
+      try {
+        const res: any = await request.post(
+          state.platformApi + '/courseSchedule/setCoursewareDetail',
+          {
+            params: {
+              courseScheduleId: route.query.courseScheduleId,
+              coursewareDetailId: item.id
+            }
+          }
+        )
+        if (res.code === 200){
+          showToast('保存成功')
+          postMessage({ api: 'back' })
+        }
+      } catch (error) {}
+    }
     return () => (
       <div style={{ paddingTop: '14px' }}>
         <Grid gutter={14} columnNum={3} class={styles.grid}>

src/views/coursewarePlay/component/musicScore.tsx

@@ -7,7 +7,7 @@ export default defineComponent({
     music: {
       type: Object,
       default: () => {}
-    }
+    },
   },
   setup(props, {}) {
     const Authorization = sessionStorage.getItem('Authorization') || ''
@@ -17,29 +17,13 @@ export default defineComponent({
       props.music.content
     }&Authorization=${Authorization}`
     console.log('src', src)
-    const isTouch = ref(true)
+    
     return () => (
       <div
         class={styles.musicScore}
-        // onTouchstart={() => {
-        //   console.log('onTouchstart')
-        //   isTouch.value = true
-        // }}
-        // onClick={() => {
-        //   console.log('onClick')
-        //   //   isTouch.value = false
-        // }}
-        // onTouchend={() => {
-        //   console.log('onTouchend')
-        //   // 由于touchEnd比click先触发，所以要等click执行完以后，再恢复pointer-events
-        //   setTimeout(() => {
-        //     isTouch.value = false
-        //   }, 1000)
-        // }}
       >
         <iframe
           class={styles.container}
-          //   style={{ pointerEvents: isTouch.value ? 'none' : 'auto' }}
           frameborder="0"
           src={src}
         ></iframe>

src/views/coursewarePlay/component/point.module.less

@@ -0,0 +1,26 @@
+.container {
+  min-height: 100vh;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: 0px 12Px 12Px 0px;
+  color: #fff;
+  font-size: 16Px;
+  padding: 38Px 20Px 20Px 40Px;
+  box-sizing: border-box;
+}
+.pointHead{
+    display: flex;
+    align-items: center;
+    padding-bottom: 10Px;
+    img{
+        width: 24Px;
+        height: 24Px;
+        margin-right: 8Px;
+    }
+}
+.item{
+    padding: 11px 0;
+}
+.itemActive{
+    border-bottom: 1Px solid #fff;
+    border-radius: 1Px;
+}

src/views/coursewarePlay/component/points.tsx

@@ -0,0 +1,40 @@
+import { defineComponent } from 'vue'
+import styles from './point.module.less'
+import iconMulv from '../image/icon-mulv.svg'
+export default defineComponent({
+  name: 'points',
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    },
+    active: {
+        type: String,
+        default: ''
+    }
+  },
+  setup(props, ctx) {
+    return () => (
+      <div class={styles.container}>
+        <div>
+          <div class={styles.pointHead}>
+            <img src={iconMulv} />
+            课程目录
+          </div>
+          <div class={styles.items}>
+            {props.data.map((item: any) => {
+              return (
+                <>
+                  {Array.isArray(item?.materialList) &&
+                    item.materialList.map((n: any) => {
+                      return <div data-id={`${item.id}-${n.id}`} class={[styles.item, `${item.id}-${n.id}` === props.active ? styles.itemActive: '']}>{item.name}-{n.name}</div>
+                    })}
+                </>
+              )
+            })}
+          </div>
+        </div>
+      </div>
+    )
+  }
+})

src/views/coursewarePlay/image/icon-menu.svg

@@ -0,0 +1,22 @@
+<?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>
+    <defs>
+        <path d="M8.41697068,5.70140135 L20.095405,5.70140135 C20.5949959,5.70140135 21,5.29824534 21,4.80093423 C21,4.30362313 20.5949959,3.90046712 20.095405,3.90046712 L8.41697068,3.90046712 C7.91737983,3.90046712 7.51237569,4.30362313 7.51237569,4.80093423 C7.51237569,5.29824534 7.91737983,5.70140135 8.41697068,5.70140135 Z M8.41671626,12.883105 L20.0522954,12.883105 C20.5518863,12.883105 20.9568904,12.479949 20.9568904,11.9826379 C20.9568904,11.4853268 20.5518863,11.0821708 20.0522954,11.0821708 L8.41671626,11.0821708 C7.91712541,11.0821708 7.51212128,11.4853268 7.51212128,11.9826379 C7.51212128,12.479949 7.91712541,12.883105 8.41671626,12.883105 Z M20.095405,18.3036919 L8.41697068,18.3036919 C7.91737983,18.3036919 7.51237569,18.7068479 7.51237569,19.204159 C7.51237569,19.7014701 7.91737983,20.1046261 8.41697068,20.1046261 L20.095405,20.1046261 C20.5949959,20.1046261 21,19.7014701 21,19.204159 C21,18.7068479 20.5949959,18.3036919 20.095405,18.3036919 L20.095405,18.3036919 Z M2,4.80093423 C2,5.79556275 2.81000194,6.60186847 3.80918997,6.60186847 C4.808378,6.60186847 5.61837994,5.79556275 5.61837994,4.80093423 C5.61837994,3.80630572 4.808378,3 3.80918997,3 C2.81000194,3 2,3.80630572 2,4.80093423 Z M2,11.9718604 C2,12.9664889 2.81000194,13.7727946 3.80918997,13.7727946 C4.808378,13.7727946 5.61837994,12.9664889 5.61837994,11.9718604 C5.61837994,10.9772319 4.808378,10.1709262 3.80918997,10.1709262 C2.81000194,10.1709262 2,10.9772319 2,11.9718604 Z M2,19.1990658 C2,20.1936943 2.81000194,21 3.80918997,21 C4.808378,21 5.61837994,20.1936943 5.61837994,19.1990658 C5.61837994,18.2044373 4.808378,17.3981315 3.80918997,17.3981315 C2.81000194,17.3981315 2,18.2044373 2,19.1990658 Z" id="path-1"></path>
+        <filter x="-15.8%" y="-16.7%" width="131.6%" height="133.3%" filterUnits="objectBoundingBox" id="filter-2">
+            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.125792177 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="课件播放（学生）" transform="translate(-741.000000, -157.000000)" fill-rule="nonzero">
+            <g id="编组-4" transform="translate(734.000000, 147.000000)">
+                <g id="形状结合" transform="translate(7.000000, 10.000000)">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                    <use fill="#FFFFFF" xlink:href="#path-1"></use>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/coursewarePlay/image/icon-mulv.svg

@@ -0,0 +1,18 @@
+<?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>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#FFB790" offset="0%"></stop>
+            <stop stop-color="#FF8057" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="课件播放（侧边目录）" transform="translate(-63.000000, -40.000000)" fill-rule="nonzero">
+            <g id="课程目录" transform="translate(63.000000, 40.000000)">
+                <path d="M0,12 C0.0544564416,8.0225337 0.745221648,4.72912615 2.76493864,2.76493864 C4.72912615,0.745221648 8.0225337,0.0544564416 12,0 C15.9774663,0.0544564416 19.2708739,0.745221648 21.2350614,2.76493864 C23.2547784,4.72912615 23.9455436,8.0225337 24,12 C23.9455436,15.9774663 23.2547784,19.2708739 21.2350614,21.2350614 C19.2708739,23.2547784 15.9774663,23.9455436 12,24 C8.0225337,23.9455436 4.72912615,23.2547784 2.76493864,21.2350614 C0.745221648,19.2708739 0.0544564416,15.9774663 0,12 Z" id="路径" fill="url(#linearGradient-1)"></path>
+                <path d="M16.9005371,8.99518041 L7.09972174,8.99518041 C6.61722643,8.99518041 6.22222222,8.57140376 6.22222222,8.05314576 C6.22222222,7.53516565 6.61696758,7.11111111 7.09972174,7.11111111 L16.9002783,7.11111111 C17.3827736,7.11111111 17.7777778,7.53488776 17.7777778,8.05314576 C17.7777778,8.57112587 17.3830324,8.99518041 16.9005371,8.99518041 L16.9005371,8.99518041 Z M16.9005371,13.3863402 L7.09972174,13.3863402 C6.61722643,13.3863402 6.22222222,12.9625635 6.22222222,12.4443055 C6.22222222,11.9263254 6.61696758,11.5022709 7.09972174,11.5022709 L16.9002783,11.5022709 C17.3827736,11.5022709 17.7777778,11.9260475 17.7777778,12.4443055 C17.7777778,12.9625635 17.3830324,13.3863402 16.9005371,13.3863402 L16.9005371,13.3863402 Z M10.9332816,17.7777778 L7.09972174,17.7777778 C6.61722643,17.7777778 6.22222222,17.3540011 6.22222222,16.8357431 C6.22222222,16.317763 6.61696758,15.8937085 7.09972174,15.8937085 L10.9330227,15.8937085 C11.415518,15.8937085 11.8105224,16.3174851 11.8105224,16.8357431 C11.8107811,17.3540011 11.4157769,17.7777778 10.9332816,17.7777778 L10.9332816,17.7777778 Z" id="形状" fill="#FFFFFF"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/coursewarePlay/index.module.less

@@ -100,7 +100,28 @@
 .songItem {
   width: 100%;
   height: 100%;
+}
+.fullBtn {
+  position: fixed;
+  top: 50%;
+  right: 40px;
+  width: 38px;
+  height: 55px;
+  transform: translateY(-50%);
+  background: rgba(51, 51, 51, 0.15);
+  border-radius: 8px;
   display: flex;
-  justify-content: center;
+  flex-direction: column;
   align-items: center;
+  color: #fff;
+  justify-content: space-evenly;
+  &:active {
+    opacity: 0.8;
+  }
+}
+.popup {
+  background: transparent;
+}
+.overlayClass {
+  --van-overlay-background: transparent;
 }

src/views/coursewarePlay/index.tsx

@@ -1,4 +1,4 @@
-import { Icon, Swipe, SwipeItem, Tab, Tabs } from 'vant'
+import { Icon, Popup, Swipe, SwipeItem, Tab, Tabs } from 'vant'
 import { defineComponent, onMounted, reactive, nextTick, onUnmounted, ref } from 'vue'
 import iconBack from './image/back.svg'
 import styles from './index.module.less'
@@ -10,10 +10,13 @@ import { useRoute } from 'vue-router'
 import { postMessage } from '@/helpers/native-message'
 import OHeader from '@/components/o-header'
 import MusicScore from './component/musicScore'
+import iconMenu from './image/icon-menu.svg'
+import Points from './component/points'
 
 export default defineComponent({
   name: 'CoursewarePlay',
   setup() {
+    const isTouch = ref(false)
     const handleInit = () => {
       postMessage({
         api: 'setRequestedOrientation',
@@ -34,9 +37,20 @@ export default defineComponent({
         }
       })
 
-      window.addEventListener('message', (val: any) => {
-        console.log(val)
-      })
+      // window.addEventListener('message', (res: any) => {
+      //   // console.log(res)
+      //   if (res?.data?.api) {
+      //     const { api } = res.data
+      //     if (api === 'touchstart') {
+      //       isTouch.value = true
+      //       console.log('🚀 ~ 父页面touchstart')
+      //     }
+      //     if (api === 'touchend') {
+      //       isTouch.value = false
+      //       console.log('🚀 ~ 父页面touchend')
+      //     }
+      //   }
+      // })
     }
 
     const route = useRoute()
@@ -54,7 +68,10 @@ export default defineComponent({
           data.detail = res.data
         }
         if (Array.isArray(res?.data?.knowledgePointList)) {
-          data.knowledgePointList = res.data.knowledgePointList
+          data.knowledgePointList = res.data.knowledgePointList.map((n: any) => {
+            n.index = 0
+            return n
+          })
         }
         console.log('数据加载完成')
       } catch (error) {}
@@ -80,6 +97,10 @@ export default defineComponent({
     const goback = () => {
       history.go(-1)
     }
+    // 所有的切换
+    const handleChange = () => {
+      console.log('切换了')
+    }
     onUnmounted(() => {
       postMessage({
         api: 'setRequestedOrientation',
@@ -100,6 +121,13 @@ export default defineComponent({
         }
       })
     })
+
+    const popupData = reactive({
+      open: false,
+      active: '',
+      knowledgeId: '',
+      materialId: ''
+    })
     return () => (
       <div class={styles.coursewarePlay}>
         <div class={styles.headerContainer}>
@@ -108,7 +136,16 @@ export default defineComponent({
             返回
           </div>
           <div class={styles.menu}>
-            <Tabs v-model:active={data.active} ellipsis={false}>
+            <Tabs
+              v-model:active={data.active}
+              ellipsis={false}
+              onChange={() => {
+                const knowledge = data.knowledgePointList.find((_: any) => _.id === data.active)
+                popupData.active = `${data.active}-${knowledge?.materialList?.[knowledge.index]?.id}`
+                console.log("🚀 ~ popupData.active", popupData.active)
+                handleChange()
+              }}
+            >
               {{
                 default: () => {
                   return data.knowledgePointList.map((n: any) => {
@@ -124,34 +161,56 @@ export default defineComponent({
           {data.knowledgePointList.map((item: any) => {
             return (
               <Tab name={item.id}>
-                <Swipe style={{ height: '100vh' }} vertical lazyRender={false}>
-                    {Array.isArray(item?.materialList) &&
-                      item.materialList.map((m: any) => {
-                        return (
-                          <SwipeItem>
-                            {m.type === 'VIDEO' ? (
-                              <div class={styles.videoItem}>
-                                <video class="player" controls>
-                                  <source src={m.content} type="video/mp4" />
-                                </video>
-                              </div>
-                            ) : m.type === 'IMG' ? (
-                              <div class={styles.imgItem}>
-                                <img src={m.content} />
-                              </div>
-                            ) : (
-                              <div class={styles.songItem}>
-                                <MusicScore music={m} />
-                              </div>
-                            )}
-                          </SwipeItem>
-                        )
-                      })}
-                  </Swipe>
+                <Swipe
+                  style={{ height: '100vh' }}
+                  loop={false}
+                  vertical
+                  lazyRender={false}
+                  onChange={(val: any) => {
+                    item.index = val
+                    popupData.active = `${item.id}-${item?.materialList?.[item.index]?.id}`
+                    console.log("🚀 ~ popupData.active", popupData.active)
+                    handleChange()
+                  }}
+                >
+                  {Array.isArray(item?.materialList) &&
+                    item.materialList.map((m: any) => {
+                      if (popupData.active === ''){
+                        popupData.active = `${item.id}-${m.id}`
+                        console.log("🚀 ~ popupData", popupData)
+                      }
+                      return (
+                        <SwipeItem>
+                          {m.type === 'VIDEO' ? (
+                            <div class={styles.videoItem}>
+                              <video class="player" controls>
+                                <source src={m.content} type="video/mp4" />
+                              </video>
+                            </div>
+                          ) : m.type === 'IMG' ? (
+                            <div class={styles.imgItem}>
+                              <img src={m.content} />
+                            </div>
+                          ) : (
+                            <div class={styles.songItem}>
+                              <MusicScore music={m} />
+                            </div>
+                          )}
+                        </SwipeItem>
+                      )
+                    })}
+                </Swipe>
               </Tab>
             )
           })}
         </Tabs>
+        <div class={styles.fullBtn} onClick={() => (popupData.open = true)}>
+          <img src={iconMenu} />
+          <span>列表</span>
+        </div>
+        <Popup class={styles.popup} overlayClass={styles.overlayClass} position="left" v-model:show={popupData.open}>
+          <Points data={data.knowledgePointList} active={popupData.active} />
+        </Popup>
       </div>
     )
   }

src/views/lessonCourseware/index.tsx

@@ -27,8 +27,13 @@ export default defineComponent({
     })
     const handleClick = (item: any) => {
       if (route.query.code === 'select') {
-        console.log('这里是选择课件')
-        setCoursewareDetail(item)
+        router.push({
+          path: '/courseList',
+          query: {
+            ...route.query,
+            id: item.id,
+          }
+        })
         return
       }
       router.push({
@@ -39,22 +44,7 @@ export default defineComponent({
       })
     }
 
-    const setCoursewareDetail = async (item: any) => {
-      try {
-        const res: any = await request.post(
-          state.platformApi + '/courseSchedule/setCoursewareDetail',
-          {
-            params: {
-              courseScheduleId: route.query.courseScheduleId,
-              coursewareDetailId: item.id
-            }
-          }
-        )
-        if (res.code === 200){
-          showToast('保存成功')
-        }
-      } catch (error) {}
-    }
+    
     return () => (
       <div style={{ paddingTop: '14px' }}>
         <Grid gutter={14} columnNum={3} class={styles.grid}>

vite.config.ts

@@ -12,9 +12,9 @@ function resolve(dir: string) {
 // https://vitejs.dev/config/
 // https://github.com/vitejs/vite/issues/1930 .env
 // const proxyUrl = 'https://mstutest.dayaedu.com/';
-// const proxyUrl = 'http://47.98.131.38:8989/'
+const proxyUrl = 'http://47.98.131.38:8989/'
 // const proxyUrl = 'http://192.168.3.143:8989/' // 尚科
-const proxyUrl = 'http://192.168.3.26:8989/' // 刘俊驰
+// const proxyUrl = 'http://192.168.3.26:8989/' // 刘俊驰
 export default defineConfig({
   base: './',
   plugins: [