提交

1

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

@@ -93,17 +93,39 @@ export default defineComponent({
         height: data.height, // 高度 单位 px
         gradients: true, // 是否显示翻页阴影效果
         // display: 'single', //设置单页还是双页
-        when: {
-          turning: function (e: any, page: any, view: any) {
-            console.log('e:', e)
-            console.log('page:', page)
-            console.log('view:', view)
+      })
+      // 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;
+        }, 500);
 
-            // book.turn('page', page.next);
-          }
-        }
+        // 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')) {
+          noanimateClose()
+          // handleClose()
+          // nextTick(() => {
+
+          // });
+
+        }
+        return
+      })
+      // book.bind('turned', (e: any, page: any) => {
+
 
     };
     const getRect = () => {
@@ -161,6 +183,24 @@ export default defineComponent({
         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;
+      }
+      emit('close');
+      setTimeout(() => {
+        bookWrap.style.transition = '';
+        bookWrap.style.transform = '';
+        data.show = false;
+        data.list = [];
+      }, 1000);
+    }
     onMounted(async () => {
       await init();
       listenerMessage('webViewOnResume', () => {
@@ -287,6 +327,9 @@ export default defineComponent({
                                   e.stopPropagation();
                                   handleOpenPlay(item);
                                 }}
+                                onTouchend={(e: TouchEvent) => {
+                                  console.log(e)
+                                }}
                               >
                                 {item.id ? (
                                   <img
@@ -320,9 +363,21 @@ export default defineComponent({
                   </div>
                 </div>
               )}
-            </div>
+              <div class="page">
+                <img
+                  style="width: 100%; height: 100%; object-fit: cover;"
+                  src={props.bookData.coverImg}
+                />
+                {/* <div class={styles.wrap}>
+
+                  <div
+                    class={styles.wrapItem}
+                    style={{ backgroundColor: '#fff' }}></div>
+                </div> */}
+              </div>
+            </div >
           )}
-        </div>
+        </div >
         {showGuide.value ? <CoursewareDetail></CoursewareDetail> : null}
       </div >
     );