|
|
@@ -74,7 +74,7 @@ export default defineComponent({
|
|
|
const activeItem = data.itemList[popupData.activeIndex]
|
|
|
if (activeItem.type != 'VIDEO') return
|
|
|
if (value == 'hidden') {
|
|
|
- isPlay.value = !activeItem.videoEle.paused
|
|
|
+ isPlay.value = !activeItem.videoEle?.paused
|
|
|
togglePlay(activeItem, false)
|
|
|
} else {
|
|
|
// 页面显示,并且
|
|
|
@@ -154,6 +154,7 @@ export default defineComponent({
|
|
|
const activeData = reactive({
|
|
|
nowTime: 0,
|
|
|
model: true, // 遮罩
|
|
|
+ isAnimation: true, // 是否动画
|
|
|
videoBtns: true, // 视频
|
|
|
currentTime: 0,
|
|
|
duration: 0,
|
|
|
@@ -199,7 +200,6 @@ export default defineComponent({
|
|
|
const browserInfo = browser()
|
|
|
for (let i = 0; i < data.knowledgePointList.length; i++) {
|
|
|
const item = data.knowledgePointList[i]
|
|
|
- const itemLength = item.materialList.length - 1
|
|
|
for (let j = 0; j < item.materialList.length; j++) {
|
|
|
const material = item.materialList[j]
|
|
|
//请求本地缓存
|
|
|
@@ -216,7 +216,6 @@ export default defineComponent({
|
|
|
iframeRef: null,
|
|
|
videoEle: null,
|
|
|
tabName: item.name,
|
|
|
- isLast: j === itemLength, // 当前知识点
|
|
|
autoPlay: false, //加载完成是否自动播放
|
|
|
isprepare: false, // 视频是否加载完成
|
|
|
isRender: false // 是否渲染了
|
|
|
@@ -233,9 +232,9 @@ export default defineComponent({
|
|
|
popupData.tabActive = item.knowledgePointId
|
|
|
popupData.itemActive = item.id
|
|
|
popupData.itemName = item.name
|
|
|
- // console.log('🚀 ~ list', list)
|
|
|
nextTick(() => {
|
|
|
data.itemList = list
|
|
|
+ checkedAnimation(popupData.activeIndex)
|
|
|
postMessage({
|
|
|
api: 'courseLoading',
|
|
|
content: {
|
|
|
@@ -367,10 +366,6 @@ export default defineComponent({
|
|
|
try {
|
|
|
playRef.value?.handleOut()
|
|
|
} catch (error) {}
|
|
|
- if (route.query.source == 'my-course') {
|
|
|
- router.back()
|
|
|
- return
|
|
|
- }
|
|
|
postMessage({ api: 'goBack' })
|
|
|
}
|
|
|
|
|
|
@@ -399,8 +394,8 @@ export default defineComponent({
|
|
|
}
|
|
|
}
|
|
|
// 切换素材
|
|
|
- const toggleMaterial = () => {
|
|
|
- const index = data.itemList.findIndex((n: any) => n.id == popupData.itemActive)
|
|
|
+ const toggleMaterial = (itemActive: any) => {
|
|
|
+ const index = data.itemList.findIndex((n: any) => n.id == itemActive)
|
|
|
if (index > -1) {
|
|
|
handleSwipeChange(index)
|
|
|
}
|
|
|
@@ -488,7 +483,7 @@ export default defineComponent({
|
|
|
transform: 'translate3d(100%, 0, -800px) rotateY(120deg)'
|
|
|
}
|
|
|
},
|
|
|
- //风车4
|
|
|
+ // 风车4
|
|
|
{
|
|
|
prev: {
|
|
|
transform: 'translate3d(-50%, 50%, -800px) rotateZ(-14deg)',
|
|
|
@@ -499,7 +494,7 @@ export default defineComponent({
|
|
|
opacity: 0
|
|
|
}
|
|
|
},
|
|
|
- //翻页5
|
|
|
+ // 翻页5
|
|
|
{
|
|
|
prev: {
|
|
|
transform: 'translateZ(-800px) rotate3d(0, -1, 0, 90deg)',
|
|
|
@@ -517,31 +512,63 @@ export default defineComponent({
|
|
|
// 轮播切换
|
|
|
const handleSwipeChange = (index: number) => {
|
|
|
if (popupData.activeIndex == index) return
|
|
|
- popupData.activeIndex = index
|
|
|
handleStop()
|
|
|
clearTimeout(acitveTimer.value)
|
|
|
- acitveTimer.value = setTimeout(() => {
|
|
|
- const item = data.itemList[index]
|
|
|
- if (item) {
|
|
|
- popupData.tabActive = item.knowledgePointId
|
|
|
- popupData.itemActive = item.id
|
|
|
- popupData.itemName = item.name
|
|
|
- popupData.tabName = item.tabName
|
|
|
- if (item.type == 'SONG') {
|
|
|
- activeData.model = true
|
|
|
- }
|
|
|
- if (item.type === 'VIDEO') {
|
|
|
- // 自动播放下一个视频
|
|
|
- clearTimeout(activeData.timer)
|
|
|
- closeToast()
|
|
|
- item.autoPlay = true
|
|
|
- nextTick(() => {
|
|
|
- item.videoEle?.play()
|
|
|
- console.error(item.videoEle)
|
|
|
- })
|
|
|
+ const oldIndex = popupData.activeIndex
|
|
|
+ checkedAnimation(popupData.activeIndex, index)
|
|
|
+ popupData.activeIndex = index
|
|
|
+
|
|
|
+ acitveTimer.value = setTimeout(
|
|
|
+ () => {
|
|
|
+ const item = data.itemList[index]
|
|
|
+ if (item) {
|
|
|
+ popupData.tabActive = item.knowledgePointId
|
|
|
+ popupData.itemActive = item.id
|
|
|
+ popupData.itemName = item.name
|
|
|
+ popupData.tabName = item.tabName
|
|
|
+ if (item.type == 'SONG') {
|
|
|
+ activeData.model = true
|
|
|
+ }
|
|
|
+ if (item.type === 'VIDEO') {
|
|
|
+ // 自动播放下一个视频
|
|
|
+ clearTimeout(activeData.timer)
|
|
|
+ closeToast()
|
|
|
+ item.autoPlay = true
|
|
|
+ nextTick(() => {
|
|
|
+ item.videoEle?.play()
|
|
|
+ })
|
|
|
+ }
|
|
|
}
|
|
|
+ requestAnimationFrame(() => {
|
|
|
+ const _effectIndex = effectIndex.value + 1
|
|
|
+ effectIndex.value = _effectIndex >= effects.length - 1 ? 0 : _effectIndex
|
|
|
+ })
|
|
|
+ },
|
|
|
+ activeData.isAnimation ? 800 : 0
|
|
|
+ )
|
|
|
+ }
|
|
|
+
|
|
|
+ /** 是否有转场动画 */
|
|
|
+ const checkedAnimation = (index: number, nextIndex?: number) => {
|
|
|
+ const item = data.itemList[index]
|
|
|
+ const nextItem = data.itemList[nextIndex!]
|
|
|
+ if (nextItem) {
|
|
|
+ if (nextItem.knowledgePointId != item.knowledgePointId) {
|
|
|
+ activeData.isAnimation = true
|
|
|
+ return
|
|
|
}
|
|
|
- }, 800)
|
|
|
+ const videoEle = item.videoEle
|
|
|
+ const nextVideo = nextItem.videoEle
|
|
|
+ if (videoEle && videoEle.duration < 8 && index < nextIndex!) {
|
|
|
+ activeData.isAnimation = false
|
|
|
+ } else if (nextVideo && nextVideo.duration < 8 && index > nextIndex!) {
|
|
|
+ activeData.isAnimation = false
|
|
|
+ } else {
|
|
|
+ activeData.isAnimation = true
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ activeData.isAnimation = item?.adviseStudyTimeSecond < 8 ? false : true
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
// 上一个知识点, 下一个知识点
|
|
|
@@ -579,13 +606,18 @@ export default defineComponent({
|
|
|
return isRender ? (
|
|
|
<div
|
|
|
key={'index' + mIndex}
|
|
|
- class={[styles.itemDiv, popupData.activeIndex === mIndex && styles.itemActive]}
|
|
|
+ class={[
|
|
|
+ styles.itemDiv,
|
|
|
+ popupData.activeIndex === mIndex && styles.itemActive,
|
|
|
+ activeData.isAnimation && styles.acitveAnimation,
|
|
|
+ Math.abs(popupData.activeIndex - mIndex) < 2 ? styles.show : styles.hide
|
|
|
+ ]}
|
|
|
style={
|
|
|
mIndex < popupData.activeIndex
|
|
|
? effects[effectIndex.value].prev
|
|
|
: mIndex > popupData.activeIndex
|
|
|
? effects[effectIndex.value].next
|
|
|
- : effects[effectIndex.value].current
|
|
|
+ : {}
|
|
|
}
|
|
|
onClick={(e: Event) => {
|
|
|
e.stopPropagation()
|
|
|
@@ -646,6 +678,7 @@ export default defineComponent({
|
|
|
<img src={m.content} />
|
|
|
) : (
|
|
|
<MusicScore
|
|
|
+ activeModel={activeData.model}
|
|
|
data-vid={m.id}
|
|
|
music={m}
|
|
|
onSetIframe={(el: any) => {
|
|
|
@@ -739,18 +772,14 @@ export default defineComponent({
|
|
|
<div
|
|
|
class={styles.menu}
|
|
|
onClick={() => {
|
|
|
- if (showIndex.value > 0) {
|
|
|
- effectIndex.value =
|
|
|
- effectIndex.value < effects.length - 1 ? effectIndex.value + 1 : 0
|
|
|
- } else {
|
|
|
- showIndex.value += 1
|
|
|
- }
|
|
|
+ const _effectIndex = effectIndex.value + 1
|
|
|
+ effectIndex.value = _effectIndex >= effects.length - 1 ? 0 : _effectIndex
|
|
|
setModelOpen()
|
|
|
}}
|
|
|
>
|
|
|
- {popupData.tabName} {showIndex.value > 0 ? `动画${effectIndex.value}` : ''}
|
|
|
+ {popupData.tabName}
|
|
|
</div>
|
|
|
- {data.isCourse && <PlayRecordTime ref={playRef} list={data.itemList} />}
|
|
|
+ {data.isCourse && <PlayRecordTime ref={playRef} list={data.knowledgePointList} />}
|
|
|
</div>
|
|
|
|
|
|
<Popup
|
|
|
@@ -771,12 +800,8 @@ export default defineComponent({
|
|
|
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()
|
|
|
+ toggleMaterial(res.itemActive)
|
|
|
}}
|
|
|
/>
|
|
|
</Popup>
|
