Merge branch 'guide' into 0830online

src/custom-plugins/guide-page/courseware-detail.tsx

@@ -6,8 +6,8 @@ import { getImage } from "./images";
 import {getGuidance,setGuidance} from './api'
 export default defineComponent({
   name: "courseware-detail",
-  emits: ["close"],
-  setup(props, { emit }) {
+  emits: ["close","changeShowGuide"],
+  setup(props, { emit,}) {
     const data = reactive({
       box: {},
       show: false,
@@ -38,7 +38,11 @@ export default defineComponent({
       step: 0,
     });
     const tipShow = ref(false)
+
     const guideInfo = ref({} as any)
+    console.log('调用')
+    // setGuidance({guideTag:'guideInfo',guideValue:'{}'})
+
     const getAllGuidance = async()=>{
       try{
         const res = await getGuidance({guideTag:'guideInfo'})
@@ -48,7 +52,10 @@ export default defineComponent({
           guideInfo.value = {}
         }
         if (guideInfo.value &&guideInfo.value.coursewareDetail) {
+
           tipShow.value = false;
+          emit('changeShowGuide',tipShow.value)
+
         } else {
           tipShow.value = true;
         }
@@ -58,7 +65,10 @@ export default defineComponent({
       // const guideInfo = localStorage.getItem('teacher-guideInfo');
 
     }
-
+    watch(()=>tipShow.value,(value)=>{
+      emit('changeShowGuide',tipShow.value)
+    },{
+    })
     getAllGuidance()
   //  const guideInfo = localStorage.getItem('guideInfo')
   //  if(guideInfo&&JSON.parse(guideInfo).coursewareDetail){
@@ -67,7 +77,7 @@ export default defineComponent({
   //   tipShow.value =true
   //  }
     const getStepELe = () => {
-      console.log(`coursewareDetail-${data.step}`)
+
       const ele: HTMLElement = document.getElementById(`coursewareDetail-${data.step}`)!;
       if (ele) {
         const eleRect = ele.getBoundingClientRect();
@@ -94,7 +104,8 @@ export default defineComponent({
     })
 
     const handleNext = () => {
-      if (data.step >= 2) {
+
+      if (data.step >= 0) {
        endGuide();
         return;
       }
@@ -103,6 +114,10 @@ export default defineComponent({
     };
 
     const endGuide = async()=>{
+      // console.log(`handleNext-${data.step}`)
+      // if(!tipShow.value){
+      //   return
+      // }
       // let guideInfo = JSON.parse(localStorage.getItem('guideInfo')|| '{}') || null
       if(!guideInfo.value){
         guideInfo.value = {coursewareDetail:true}
@@ -115,11 +130,12 @@ export default defineComponent({
       }catch(e){
         console.log(e)
       }
+      console.log('调用detail完成')
       tipShow.value = false
     //  localStorage.setItem('endC')
     }
-    return () => (
-      <Popup teleport="body" overlay={false} closeOnClickOverlay={false} class={["popup-custom", styles.guidePopup]} v-model:show={tipShow.value}>
+    return () => (<>
+      {tipShow.value?  <Popup teleport="body" overlay={false} closeOnClickOverlay={false} class={["popup-custom", styles.guidePopup]} v-model:show={tipShow.value}>
       <div class={styles.content} onClick={() => handleNext()}>
       {data.step!=data.steps.length-1&&<div
           class={styles.backBtn}
@@ -176,7 +192,8 @@ export default defineComponent({
           ))}
         </div>
       </div>
-      </Popup>
+      </Popup>:null}
+      </>
     );
   },
 });

src/custom-plugins/guide-page/courseware-list.tsx

@@ -192,6 +192,7 @@ export default defineComponent({
         console.log(e)
       }
       // localStorage.setItem('guideInfo',JSON.stringify(guideInfo))
+      console.log('调用list完成')
       tipShow.value = false
     //  localStorage.setItem('endC')
     }

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

@@ -63,7 +63,7 @@
 
   .wrapItem {
     position: relative;
-    padding: 30px 30px;
+    padding: 20px 20px;
     height: 100%;
     overflow: hidden;
     z-index: 2;
@@ -80,9 +80,10 @@
   }
   .name {
     width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
     overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
   }
   .des {
     line-height: 16px;
@@ -157,3 +158,15 @@
     padding-left: 20px;
   }
 }
+.preIcon {
+  width: 22px;
+  height: 13px;
+  margin-right: 5px;
+}
+
+.nameText {
+  flex: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

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

@@ -10,6 +10,7 @@ import {
 import styles from './index.module.less';
 import icon_back from '../../image/icon_back.svg';
 import icon_play from '../../image/icon_class.png';
+import pre from '../../image/pre.png'
 import { useRouter } from 'vue-router';
 import { listenerMessage, postMessage } from '@/helpers/native-message';
 import { showToast } from 'vant';
@@ -57,8 +58,9 @@ export default defineComponent({
       isClick: false
     });
     const showGuide = ref(false);
-    const isend = ref(false);
-    const isHandMove = ref(false);
+    const isend = ref(false)
+    const step = ref(0)
+    const CoursewareDetailRef = ref()
     const handleCreate = (key: string, url: string) => {
       return new Promise((resolve, reject) => {
         const _s = document.head.querySelector(`script[data-key="${key}"]`);
@@ -79,6 +81,7 @@ export default defineComponent({
       //   await handleCreate('turn', '/book/turn.js');
       console.log('初始化完成');
     };
+    const isFirest = ref(true)
     let book: any = null;
     let timer: any = null;
     const handleBook = () => {
@@ -90,7 +93,7 @@ export default defineComponent({
       book.turn({
         autoCenter: true,
         duration: 1000,
-        disable: false,
+        disabled: true,
         acceleration: true, // 是否启动硬件加速 如果为触摸设备必须为true
         // pages: 11, // 页码总数
         elevation: 50, // 转换期间页面的高度
@@ -98,28 +101,44 @@ export default defineComponent({
         height: data.height, // 高度 单位 px
         gradients: true // 是否显示翻页阴影效果
         // display: 'single', //设置单页还是双页
-      });
+      })
+
+
       book.bind('start', (event: Event, pageObject: any, corner: any) => {
         // console.log(event, 'last', pageObject.next)
+        // if (isFirest.value) {
+        //   console.log('第一次进来禁用', pageObject)
+        //   isFirest.value = false
+        //   book.turn('disabled', true);
+
+        // }
         if (corner == 'tl' || corner == 'tr') {
           event.preventDefault();
         }
         if (data.isClick) {
           nextTick(() => {
-            data.isClick = false;
-            console.log(corner, 'corner');
+            data.isClick = false
             if (corner == 'tl' || corner == 'tr') {
               event.preventDefault();
             } else {
               book.turn('page', pageObject.next);
             }
-          });
+          })
         }
       });
       book.bind('turned', (event: Event, page: any, corner: any) => {
-        setTimeout(() => {
+        // setTimeout(() => {
+        // }, 1000);
+
+        // console.log(page - 1, 'page')
+
+        // const index = (page - 1)
+        // console.log(data.list[index * step.value], data.list)
+
+        nextTick(() => {
           showGuide.value = true;
-        }, 500);
+        })
+
 
         // if (page + 1 === book.turn('pages')) {
         //   // noanimateClose()
@@ -174,9 +193,6 @@ export default defineComponent({
               data.show = true;
               timer = setTimeout(() => {
                 book.turn('page', 2);
-                setTimeout(() => {
-                  showGuide.value = true;
-                }, 1500);
               }, 500);
             });
           });
@@ -184,6 +200,8 @@ export default defineComponent({
       }
     };
     const handleClose = (gotoOne = true) => {
+      showGuide.value = false
+      // book.turn('disabled', false);
       if (isend.value) {
         return;
       }
@@ -214,23 +232,23 @@ export default defineComponent({
       listenerMessage('webViewOnResume', () => {
         data.lastTime = localStorage.getItem(lastTimeKey);
       });
+
     });
     const getList = () => {
       if (!props.bookData?.lessonList) return;
-      const step = Math.floor((document.body.clientHeight * 0.8 - 40) / 50);
-      console.log('🚀 ~ step:', step);
+      step.value = Math.floor((document.body.clientHeight * 0.8 - 40) / 50);
       const list = [];
       let listItem = [] as any[];
       for (let i = 0; i < props.bookData.lessonList.length; i++) {
         const item = props.bookData.lessonList[i];
-        if (listItem.length >= step) {
+        if (listItem.length >= step.value) {
           list.push([...listItem]);
           listItem = [{ name: item.name }];
         } else {
           listItem.push({ name: item.name });
         }
         for (let j = 0; j < item.knowledgeList.length; j++) {
-          if (listItem.length >= step) {
+          if (listItem.length >= step.value) {
             list.push([...listItem]);
             listItem = [item.knowledgeList[j]];
           } else {
@@ -250,6 +268,7 @@ export default defineComponent({
       () => props.show,
       () => {
         if (props.show) {
+
           getList();
           nextTick(() => {
             handleBook();
@@ -304,8 +323,20 @@ export default defineComponent({
     const isStartAnimate = (item: any) => {
       // console.log(item) item.name.length > 9 ? true :
 
-      return false;
-    };
+      return false
+    }
+
+    const changeShowGuide = (flag: boolean) => {
+      showGuide.value = flag
+      if (flag) {
+        console.log('changeShowGuide禁用')
+        // book.turn('disabled', true);
+      } else {
+
+        console.log('changeShowGuide取消禁用')
+        // book.turn('disabled', false);
+      }
+    }
     return () => (
       <div
         class={[styles.book, data.show ? '' : styles.bookHide]}
@@ -361,11 +392,14 @@ export default defineComponent({
                                 <div
                                   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>
+                                    <img src={pre} alt="" class={styles.preIcon} />
                                   )}
+
+                                  <div class={styles.nameText}> {item.name}</div>
+
+                                  {/* <TheNoticeBar text={item.name} isAnimation={isStartAnimate(item)}></TheNoticeBar> */}
+
                                 </div>
                               </div>
                             </>
@@ -397,9 +431,9 @@ export default defineComponent({
               </div>
             </div>
           )}
-        </div>
-        {showGuide.value ? <CoursewareDetail></CoursewareDetail> : null}
-      </div>
+        </div >
+        {/* {showGuide.value ? <CoursewareDetail onChangeShowGuide={changeShowGuide} ref={CoursewareDetailRef}></CoursewareDetail> : null} */}
+      </div >
     );
   }
 });

src/views/courseware-list/index.tsx

@@ -477,8 +477,7 @@ export default defineComponent({
             )}
           </div>
         </div>
-
-        <TheBook
+       <TheBook
           show={data.showBook}
           bookData={data.bookData}
           subjectId={forms.subjectId}
@@ -488,6 +487,7 @@ export default defineComponent({
             data.showBook = false;
           }}
         />
+
         {isShowGuide.value ? <CoursewareList></CoursewareList> : null}
 
         <Popup v-model:show={popoverShow.value} class={styles.popupContainer}>