|
|
@@ -10,6 +10,7 @@ import {
|
|
|
import styles from './index.module.less';
|
|
|
import icon_back from '../../image/icon_back.svg';
|
|
|
import icon_play from '../../image/icon_class.png';
|
|
|
+import pre from '../../image/pre.png'
|
|
|
import { useRouter } from 'vue-router';
|
|
|
import { listenerMessage, postMessage } from '@/helpers/native-message';
|
|
|
import { showToast } from 'vant';
|
|
|
@@ -57,8 +58,9 @@ export default defineComponent({
|
|
|
isClick: false
|
|
|
});
|
|
|
const showGuide = ref(false);
|
|
|
- const isend = ref(false);
|
|
|
- const isHandMove = ref(false);
|
|
|
+ const isend = ref(false)
|
|
|
+ const step = ref(0)
|
|
|
+ const CoursewareDetailRef = ref()
|
|
|
const handleCreate = (key: string, url: string) => {
|
|
|
return new Promise((resolve, reject) => {
|
|
|
const _s = document.head.querySelector(`script[data-key="${key}"]`);
|
|
|
@@ -79,6 +81,7 @@ export default defineComponent({
|
|
|
// await handleCreate('turn', '/book/turn.js');
|
|
|
console.log('初始化完成');
|
|
|
};
|
|
|
+ const isFirest = ref(true)
|
|
|
let book: any = null;
|
|
|
let timer: any = null;
|
|
|
const handleBook = () => {
|
|
|
@@ -90,7 +93,7 @@ export default defineComponent({
|
|
|
book.turn({
|
|
|
autoCenter: true,
|
|
|
duration: 1000,
|
|
|
- disable: false,
|
|
|
+ disabled: true,
|
|
|
acceleration: true, // 是否启动硬件加速 如果为触摸设备必须为true
|
|
|
// pages: 11, // 页码总数
|
|
|
elevation: 50, // 转换期间页面的高度
|
|
|
@@ -98,28 +101,44 @@ export default defineComponent({
|
|
|
height: data.height, // 高度 单位 px
|
|
|
gradients: true // 是否显示翻页阴影效果
|
|
|
// display: 'single', //设置单页还是双页
|
|
|
- });
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
book.bind('start', (event: Event, pageObject: any, corner: any) => {
|
|
|
// console.log(event, 'last', pageObject.next)
|
|
|
+ // if (isFirest.value) {
|
|
|
+ // console.log('第一次进来禁用', pageObject)
|
|
|
+ // isFirest.value = false
|
|
|
+ // book.turn('disabled', true);
|
|
|
+
|
|
|
+ // }
|
|
|
if (corner == 'tl' || corner == 'tr') {
|
|
|
event.preventDefault();
|
|
|
}
|
|
|
if (data.isClick) {
|
|
|
nextTick(() => {
|
|
|
- data.isClick = false;
|
|
|
- console.log(corner, 'corner');
|
|
|
+ data.isClick = false
|
|
|
if (corner == 'tl' || corner == 'tr') {
|
|
|
event.preventDefault();
|
|
|
} else {
|
|
|
book.turn('page', pageObject.next);
|
|
|
}
|
|
|
- });
|
|
|
+ })
|
|
|
}
|
|
|
});
|
|
|
book.bind('turned', (event: Event, page: any, corner: any) => {
|
|
|
- setTimeout(() => {
|
|
|
+ // setTimeout(() => {
|
|
|
+ // }, 1000);
|
|
|
+
|
|
|
+ // console.log(page - 1, 'page')
|
|
|
+
|
|
|
+ // const index = (page - 1)
|
|
|
+ // console.log(data.list[index * step.value], data.list)
|
|
|
+
|
|
|
+ nextTick(() => {
|
|
|
showGuide.value = true;
|
|
|
- }, 500);
|
|
|
+ })
|
|
|
+
|
|
|
|
|
|
// if (page + 1 === book.turn('pages')) {
|
|
|
// // noanimateClose()
|
|
|
@@ -174,9 +193,6 @@ export default defineComponent({
|
|
|
data.show = true;
|
|
|
timer = setTimeout(() => {
|
|
|
book.turn('page', 2);
|
|
|
- setTimeout(() => {
|
|
|
- showGuide.value = true;
|
|
|
- }, 1500);
|
|
|
}, 500);
|
|
|
});
|
|
|
});
|
|
|
@@ -184,6 +200,8 @@ export default defineComponent({
|
|
|
}
|
|
|
};
|
|
|
const handleClose = (gotoOne = true) => {
|
|
|
+ showGuide.value = false
|
|
|
+ // book.turn('disabled', false);
|
|
|
if (isend.value) {
|
|
|
return;
|
|
|
}
|
|
|
@@ -214,23 +232,23 @@ export default defineComponent({
|
|
|
listenerMessage('webViewOnResume', () => {
|
|
|
data.lastTime = localStorage.getItem(lastTimeKey);
|
|
|
});
|
|
|
+
|
|
|
});
|
|
|
const getList = () => {
|
|
|
if (!props.bookData?.lessonList) return;
|
|
|
- const step = Math.floor((document.body.clientHeight * 0.8 - 40) / 50);
|
|
|
- console.log('🚀 ~ step:', step);
|
|
|
+ step.value = Math.floor((document.body.clientHeight * 0.8 - 40) / 50);
|
|
|
const list = [];
|
|
|
let listItem = [] as any[];
|
|
|
for (let i = 0; i < props.bookData.lessonList.length; i++) {
|
|
|
const item = props.bookData.lessonList[i];
|
|
|
- if (listItem.length >= step) {
|
|
|
+ if (listItem.length >= step.value) {
|
|
|
list.push([...listItem]);
|
|
|
listItem = [{ name: item.name }];
|
|
|
} else {
|
|
|
listItem.push({ name: item.name });
|
|
|
}
|
|
|
for (let j = 0; j < item.knowledgeList.length; j++) {
|
|
|
- if (listItem.length >= step) {
|
|
|
+ if (listItem.length >= step.value) {
|
|
|
list.push([...listItem]);
|
|
|
listItem = [item.knowledgeList[j]];
|
|
|
} else {
|
|
|
@@ -250,6 +268,7 @@ export default defineComponent({
|
|
|
() => props.show,
|
|
|
() => {
|
|
|
if (props.show) {
|
|
|
+
|
|
|
getList();
|
|
|
nextTick(() => {
|
|
|
handleBook();
|
|
|
@@ -304,8 +323,20 @@ export default defineComponent({
|
|
|
const isStartAnimate = (item: any) => {
|
|
|
// console.log(item) item.name.length > 9 ? true :
|
|
|
|
|
|
- return false;
|
|
|
- };
|
|
|
+ return false
|
|
|
+ }
|
|
|
+
|
|
|
+ const changeShowGuide = (flag: boolean) => {
|
|
|
+ showGuide.value = flag
|
|
|
+ if (flag) {
|
|
|
+ console.log('changeShowGuide禁用')
|
|
|
+ // book.turn('disabled', true);
|
|
|
+ } else {
|
|
|
+
|
|
|
+ console.log('changeShowGuide取消禁用')
|
|
|
+ // book.turn('disabled', false);
|
|
|
+ }
|
|
|
+ }
|
|
|
return () => (
|
|
|
<div
|
|
|
class={[styles.book, data.show ? '' : styles.bookHide]}
|
|
|
@@ -361,11 +392,14 @@ export default defineComponent({
|
|
|
<div
|
|
|
class={styles.name}
|
|
|
style={{ lineHeight: '20Px' }}>
|
|
|
- {item.name}
|
|
|
- {/* <TheNoticeBar text={item.name} isAnimation={isStartAnimate(item)}></TheNoticeBar> */}
|
|
|
{data.lastTime === item.id && (
|
|
|
- <span class={styles.last}>上次观看</span>
|
|
|
+ <img src={pre} alt="" class={styles.preIcon} />
|
|
|
)}
|
|
|
+
|
|
|
+ <div class={styles.nameText}> {item.name}</div>
|
|
|
+
|
|
|
+ {/* <TheNoticeBar text={item.name} isAnimation={isStartAnimate(item)}></TheNoticeBar> */}
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
</>
|
|
|
@@ -397,9 +431,9 @@ export default defineComponent({
|
|
|
</div>
|
|
|
</div>
|
|
|
)}
|
|
|
- </div>
|
|
|
- {showGuide.value ? <CoursewareDetail></CoursewareDetail> : null}
|
|
|
- </div>
|
|
|
+ </div >
|
|
|
+ {/* {showGuide.value ? <CoursewareDetail onChangeShowGuide={changeShowGuide} ref={CoursewareDetailRef}></CoursewareDetail> : null} */}
|
|
|
+ </div >
|
|
|
);
|
|
|
}
|
|
|
});
|
mo
