Merge branch 'master' of http://git.dayaedu.com/lex/orchestra-app

src/views/accompany/category.tsx

@@ -1,6 +1,6 @@
 import request from '@/helpers/request'
 import { state } from '@/state'
-import { Button, Icon } from 'vant'
+import { Button, Icon, Image, Loading } from 'vant'
 import { defineComponent, reactive, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { getImage } from './images'
@@ -24,7 +24,6 @@ export default defineComponent({
           return (
             <div
               class={styles.container}
-              style={{ backgroundImage: `url(${item.icon})` }}
               onClick={() => {
                 router.replace({
                   path: '/accompany/musicList',
@@ -34,14 +33,19 @@ export default defineComponent({
                 })
               }}
             >
-              <div class={styles.title}>{item.title}</div>
+              <Image src={item.icon} width="100%" height="100%">
+                {{
+                  loading: () => <Loading type="spinner" size="20" />
+                }}
+              </Image>
+              {/* <div class={styles.title}>{item.title}</div>
               <div class={styles.sub}>{item.subtitle}</div>
               <div
                 class={styles.btn}
                 style={{ backgroundImage: `url(${item.btnIcon})`, color: item.color }}
               >
                 GO <Icon name="arrow" />
-              </div>
+              </div> */}
             </div>
           )
         })}

src/views/accompany/index.module.less

@@ -4,11 +4,10 @@
     box-sizing: border-box;
   }
   .container {
-    margin: 16px 12px;
+    margin: 12px;
     height: 140px;
     background-repeat: no-repeat;
     background-size: 100% 100%;
-    padding: 8px 20px;
     display: flex;
     flex-direction: column;
     justify-content: space-evenly;

src/views/coursewarePlay/index.tsx

@@ -140,12 +140,15 @@ export default defineComponent({
           if (material.type === 'VIDEO') {
             videoItem = {
               currentTime: 0,
-              duration: 100,
+              duration: 0,
+              progress: 0,
               paused: true,
               loop: false,
               videoEle: null,
               timer: null,
-              playModel: true
+              playModel: false,
+              isprepare: false,
+              isDrage: false
             }
           }
           list.push({
@@ -255,6 +258,10 @@ export default defineComponent({
         popupData.itemActive = item.id
         popupData.itemName = item.name
         popupData.tabName = item.tabName
+        activeData.model = true
+        if (item.type === 'VIDEO'){
+          item.playModel = true
+        }
       }
     }
     // 上一个知识点, 下一个知识点
@@ -281,10 +288,11 @@ export default defineComponent({
 
     // 双击
     const handleDbClick = (item: any) => {
-      // console.log(activeData.item)
+      // console.log(item)
       if (item && item.type === 'VIDEO') {
-        const videoEle: HTMLVideoElement = document.querySelector(`[data-vid='${item.id}']`)!
+        const videoEle: HTMLVideoElement = item.videoEle
         if (videoEle) {
+          console.log(videoEle)
           if (videoEle.paused) {
             closeToast()
             videoEle.play()
@@ -296,14 +304,34 @@ export default defineComponent({
         item.timer = setTimeout(() => {
           activeData.model = false
         }, 3000)
-        // console.dir(videoEle)
       }
     }
 
+    // 暂停播放
+    const handlePaused = (e: Event, m: any) => {
+      e.stopPropagation()
+      console.log('暂停')
+      m.videoEle?.pause()
+      m.paused = true
+    }
+    // 开始播放
+    const handlePlay = (e: Event, m: any) => {
+      e.stopPropagation()
+      clearTimeout(m.timer)
+      closeToast()
+      m.videoEle?.play()
+      m.paused = false
+      m.timer = setTimeout(() => {
+        activeData.model = false
+      }, 3000)
+    }
+
     // 调整播放进度
-    const handleChangeSlider = (val: any, m: any) => {
+    const handleChangeSlider = (m: any) => {
       if (m?.videoEle) {
-        m.videoEle.currentTime = val
+        // console.log('进度条', m.progress)
+        m.currentTime = m.duration * (m.progress / 100)
+        m.videoEle.currentTime = m.currentTime
       }
     }
 
@@ -391,10 +419,18 @@ export default defineComponent({
                             m.currentTime = videoEle.currentTime
                             m.duration = videoEle.duration
                             m.videoEle = videoEle
+                            m.isprepare = true
+                            m.playModel = true
+                            console.log('视频准备完成')
                           }}
                           onTimeupdate={(e: Event) => {
+                            if (!m.isprepare) return
                             const videoEle = e.target as unknown as HTMLVideoElement
                             m.currentTime = videoEle.currentTime
+                            m.progress = Number(
+                              ((videoEle.currentTime / m.duration) * 100).toFixed(1)
+                            )
+                            // console.log('播放',videoEle.currentTime,  m.progress)
                           }}
                           onPlay={() => {
                             // 播放
@@ -411,19 +447,39 @@ export default defineComponent({
                         </video>
                         <Transition name="bottom">
                           {m.playModel && (
-                            <div class={styles.bottomFixedContainer}>
+                            <div class={[styles.bottomFixedContainer]}>
                               <div class={styles.time}>
                                 <span>{getSecondRPM(m.currentTime)}</span>
                                 <span>{getSecondRPM(m.duration)}</span>
                               </div>
                               <div class={styles.slider}>
                                 <Slider
+                                  style={{ display: m.isprepare ? 'block' : 'none' }}
                                   buttonSize={16}
-                                  step={0.01}
-                                  v-model:modelValue={m.currentTime}
-                                  onUpdate:modelValue={(val: any) => handleChangeSlider(val, m)}
+                                  step={0.1}
+                                  modelValue={m.progress}
+                                  onUpdate:modelValue={(val: any) => {
+                                    m.progress = val
+                                    handleChangeSlider(m)
+                                  }}
+                                  onDragStart={(e: Event) => {
+                                    // 开始拖动,暂停播放
+                                    console.log('开始拖动')
+                                    // 如果拖动之前,视频是播放状态,拖动完毕后继续播放
+                                    if (!m.paused) {
+                                      m.isDrage = true
+                                    }
+                                    handlePaused(e, m)
+                                  }}
+                                  onDragEnd={(e: Event) => {
+                                    console.log('结束拖动')
+                                    if (m.isDrage) {
+                                      m.isDrage = false
+                                      handlePlay(e, m)
+                                    }
+                                  }}
                                   min={0}
-                                  max={m.duration}
+                                  max={100}
                                 />
                               </div>
 
@@ -432,26 +488,12 @@ export default defineComponent({
                                   {m.paused ? (
                                     <Icon
                                       name={iconplay}
-                                      onClick={(e: Event) => {
-                                        e.stopPropagation()
-                                        clearTimeout(m.timer)
-                                        closeToast()
-                                        m.videoEle?.play()
-                                        m.paused = false
-                                        m.timer = setTimeout(() => {
-                                          activeData.model = false
-                                        }, 3000)
-                                      }}
+                                      onClick={(e: Event) => handlePlay(e, m)}
                                     />
                                   ) : (
                                     <Icon
                                       name={iconpause}
-                                      onClick={(e: Event) => {
-                                        e.stopPropagation()
-                                        console.log('点击暂停')
-                                        m.videoEle?.pause()
-                                        m.paused = true
-                                      }}
+                                      onClick={(e: Event) => handlePaused(e, m)}
                                     />
                                   )}
                                   {m.loop ? (