添加课件播放搜索

src/tenant/music/coursewarePlay/component/points-search.tsx

@@ -82,11 +82,12 @@ export default defineComponent({
       const search: any = pointData.search
       return name.replace(search, `<span style="color: #FF6E8E;">${search}</span>`)
    }
+
     return () => (
       <div class={styles.container}>
         <div class={styles.pointHeadSearch}>
           <ColSearch type={'tenant'} inputBackground="white" placeholder='请输入素材关键词' modelValue={pointData.search} background='transparent' onSearch={(val: any) => {
-            // 
+            //
             if(props.loading) return
             pointData.isSearch = true
             pointData.search = val
@@ -99,7 +100,7 @@ export default defineComponent({
         {props.loading && <div class={styles.lading}>
             <Loading size={24} color='rgba(255, 255, 255, 0.8)' /> <span class={styles.loadingText}>加载中...</span>
           </div>}
-          
+
           {/* {props.loading && <OLoading />} */}
           {!props.loading && !props.data.length &&  <ColResult projectType='tenant' classImgSize="SMALL" btnStatus={false} tips="暂无搜索结果" />}
           {props.data.length > 0 ? <Collapse
@@ -135,6 +136,7 @@ export default defineComponent({
                                   emit('handleSelect', {
                                     isSearch: pointData.isSearch,
                                     itemActive: n.id,
+                                    materialId: n.materialId,
                                     tabActive: item.id,
                                     tabName: item.name
                                   });
@@ -196,6 +198,7 @@ export default defineComponent({
                                                   emit('handleSelect', {
                                                     isSearch: pointData.isSearch,
                                                     itemActive: n.id,
+                                                    materialId: n.materialId,
                                                     tabActive: child.id,
                                                     tabName: child.name
                                                   });
@@ -257,6 +260,7 @@ export default defineComponent({
                                                                     emit('handleSelect', {
                                                                       isSearch: pointData.isSearch,
                                                                       itemActive: n.id,
+                                                                      materialId: n.materialId,
                                                                       tabActive: liftChild.id,
                                                                       tabName: liftChild.name
                                                                     });

src/tenant/music/coursewarePlay/index.module.less

@@ -218,7 +218,7 @@
 .fullBtn {
   width: 24px;
   height: 24px;
-  padding: 10px 9px;
+  padding: 8px 9px;
   display: flex;
   flex-direction: column;
   align-items: center;

src/tenant/music/coursewarePlay/index.tsx

@@ -17,7 +17,7 @@ import styles from './index.module.less'
 import 'plyr/dist/plyr.css'
 import request from '@/helpers/request'
 import { state } from '@/state'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import {
   postMessage,
   promisefiyPostMessage,
@@ -37,15 +37,15 @@ import {
   iconMenu
 } from './image/icons.json'
 import Points from './component/points'
-import { browser } from '@/helpers/utils'
+import { browser, getHttpOrigin } from '@/helpers/utils'
 import { Vue3Lottie } from 'vue3-lottie'
 import playLoadData from './datas/data.json'
 import { usePageVisibility } from '@vant/use'
-import PlayRecordTime from './playRecordTime'
+// import PlayRecordTime from './playRecordTime'
 // import { handleCheckVip } from '../hook/useFee'
 import OGuide from './component/o-guide'
 import Tool, { ToolItem, ToolType } from './component/tool'
-import Pen from './component/tools/pen'
+// import Pen from './component/tools/pen'
 // import VideoItem from './component/video-item';
 import VideoPlay from './component/video-play'
 import { musicBuy } from '../music'
@@ -60,6 +60,7 @@ export default defineComponent({
   name: 'CoursewarePlay',
   setup() {
     const browserInfo = browser()
+    const router = useRouter()
     const apiSuffix = ref(
       baseState.platformType === 'STUDENT' ? '/api-student' : '/api-teacher'
     )
@@ -121,9 +122,11 @@ export default defineComponent({
     const data = reactive({
       source: route.query.source as any, // 来源 search  搜索
       searchLoading: false, // 搜索加载状态
-      search: route.query.search as any, // 默认的搜索条件 - 
-      searchTemp: route.query.search as any, // 默认的搜索条件 - 
+      search: route.query.search as any, // 默认的搜索条件 -
+      searchTemp: route.query.search as any, // 默认的搜索条件 -
+      isSearch: route.query.source === "search" ? true : false, // 是否搜索
       currentId: route.query.id as any,
+      lessonId: null as any,
       detail: null as any,
       knowledgePointList: [] as any,
       itemList: [] as any,
@@ -295,6 +298,7 @@ export default defineComponent({
         const result = res.data || {}
         result.lessonTargetDesc = result.lessonTargetDesc ? result.lessonTargetDesc.replace(/\n/g, "<br />") : ""
         data.detail = result;
+        data.lessonId = result.lessonCoursewareId
         if (res?.data?.lockFlag) {
           postMessage({
             api: 'courseLoading',
@@ -475,6 +479,20 @@ export default defineComponent({
             allList.push(...itemResult.list)
           }
         }
+
+        if(data.source !== 'search') {
+          if(params.type === "pointSearch") {
+            detailTempSearchList.value = result
+            popupData.tempTabActive = allList.length > 0 ? allList[0].knowledgePointId : []
+            popupData.tempItemActive = "-1"
+            data.searchTemp = params.search
+            return
+          }
+          detailList.value = result
+          detailTempSearchList.value = result
+          return
+        }
+
         if(params.type === 'pointSearch') {
           detailTempSearchList.value = result
 
@@ -647,7 +665,7 @@ export default defineComponent({
         data.refLevelList = res.data || []
         return true
       } catch {
-        // 
+        //
       }
     }
 
@@ -662,6 +680,7 @@ export default defineComponent({
           await getRefLevel()
         }
         await getDetail()
+        data.lessonId && await getSearchDetail({search: data.search, id: data.lessonId})
       }
       // getCourseSchedule();
       window.addEventListener('message', iframeHandle)
@@ -706,7 +725,7 @@ export default defineComponent({
 
     const popupData = reactive({
       pointOpen: false,
-      pointContent: "", 
+      pointContent: "",
       pointTitle: "",
       coursewareOpen: false,
       open: false,
@@ -1049,7 +1068,7 @@ export default defineComponent({
                   data.animationState = 'end'
                   if(whitePenShow.value || penShow.value || popupData.coursewareOpen || popupData.open || popupData.guideOpen || popupData.pointOpen) {
                     handleStop()
-                  } 
+                  }
                 }}
                 onLoadedmetadata={(videoItem: any) => {
                   data.videoState = 'play'
@@ -1154,52 +1173,80 @@ export default defineComponent({
 
                 <div class={[styles.btnsWrap, styles.prePoint]}>
 
-                {data.source === 'search' ? 
+                {/* {data.source === 'search' ?
+                  <div class={styles.fullBtn} onClick={() => {
+                    handleStop()
+                    detailTempSearchList.value = detailList.value
+                    popupData.tempItemActive = ""
+                    popupData.tempTabActive = ""
+                    data.searchTemp = ""
+                    // data.searchTemp = JSON.parse(JSON.stringify(data.search))
+                    popupData.open = true
+                  }}>
+                    <img src={iconSearch} />
+                  </div> : <>
+                  {baseState.platformType === "TEACHER" && <div class={styles.fullBtn} onClick={() => {
+                      handleStop()
+                      popupData.coursewareOpen = true
+                    }}>
+                      <img src={iconCourseType} />
+                    </div>}
+
                     <div class={styles.fullBtn} onClick={() => {
                       handleStop()
-                      detailTempSearchList.value = detailList.value
-                      popupData.tempItemActive = ""
-                      popupData.tempTabActive = ""
-                      data.searchTemp = ""
-                      // data.searchTemp = JSON.parse(JSON.stringify(data.search))
                       popupData.open = true
                     }}>
-                      <img src={iconSearch} />
-                    </div> : <>
-                    {baseState.platformType === "TEACHER" && <div class={styles.fullBtn} onClick={() => {
-                        handleStop()
-                        popupData.coursewareOpen = true
-                      }}>
-                        <img src={iconCourseType} />
-                      </div>}
-
-                      <div class={styles.fullBtn} onClick={() => {
-                        handleStop()
-                        popupData.open = true
-                      }}>
-                        <img src={iconMenu} />
-                        {/* <span>知识点</span> */}
-                      </div>
-                  </>}
-                  <div
-                    class={[styles.fullBtn, !(popupData.activeIndex != 0) && styles.disabled]}
-                    onClick={() => {
-                      if(popupData.activeIndex != 0) handlePreAndNext('up')
-                    }}
-                  >
-                    <img src={iconUp} />
-                    {/* <span style={{ textAlign: 'center' }}>上一个</span> */}
-                  </div>
-                  <div
-                    class={[styles.fullBtn, !(popupData.activeIndex != data.itemList.length - 1) && styles.disabled]}
-                    onClick={() => {
-                      if(popupData.activeIndex != data.itemList.length - 1) handlePreAndNext('down')
-                    }}
-                  >
-                    {/* <span style={{ textAlign: 'center' }}>下一个</span> */}
-                    <img src={iconDown} />
-                  </div>
-                 </div>
+                      <img src={iconMenu} />
+                    </div>
+                </>} */}
+
+                {baseState.platformType === "TEACHER" && data.source !== 'search' && <div class={styles.fullBtn} onClick={() => {
+                  handleStop()
+                  popupData.coursewareOpen = true
+                }}>
+                  <img src={iconCourseType} />
+                </div>}
+
+                <div class={styles.fullBtn} onClick={() => {
+                  handleStop()
+                  detailTempSearchList.value = detailList.value
+                  data.isSearch = true
+                  popupData.tempItemActive = ""
+                  popupData.tempTabActive = ""
+                  data.searchTemp = ""
+                  // data.searchTemp = JSON.parse(JSON.stringify(data.search))
+                  popupData.open = true
+                }}>
+                  <img src={iconSearch} />
+                </div>
+
+                {data.source !== 'search' && <div class={styles.fullBtn} onClick={() => {
+                  handleStop()
+                  data.isSearch = false
+                  popupData.open = true
+                }}>
+                  <img src={iconMenu} />
+                </div>}
+
+                <div
+                  class={[styles.fullBtn, !(popupData.activeIndex != 0) && styles.disabled]}
+                  onClick={() => {
+                    if(popupData.activeIndex != 0) handlePreAndNext('up')
+                  }}
+                >
+                  <img src={iconUp} />
+                  {/* <span style={{ textAlign: 'center' }}>上一个</span> */}
+                </div>
+                <div
+                  class={[styles.fullBtn, !(popupData.activeIndex != data.itemList.length - 1) && styles.disabled]}
+                  onClick={() => {
+                    if(popupData.activeIndex != data.itemList.length - 1) handlePreAndNext('down')
+                  }}
+                >
+                  {/* <span style={{ textAlign: 'center' }}>下一个</span> */}
+                  <img src={iconDown} />
+                </div>
+                </div>
               </div>
             )}
           </Transition>
@@ -1263,7 +1310,7 @@ export default defineComponent({
           v-model:show={popupData.open}
           onClose={handleClosePopup}
         >
-          {data.source === 'search' ?
+          {data.isSearch ?
               <PointsSearch
                 data={detailTempSearchList.value}
                 search={data.searchTemp || data.search}
@@ -1272,6 +1319,38 @@ export default defineComponent({
                 itemActive={popupData.tempItemActive || popupData.itemActive}
                 open={popupData.open}
                 onHandleSelect={(res: any) => {
+                  if(data.source !== "search") {
+                    if (browser().isApp) {
+                      postMessage({
+                        api: 'openWebView',
+                        content: {
+                          url: `${getHttpOrigin()}${location.pathname}#/coursewarePlay?lessonId=${data.refLevelList}&source=search&kId=${res.materialId}&search=${encodeURIComponent(data.searchTemp ? JSON.parse(JSON.stringify(data.searchTemp)) : '')}`,
+                          orientation: 0,
+                          isHideTitle: true,
+                          statusBarTextColor: false,
+                          isOpenLight: true,
+                          showLoadingAnim: true
+                        }
+                      });
+                      return
+                    } else {
+                      router.push({
+                        path: '/coursewarePlay',
+                        query: {
+                          lessonId: data.lessonId,
+                          kId: res.materialId,
+                          search: data.searchTemp ? JSON.parse(JSON.stringify(data.searchTemp)) : '',
+                          source: 'search'
+                        }
+                      }).then(() => {
+                        window.location.reload()
+                      });
+
+                      // Toast('请使用App打开')
+                      return
+                    }
+                  }
+
                   popupData.open = false;
                   if(res.isSearch) {
                     detailList.value = detailTempSearchList.value
@@ -1289,13 +1368,21 @@ export default defineComponent({
                 onHandleSearch={async (val: any) => {
                   data.searchLoading = true
                   detailTempSearchList.value = []
-                  await getSearchDetail({
-                    type: 'pointSearch',
-                    search: val.search
-                  })
+                  if(data.source === 'search') {
+                    await getSearchDetail({
+                      type: 'pointSearch',
+                      search: val.search
+                    })
+                  } else {
+                    await getSearchDetail({
+                      type: 'pointSearch',
+                      search: val.search,
+                      id: data.lessonId
+                    })
+                  }
                   data.searchTemp = val.search;
                   data.searchLoading = false
-                }} /> : 
+                }} /> :
                 <Points
                 data={data.knowledgePointList}
                 tabActive={popupData.tabActive}
@@ -1324,6 +1411,7 @@ export default defineComponent({
               data.currentId = item.id;
               const n = await getDetail(item.id);
               const s = await getRefLevel(item.id);
+              data.isSearch = false
               if(n && s) {
                 popupData.coursewareOpen = false;
                 popupData.activeIndex = 0;
@@ -1336,6 +1424,7 @@ export default defineComponent({
                   Toast('网络异常')
                 }
               }
+              data.lessonId && await getSearchDetail({search: data.search, id: data.lessonId})
             }} />
         </Popup>