|
@@ -93,16 +93,6 @@ export default defineComponent({
|
|
|
timer: null as any,
|
|
|
item: null as any
|
|
|
})
|
|
|
- watch(
|
|
|
- () => activeData.model,
|
|
|
- () => {
|
|
|
- const videoItem = data.itemList.find((n) => n.id === popupData.itemActive)
|
|
|
- // 阴影切换的时候,具体去切换某个视频的控件
|
|
|
- if (videoItem && videoItem.type === 'VIDEO') {
|
|
|
- videoItem.playModel = activeData.model
|
|
|
- }
|
|
|
- }
|
|
|
- )
|
|
|
// 获取缓存路径
|
|
|
const getCacheFilePath = async (material: any) => {
|
|
|
const res = await promisefiyPostMessage({
|
|
@@ -135,7 +125,6 @@ export default defineComponent({
|
|
|
const getItemList = async () => {
|
|
|
const list: any = []
|
|
|
const browserInfo = browser()
|
|
|
- let _item = null
|
|
|
for (let i = 0; i < data.knowledgePointList.length; i++) {
|
|
|
const item = data.knowledgePointList[i]
|
|
|
const itemLength = item.materialList.length - 1
|
|
@@ -164,7 +153,7 @@ export default defineComponent({
|
|
|
playModel: false,
|
|
|
isprepare: false,
|
|
|
isDrage: false,
|
|
|
- muted: false, // 是否静音
|
|
|
+ muted: false // 是否静音
|
|
|
}
|
|
|
}
|
|
|
list.push({
|
|
@@ -173,18 +162,18 @@ export default defineComponent({
|
|
|
iframeRef: null,
|
|
|
tabName: item.name,
|
|
|
isLast: j === itemLength, // 当前知识点
|
|
|
- autoPlay: false, //加载完成是否自动播放
|
|
|
+ autoPlay: false //加载完成是否自动播放
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
|
|
|
let item: any = null
|
|
|
if (route.query.kId) {
|
|
|
- item = list.find((n: any) => n.id == route.query.kId)
|
|
|
- const _firstIndex = list.findIndex((n: any) => n.id == route.query.kId)
|
|
|
+ item = list.find((n: any) => n.materialId == route.query.kId)
|
|
|
+ const _firstIndex = list.findIndex((n: any) => n.materialId == route.query.kId)
|
|
|
popupData.firstIndex = _firstIndex > -1 ? _firstIndex : 0
|
|
|
}
|
|
|
- item = item ? item : (list[0] || {})
|
|
|
+ item = item ? item : list[0] || {}
|
|
|
if (item) {
|
|
|
popupData.tabName = item.tabName
|
|
|
popupData.tabActive = item.knowledgePointId
|
|
@@ -206,8 +195,18 @@ export default defineComponent({
|
|
|
data.detail = res.data
|
|
|
}
|
|
|
if (Array.isArray(res?.data?.knowledgePointList)) {
|
|
|
+ let index = 0
|
|
|
data.knowledgePointList = res.data.knowledgePointList.map((n: any) => {
|
|
|
- n.index = 0
|
|
|
+ if (Array.isArray(n.materialList)) {
|
|
|
+ n.materialList = n.materialList.map((item: any) => {
|
|
|
+ index++
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ materialId: item.id,
|
|
|
+ id: index + ''
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
return n
|
|
|
})
|
|
|
getItemList()
|
|
@@ -269,6 +268,14 @@ export default defineComponent({
|
|
|
swipeRef.value?.swipeTo(index)
|
|
|
}
|
|
|
}
|
|
|
+ /** 延迟收起模态框 */
|
|
|
+ const setModelOpen = () => {
|
|
|
+ clearTimeout(activeData.timer)
|
|
|
+ closeToast()
|
|
|
+ activeData.timer = setTimeout(() => {
|
|
|
+ activeData.model = false
|
|
|
+ }, 3000)
|
|
|
+ }
|
|
|
// 轮播切换
|
|
|
const handleSwipeChange = (val: any) => {
|
|
|
console.log('轮播切换')
|
|
@@ -279,9 +286,21 @@ export default defineComponent({
|
|
|
popupData.itemActive = item.id
|
|
|
popupData.itemName = item.name
|
|
|
popupData.tabName = item.tabName
|
|
|
- if (item.type == 'SONG'){
|
|
|
+ if (item.type == 'SONG') {
|
|
|
activeData.model = true
|
|
|
}
|
|
|
+ if (item.type === 'VIDEO') {
|
|
|
+ // console.log("🚀 ~ item", item)
|
|
|
+ // 自动播放下一个视频
|
|
|
+ clearTimeout(activeData.timer)
|
|
|
+ closeToast()
|
|
|
+ item.currentTime = 0
|
|
|
+ item.autoPlay = true
|
|
|
+ item.videoEle && (item.videoEle.currentTime = 0)
|
|
|
+ nextTick(() => {
|
|
|
+ item.videoEle?.play()
|
|
|
+ })
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
// 上一个知识点, 下一个知识点
|
|
@@ -332,7 +351,6 @@ export default defineComponent({
|
|
|
// 开始播放
|
|
|
const handlePlay = (e: Event, m: any) => {
|
|
|
e.stopPropagation()
|
|
|
- clearTimeout(m.timer)
|
|
|
closeToast()
|
|
|
m.videoEle?.play()
|
|
|
}
|
|
@@ -350,19 +368,11 @@ export default defineComponent({
|
|
|
const handleEnded = (m: any) => {
|
|
|
// console.log(m)
|
|
|
if (popupData.activeIndex != data.itemList.length - 1) {
|
|
|
- popupData.activeIndex++
|
|
|
+ // popupData.activeIndex++
|
|
|
swipeRef.value?.next()
|
|
|
- const nextItem = data.itemList[popupData.activeIndex]
|
|
|
- if (nextItem.type === 'VIDEO') {
|
|
|
- nextTick(() => {
|
|
|
- // 自动播放下一个视频
|
|
|
- clearTimeout(m.timer)
|
|
|
- closeToast()
|
|
|
- nextItem.videoEle?.play()
|
|
|
- })
|
|
|
- }
|
|
|
+ // const nextItem = data.itemList[popupData.activeIndex]
|
|
|
|
|
|
- console.log('🚀 ~ nextItem', nextItem)
|
|
|
+ // console.log('🚀 ~ nextItem', nextItem)
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -393,6 +403,7 @@ export default defineComponent({
|
|
|
loop={false}
|
|
|
vertical
|
|
|
lazyRender={true}
|
|
|
+ touchable={false}
|
|
|
initialSwipe={popupData.firstIndex}
|
|
|
onChange={handleSwipeChange}
|
|
|
>
|
|
@@ -404,7 +415,6 @@ export default defineComponent({
|
|
|
class={styles.itemDiv}
|
|
|
onClick={() => {
|
|
|
clearTimeout(activeData.timer)
|
|
|
- clearTimeout(m.timer)
|
|
|
if (Date.now() - activeData.nowTime < 300) {
|
|
|
handleDbClick(m)
|
|
|
return
|
|
@@ -412,6 +422,7 @@ export default defineComponent({
|
|
|
activeData.nowTime = Date.now()
|
|
|
activeData.timer = setTimeout(() => {
|
|
|
activeData.model = !activeData.model
|
|
|
+ setModelOpen()
|
|
|
}, 300)
|
|
|
}}
|
|
|
>
|
|
@@ -433,7 +444,6 @@ export default defineComponent({
|
|
|
m.duration = videoEle.duration
|
|
|
m.videoEle = videoEle
|
|
|
m.isprepare = true
|
|
|
- m.playModel = true
|
|
|
console.log('视频准备完成')
|
|
|
}}
|
|
|
onTimeupdate={(e: Event) => {
|
|
@@ -449,14 +459,12 @@ export default defineComponent({
|
|
|
// 播放
|
|
|
m.paused = false
|
|
|
console.log('播放')
|
|
|
- m.timer = setTimeout(() => {
|
|
|
- activeData.model = false
|
|
|
- }, 3000)
|
|
|
+ setModelOpen()
|
|
|
m.muted = false
|
|
|
}}
|
|
|
onPause={() => {
|
|
|
//暂停
|
|
|
- clearTimeout(m.timer)
|
|
|
+ clearTimeout(activeData.timer)
|
|
|
m.paused = true
|
|
|
}}
|
|
|
onEnded={() => handleEnded(m)}
|
|
@@ -546,9 +554,6 @@ export default defineComponent({
|
|
|
}}
|
|
|
/>
|
|
|
)}
|
|
|
- {/* <Transition name="van-fade">
|
|
|
- {activeData.model && <div class={styles.playModel}></div>}
|
|
|
- </Transition> */}
|
|
|
</div>
|
|
|
</>
|
|
|
</SwipeItem>
|
|
@@ -571,7 +576,13 @@ export default defineComponent({
|
|
|
<Transition name="right">
|
|
|
{activeData.model && (
|
|
|
<div class={styles.rightFixedBtns}>
|
|
|
- <div class={styles.fullBtn} onClick={() => (popupData.open = true)}>
|
|
|
+ <div
|
|
|
+ class={styles.fullBtn}
|
|
|
+ onClick={() => {
|
|
|
+ clearTimeout(activeData.timer)
|
|
|
+ popupData.open = true
|
|
|
+ }}
|
|
|
+ >
|
|
|
<img src={iconMenu} />
|
|
|
<span>知识点</span>
|
|
|
</div>
|
|
@@ -622,6 +633,12 @@ export default defineComponent({
|
|
|
position="right"
|
|
|
round
|
|
|
v-model:show={popupData.open}
|
|
|
+ onClose={() => {
|
|
|
+ const item = data.itemList[popupData.activeIndex]
|
|
|
+ if (item?.type == "VIDEO"){
|
|
|
+ setModelOpen()
|
|
|
+ }
|
|
|
+ }}
|
|
|
>
|
|
|
<Points
|
|
|
data={data.knowledgePointList}
|