|
|
@@ -1,4 +1,4 @@
|
|
|
-import { Button, Icon, Popup, Swipe, SwipeItem, Tab, Tabs } from 'vant'
|
|
|
+import { Button, Icon, Popup, Slider, Swipe, SwipeItem, Tab, Tabs } from 'vant'
|
|
|
import {
|
|
|
defineComponent,
|
|
|
onMounted,
|
|
|
@@ -7,7 +7,8 @@ import {
|
|
|
onUnmounted,
|
|
|
ref,
|
|
|
watch,
|
|
|
- Transition
|
|
|
+ Transition,
|
|
|
+ computed
|
|
|
} from 'vue'
|
|
|
import iconBack from './image/back.svg'
|
|
|
import styles from './index.module.less'
|
|
|
@@ -16,7 +17,7 @@ import 'plyr/dist/plyr.css'
|
|
|
import request from '@/helpers/request'
|
|
|
import { state } from '@/state'
|
|
|
import { useRoute } from 'vue-router'
|
|
|
-import { postMessage } from '@/helpers/native-message'
|
|
|
+import { listenerMessage, postMessage } from '@/helpers/native-message'
|
|
|
import MusicScore from './component/musicScore'
|
|
|
import iconMenu from './image/icon-menu.svg'
|
|
|
import iconDian from './image/icon-dian.svg'
|
|
|
@@ -46,15 +47,41 @@ export default defineComponent({
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
+ handleInit()
|
|
|
|
|
|
const route = useRoute()
|
|
|
const data = reactive({
|
|
|
detail: null,
|
|
|
active: '',
|
|
|
+ itemActive: '',
|
|
|
knowledgePointList: [] as any,
|
|
|
showHead: true,
|
|
|
players: [] as any
|
|
|
})
|
|
|
+ const activeData = reactive({
|
|
|
+ model: true, // 遮罩
|
|
|
+ currentTime: 10
|
|
|
+ })
|
|
|
+ const itemList = computed(() => {
|
|
|
+ const list: any = []
|
|
|
+ for (let i = 0; i < data.knowledgePointList.length; i++) {
|
|
|
+ const item = data.knowledgePointList[i]
|
|
|
+ for (let j = 0; j < item.materialList.length; j++) {
|
|
|
+ const material = item.materialList[j]
|
|
|
+ if (popupData.itemActive === '') {
|
|
|
+ popupData.tabActive = material.knowledgePointId
|
|
|
+ popupData.tabName = item.name
|
|
|
+ popupData.itemActive = material.id
|
|
|
+ popupData.itemName = material.name
|
|
|
+ }
|
|
|
+ list.push({
|
|
|
+ ...material
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // console.log('🚀 ~ list', list)
|
|
|
+ return list
|
|
|
+ })
|
|
|
const getDetail = async () => {
|
|
|
try {
|
|
|
const res: any = await request.get(
|
|
|
@@ -69,12 +96,7 @@ export default defineComponent({
|
|
|
return n
|
|
|
})
|
|
|
}
|
|
|
- console.log('数据加载完成')
|
|
|
} catch (error) {}
|
|
|
- nextTick(() => {
|
|
|
- console.log('开始加载视频')
|
|
|
- videoInit()
|
|
|
- })
|
|
|
}
|
|
|
const videoInit = () => {
|
|
|
console.log(document.querySelectorAll('.player'))
|
|
|
@@ -114,9 +136,32 @@ export default defineComponent({
|
|
|
})
|
|
|
console.log('🚀 ~ player', data.players)
|
|
|
}
|
|
|
+ const testFile = ref('')
|
|
|
onMounted(() => {
|
|
|
- handleInit()
|
|
|
+ // const o = new ActiveXObject("wscript.shell")
|
|
|
getDetail()
|
|
|
+ postMessage(
|
|
|
+ {
|
|
|
+ api: 'getCourseFilePath',
|
|
|
+ content: {
|
|
|
+ url: 'https://daya.ks3-cn-beijing.ksyuncs.com/01/1672976208474.jpg',
|
|
|
+ materialId: '1610610237357969409',
|
|
|
+ updateTime: '2023-01-04 20:12:58',
|
|
|
+ type: 'VIDEO' // SONG VIDEO IMAGE
|
|
|
+ }
|
|
|
+ },
|
|
|
+ (res) => {
|
|
|
+ if (res?.content) {
|
|
|
+ testFile.value = 'customScheme://' + res.content.localPath
|
|
|
+ fetch(testFile.value)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ )
|
|
|
+ })
|
|
|
+ listenerMessage('getCourseFilePath', (res) => {
|
|
|
+ if (res?.content) {
|
|
|
+ testFile.value = res.content.localPath
|
|
|
+ }
|
|
|
})
|
|
|
// 返回
|
|
|
const goback = () => {
|
|
|
@@ -157,27 +202,28 @@ export default defineComponent({
|
|
|
|
|
|
const popupData = reactive({
|
|
|
open: false,
|
|
|
- active: ''
|
|
|
+ activeIndex: 0,
|
|
|
+ tabActive: '',
|
|
|
+ tabName: '',
|
|
|
+ itemActive: '',
|
|
|
+ itemName: ''
|
|
|
})
|
|
|
- // 监听切换
|
|
|
- watch(
|
|
|
- () => popupData.active,
|
|
|
- () => {
|
|
|
- console.log(data.active, '监听切换')
|
|
|
- handleChange()
|
|
|
- const knowledge = data.knowledgePointList.find((n: any) => n.id === data.active)
|
|
|
- if (knowledge && knowledge?.materialList[knowledge.index]) {
|
|
|
- // 如果是曲谱,隐藏头部
|
|
|
- if (knowledge.materialList[knowledge.index]?.type === 'SONG') {
|
|
|
- data.showHead = false
|
|
|
- return
|
|
|
- }
|
|
|
- }
|
|
|
- data.showHead = true
|
|
|
- }
|
|
|
- )
|
|
|
+ // 切换素材
|
|
|
+ const toggleMaterial = () => {
|
|
|
+ const index = itemList.value.findIndex((n: any) => n.id == popupData.itemActive)
|
|
|
+ popupData.activeIndex = index
|
|
|
+ console.log('🚀 ~ popupData', popupData.activeIndex)
|
|
|
+ }
|
|
|
+ // 上一个知识点, 下一个知识点
|
|
|
+ const handlePreAndNext = (type: string) => {
|
|
|
+ console.log(popupData.tabActive)
|
|
|
+ const tabIndex = data.knowledgePointList.findIndex((n: any) => n.id == popupData.tabActive)
|
|
|
+ const itemIndex = itemList.value.findIndex((n: any) => n.id == popupData.itemActive)
|
|
|
+
|
|
|
+ console.log("🚀 ~ tab", tabIndex, itemIndex)
|
|
|
+ }
|
|
|
|
|
|
- // 去点名
|
|
|
+ // 去点名,签退
|
|
|
const gotoRollCall = (pageTag: string) => {
|
|
|
postMessage({
|
|
|
api: 'open_app_page',
|
|
|
@@ -191,130 +237,146 @@ export default defineComponent({
|
|
|
}
|
|
|
return () => (
|
|
|
<div class={styles.coursewarePlay}>
|
|
|
+ <Swipe
|
|
|
+ style={{ height: '100vh' }}
|
|
|
+ showIndicators={false}
|
|
|
+ loop={false}
|
|
|
+ initialSwipe={popupData.activeIndex}
|
|
|
+ vertical
|
|
|
+ lazyRender={true}
|
|
|
+ onChange={(val: any) => {
|
|
|
+ // item.index = val
|
|
|
+ // popupData.itemActive = `${item.id}-${item?.materialList?.[item.index]?.id}`
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {itemList.value.map((m: any) => {
|
|
|
+ return (
|
|
|
+ <SwipeItem>
|
|
|
+ {m.type === 'VIDEO' ? (
|
|
|
+ <div class={styles.videoItem}>
|
|
|
+ <video class="player">
|
|
|
+ <source src={m.content} type="video/mp4" />
|
|
|
+ </video>
|
|
|
+ </div>
|
|
|
+ ) : m.type === 'IMG' ? (
|
|
|
+ <div class={styles.imgItem}>
|
|
|
+ <img src={m.content} />
|
|
|
+ </div>
|
|
|
+ ) : (
|
|
|
+ <div class={styles.songItem}>
|
|
|
+ <MusicScore music={m} />
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ </SwipeItem>
|
|
|
+ )
|
|
|
+ })}
|
|
|
+ </Swipe>
|
|
|
+ <div
|
|
|
+ class={styles.playModel}
|
|
|
+ onClick={() => {
|
|
|
+ activeData.model = !activeData.model
|
|
|
+ }}
|
|
|
+ ></div>
|
|
|
<Transition name="top">
|
|
|
- {data.showHead && (
|
|
|
+ {activeData.model && (
|
|
|
<div class={styles.headerContainer}>
|
|
|
<div class={styles.backBtn} onClick={() => goback()}>
|
|
|
<Icon name={iconBack} />
|
|
|
返回
|
|
|
</div>
|
|
|
- <div class={styles.menu}>
|
|
|
- <Tabs
|
|
|
- v-model:active={data.active}
|
|
|
- ellipsis={false}
|
|
|
- onChange={() => {
|
|
|
- const knowledge = data.knowledgePointList.find((_: any) => _.id === data.active)
|
|
|
- popupData.active = `${data.active}-${
|
|
|
- knowledge?.materialList?.[knowledge.index]?.id
|
|
|
- }`
|
|
|
- }}
|
|
|
- >
|
|
|
- {{
|
|
|
- default: () => {
|
|
|
- return data.knowledgePointList.map((n: any) => {
|
|
|
- return <Tab title={n.name} name={n.id}></Tab>
|
|
|
- })
|
|
|
- }
|
|
|
- // 'nav-right': () => <div style={{width: '40%'}} class={styles.menuLine}></div>
|
|
|
- }}
|
|
|
- </Tabs>
|
|
|
+ <div class={styles.menu}>{popupData.tabName}</div>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ </Transition>
|
|
|
+
|
|
|
+ <Transition name="right">
|
|
|
+ {activeData.model && (
|
|
|
+ <div class={styles.rightFixedBtns}>
|
|
|
+ <div class={styles.fullBtn} onClick={() => (popupData.open = true)}>
|
|
|
+ <img src={iconMenu} />
|
|
|
+ <span>知识点</span>
|
|
|
</div>
|
|
|
+ {route.query.courseId && (
|
|
|
+ <>
|
|
|
+ <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>
|
|
|
)}
|
|
|
</Transition>
|
|
|
|
|
|
- <Tabs class={styles.tabsContent} animated lazyRender={false} v-model:active={data.active}>
|
|
|
- {data.knowledgePointList.map((item: any) => {
|
|
|
- return (
|
|
|
- <Tab name={item.id}>
|
|
|
- <Swipe
|
|
|
- style={{ height: '100vh' }}
|
|
|
- showIndicators={false}
|
|
|
- loop={false}
|
|
|
- initialSwipe={item.index}
|
|
|
- vertical
|
|
|
- lazyRender={false}
|
|
|
- onChange={(val: any) => {
|
|
|
- item.index = val
|
|
|
- popupData.active = `${item.id}-${item?.materialList?.[item.index]?.id}`
|
|
|
- }}
|
|
|
- >
|
|
|
- {Array.isArray(item?.materialList) &&
|
|
|
- item.materialList.map((m: any) => {
|
|
|
- if (popupData.active === '') {
|
|
|
- popupData.active = `${item.id}-${m.id}`
|
|
|
- console.log('🚀 ~ popupData', popupData)
|
|
|
- }
|
|
|
- return (
|
|
|
- <SwipeItem>
|
|
|
- {m.type === 'VIDEO' ? (
|
|
|
- <div class={styles.videoItem}>
|
|
|
- <video class="player" controls>
|
|
|
- <source src={m.content} type="video/mp4" />
|
|
|
- </video>
|
|
|
- </div>
|
|
|
- ) : m.type === 'IMG' ? (
|
|
|
- <div class={styles.imgItem}>
|
|
|
- <img src={m.content} />
|
|
|
- </div>
|
|
|
- ) : (
|
|
|
- <div class={styles.songItem}>
|
|
|
- <MusicScore music={m} />
|
|
|
- </div>
|
|
|
- )}
|
|
|
- </SwipeItem>
|
|
|
- )
|
|
|
- })}
|
|
|
- </Swipe>
|
|
|
- </Tab>
|
|
|
- )
|
|
|
- })}
|
|
|
- </Tabs>
|
|
|
- <div class={styles.rightFixedBtns}>
|
|
|
- <div class={styles.fullBtn} onClick={() => (popupData.open = true)}>
|
|
|
- <img src={iconMenu} />
|
|
|
- <span>知识点</span>
|
|
|
- </div>
|
|
|
- {route.query.courseId && (
|
|
|
- <>
|
|
|
- <div
|
|
|
- class={[styles.fullBtn, styles.point]}
|
|
|
- onClick={() => gotoRollCall('student_roll_call')}
|
|
|
- >
|
|
|
- <img src={iconDian} />
|
|
|
- <span>点名</span>
|
|
|
+ <Transition name="left">
|
|
|
+ {activeData.model && (
|
|
|
+ <div class={styles.leftFixedBtns}>
|
|
|
+ <div class={[styles.fullBtn, styles.prePoint]} onClick={() => handlePreAndNext('up')}>
|
|
|
+ <span style={{ textAlign: 'center' }}>
|
|
|
+ 上一
|
|
|
+ <br />
|
|
|
+ 知识点
|
|
|
+ </span>
|
|
|
</div>
|
|
|
- <div class={styles.fullBtn} onClick={() => gotoRollCall('sign_out')}>
|
|
|
- <img src={iconPoint} />
|
|
|
- <span>签退</span>
|
|
|
+ <div class={styles.fullBtn} onClick={() => handlePreAndNext('down')}>
|
|
|
+ <span style={{ textAlign: 'center' }}>
|
|
|
+ 下一
|
|
|
+ <br />
|
|
|
+ 知识点
|
|
|
+ </span>
|
|
|
</div>
|
|
|
- </>
|
|
|
+ </div>
|
|
|
)}
|
|
|
- </div>
|
|
|
- <div class={styles.leftFixedBtns}>
|
|
|
- <div class={[styles.fullBtn , styles.prePoint]} >
|
|
|
- <span style={{textAlign: 'center'}}>上一<br />知识点</span>
|
|
|
- </div>
|
|
|
- <div class={styles.fullBtn} >
|
|
|
- <span style={{textAlign: 'center'}}>下一<br />知识点</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </Transition>
|
|
|
+
|
|
|
+ <Transition name="bottom">
|
|
|
+ {activeData.model && (
|
|
|
+ <div class={styles.bottomFixedContainer}>
|
|
|
+ <div class={styles.time}>
|
|
|
+ <span>03:12</span>
|
|
|
+ <span>10:12</span>
|
|
|
+ </div>
|
|
|
+ <Slider
|
|
|
+ buttonSize={16}
|
|
|
+ style={{ margin: '8px 0' }}
|
|
|
+ v-model:modelValue={activeData.currentTime}
|
|
|
+ min={0}
|
|
|
+ max={100}
|
|
|
+ />
|
|
|
+ <div class={styles.actions}>
|
|
|
+ <div>
|
|
|
+ <Icon name="play-circle" />
|
|
|
+ <Icon name="pause-circle" />
|
|
|
+ </div>
|
|
|
+ <div>长笛的呼吸练习</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ </Transition>
|
|
|
<Popup
|
|
|
class={styles.popup}
|
|
|
overlayClass={styles.overlayClass}
|
|
|
- position="left"
|
|
|
+ position="right"
|
|
|
+ round
|
|
|
v-model:show={popupData.open}
|
|
|
>
|
|
|
<Points
|
|
|
data={data.knowledgePointList}
|
|
|
- active={popupData.active}
|
|
|
+ tabActive={popupData.tabActive}
|
|
|
+ itemActive={popupData.itemActive}
|
|
|
onHandleSelect={(res: any) => {
|
|
|
- data.active = res.id
|
|
|
- const knowledge = data.knowledgePointList.find((n: any) => n.id === res.id)
|
|
|
- // console.log(res,knowledge)
|
|
|
- knowledge && (knowledge.index = res.index)
|
|
|
- popupData.active = res.active
|
|
|
+ // console.log(res)
|
|
|
+ popupData.tabActive = res.tabActive
|
|
|
+ popupData.itemActive = res.itemActive
|
|
|
popupData.open = false
|
|
|
+ toggleMaterial()
|
|
|
}}
|
|
|
/>
|
|
|
</Popup>
|
mo
