Merge branch 'guide'

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

@@ -53,10 +53,11 @@ export default defineComponent({
       height: 0,
       transform: '',
       list: [] as any[][],
-      lastTime: localStorage.getItem(lastTimeKey)
+      lastTime: localStorage.getItem(lastTimeKey),
+      isClick: false
     });
     const showGuide = ref(false);
-
+    const isend = ref(false)
     const isHandMove = ref(false)
     const handleCreate = (key: string, url: string) => {
       return new Promise((resolve, reject) => {
@@ -91,28 +92,62 @@ 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('start', (event: Event, pageObject: any, corner: any) => {
+        // console.log(event, 'last', pageObject.next)
+        if (corner == 'tl' || corner == 'tr') {
+          event.preventDefault();
+
+        }
+        if (data.isClick) {
+          nextTick(() => {
+            data.isClick = false
+            console.log(corner, 'corner')
+            if (corner == 'tl' || corner == 'tr') {
+              event.preventDefault();
+
+            } else {
+              book.turn('page', pageObject.next);
+            }
 
+          })
+        }
       });
       book.bind('turned', (event: Event, page: any, corner: any) => {
         setTimeout(() => {
           showGuide.value = true;
         }, 500);
+
+        // if (page + 1 === book.turn('pages')) {
+        //   // noanimateClose()
+        //   handleClose()
+        //   // nextTick(() => {
+
+        //   // });
+        // }
+      });
+
+      book.bind('turning', (event: Event, page: any, corner: any) => {
+        // console.log(page, 'page', book.turn('pages'))
         if (page === book.turn('pages')) {
-          handleClose()
+          handleClose(false)
+          // handleClose()
           // nextTick(() => {
 
           // });
+
         }
-      });
+        return
+      })
       // book.bind('turned', (e: any, page: any) => {
 
+
       // });
     };
     const getRect = () => {
@@ -142,18 +177,30 @@ export default defineComponent({
               data.show = true;
               timer = setTimeout(() => {
                 book.turn('page', 2);
+                setTimeout(() => {
+                  showGuide.value = true;
+                }, 1500);
               }, 500);
+
+
             });
           });
         });
       }
     };
-    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 (gotoOne) {
+        book.turn('page', 1);
+      }
+
       if (bookWrap) {
         bookWrap.style.transform = data.transform;
       }
@@ -163,8 +210,11 @@ export default defineComponent({
         bookWrap.style.transform = '';
         data.show = false;
         data.list = [];
+        isend.value = false
       }, 1000);
     };
+
+
     onMounted(async () => {
       await init();
       listenerMessage('webViewOnResume', () => {
@@ -263,16 +313,16 @@ export default defineComponent({
       return false
     }
     return () => (
-      <div
-        class={[styles.book, data.show ? '' : styles.bookHide]}
-        onClick={handleClose}>
-        <div class={styles.back}>
+      <div class={[styles.book, data.show ? '' : styles.bookHide]} onClick={() => handleClose()} onTouchmove={() => {
+        console.log('sdfds')
+        data.isClick = true
+      }}>
+        <div class={styles.back} >
           <img src={icon_back} />
         </div>
-        <div
-          class="bookWrap"
-          style={{ width: data.width + 'px' }}
-          onClick={(e: Event) => e.stopPropagation()}>
+        <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">
@@ -298,6 +348,9 @@ export default defineComponent({
                                   e.stopPropagation();
                                   handleOpenPlay(item);
                                 }}
+                                onTouchend={(e: TouchEvent) => {
+                                  console.log(e)
+                                }}
                               >
                                 {item.id ? (
                                   <img
@@ -325,22 +378,27 @@ 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>
                 </div>
               )}
               <div class="page">
-                <div class={styles.wrap}>
+                <img
+                  style="width: 100%; height: 100%; object-fit: cover;"
+                  src={props.bookData.coverImg}
+                />
+                {/* <div class={styles.wrap}>
+
                   <div
                     class={styles.wrapItem}
-                    style={{ backgroundColor: '#FFD8A1' }}></div>
-                </div>
+                    style={{ backgroundColor: '#fff' }}></div>
+                </div> */}
               </div>
-            </div>
+            </div >
           )}
-        </div>
+        </div >
         {showGuide.value ? <CoursewareDetail></CoursewareDetail> : null}
       </div >
     );