提交

1

src/views/courseware-list/component/book/index.tsx

@@ -52,7 +52,7 @@ export default defineComponent({
       lastTime: localStorage.getItem(lastTimeKey)
     });
     const showGuide = ref(false);
-
+    const isend = ref(false)
     const isHandMove = ref(false)
     const handleCreate = (key: string, url: string) => {
       return new Promise((resolve, reject) => {
@@ -87,17 +87,17 @@ export default defineComponent({
         duration: 1000,
         disable: false,
         acceleration: true, // 是否启动硬件加速 如果为触摸设备必须为true
+        // pages: 11, // 页码总数
         elevation: 50, // 转换期间页面的高度
         width: data.width, // 宽度 单位 px
         height: data.height, // 高度 单位 px
         gradients: true, // 是否显示翻页阴影效果
         // display: 'single', //设置单页还是双页
       })
-      book.bind('last', (event: Event, pageObject: any, corner: any) => {
-        // console.log(event, 'last')
-        noanimateClose()
-      });
-      book.bind('start', (event: Event, pageObject: any, corner: any) => {});
+      // book.bind('last', (event: Event, pageObject: any, corner: any) => {
+      //   // console.log(event, 'last')
+      //   noanimateClose()
+      // });
       book.bind('turned', (event: Event, page: any, corner: any) => {
         setTimeout(() => {
           showGuide.value = true;
@@ -115,7 +115,7 @@ export default defineComponent({
       book.bind('turning', (event: Event, page: any, corner: any) => {
         console.log(page, 'page', book.turn('pages'))
         if (page === book.turn('pages')) {
-          noanimateClose()
+          handleClose(false)
           // handleClose()
           // nextTick(() => {
 
@@ -155,6 +155,9 @@ export default defineComponent({
               data.show = true;
               timer = setTimeout(() => {
                 book.turn('page', 2);
+                setTimeout(() => {
+                  showGuide.value = true;
+                }, 1500);
               }, 500);
 
 
@@ -163,30 +166,19 @@ export default defineComponent({
         });
       }
     };
-    const handleClose = () => {
+    const handleClose = (gotoOne = true) => {
+      if (isend.value) {
+        return
+      }
+      isend.value = true
       clearTimeout(timer);
       const bookWrap = document.querySelector(
         '.bookWrap'
       ) as unknown as HTMLElement;
-      book.turn('page', 1);
-      if (bookWrap) {
-        bookWrap.style.transform = data.transform;
+      if (gotoOne) {
+        book.turn('page', 1);
       }
-      emit('close');
-      setTimeout(() => {
-        bookWrap.style.transition = '';
-        bookWrap.style.transform = '';
-        data.show = false;
-        data.list = [];
-      }, 1000);
-    };
 
-    const noanimateClose = () => {
-      clearTimeout(timer);
-      const bookWrap = document.querySelector(
-        '.bookWrap'
-      ) as unknown as HTMLElement;
-      // book.turn('page', 1);
       if (bookWrap) {
         bookWrap.style.transform = data.transform;
       }
@@ -196,8 +188,11 @@ export default defineComponent({
         bookWrap.style.transform = '';
         data.show = false;
         data.list = [];
+        isend.value = false
       }, 1000);
-    }
+    };
+
+
     onMounted(async () => {
       await init();
       listenerMessage('webViewOnResume', () => {
@@ -294,11 +289,13 @@ export default defineComponent({
       return false
     }
     return () => (
-      <div class={[styles.book, data.show ? '' : styles.bookHide]} onClick={handleClose}>
-        <div class={styles.back} onClick={handleClose}>
+      <div class={[styles.book, data.show ? '' : styles.bookHide]} onClick={() => handleClose()}>
+        <div class={styles.back} >
           <img src={icon_back} />
         </div>
-        <div class="bookWrap" style={{ width: data.width + 'px' }} >
+        <div class="bookWrap" style={{ width: data.width + 'px' }} onClick={(e: Event) => {
+          e.stopPropagation()
+        }} >
           {!!data.list.length && (
             <div id="flipbook" class={[data.show && 'animated']}>
               <div class="page">
@@ -354,7 +351,7 @@ export default defineComponent({
                 );
               })}
               {data.list.length % 2 === 1 && (
-                <div class="page">
+                <div class="page" style={{ pointerEvents: 'none' }}>
                   <div class={styles.wrap}>
                     <div class={styles.wrapItem}></div>
                   </div>