提交

1

src/views/courseware-list/component/book/index.module.less

@@ -1,148 +1,154 @@
 .book {
-    position: fixed;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    inset: 0;
-    z-index: 100;
-    padding-top: 10vh;
-
-    .back {
-        position: absolute;
-        left: 41px;
-        top: 24px;
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  inset: 0;
+  z-index: 100;
+  padding-top: 10vh;
+
+  .back {
+    position: absolute;
+    left: 41px;
+    top: 24px;
+  }
+
+  &.bookHide {
+    visibility: hidden;
+    pointer-events: none;
+    opacity: 0;
+  }
+
+  :global {
+    .bookWrap {
+      margin: 0 auto;
     }
 
-    &.bookHide {
-        visibility: hidden;
-        pointer-events: none;
-        opacity: 0;
+    .animated {
+      transition: margin-left 0.2s ease-in-out;
     }
 
-    :global {
-        .bookWrap {
-            margin: 0 auto;
-        }
-
-        .animated {
-            transition: margin-left 0.2s ease-in-out;
-        }
-
-
-        .page {
-            background: white;
-        }
+    .page {
+      background: white;
+    }
 
-        .shadow {
-            box-shadow: 0 0 20px 0 rgba(0, 0, 0, .4);
-        }
+    .shadow {
+      box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.4);
+    }
 
-        .page-wrapper {
-            perspective: 2000px;
-        }
+    .page-wrapper {
+      perspective: 2000px;
     }
+  }
 }
 
 .wrap {
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+  background-color: #ffd8a1;
+  width: calc(100% + 1px);
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 10px;
+    right: 10px;
+    top: 10px;
+    bottom: 10px;
+    background-color: #fff;
+    z-index: 1;
+  }
+
+  .wrapItem {
     position: relative;
+    padding: 20px;
     height: 100%;
     overflow: hidden;
-    background-color: #FFD8A1;
-    width: calc(100% + 1Px);
+    z-index: 2;
+  }
+
+  .item {
+    display: flex;
+    font-size: 14px;
+    font-weight: 600;
+    color: #333;
+    line-height: 20px;
+    padding: 13px 0;
+    word-break: break-all;
+  }
+
+  .des {
+    line-height: 16px;
+    font-size: 12px;
+    font-weight: 400;
+  }
+
+  .icon {
+    width: 20px;
+    height: 20px;
+    margin-right: 6px;
+  }
+
+  .last {
+    font-size: 12px;
+    color: #ff5a56;
+    margin-left: 6px;
+    font-weight: 400;
+  }
+}
 
+:global(.even) {
+  .wrap {
+    left: -1px;
     &::before {
-        content: '';
-        position: absolute;
-        left: 10Px;
-        right: 10Px;
-        top: 10Px;
-        bottom: 10Px;
-        background-color: #fff;
-        z-index: 1;
-    }
-
-    .wrapItem {
-        position: relative;
-        padding: 20Px;
-        height: 100%;
-        overflow: hidden;
-        z-index: 2;
-    }
-
-    .item {
-        display: flex;
-        font-size: 14px;
-        font-weight: 600;
-        color: #333;
-        line-height: 20Px;
-        padding: 13Px 0;
-        word-break: break-all;
+      right: 0;
+      border-radius: 4px 0 0 4px;
     }
 
-    .des {
-        line-height: 16Px;
-        font-size: 12px;
-        font-weight: 400;
-    }
-
-    .icon {
-        width: 20Px;
-        height: 20Px;
-        margin-right: 6Px;
-    }
-
-    .last {
-        font-size: 12Px;
-        color: #FF5A56;
-        margin-left: 6px;
-        font-weight: 400;
-    }
-}
-
-:global(.even) {
-    .wrap {
-        left: -1Px;
-        &::before {
-            right: 0;
-            border-radius: 4Px 0 0 4Px;
-        }
-
-        &::after {
-            content: '';
-            position: absolute;
-            right: 0;
-            top: 0;
-            bottom: 0;
-            width: 24Px;
-            background: linear-gradient(to right,rgba(255, 255, 255, 0) 20% ,rgba(229, 199, 156, .4) 100%);
-            z-index: 3;
-        }
+    &::after {
+      content: '';
+      position: absolute;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      width: 24px;
+      background: linear-gradient(
+        to right,
+        rgba(255, 255, 255, 0) 20%,
+        rgba(229, 199, 156, 0.4) 100%
+      );
+      z-index: 3;
     }
+  }
 }
 
 :global(.odd) {
-    .wrap {
-        left: -1Px;
-        &::before {
-            left: 0;
-            border-radius: 0 4Px 4Px 0;
-        }
-
-        &::after {
-            content: '';
-            position: absolute;
-            left: 0;
-            top: 0;
-            bottom: 0;
-            width: 24Px;
-            background: linear-gradient(to right, rgba(255, 225, 183, .35) 8%, rgba(255, 255, 255, 0) 100%);
-            z-index: 2;
-        }
+  .wrap {
+    left: -1px;
+    &::before {
+      left: 0;
+      border-radius: 0 4px 4px 0;
     }
 
-    .wrapItem {
-        padding-left: 20Px;
-        
+    &::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      width: 24px;
+      background: linear-gradient(
+        to right,
+        rgba(255, 225, 183, 0.35) 8%,
+        rgba(255, 255, 255, 0) 100%
+      );
+      z-index: 2;
     }
-}
+  }
+
+  .wrapItem {
+    padding-left: 20px;
+  }
+}

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

@@ -51,6 +51,8 @@ export default defineComponent({
       lastTime: localStorage.getItem(lastTimeKey)
     });
     const showGuide = ref(false);
+
+    const isHandMove = ref(false)
     const handleCreate = (key: string, url: string) => {
       return new Promise((resolve, reject) => {
         const _s = document.head.querySelector(`script[data-key="${key}"]`);
@@ -82,14 +84,25 @@ export default defineComponent({
       book.turn({
         autoCenter: true,
         duration: 1000,
+        disable: false,
         acceleration: true, // 是否启动硬件加速 如果为触摸设备必须为true
         // pages: 11, // 页码总数
         elevation: 50, // 转换期间页面的高度
         width: data.width, // 宽度 单位 px
         height: data.height, // 高度 单位 px
-        gradients: true // 是否显示翻页阴影效果
+        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.turn('page', page.next);
+          }
+        }
       });
+      // book.turn("peel", 'br')
+
     };
 
     const getRect = () => {
@@ -124,7 +137,7 @@ export default defineComponent({
                 }, 1500);
               }, 500);
 
-              
+
             });
           });
         });
@@ -264,7 +277,11 @@ export default defineComponent({
                                 onClick={(e: Event) => {
                                   e.stopPropagation();
                                   handleOpenPlay(item);
-                                }}>
+                                }}
+                                onTouchmove={(e) => {
+                                  isHandMove.value = true
+                                }}
+                              >
                                 {item.id ? (
                                   <img
                                     id={index == 1 ? 'coursewareDetail-0' : ''}