|
@@ -1,5 +1,4 @@
|
|
|
import {
|
|
|
- Button,
|
|
|
closeToast,
|
|
|
Icon,
|
|
|
Loading,
|
|
@@ -7,9 +6,8 @@ import {
|
|
|
showToast,
|
|
|
Slider,
|
|
|
Swipe,
|
|
|
- SwipeItem,
|
|
|
- Tab,
|
|
|
- Tabs
|
|
|
+ SwipeInstance,
|
|
|
+ SwipeItem
|
|
|
} from 'vant'
|
|
|
import {
|
|
|
defineComponent,
|
|
@@ -19,8 +17,7 @@ import {
|
|
|
onUnmounted,
|
|
|
ref,
|
|
|
watch,
|
|
|
- Transition,
|
|
|
- computed
|
|
|
+ Transition
|
|
|
} from 'vue'
|
|
|
import iconBack from './image/back.svg'
|
|
|
import styles from './index.module.less'
|
|
@@ -39,15 +36,47 @@ import iconplay from './image/icon-play.svg'
|
|
|
import iconpause from './image/icon-pause.svg'
|
|
|
import iconUp from './image/icon-up.svg'
|
|
|
import iconDown from './image/icon-down.svg'
|
|
|
-import iconVideobg from './image/icon-videobg.png'
|
|
|
import Points from './component/points'
|
|
|
import { browser, getSecondRPM } from '@/helpers/utils'
|
|
|
-import { useRect } from '@vant/use'
|
|
|
+import { Vue3Lottie } from 'vue3-lottie'
|
|
|
+import playLoadData from './datas/data.json'
|
|
|
+import { usePageVisibility } from '@vant/use'
|
|
|
|
|
|
export default defineComponent({
|
|
|
name: 'CoursewarePlay',
|
|
|
setup() {
|
|
|
+ const pageVisibility = usePageVisibility()
|
|
|
+ const isPlay = ref(false)
|
|
|
+ /** 页面显示和隐藏 */
|
|
|
+ watch(pageVisibility, (value) => {
|
|
|
+ const activeItem = data.itemList[popupData.activeIndex]
|
|
|
+ if (activeItem.type != 'VIDEO') return
|
|
|
+ if (value == 'hidden') {
|
|
|
+ isPlay.value = !activeItem.paused
|
|
|
+ handlePaused(activeItem)
|
|
|
+ } else {
|
|
|
+ // 页面显示,并且
|
|
|
+ if (isPlay.value) handlePlay(activeItem)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ /** 设置播放容器 16:9 */
|
|
|
+ const parentContainer = reactive({
|
|
|
+ width: '100vw'
|
|
|
+ })
|
|
|
+ const setContainer = () => {
|
|
|
+ let min = Math.min(screen.width, screen.height)
|
|
|
+ let max = Math.max(screen.width, screen.height)
|
|
|
+ let width = min * (16 / 9)
|
|
|
+ if (width > max) {
|
|
|
+ parentContainer.width = '100vw'
|
|
|
+ return
|
|
|
+ } else {
|
|
|
+ parentContainer.width = width + 'px'
|
|
|
+ }
|
|
|
+ }
|
|
|
const handleInit = (type = 0) => {
|
|
|
+ //设置容器16:9
|
|
|
+ setContainer()
|
|
|
// 横屏
|
|
|
postMessage({
|
|
|
api: 'setRequestedOrientation',
|
|
@@ -106,7 +135,7 @@ export default defineComponent({
|
|
|
type: material.type // SONG VIDEO IMAGE
|
|
|
}
|
|
|
})
|
|
|
- console.log('缓存路径返回', res)
|
|
|
+ // console.log('缓存路径返回', res)
|
|
|
return res
|
|
|
}
|
|
|
// 获取当前课程是否签退
|
|
@@ -154,7 +183,7 @@ export default defineComponent({
|
|
|
playModel: false,
|
|
|
isprepare: false,
|
|
|
isDrage: false,
|
|
|
- muted: false // 是否静音
|
|
|
+ muted: true // 是否静音
|
|
|
}
|
|
|
}
|
|
|
list.push({
|
|
@@ -184,7 +213,7 @@ export default defineComponent({
|
|
|
item.autoPlay = true
|
|
|
item.muted = true
|
|
|
}
|
|
|
- console.log('🚀 ~ list', list)
|
|
|
+ // console.log('🚀 ~ list', list)
|
|
|
data.itemList = list
|
|
|
}
|
|
|
const getDetail = async () => {
|
|
@@ -218,10 +247,10 @@ export default defineComponent({
|
|
|
const iframeHandle = (ev: MessageEvent) => {
|
|
|
// console.log(ev.data)
|
|
|
if (ev.data?.api === 'headerTogge') {
|
|
|
- // activeData.model = ev.data.show
|
|
|
activeData.model = !activeData.model
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
onMounted(() => {
|
|
|
getDetail()
|
|
|
getCourseSchedule()
|
|
@@ -232,11 +261,11 @@ export default defineComponent({
|
|
|
postMessage({ api: 'goBack' })
|
|
|
}
|
|
|
|
|
|
- const swipeRef = ref()
|
|
|
+ const swipeRef = ref<SwipeInstance>()
|
|
|
const popupData = reactive({
|
|
|
firstIndex: 0,
|
|
|
open: false,
|
|
|
- activeIndex: -1,
|
|
|
+ activeIndex: 0,
|
|
|
tabActive: '',
|
|
|
tabName: '',
|
|
|
itemActive: '',
|
|
@@ -244,33 +273,41 @@ export default defineComponent({
|
|
|
})
|
|
|
// 设置当前的激活状态
|
|
|
const setActiveData = (val: any, oldVal: any) => {
|
|
|
- handleStopVideo()
|
|
|
- handleStopMusicScore()
|
|
|
+ handleStop()
|
|
|
}
|
|
|
watch(() => popupData.activeIndex, setActiveData)
|
|
|
|
|
|
- // 停止所有的播放
|
|
|
- const handleStopVideo = () => {
|
|
|
- data.itemList.forEach((m: any) => {
|
|
|
- const item = data.itemList[popupData.activeIndex]
|
|
|
- if (item?.id != m.id) {
|
|
|
- m.autoPlay = false
|
|
|
- m.videoEle?.pause()
|
|
|
+ /**停止所有的播放 */
|
|
|
+ const handleStop = () => {
|
|
|
+ const activeItem = data.itemList[popupData.activeIndex]
|
|
|
+ for (let i = 0; i < data.itemList.length; i++) {
|
|
|
+ const item = data.itemList[i]
|
|
|
+ // 停止视频播放
|
|
|
+ if (item.type === 'VIDEO') {
|
|
|
+ // console.log("🚀 ~ item", item)
|
|
|
+ if (item?.id != activeItem.id) {
|
|
|
+ item.currentTime = 0
|
|
|
+ item.progress = 0
|
|
|
+ if (item.videoEle) {
|
|
|
+ item.videoEle.currentTime = 0
|
|
|
+ item.videoEle.pause()
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- })
|
|
|
- }
|
|
|
- // 停止曲谱的播放
|
|
|
- const handleStopMusicScore = () => {
|
|
|
- data.itemList.forEach((m: any) => {
|
|
|
- m.iframeRef?.contentWindow?.postMessage({ api: 'setPlayState' }, '*')
|
|
|
- })
|
|
|
+ // 停止曲谱的播放
|
|
|
+ if (item.type === 'SONG') {
|
|
|
+ item.iframeRef?.contentWindow?.postMessage({ api: 'setPlayState' }, '*')
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
// 切换素材
|
|
|
const toggleMaterial = () => {
|
|
|
const index = data.itemList.findIndex((n: any) => n.id == popupData.itemActive)
|
|
|
if (index > -1) {
|
|
|
popupData.activeIndex = index
|
|
|
- swipeRef.value?.swipeTo(index)
|
|
|
+ swipeRef.value?.swipeTo(index, {
|
|
|
+ immediate: true
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
/** 延迟收起模态框 */
|
|
@@ -348,14 +385,12 @@ export default defineComponent({
|
|
|
}
|
|
|
|
|
|
// 暂停播放
|
|
|
- const handlePaused = (e: Event, m: any) => {
|
|
|
- e.stopPropagation()
|
|
|
+ const handlePaused = (m: any) => {
|
|
|
m.videoEle?.pause()
|
|
|
m.paused = true
|
|
|
}
|
|
|
// 开始播放
|
|
|
- const handlePlay = (e: Event, m: any) => {
|
|
|
- e.stopPropagation()
|
|
|
+ const handlePlay = (m: any) => {
|
|
|
closeToast()
|
|
|
m.videoEle?.play()
|
|
|
}
|
|
@@ -378,97 +413,109 @@ export default defineComponent({
|
|
|
}
|
|
|
|
|
|
return () => (
|
|
|
- <div class={styles.coursewarePlay}>
|
|
|
- <Swipe
|
|
|
- style={{ height: '100vh' }}
|
|
|
- ref={swipeRef}
|
|
|
- showIndicators={false}
|
|
|
- loop={false}
|
|
|
- vertical
|
|
|
- lazyRender={true}
|
|
|
- touchable={false}
|
|
|
- initialSwipe={popupData.firstIndex}
|
|
|
- onChange={handleSwipeChange}
|
|
|
- >
|
|
|
- {data.itemList.map((m: any, mIndex: number) => {
|
|
|
- return (
|
|
|
- <SwipeItem class={styles.swipeItem}>
|
|
|
- <>
|
|
|
- <div
|
|
|
- class={styles.itemDiv}
|
|
|
- onClick={() => {
|
|
|
- clearTimeout(activeData.timer)
|
|
|
- if (Date.now() - activeData.nowTime < 300) {
|
|
|
- handleDbClick(m)
|
|
|
- return
|
|
|
- }
|
|
|
- activeData.nowTime = Date.now()
|
|
|
- activeData.timer = setTimeout(() => {
|
|
|
- activeData.model = !activeData.model
|
|
|
- setModelOpen()
|
|
|
- }, 300)
|
|
|
- }}
|
|
|
- >
|
|
|
- {m.type === 'VIDEO' ? (
|
|
|
- <>
|
|
|
- <video
|
|
|
- playsinline="false"
|
|
|
- muted={m.muted}
|
|
|
- preload="auto"
|
|
|
- class="player"
|
|
|
- poster={iconVideobg}
|
|
|
- data-vid={m.id}
|
|
|
- src={m.content}
|
|
|
- loop={m.loop}
|
|
|
- autoplay={m.autoPlay}
|
|
|
- onLoadedmetadata={(e: Event) => {
|
|
|
- const videoEle = e.target as unknown as HTMLVideoElement
|
|
|
- m.currentTime = videoEle.currentTime
|
|
|
- m.duration = videoEle.duration
|
|
|
- m.videoEle = videoEle
|
|
|
- m.isprepare = true
|
|
|
- }}
|
|
|
- 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)
|
|
|
- )
|
|
|
- }}
|
|
|
- onPlay={() => {
|
|
|
- // 播放
|
|
|
- m.paused = false
|
|
|
- console.log('播放')
|
|
|
- setModelOpen()
|
|
|
- m.muted = false
|
|
|
- }}
|
|
|
- onPause={() => {
|
|
|
- //暂停
|
|
|
- clearTimeout(activeData.timer)
|
|
|
- m.paused = true
|
|
|
- }}
|
|
|
- onEnded={() => handleEnded(m)}
|
|
|
- >
|
|
|
- <source src={m.content} type="video/mp4" />
|
|
|
- </video>
|
|
|
- <Transition name="bottom">
|
|
|
- {activeData.model && (
|
|
|
- <div class={[styles.bottomFixedContainer]}>
|
|
|
+ <div class={styles.playContent}>
|
|
|
+ <div class={styles.coursewarePlay} style={{ width: parentContainer.width }}>
|
|
|
+ <Swipe
|
|
|
+ style={{ height: '100%' }}
|
|
|
+ ref={swipeRef}
|
|
|
+ showIndicators={false}
|
|
|
+ loop={false}
|
|
|
+ duration={0}
|
|
|
+ vertical
|
|
|
+ lazyRender={true}
|
|
|
+ touchable={false}
|
|
|
+ initialSwipe={popupData.firstIndex}
|
|
|
+ onChange={handleSwipeChange}
|
|
|
+ >
|
|
|
+ {data.itemList.map((m: any, mIndex: number) => {
|
|
|
+ return (
|
|
|
+ <SwipeItem class={styles.swipeItem}>
|
|
|
+ <>
|
|
|
+ <div
|
|
|
+ class={styles.itemDiv}
|
|
|
+ onClick={() => {
|
|
|
+ clearTimeout(activeData.timer)
|
|
|
+ if (Date.now() - activeData.nowTime < 300) {
|
|
|
+ handleDbClick(m)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ activeData.nowTime = Date.now()
|
|
|
+ activeData.timer = setTimeout(() => {
|
|
|
+ activeData.model = !activeData.model
|
|
|
+ setModelOpen()
|
|
|
+ }, 300)
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {m.type === 'VIDEO' ? (
|
|
|
+ <>
|
|
|
+ <video
|
|
|
+ playsinline="false"
|
|
|
+ muted={m.muted}
|
|
|
+ preload="auto"
|
|
|
+ class="player"
|
|
|
+ data-vid={m.id}
|
|
|
+ src={m.content}
|
|
|
+ loop={m.loop}
|
|
|
+ autoplay={m.autoPlay}
|
|
|
+ onLoadedmetadata={(e: Event) => {
|
|
|
+ const videoEle = e.target as unknown as HTMLVideoElement
|
|
|
+ m.currentTime = videoEle.currentTime
|
|
|
+ m.duration = videoEle.duration
|
|
|
+ m.videoEle = videoEle
|
|
|
+ m.isprepare = true
|
|
|
+ }}
|
|
|
+ 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)
|
|
|
+ }}
|
|
|
+ onPlay={() => {
|
|
|
+ // 播放
|
|
|
+ m.paused = false
|
|
|
+ console.log('播放')
|
|
|
+ setModelOpen()
|
|
|
+ // 第一次播放
|
|
|
+ if (m.muted) {
|
|
|
+ m.muted = false
|
|
|
+ m.autoPlay = false
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ onPause={() => {
|
|
|
+ //暂停
|
|
|
+ clearTimeout(activeData.timer)
|
|
|
+ m.paused = true
|
|
|
+ }}
|
|
|
+ onEnded={() => handleEnded(m)}
|
|
|
+ >
|
|
|
+ <source src={m.content} type="video/mp4" />
|
|
|
+ </video>
|
|
|
+ {m.muted && (
|
|
|
+ <div class={styles.loadWrap}>
|
|
|
+ <Vue3Lottie animationData={playLoadData}></Vue3Lottie>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ <div
|
|
|
+ style={{ transform: activeData.model ? '' : 'translateY(100%)' }}
|
|
|
+ class={styles.bottomFixedContainer}
|
|
|
+ onClick={(e: Event) => {
|
|
|
+ e.stopPropagation()
|
|
|
+ setModelOpen()
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <div style={{ opacity: m.isprepare ? '1' : '0' }}>
|
|
|
<div class={styles.time}>
|
|
|
<span>{getSecondRPM(m.currentTime)}</span>
|
|
|
<span>{getSecondRPM(m.duration)}</span>
|
|
|
</div>
|
|
|
<div class={styles.slider}>
|
|
|
<Slider
|
|
|
- onClick={() => {
|
|
|
- setModelOpen()
|
|
|
- }}
|
|
|
- style={{ display: m.isprepare ? 'block' : 'none' }}
|
|
|
+ onClick={() => setModelOpen()}
|
|
|
buttonSize={16}
|
|
|
- step={0.1}
|
|
|
+ step={1}
|
|
|
modelValue={m.progress}
|
|
|
onUpdate:modelValue={(val: any) => {
|
|
|
+ console.log('val', val)
|
|
|
m.progress = val
|
|
|
handleChangeSlider(m)
|
|
|
}}
|
|
@@ -479,175 +526,168 @@ export default defineComponent({
|
|
|
if (!m.paused) {
|
|
|
m.isDrage = true
|
|
|
}
|
|
|
- handlePaused(e, m)
|
|
|
+ handlePaused(m)
|
|
|
}}
|
|
|
onDragEnd={(e: Event) => {
|
|
|
console.log('结束拖动')
|
|
|
if (m.isDrage) {
|
|
|
m.isDrage = false
|
|
|
- handlePlay(e, m)
|
|
|
+ handlePlay(m)
|
|
|
}
|
|
|
}}
|
|
|
min={0}
|
|
|
max={100}
|
|
|
/>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class={styles.actions}>
|
|
|
- <div class={styles.actionBtn}>
|
|
|
- {m.isprepare ? (
|
|
|
- <>
|
|
|
- {m.paused ? (
|
|
|
- <img
|
|
|
- src={iconplay}
|
|
|
- onClick={(e: Event) => handlePlay(e, m)}
|
|
|
- />
|
|
|
- ) : (
|
|
|
- <img
|
|
|
- src={iconpause}
|
|
|
- onClick={(e: Event) => handlePaused(e, m)}
|
|
|
- />
|
|
|
- )}
|
|
|
- </>
|
|
|
- ) : (
|
|
|
- <Loading color="#fff" />
|
|
|
- )}
|
|
|
+ <div class={styles.actions}>
|
|
|
+ <div class={styles.actionBtn}>
|
|
|
+ {m.isprepare ? (
|
|
|
+ <>
|
|
|
+ {m.paused ? (
|
|
|
+ <img src={iconplay} onClick={(e: Event) => handlePlay(m)} />
|
|
|
+ ) : (
|
|
|
+ <img
|
|
|
+ src={iconpause}
|
|
|
+ onClick={(e: Event) => handlePaused(m)}
|
|
|
+ />
|
|
|
+ )}
|
|
|
+ </>
|
|
|
+ ) : (
|
|
|
+ <Loading color="#fff" />
|
|
|
+ )}
|
|
|
|
|
|
- {m.loop ? (
|
|
|
- <img
|
|
|
- src={iconLoopActive}
|
|
|
- onClick={(e: Event) => {
|
|
|
- e.stopPropagation()
|
|
|
- m.loop = false
|
|
|
- }}
|
|
|
- />
|
|
|
- ) : (
|
|
|
- <img
|
|
|
- src={iconLoop}
|
|
|
- onClick={(e: Event) => {
|
|
|
- e.stopPropagation()
|
|
|
- m.loop = true
|
|
|
- }}
|
|
|
- />
|
|
|
- )}
|
|
|
- </div>
|
|
|
- <div>{m.name}</div>
|
|
|
+ {m.loop ? (
|
|
|
+ <img
|
|
|
+ src={iconLoopActive}
|
|
|
+ onClick={(e: Event) => (m.loop = false)}
|
|
|
+ />
|
|
|
+ ) : (
|
|
|
+ <img src={iconLoop} onClick={(e: Event) => (m.loop = true)} />
|
|
|
+ )}
|
|
|
</div>
|
|
|
+ <div>{m.name}</div>
|
|
|
</div>
|
|
|
- )}
|
|
|
- </Transition>
|
|
|
- </>
|
|
|
- ) : m.type === 'IMG' ? (
|
|
|
- <img src={m.content} />
|
|
|
- ) : (
|
|
|
- <MusicScore
|
|
|
- data-vid={m.id}
|
|
|
- music={m}
|
|
|
- onSetIframe={(el: any) => {
|
|
|
- m.iframeRef = el
|
|
|
- }}
|
|
|
- />
|
|
|
- )}
|
|
|
- </div>
|
|
|
- </>
|
|
|
- </SwipeItem>
|
|
|
- )
|
|
|
- })}
|
|
|
- </Swipe>
|
|
|
+ </div>
|
|
|
+ {/* <Transition name="bottom">
|
|
|
+ {activeData.model && (
|
|
|
+
|
|
|
+ )}
|
|
|
+ </Transition> */}
|
|
|
+ </>
|
|
|
+ ) : m.type === 'IMG' ? (
|
|
|
+ <img src={m.content} />
|
|
|
+ ) : (
|
|
|
+ <MusicScore
|
|
|
+ data-vid={m.id}
|
|
|
+ music={m}
|
|
|
+ onSetIframe={(el: any) => {
|
|
|
+ m.iframeRef = el
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ </>
|
|
|
+ </SwipeItem>
|
|
|
+ )
|
|
|
+ })}
|
|
|
+ </Swipe>
|
|
|
|
|
|
- <Transition name="top">
|
|
|
- {activeData.model && (
|
|
|
- <div class={styles.headerContainer} ref={headeRef}>
|
|
|
- <div class={styles.backBtn} onClick={() => goback()}>
|
|
|
- <Icon name={iconBack} />
|
|
|
- 返回
|
|
|
+ <Transition name="top">
|
|
|
+ {activeData.model && (
|
|
|
+ <div class={styles.headerContainer} ref={headeRef}>
|
|
|
+ <div class={styles.backBtn} onClick={() => goback()}>
|
|
|
+ <Icon name={iconBack} />
|
|
|
+ 返回
|
|
|
+ </div>
|
|
|
+ <div class={styles.menu}>{popupData.tabName}</div>
|
|
|
</div>
|
|
|
- <div class={styles.menu}>{popupData.tabName}</div>
|
|
|
- </div>
|
|
|
- )}
|
|
|
- </Transition>
|
|
|
+ )}
|
|
|
+ </Transition>
|
|
|
|
|
|
- <Transition name="right">
|
|
|
- {activeData.model && (
|
|
|
- <div class={styles.rightFixedBtns}>
|
|
|
- <div
|
|
|
- class={styles.fullBtn}
|
|
|
- onClick={() => {
|
|
|
- clearTimeout(activeData.timer)
|
|
|
- popupData.open = true
|
|
|
- }}
|
|
|
- >
|
|
|
- <img src={iconMenu} />
|
|
|
- <span>知识点</span>
|
|
|
+ <Transition name="right">
|
|
|
+ {activeData.model && (
|
|
|
+ <div class={styles.rightFixedBtns}>
|
|
|
+ <div
|
|
|
+ class={styles.fullBtn}
|
|
|
+ onClick={() => {
|
|
|
+ clearTimeout(activeData.timer)
|
|
|
+ popupData.open = true
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <img src={iconMenu} />
|
|
|
+ <span>知识点</span>
|
|
|
+ </div>
|
|
|
+ {data.isCourse && (
|
|
|
+ <>
|
|
|
+ <div
|
|
|
+ class={[styles.fullBtn, styles.point]}
|
|
|
+ onClick={() => gotoRollCall('student_roll_call')}
|
|
|
+ >
|
|
|
+ <img src={iconDian} />
|
|
|
+ <span>点名</span>
|
|
|
+ </div>
|
|
|
+ <div class={styles.fullBtn} onClick={() => gotoRollCall('sign_out')}>
|
|
|
+ <img src={iconPoint} />
|
|
|
+ <span>签退</span>
|
|
|
+ </div>
|
|
|
+ </>
|
|
|
+ )}
|
|
|
</div>
|
|
|
- {data.isCourse && (
|
|
|
- <>
|
|
|
+ )}
|
|
|
+ </Transition>
|
|
|
+
|
|
|
+ <Transition name="left">
|
|
|
+ {activeData.model && (
|
|
|
+ <div class={styles.leftFixedBtns}>
|
|
|
+ {popupData.activeIndex != 0 && (
|
|
|
<div
|
|
|
- class={[styles.fullBtn, styles.point]}
|
|
|
- onClick={() => gotoRollCall('student_roll_call')}
|
|
|
+ class={[styles.fullBtn, styles.prePoint]}
|
|
|
+ onClick={() => handlePreAndNext('up')}
|
|
|
>
|
|
|
- <img src={iconDian} />
|
|
|
- <span>点名</span>
|
|
|
+ <img src={iconUp} />
|
|
|
+ <span style={{ textAlign: 'center' }}>上一个</span>
|
|
|
</div>
|
|
|
- <div class={styles.fullBtn} onClick={() => gotoRollCall('sign_out')}>
|
|
|
- <img src={iconPoint} />
|
|
|
- <span>签退</span>
|
|
|
+ )}
|
|
|
+ {popupData.activeIndex != data.itemList.length - 1 && (
|
|
|
+ <div class={styles.fullBtn} onClick={() => handlePreAndNext('down')}>
|
|
|
+ <span style={{ textAlign: 'center' }}>下一个</span>
|
|
|
+ <img src={iconDown} />
|
|
|
</div>
|
|
|
- </>
|
|
|
- )}
|
|
|
- </div>
|
|
|
- )}
|
|
|
- </Transition>
|
|
|
-
|
|
|
- <Transition name="left">
|
|
|
- {activeData.model && (
|
|
|
- <div class={styles.leftFixedBtns}>
|
|
|
- {popupData.activeIndex != 0 && (
|
|
|
- <div
|
|
|
- class={[styles.fullBtn, styles.prePoint]}
|
|
|
- onClick={() => handlePreAndNext('up')}
|
|
|
- >
|
|
|
- <img src={iconUp} />
|
|
|
- <span style={{ textAlign: 'center' }}>上一个</span>
|
|
|
- </div>
|
|
|
- )}
|
|
|
- {popupData.activeIndex != data.itemList.length - 1 && (
|
|
|
- <div class={styles.fullBtn} onClick={() => handlePreAndNext('down')}>
|
|
|
- <span style={{ textAlign: 'center' }}>下一个</span>
|
|
|
- <img src={iconDown} />
|
|
|
- </div>
|
|
|
- )}
|
|
|
- </div>
|
|
|
- )}
|
|
|
- </Transition>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ </Transition>
|
|
|
|
|
|
- <Popup
|
|
|
- class={styles.popup}
|
|
|
- overlayClass={styles.overlayClass}
|
|
|
- position="right"
|
|
|
- round
|
|
|
- v-model:show={popupData.open}
|
|
|
- onClose={() => {
|
|
|
- const item = data.itemList[popupData.activeIndex]
|
|
|
- if (item?.type == 'VIDEO') {
|
|
|
- setModelOpen()
|
|
|
- }
|
|
|
- }}
|
|
|
- >
|
|
|
- <Points
|
|
|
- data={data.knowledgePointList}
|
|
|
- tabActive={popupData.tabActive}
|
|
|
- itemActive={popupData.itemActive}
|
|
|
- onHandleSelect={(res: any) => {
|
|
|
- // console.log(res)
|
|
|
- popupData.tabActive = res.tabActive
|
|
|
- popupData.itemActive = res.itemActive
|
|
|
- popupData.tabName = res.tabName
|
|
|
- popupData.open = false
|
|
|
- toggleMaterial()
|
|
|
+ <Popup
|
|
|
+ class={styles.popup}
|
|
|
+ overlayClass={styles.overlayClass}
|
|
|
+ position="right"
|
|
|
+ round
|
|
|
+ v-model:show={popupData.open}
|
|
|
+ onClose={() => {
|
|
|
+ const item = data.itemList[popupData.activeIndex]
|
|
|
+ if (item?.type == 'VIDEO') {
|
|
|
+ setModelOpen()
|
|
|
+ }
|
|
|
}}
|
|
|
- />
|
|
|
- </Popup>
|
|
|
+ >
|
|
|
+ <Points
|
|
|
+ data={data.knowledgePointList}
|
|
|
+ tabActive={popupData.tabActive}
|
|
|
+ itemActive={popupData.itemActive}
|
|
|
+ onHandleSelect={(res: any) => {
|
|
|
+ // console.log(res)
|
|
|
+ popupData.tabActive = res.tabActive
|
|
|
+ popupData.itemActive = res.itemActive
|
|
|
+ popupData.tabName = res.tabName
|
|
|
+ popupData.open = false
|
|
|
+ toggleMaterial()
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </Popup>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
)
|
|
|
}
|