Merge branch 'guide' into online

src/components/the-noticeBar/index.module.less

@@ -0,0 +1,21 @@
+.wrap{
+    max-width: 100%;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    &.isAnitaion, &:hover{
+        .notice{
+            width: auto;
+            overflow: initial;
+        }
+    }
+}
+.notice{
+    transition-timing-function: linear;
+    transition-duration: 5s;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    transition-timing-function: linear;
+}

src/components/the-noticeBar/index.tsx

@@ -0,0 +1,106 @@
+import { defineComponent, reactive, ref, watch, onMounted } from 'vue';
+import styles from './index.module.less';
+
+const refAnimation = (callback: any) => {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      callback();
+    });
+  });
+};
+
+export default defineComponent({
+  name: 'TheNoticeBar',
+  props: {
+    text: {
+      type: String,
+      default: ''
+    },
+    isAnimation: {
+      type: Boolean,
+      default: false
+    },
+
+  },
+  setup(props) {
+    const wrapRef = ref();
+    const contentRef = ref();
+    const notiData = reactive({
+      isActive: false,
+      wrapWidth: 0,
+      contentWidth: 0,
+      contentStyle: {
+        transitionDuration: '0s',
+        transform: 'translateX(0px)'
+      },
+      time: null as any
+    });
+    const init = () => {
+      if (notiData.isActive || !contentRef.value || !wrapRef.value) return;
+      notiData.isActive = true;
+
+      notiData.contentWidth = contentRef.value.getBoundingClientRect().width;
+      notiData.wrapWidth = wrapRef.value.getBoundingClientRect().width;
+      console.log('进来加载动画', notiData.contentWidth - notiData.wrapWidth)
+
+      if (notiData.contentWidth - notiData.wrapWidth > 0) {
+        startAnimate();
+
+      }
+
+    };
+
+    onMounted(() => {
+      init()
+      // startAnimate();
+    })
+    const startAnimate = () => {
+      if (notiData.contentWidth <= notiData.wrapWidth || !notiData.isActive) {
+        notiData.contentStyle.transitionDuration = '0s';
+        notiData.contentStyle.transform = 'translateX(0px)';
+        return;
+      }
+
+      notiData.contentStyle.transitionDuration = '5s';
+      notiData.contentStyle.transform = 'translateX(-100%)';
+
+      notiData.time = setTimeout(() => {
+        notiData.contentStyle.transitionDuration = '0s';
+        notiData.contentStyle.transform = `translateX(${notiData.wrapWidth}px)`;
+        refAnimation(startAnimate);
+      }, 5 * 1000);
+    };
+    const stopAnimate = () => {
+      clearTimeout(notiData.time);
+      notiData.isActive = false;
+      notiData.contentStyle.transitionDuration = '0s';
+      notiData.contentStyle.transform = 'translateX(0px)';
+      notiData.time = null;
+    };
+    watch(
+      () => props.isAnimation,
+      val => {
+        if (val) {
+          refAnimation(init);
+        } else {
+          refAnimation(stopAnimate);
+        }
+      }
+    );
+    //    onMouseenter={() => !props.isAnimation && init()}
+    // onMouseleave={() => !props.isAnimation && stopAnimate()}
+    return () => (
+      <div
+        ref={wrapRef}
+        class={[styles.wrap, props.isAnimation ? styles.isAnitaion : '']}
+      >
+        <div
+          ref={contentRef}
+          style={notiData.contentStyle}
+          class={styles.notice}>
+          {props.text}
+        </div>
+      </div>
+    );
+  }
+});

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

@@ -1,148 +1,159 @@
 .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: 30px 30px;
     height: 100%;
     overflow: hidden;
-    background-color: #FFD8A1;
-    width: calc(100% + 1Px);
+    z-index: 2;
+  }
+
+  .item {
+    display: flex;
+    font-size: 12px;
+    font-weight: 600;
+    color: #333;
+    line-height: 20px;
+    margin: 20px 0;
+    word-break: break-all;
+  }
+  .name {
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .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

@@ -17,6 +17,7 @@ import queryString from 'query-string';
 import CoursewareDetail from '@/custom-plugins/guide-page/courseware-detail';
 import { usePageVisibility } from '@vant/use';
 import { state } from '@/state';
+import TheNoticeBar from '@/components/the-noticeBar';
 export default defineComponent({
   name: 'the-book',
   props: {
@@ -52,9 +53,12 @@ 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) => {
         const _s = document.head.querySelector(`script[data-key="${key}"]`);
@@ -86,6 +90,7 @@ export default defineComponent({
       book.turn({
         autoCenter: true,
         duration: 1000,
+        disable: false,
         acceleration: true, // 是否启动硬件加速 如果为触摸设备必须为true
         // pages: 11, // 页码总数
         elevation: 50, // 转换期间页面的高度
@@ -94,8 +99,54 @@ export default defineComponent({
         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(false);
+          // handleClose()
+          // nextTick(() => {
+
+          // });
+        }
+
+        if (page === 1) {
+          handleClose(false);
+        }
+        return;
+      });
+      // book.bind('turned', (e: any, page: any) => {
+    };
     const getRect = () => {
       const bookWrap = document.querySelector(
         '.bookWrap'
@@ -132,12 +183,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 (gotoOne) {
+        book.turn('page', 1);
+      }
+
       if (bookWrap) {
         bookWrap.style.transform = data.transform;
       }
@@ -147,8 +205,10 @@ export default defineComponent({
         bookWrap.style.transform = '';
         data.show = false;
         data.list = [];
+        isend.value = false;
       }, 1000);
     };
+
     onMounted(async () => {
       await init();
       listenerMessage('webViewOnResume', () => {
@@ -183,6 +243,8 @@ export default defineComponent({
       }
       data.list = list;
       // console.log('🚀 ~ data.list:', data.list.length);
+      // console.log(book.turn.pages, 'book.turn.pages')
+      // console.log(book.turn('pages'), 'pages')
     };
     watch(
       () => props.show,
@@ -238,12 +300,29 @@ export default defineComponent({
         // });
       }
     };
+
+    const isStartAnimate = (item: any) => {
+      // console.log(item) item.name.length > 9 ? true :
+
+      return false;
+    };
     return () => (
-      <div class={[styles.book, data.show ? '' : styles.bookHide]}>
-        <div class={styles.back} onClick={handleClose}>
+      <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' }}>
+        <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">
@@ -268,6 +347,9 @@ export default defineComponent({
                                 onClick={(e: Event) => {
                                   e.stopPropagation();
                                   handleOpenPlay(item);
+                                }}
+                                onTouchend={(e: TouchEvent) => {
+                                  console.log(e);
                                 }}>
                                 {item.id ? (
                                   <img
@@ -280,6 +362,7 @@ export default defineComponent({
                                   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>
                                   )}
@@ -300,6 +383,18 @@ export default defineComponent({
                   </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>

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

@@ -1,9 +1,12 @@
 .container {
-  position: relative;
+  position: fixed;
+  left: 0;
+  top: 0;
   width: 100vw;
   height: 100vh;
   overflow: hidden;
-  background: url('../../common/images/icon_bg.png') no-repeat center center / cover;
+  background: url('../../common/images/icon_bg.png') no-repeat center center /
+    cover;
   display: flex;
   flex-direction: column;
 }
@@ -63,7 +66,6 @@
       color: var(--van-primary-color) !important;
     }
 
-
     :global {
       .van-button__text {
         color: var(--van-primary-color);
@@ -266,14 +268,18 @@
     height: 100%;
     z-index: 2;
     background-repeat: no-repeat;
-    background-image: linear-gradient(to right,
+    background-image: linear-gradient(
+        to right,
         rgba(0, 0, 0, 0.2) 0,
         rgba(255, 255, 255, 0.08) 0%,
-        transparent 0.5%),
-      linear-gradient(to right,
+        transparent 0.5%
+      ),
+      linear-gradient(
+        to right,
         rgba(0, 0, 0, 0.1) 0.3%,
         rgba(255, 255, 255, 0.09) 1.1%,
-        transparent 1.3%);
+        transparent 1.3%
+      );
     background-size: 50% 100%, 50% 100%;
     background-position: 0% top, 9% top;
   }
@@ -286,7 +292,6 @@
       transition: opacity 0.3s ease-in-out;
     }
   }
-
   &.loaded {
     img {
       opacity: 1;
@@ -298,7 +303,7 @@
   position: fixed;
   top: 50%;
   left: 50%;
-  width: 50vw;
+  width: 55vw;
   transform: translate(-50%, -50%) scale(0);
   z-index: 20;
   background-color: #fff;
@@ -325,9 +330,8 @@
   }
 }
 
-
 .popupContainer {
-  background: #FFFFFF;
+  background: #ffffff;
   border-radius: 12px;
   width: 298px;
   padding-top: 12px;
@@ -351,7 +355,7 @@
       display: inline-block;
       width: 4px;
       height: 11px;
-      background: #2AA4FE;
+      background: #2aa4fe;
       border-radius: 2px;
       margin-right: 6px;
     }
@@ -370,7 +374,7 @@
         padding: 7px 24px;
         height: 30px;
         font-size: 12px;
-        background: #F6F6F6;
+        background: #f6f6f6;
         border: none;
         color: #333333;
         margin-right: 8px;
@@ -380,13 +384,13 @@
       .van-tag--plain {
         background: rgba(42, 164, 254, 0.08);
         border: none;
-        color: #2AA4FE;
+        color: #2aa4fe;
       }
     }
   }
 
   .btnGroup {
-    border: 1px solid #F2F2F2;
+    border: 1px solid #f2f2f2;
     padding: 16px 12px;
     display: flex;
     align-items: center;
@@ -404,7 +408,8 @@
     }
 
     .btnSure {
-      background: linear-gradient(135deg, #19F1E1 0%, #0094FF 100%), linear-gradient(73deg, #5BECFF 0%, #259CFE 100%);
+      background: linear-gradient(135deg, #19f1e1 0%, #0094ff 100%),
+        linear-gradient(73deg, #5becff 0%, #259cfe 100%);
       border: none;
       color: #fff;
     }

src/views/courseware-list/index.tsx

@@ -248,6 +248,13 @@ export default defineComponent({
       await getTanentList();
       await getSubjectList();
       getData();
+      // 安卓的状态栏
+      postMessage({
+        api: 'setStatusBarVisibility',
+        content: {
+          isVisibility: 0
+        }
+      });
     });
 
     const handleFavorite = async (item: any) => {
@@ -444,9 +451,6 @@ export default defineComponent({
                       onLoad={() => {
                         item.load = true;
                       }}
-                      onError={() => {
-                        item.load = true;
-                      }}
                     />
                   </div>
 

src/views/courseware-play/component/musicScore.tsx

@@ -79,7 +79,8 @@ export default defineComponent({
         id: props.music.content,
         modelType: 'practise',
         Authorization: Authorization,
-        showGuide: true
+        showGuide: true,
+        iscurseplay: 'play'
       }
     });
     const checkView = () => {