双击播放

src/views/coursewarePlay/component/video-item/index.tsx

@@ -24,7 +24,7 @@ export default defineComponent({
     }
   },
   emits: ['play', 'pause', 'ended', 'close'],
-  setup(props, { emit }) {
+  setup(props, { emit, expose }) {
     const { item } = toRefs(props)
     const data = reactive({
       videoContianerRef: null as unknown as HTMLAudioElement,
@@ -181,6 +181,12 @@ export default defineComponent({
       })
       videoErrorCount++
     }
+    const getVideoRef = () => {
+      return data.videoContianerRef;
+    }
+    expose({
+      getVideoRef
+    })
 
     return () => (
       <div class={styles.videoWrap}>

src/views/coursewarePlay/index.tsx

@@ -1,4 +1,4 @@
-import { closeToast, Icon, Popup, showDialog } from 'vant'
+import { closeToast, Icon, Popup, showDialog, showToast } from 'vant'
 import {
   defineComponent,
   onMounted,
@@ -120,6 +120,7 @@ export default defineComponent({
       videoRefs: {},
 
       videoState: 'init' as 'init' | 'play',
+      videoItemRef: null as any,
       animationState: 'start' as 'start' | 'end'
     })
     const activeData = reactive({
@@ -426,7 +427,15 @@ export default defineComponent({
     // 双击
     const handleDbClick = () => {
       if (activeVideoItem.value.type === 'VIDEO') {
-        handleStop()
+        const activeVideoRef = data.videoItemRef?.getVideoRef()
+        if (activeVideoRef) {
+          if (activeVideoRef.paused) {
+            activeVideoRef.play()
+          } else {
+            activeVideoRef.pause()
+            showToast('已暂停')
+          }
+        }
       }
     }
 
@@ -614,21 +623,24 @@ export default defineComponent({
       }
       return {}
     })
-
+    let closeModelTimer: any = null
     return () => (
       <div id="playContent" class={styles.playContent}>
         <div
           class={styles.coursewarePlay}
           style={{ width: parentContainer.width }}
           onClick={() => {
+            clearTimeout(closeModelTimer)
             clearTimeout(activeData.timer)
+            closeToast()
             if (Date.now() - activeData.nowTime < 300) {
-              activeData.model = false
               handleDbClick()
               return
             }
             activeData.nowTime = Date.now()
-            activeData.model = !activeData.model
+            closeModelTimer = setTimeout(() => {
+              activeData.model = !activeData.model
+            }, 300)
           }}
         >
           <div class={styles.wraps}>
@@ -645,6 +657,7 @@ export default defineComponent({
               class={styles.itemDiv}
             >
               <VideoItem
+                ref={(el: any) => data.videoItemRef = el}
                 item={activeVideoItem.value}
                 activeModel={activeData.model}
                 onClose={setModelOpen}