记录时长频率改为5s

src/views/accompany/category.tsx

@@ -1,58 +0,0 @@
-import request from '@/helpers/request'
-import { state } from '@/state'
-import { Button, Icon, Image, Loading } from 'vant'
-import { defineComponent, reactive, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
-import { getImage } from './images'
-import styles from './index.module.less'
-
-export default defineComponent({
-  name: 'accompany-category',
-  props: {
-    musicTree: {
-      type: Array,
-      default: () => []
-    }
-  },
-  setup(props, ctx) {
-    console.log("🚀 ~ props", props.musicTree)
-    const router = useRouter()
-
-    return () => (
-      <div class={styles.accompanyCategory}>
-        {props.musicTree.map((item: any) => {
-          return (
-            <div
-              class={styles.container}
-              onClick={() => {
-                router.replace({
-                  path: '/accompany/musicList',
-                  query: {
-                    categorieid: item.id
-                  }
-                })
-              }}
-            >
-              <Image src={item.icon} width="100%" height="100%">
-                {{
-                  loading: () => <Loading type="spinner" size="20" />
-                }}
-              </Image>
-              {/* <div class={styles.title}>{item.title}</div>
-              <div class={styles.sub}>{item.subtitle}</div>
-              <div
-                class={styles.btn}
-                style={{ backgroundImage: `url(${item.btnIcon})`, color: item.color }}
-              >
-                GO <Icon name="arrow" />
-              </div> */}
-            </div>
-          )
-        })}
-        {/* <Button onClick={() => {
-            location.href = `http://192.168.3.114:1000/#/accompany`
-        }}>测试</Button> */}
-      </div>
-    )
-  }
-})

src/views/accompany/index.module.less

@@ -38,64 +38,59 @@
   }
 }
 
-.accompany-music-list{
-    div{
-        box-sizing: border-box;
-    }
-    .heade{
-        position: fixed;
-        top: 0;
-        width: 100%;
-        z-index: 10;
-        :global{
-          .van-dropdown-menu__bar{
-            box-shadow: none;
-          }
-          .van-dropdown-menu__title:after{
-            border: 0.11rem solid;
-            border-color: transparent transparent var(--van-gray-4) var(--van-gray-4);
-          }
-        }
+.accompany-music-list {
+  div {
+    box-sizing: border-box;
+  }
+  .heade {
+    height: calc(var(--van-dropdown-menu-height) + 1.6rem);
+    :global {
+      .van-dropdown-menu__bar {
+        box-shadow: none;
+      }
+      .van-dropdown-menu__title:after {
+        border: 0.11rem solid;
+        border-color: transparent transparent var(--van-gray-4) var(--van-gray-4);
+      }
     }
-    // .cell{
-    //   padding: 16px 10px;
-    // }
-    .filter{
+  }
+
+  .filter {
+    display: flex;
+    align-items: center;
+    height: 60px;
+    background-color: #f8f8f8;
+    :global {
+      .van-search {
+        flex: 1;
+        padding: 0 12px;
+      }
+      .van-search__field {
+        background-color: #fff;
+        border-radius: 20px 0 0 20px;
+        padding-left: 12px;
+        height: 36px;
+      }
+      .van-search__action {
+        border-radius: 0 20px 20px 0;
+        background-color: #fff;
+        height: 36px;
         display: flex;
         align-items: center;
-        height: 60px;
-        background-color: #F8F8F8;
-        :global{
-            .van-search{
-                flex: 1;
-                padding: 0 12px;
-            }
-            .van-search__field{
-                background-color: #fff;
-                border-radius: 20px 0 0 20px;
-                padding-left: 12px;
-                height: 36px;
-            }
-            .van-search__action{
-                border-radius: 0 20px 20px 0;
-                background-color: #fff;
-                height: 36px;
-                display: flex;
-                align-items: center;
-            }
-        }
-        .searchBtn{
-            width: 56px;
-            height: 27px;
-            line-height: 27px;
-            border-radius: 20px;
-            background-color: var(--van-primary);
-            font-size: 14px;
-            text-align: center;
-            color: #fff;
-            &:active{
-                opacity: .8;
-            }
-        }
+      }
     }
+    .searchBtn {
+      width: 56px;
+      height: 27px;
+      line-height: 27px;
+      border-radius: 20px;
+      background-color: var(--van-primary);
+      font-size: 14px;
+      text-align: center;
+      color: #fff;
+      &:active {
+        opacity: 0.8;
+      }
+    }
+  }
 }

src/views/accompany/index.tsx

@@ -1,8 +1,8 @@
 import request from '@/helpers/request'
 import { state } from '@/state'
+import { Image, Loading } from 'vant'
 import { defineComponent, reactive, onMounted, watch } from 'vue'
-import { RouterView, useRoute } from 'vue-router'
-import Category from './category'
+import { RouterView, useRoute, useRouter } from 'vue-router'
 import { getImage } from './images'
 import styles from './index.module.less'
 import MusicList from './music-list'
@@ -10,33 +10,8 @@ import MusicList from './music-list'
 export default defineComponent({
   name: 'accompany',
   setup(props, ctx) {
-    const svgs = [
-      {
-        icon: getImage('l1.png'),
-        btnIcon: getImage('b1.svg'),
-        color: '#9881FF',
-        title: '声部训练',
-        subtitle: '乐器基础，巩固自己的基本功',
-        btnText: 'GO >'
-      },
-      {
-        icon: getImage('l2.png'),
-        btnIcon: getImage('b2.svg'),
-        color: '#F67146',
-        title: '合奏训练',
-        subtitle: '团队协作，加强协调配合能力',
-        btnText: 'GO >'
-      },
-      {
-        icon: getImage('l3.png'),
-        btnIcon: getImage('b2.svg'),
-        color: '#4698FF',
-        title: '独奏曲目',
-        subtitle: '热播金曲，练习更加有趣',
-        btnText: 'GO >'
-      }
-    ]
     const route = useRoute()
+    const router = useRouter()
     const data = reactive({
       childPath: '',
       svgs: [] as any,
@@ -60,7 +35,7 @@ export default defineComponent({
               btnText: 'GO >'
             }
           })
-            console.log('🚀 ~ data.svgs', data.svgs)
+          console.log('🚀 ~ data.svgs', data.svgs)
         }
       } catch (error) {
         console.log(error)
@@ -70,7 +45,7 @@ export default defineComponent({
     const handleOpen = () => {
       const src: string = route?.path || 'accompany'
       data.childPath = src.replace(/\//g, '') || 'accompany'
-        console.log('🚀 ~ route.path', data.childPath)
+      console.log('🚀 ~ route.path', data.childPath)
     }
     watch(
       () => route.path,
@@ -83,9 +58,29 @@ export default defineComponent({
     })
     return () => (
       <div class={styles.accompany}>
-        {/* <RouterView musicTree={data.svgs} /> */}
-        {data.childPath === 'accompany' && <Category musicTree={data.svgs} />}
-        {data.childPath === 'accompanymusicList' && <MusicList musicTree={data.svgs} />}
+        <div class={styles.accompanyCategory}>
+          {data.svgs.map((item: any) => {
+            return (
+              <div
+                class={styles.container}
+                onClick={() => {
+                  router.replace({
+                    path: '/musicList',
+                    query: {
+                      categorieid: item.id
+                    }
+                  })
+                }}
+              >
+                <Image src={item.icon} width="100%" height="100%">
+                  {{
+                    loading: () => <Loading type="spinner" size="20" />
+                  }}
+                </Image>
+              </div>
+            )
+          })}
+        </div>
       </div>
     )
   }

src/views/accompany/music-list.tsx

@@ -21,6 +21,7 @@ import { defineComponent, reactive, ref, onMounted, nextTick, computed } from 'v
 import { useRoute, useRouter } from 'vue-router'
 import { getImage } from './images'
 import styles from './index.module.less'
+import OSticky from '@/components/o-sticky'
 
 export default defineComponent({
   name: 'accompany-music-list',
@@ -37,6 +38,7 @@ export default defineComponent({
       loading: false,
       finished: false,
       refreshing: false,
+      musicTree: [] as any,
       pagenation: {
         page: 1,
         rows: 20
@@ -47,8 +49,32 @@ export default defineComponent({
       list: [] as any,
       keyword: ''
     })
+    const getTree = async () => {
+      try {
+        const res: any = await request.get(
+          state.platformApi + '/musicSheetCategories/queryTree?enable=true'
+        )
+        if (Array.isArray(res?.data)) {
+          data.musicTree = res.data.map((n: any, index: number) => {
+            return {
+              ...n,
+              id: n.id,
+              icon: n.coverImg,
+              btnIcon: getImage('b2.svg'),
+              color: '#9881FF',
+              title: n.name,
+              subtitle: '',
+              btnText: 'GO >'
+            }
+          })
+        }
+        getList()
+      } catch (error) {
+        console.log(error)
+      }
+    }
     const option1 = computed(() => {
-      const v1: any = props.musicTree.find((n: any) => n.id == route.query.categorieid)
+      const v1: any = data.musicTree.find((n: any) => n.id == route.query.categorieid)
       //   console.log('🚀 ~ v1', v1)
       if (Array.isArray(v1?.musicSheetCategoriesList)) {
         const list = v1.musicSheetCategoriesList.map((m: any) => {
@@ -130,9 +156,6 @@ export default defineComponent({
       data.list = []
       getList()
     }
-    onMounted(() => {
-      getList()
-    })
     //进入云教练
     const openView = (item: any) => {
       let src = `${location.origin}/orchestra-music-score/?id=${item.id}`
@@ -148,95 +171,100 @@ export default defineComponent({
         }
       })
     }
-    const headeRef = ref()
-    const headerData = reactive({
-      height: 0
-    })
     onMounted(() => {
-      const rect = useRect(headeRef)
-      headerData.height = rect.height
+      // getTree()
     })
     return () => (
       <div class={styles['accompany-music-list']}>
-        <div class={styles.heade} ref={headeRef}>
-          <DropdownMenu>
-            <DropdownItem
-              v-model:modelValue={data.value1}
-              options={option1.value}
-              onChange={() => onSearch()}
-            ></DropdownItem>
-            <DropdownItem
-              v-model:modelValue={data.value2}
-              options={option2.value as any}
-              onChange={() => onSearch()}
-            ></DropdownItem>
-          </DropdownMenu>
-          <div class={styles.filter}>
-            <Search
-              placeholder="请输入搜索关键词"
-              background="#F8F8F8"
-              shape="round"
-              showAction={true}
-              v-model:modelValue={data.keyword}
-            >
-              {{
-                // label: () => (
-                //   <Popover
-                //     v-model:show={data.PopoverOpen}
-                //     actions={actions}
-                //     placement="bottom-start"
-                //   >
-                //     {{
-                //       reference: () => (
-                //         <div>
-                //           长笛 <Icon name="arrow" />
-                //         </div>
-                //       )
-                //     }}
-                //   </Popover>
-                // ),
-                action: () => (
-                  <div class={styles.searchBtn} onClick={() => onSearch()}>
-                    搜索
-                  </div>
-                )
-              }}
-            </Search>
+        <OSticky
+          class={styles.heade}
+        >
+          <div>
+            <DropdownMenu>
+              <DropdownItem
+                v-model:modelValue={data.value1}
+                options={option1.value}
+                onChange={() => onSearch()}
+              ></DropdownItem>
+              <DropdownItem
+                v-model:modelValue={data.value2}
+                options={option2.value as any}
+                onChange={() => onSearch()}
+              ></DropdownItem>
+            </DropdownMenu>
+            <div class={styles.filter}>
+              <Search
+                placeholder="请输入搜索关键词"
+                background="#F8F8F8"
+                shape="round"
+                showAction={true}
+                v-model:modelValue={data.keyword}
+              >
+                {{
+                  // label: () => (
+                  //   <Popover
+                  //     v-model:show={data.PopoverOpen}
+                  //     actions={actions}
+                  //     placement="bottom-start"
+                  //   >
+                  //     {{
+                  //       reference: () => (
+                  //         <div>
+                  //           长笛 <Icon name="arrow" />
+                  //         </div>
+                  //       )
+                  //     }}
+                  //   </Popover>
+                  // ),
+                  action: () => (
+                    <div class={styles.searchBtn} onClick={() => onSearch()}>
+                      搜索
+                    </div>
+                  )
+                }}
+              </Search>
+            </div>
           </div>
-        </div>
-        {headerData.height && <div style={{ height: headerData.height + 'px' }}></div>}
+        </OSticky>
         <OFullRefresh
           v-model:modelValue={data.refreshing}
           onRefresh={onRefresh}
-          style="min-height: 100vh;"
+          style="min-height: calc(100vh - var(--van-dropdown-menu-height) - 1.6rem)"
         >
-          <List
-            loading-text=" "
-            immediateCheck={false}
-            loading={data.loading}
-            v-model:finished={data.finished}
-            finishedText="没有更多了"
-            onLoad={() => {
-              getList()
-            }}
-          >
-            <CellGroup inset>
-              {data.list.map((item: any) => {
-                return (
-                  <Cell size="large" center title={item.musicSheetName} isLink onClick={() => openView(item)}>
-                    {{
-                      icon: () => (
-                        <Icon style={{ marginRight: '12px' }} size={40} name={imgDefault} />
-                      )
-                    }}
-                  </Cell>
-                )
-              })}
-            </CellGroup>
-          </List>
+          {!data.loading && !!data.list.length && (
+            <List
+              loading-text=" "
+              immediateCheck={false}
+              loading={data.loading}
+              v-model:finished={data.finished}
+              finishedText="没有更多了"
+              onLoad={() => {
+                getList()
+              }}
+            >
+              <CellGroup inset>
+                {data.list.map((item: any) => {
+                  return (
+                    <Cell
+                      size="large"
+                      center
+                      title={item.musicSheetName}
+                      isLink
+                      onClick={() => openView(item)}
+                    >
+                      {{
+                        icon: () => (
+                          <Icon style={{ marginRight: '12px' }} size={40} name={imgDefault} />
+                        )
+                      }}
+                    </Cell>
+                  )
+                })}
+              </CellGroup>
+            </List>
+          )}
+          {!data.loading && !data.list.length && <OEmpty tips="暂无曲谱" />}
         </OFullRefresh>
-
-        {!data.loading && !data.list.length && <OEmpty tips="空空如也" />}
       </div>
     )
   }

src/views/coursewarePlay/index.tsx

@@ -290,8 +290,10 @@ export default defineComponent({
       getCourseSchedule()
       window.addEventListener('message', iframeHandle)
     })
+    const playRef = ref()
     // 返回
     const goback = () => {
+      playRef.value?.handleOut()
       if (route.query.source == 'my-course') {
         router.back()
       }
@@ -634,7 +636,7 @@ export default defineComponent({
               返回
             </div>
             <div class={styles.menu}>{popupData.tabName}</div>
-            {data.isCourse && <PlayRecordTime list={data.itemList} />}
+            {data.isCourse && <PlayRecordTime ref={playRef} list={data.itemList} />}
           </div>
 
           <Transition name="right">

src/views/coursewarePlay/playRecordTime.tsx

@@ -14,18 +14,24 @@ export default defineComponent({
       default: () => []
     }
   },
-  setup(props) {
+  setup(props, { expose }) {
     const pageVisibility = usePageVisibility()
 
     watch(pageVisibility, (value) => {
       if (value == 'hidden') {
-        clearInterval(timerRecord.value)
-        handleRecord()
+        handleOut()
       } else {
         // 页面显示
         handleStartInterval()
       }
     })
+    const handleOut = () => {
+      clearInterval(timerRecord.value)
+      handleRecord()
+    }
+    expose({
+      handleOut
+    })
     const route = useRoute()
     const saveModel = reactive({
       /**当前时长 */
@@ -50,7 +56,7 @@ export default defineComponent({
         const res: any = await request.post(
           `${state.platformApi}/courseSchedule/getCoursewarePlayTime?courseScheduleId=${route.query.courseId}`
         )
-        if (res.data){
+        if (res.data) {
           saveModel.playTime = res.data
         }
       } catch (error) {}
@@ -62,7 +68,7 @@ export default defineComponent({
       saveModel.currentTime++
       const playTime = saveModel.currentTime - saveModel.startTime
       // 1分钟记录1次
-      if (playTime >= 60) {
+      if (playTime >= 5) {
         saveModel.startTime = saveModel.currentTime
         request.post(`${state.platformApi}/courseSchedule/coursewarePlayTime`, {
           params: {
@@ -87,7 +93,7 @@ export default defineComponent({
     return () => (
       <div
         class={styles.playRecordTimeWrap}
-        style={{ display: (saveModel.currentTime + saveModel.playTime) > total.value ? 'none' : '' }}
+        style={{ display: saveModel.currentTime + saveModel.playTime > total.value ? 'none' : '' }}
       >
         <div class={styles.playRecordTime}>
           <div class={styles.timeLoad}></div>