更新优化加载样式与搜索优化

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

@@ -58,6 +58,19 @@
   justify-content: center;
   align-items: center;
 
+  &.activeBtn {
+    .icon {
+      color: var(--van-primary-color) !important;
+    }
+
+
+    :global {
+      .van-button__text {
+        color: var(--van-primary-color);
+      }
+    }
+  }
+
   :global {
     .van-button__content {
       width: 100%;

src/views/courseware-list/index.tsx

@@ -43,6 +43,8 @@ import CoursewareList from '@/custom-plugins/guide-page/courseware-list';
 import './jquery.min.1.7.js';
 import './turn.js';
 import MEmpty from '@/components/m-empty';
+import deepClone from '@/helpers/deep-clone';
+import book from './component/book';
 
 export const BOOK_DATA = {
   grades: [
@@ -68,6 +70,7 @@ export default defineComponent({
   setup() {
     const router = useRouter();
     const popoverShow = ref(false);
+    const baseBookVerionList = ref([] as any);
     const bookVersionList = ref([] as any);
     // 返回
     const goback = () => {
@@ -75,7 +78,7 @@ export default defineComponent({
     };
     const forms = reactive({
       currentGradeNum: null,
-      bookVersionId: null,
+      bookVersionId: null as any,
       page: 1,
       rows: 999,
       type: 'COURSEWARE'
@@ -116,7 +119,9 @@ export default defineComponent({
             id: tenantId
           });
 
-          bookVersionList.value = data.bookVersionList || [];
+          baseBookVerionList.value = data.bookVersionList || [];
+
+          bookVersionList.value = deepClone(baseBookVerionList.value);
         }
       } catch {
         //
@@ -125,9 +130,11 @@ export default defineComponent({
 
     const getList = async () => {
       data.loading = true;
+      const { bookVersionId, currentGradeNum, ...more } = forms;
       const res = await api_lessonCoursewarePage({
-        ...forms,
-        currentGradeNum: forms.currentGradeNum ? forms.currentGradeNum : ''
+        ...more,
+        bookversionId: bookVersionId == -1 ? null : bookVersionId,
+        currentGradeNum: currentGradeNum ? currentGradeNum : ''
       });
       if (res?.code === 200 && Array.isArray(res?.data?.rows)) {
         data.list = res.data.rows.map((item: any) => {
@@ -146,7 +153,7 @@ export default defineComponent({
         userId: state.user?.data?.id,
         page: forms.page,
         rows: forms.rows,
-        bookVersionId: forms.bookVersionId ? forms.bookVersionId : '',
+        bookVersionId: forms.bookVersionId != -1 ? forms.bookVersionId : '',
         currentGradeNum: forms.currentGradeNum ? forms.currentGradeNum : ''
       });
       if (res?.code === 200 && Array.isArray(res?.data?.rows)) {
@@ -192,6 +199,17 @@ export default defineComponent({
       }
     };
     const handleChange = () => {
+      if (data.tab === 'course') {
+        bookVersionList.value = [
+          ...deepClone(baseBookVerionList.value),
+          {
+            bookVersionId: -1,
+            bookVersionName: '自定义'
+          }
+        ];
+      } else {
+        bookVersionList.value = deepClone(baseBookVerionList.value);
+      }
       getData();
     };
     onMounted(() => {
@@ -226,7 +244,6 @@ export default defineComponent({
     const getDetail = async (item: any) => {
       if (data.tab === 'course') {
         const res = await api_classLessonCoursewareDetail(item.id);
-        console.log(res, item, 'course');
         if (res?.code == 200 && Array.isArray(res?.data?.lessonList)) {
           data.details = res.data.lessonList || [];
           data.bookData = res.data;
@@ -298,7 +315,14 @@ export default defineComponent({
               }}></Tab>
           </Tabs>
           <Button
-            class={styles.downBtn}
+            class={[
+              styles.downBtn,
+              (data.tab != 'course' && forms.bookVersionId > 0) ||
+              (data.tab == 'course' && forms.bookVersionId) ||
+              forms.currentGradeNum
+                ? styles.activeBtn
+                : ''
+            ]}
             round
             size="small"
             onClick={() => (popoverShow.value = true)}
@@ -428,7 +452,7 @@ export default defineComponent({
               <div class={[styles.popupList, styles.versionList]}>
                 {bookVersionList.value.map((item: any) => (
                   <Tag
-                    plain={forms.bookVersionId === item.bookVersionId}
+                    plain={forms.bookVersionId == item.bookVersionId}
                     round
                     onClick={() => (forms.bookVersionId = item.bookVersionId)}>
                     {item.bookVersionName}

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

@@ -165,7 +165,7 @@
 .rightFixedBtns {
   position: absolute;
   top: 50%;
-  transform: translateY(-50%);
+  transform: translateY(-55%);
   right: 12px;
   z-index: 10;
 }
@@ -183,6 +183,7 @@
   background: rgba(51, 51, 51, 0.8);
   border-radius: 6px;
   overflow: hidden;
+
   &:not(:last-child):not(:first-child) {
     margin: 8px 0;
   }
@@ -190,6 +191,7 @@
   &:active {
     opacity: .8;
   }
+
   &.btnsDisabled {
     opacity: .3;
     pointer-events: none;

src/views/courseware-play/index.tsx

@@ -118,6 +118,7 @@ export default defineComponent({
 
     const route = useRoute();
     const headeRef = ref();
+    const loadingClass = ref(false); // 重新加载课件
     const data = reactive({
       knowledgePointList: [] as any,
       courseDetails: [] as any,
@@ -361,183 +362,185 @@ export default defineComponent({
     };
     return () => (
       <div id="playContent" class={styles.playContent}>
-        <div>
-          <div
-            class={styles.coursewarePlay}
-            style={{ width: parentContainer.width }}
-            onClick={() => setModelOpen()}>
-            <div class={styles.wraps}>
-              {data.itemList.map((m: any, mIndex: number) => {
-                const isRender =
-                  m.isRender || Math.abs(popupData.activeIndex - mIndex) < 2;
-                const isEmtry = Math.abs(popupData.activeIndex - mIndex) > 4;
-                if (isRender) {
-                  m.isRender = true;
-                }
-                return isRender ? (
-                  <div
-                    key={'index' + mIndex}
-                    class={[
-                      styles.itemDiv,
-                      popupData.activeIndex === mIndex && styles.itemActive,
-                      activeData.isAnimation && styles.acitveAnimation,
-                      Math.abs(popupData.activeIndex - mIndex) < 2
-                        ? styles.show
-                        : styles.hide
-                    ]}
-                    style={
-                      mIndex < popupData.activeIndex
-                        ? effects[effectIndex.value].prev
-                        : mIndex > popupData.activeIndex
-                        ? effects[effectIndex.value].next
-                        : {}
-                    }
-                    onClick={(e: Event) => {
-                      if (Date.now() - activeData.nowTime < 300) {
-                        handleDbClick(m);
-                        return;
+        {!loadingClass.value && (
+          <div>
+            <div
+              class={styles.coursewarePlay}
+              style={{ width: parentContainer.width }}
+              onClick={() => setModelOpen()}>
+              <div class={styles.wraps}>
+                {data.itemList.map((m: any, mIndex: number) => {
+                  const isRender =
+                    m.isRender || Math.abs(popupData.activeIndex - mIndex) < 2;
+                  const isEmtry = Math.abs(popupData.activeIndex - mIndex) > 4;
+                  if (isRender) {
+                    m.isRender = true;
+                  }
+                  return isRender ? (
+                    <div
+                      key={'index' + mIndex}
+                      class={[
+                        styles.itemDiv,
+                        popupData.activeIndex === mIndex && styles.itemActive,
+                        activeData.isAnimation && styles.acitveAnimation,
+                        Math.abs(popupData.activeIndex - mIndex) < 2
+                          ? styles.show
+                          : styles.hide
+                      ]}
+                      style={
+                        mIndex < popupData.activeIndex
+                          ? effects[effectIndex.value].prev
+                          : mIndex > popupData.activeIndex
+                          ? effects[effectIndex.value].next
+                          : {}
                       }
-                      activeData.nowTime = Date.now();
-                    }}>
-                    {m.type === 'IMG' && <img src={m.content} />}
-                    {m.type === 'VIDEO' && (
-                      <VideoItem
-                        ref={(v: any) => (data.videoRefs[mIndex] = v)}
-                        item={m}
-                        show={popupData.activeIndex === mIndex}
-                        pageVisibility={pageVisibility.value}
-                        showModel={activeData.model}
-                        isEmtry={isEmtry}
-                        onLoadedmetadata={() => {
-                          m.isprepare = true;
-                          m.error = false;
-                        }}
-                        onEnded={() => {
-                          const _index = popupData.activeIndex + 1;
-                          if (_index < data.itemList.length) {
-                            handleSwipeChange(_index);
-                          }
-                        }}
-                        onReset={() => {
-                          m.error = false;
-                        }}
-                        onError={() => {
-                          m.isprepare = true;
-                          m.error = true;
-                        }}
-                      />
-                    )}
-                    {m.type === 'SONG' && (
-                      <AudioItem
-                        item={m}
-                        show={popupData.activeIndex === mIndex}
-                        pageVisibility={pageVisibility.value}
-                        showModel={activeData.model}
-                        isEmtry={isEmtry}
-                        onEnded={() => {
-                          const _index = popupData.activeIndex + 1;
-                          if (_index < data.itemList.length) {
-                            handleSwipeChange(_index);
-                          }
-                        }}
-                        onClose={() => {
-                          clearTimeout(activeData.timer);
-                          activeData.timer = setTimeout(() => {
-                            activeData.model = false;
-                          }, 4000);
-                        }}
-                      />
-                    )}
-                    {m.type === 'MUSIC' && (
-                      <MusicScore
-                        pageVisibility={pageVisibility.value}
-                        show={popupData.activeIndex === mIndex}
-                        activeModel={activeData.model}
-                        data-vid={m.id}
-                        music={m}
-                      />
-                    )}
+                      onClick={(e: Event) => {
+                        if (Date.now() - activeData.nowTime < 300) {
+                          handleDbClick(m);
+                          return;
+                        }
+                        activeData.nowTime = Date.now();
+                      }}>
+                      {m.type === 'IMG' && <img src={m.content} />}
+                      {m.type === 'VIDEO' && (
+                        <VideoItem
+                          ref={(v: any) => (data.videoRefs[mIndex] = v)}
+                          item={m}
+                          show={popupData.activeIndex === mIndex}
+                          pageVisibility={pageVisibility.value}
+                          showModel={activeData.model}
+                          isEmtry={isEmtry}
+                          onLoadedmetadata={() => {
+                            m.isprepare = true;
+                            m.error = false;
+                          }}
+                          onEnded={() => {
+                            const _index = popupData.activeIndex + 1;
+                            if (_index < data.itemList.length) {
+                              handleSwipeChange(_index);
+                            }
+                          }}
+                          onReset={() => {
+                            m.error = false;
+                          }}
+                          onError={() => {
+                            m.isprepare = true;
+                            m.error = true;
+                          }}
+                        />
+                      )}
+                      {m.type === 'SONG' && (
+                        <AudioItem
+                          item={m}
+                          show={popupData.activeIndex === mIndex}
+                          pageVisibility={pageVisibility.value}
+                          showModel={activeData.model}
+                          isEmtry={isEmtry}
+                          onEnded={() => {
+                            const _index = popupData.activeIndex + 1;
+                            if (_index < data.itemList.length) {
+                              handleSwipeChange(_index);
+                            }
+                          }}
+                          onClose={() => {
+                            clearTimeout(activeData.timer);
+                            activeData.timer = setTimeout(() => {
+                              activeData.model = false;
+                            }, 4000);
+                          }}
+                        />
+                      )}
+                      {m.type === 'MUSIC' && (
+                        <MusicScore
+                          pageVisibility={pageVisibility.value}
+                          show={popupData.activeIndex === mIndex}
+                          activeModel={activeData.model}
+                          data-vid={m.id}
+                          music={m}
+                        />
+                      )}
 
-                    {m.type === 'VIDEO' && (
-                      <Transition name="van-fade">
-                        {!m.isprepare && (
-                          <div class={styles.loadWrap}>
-                            <Vue3Lottie
-                              style={{ width: '100%', height: '100%' }}
-                              animationData={playLoadData}></Vue3Lottie>
-                          </div>
-                        )}
-                      </Transition>
-                    )}
-                  </div>
-                ) : (
+                      {m.type === 'VIDEO' && (
+                        <Transition name="van-fade">
+                          {!m.isprepare && (
+                            <div class={styles.loadWrap}>
+                              <Vue3Lottie
+                                style={{ width: '100%', height: '100%' }}
+                                animationData={playLoadData}></Vue3Lottie>
+                            </div>
+                          )}
+                        </Transition>
+                      )}
+                    </div>
+                  ) : (
+                    <div
+                      key={'index' + mIndex}
+                      class={[
+                        styles.itemDiv,
+                        popupData.activeIndex === mIndex && styles.itemActive,
+                        activeData.isAnimation && styles.acitveAnimation,
+                        Math.abs(popupData.activeIndex - mIndex) < 2
+                          ? styles.show
+                          : styles.hide
+                      ]}
+                      style={
+                        mIndex < popupData.activeIndex
+                          ? effects[effectIndex.value].prev
+                          : mIndex > popupData.activeIndex
+                          ? effects[effectIndex.value].next
+                          : {}
+                      }></div>
+                  );
+                })}
+              </div>
+              <Transition name="right">
+                {activeData.model && (
                   <div
-                    key={'index' + mIndex}
-                    class={[
-                      styles.itemDiv,
-                      popupData.activeIndex === mIndex && styles.itemActive,
-                      activeData.isAnimation && styles.acitveAnimation,
-                      Math.abs(popupData.activeIndex - mIndex) < 2
-                        ? styles.show
-                        : styles.hide
-                    ]}
-                    style={
-                      mIndex < popupData.activeIndex
-                        ? effects[effectIndex.value].prev
-                        : mIndex > popupData.activeIndex
-                        ? effects[effectIndex.value].next
-                        : {}
-                    }></div>
-                );
-              })}
-            </div>
-            <Transition name="right">
-              {activeData.model && (
-                <div
-                  class={styles.rightFixedBtns}
-                  onClick={(e: Event) => {
-                    e.stopPropagation();
-                    clearTimeout(activeData.timer);
-                  }}>
-                  <div
-                    class={[styles.fullBtn, styles.point]}
-                    onClick={() => (popupData.chapterOpen = true)}>
-                    <img src={iconChange} />
-                    <span>切换</span>
-                  </div>
+                    class={styles.rightFixedBtns}
+                    onClick={(e: Event) => {
+                      e.stopPropagation();
+                      clearTimeout(activeData.timer);
+                    }}>
+                    <div
+                      class={[styles.fullBtn, styles.point]}
+                      onClick={() => (popupData.chapterOpen = true)}>
+                      <img src={iconChange} />
+                      <span>切换</span>
+                    </div>
 
-                  <div
-                    class={[styles.fullBtn, styles.point]}
-                    onClick={() => (popupData.open = true)}>
-                    <img src={iconMenu} />
-                    <span>课件</span>
-                  </div>
+                    <div
+                      class={[styles.fullBtn, styles.point]}
+                      onClick={() => (popupData.open = true)}>
+                      <img src={iconMenu} />
+                      <span>课件</span>
+                    </div>
 
-                  <div
-                    class={[
-                      styles.fullBtn,
-                      popupData.activeIndex == 0 && styles.btnsDisabled
-                    ]}
-                    onClick={() => handlePreAndNext('up')}>
-                    <img src={iconUp} />
-                    <span style={{ textAlign: 'center' }}>上一个</span>
-                  </div>
+                    <div
+                      class={[
+                        styles.fullBtn,
+                        popupData.activeIndex == 0 && styles.btnsDisabled
+                      ]}
+                      onClick={() => handlePreAndNext('up')}>
+                      <img src={iconUp} />
+                      <span style={{ textAlign: 'center' }}>上一个</span>
+                    </div>
 
-                  <div
-                    class={[
-                      styles.fullBtn,
-                      popupData.activeIndex == data.itemList.length - 1 &&
-                        styles.btnsDisabled
-                    ]}
-                    onClick={() => handlePreAndNext('down')}>
-                    <span style={{ textAlign: 'center' }}>下一个</span>
-                    <img src={iconDown} />
+                    <div
+                      class={[
+                        styles.fullBtn,
+                        popupData.activeIndex == data.itemList.length - 1 &&
+                          styles.btnsDisabled
+                      ]}
+                      onClick={() => handlePreAndNext('down')}>
+                      <span style={{ textAlign: 'center' }}>下一个</span>
+                      <img src={iconDown} />
+                    </div>
                   </div>
-                </div>
-              )}
-            </Transition>
+                )}
+              </Transition>
+            </div>
           </div>
-        </div>
+        )}
 
         <div
           style={{ transform: activeData.model ? '' : 'translateY(-100%)' }}
@@ -584,6 +587,7 @@ export default defineComponent({
             active={activeData.lessonCoursewareDetailId as any}
             onHandleSelect={async (item: any) => {
               console.log(item, 'item');
+              loadingClass.value = true;
               activeData.coursewareDetailKnowledgeId = item.itemActive;
               activeData.lessonCoursewareDetailId = item.tabActive;
               await getDetail();
@@ -591,6 +595,7 @@ export default defineComponent({
               popupData.itemActive = item.itemActive;
               popupData.itemName = item.itemName;
               popupData.chapterOpen = false;
+              loadingClass.value = false;
             }}
           />
         </Popup>