Browse Source

Merge branch 'liu-EventTracking' into dev

skyblued 2 years ago
parent
commit
108df2cccb
2 changed files with 50 additions and 32 deletions
  1. 11 0
      src/teacher/my-sheetMusic/index.module.less
  2. 39 32
      src/teacher/my-sheetMusic/index.tsx

+ 11 - 0
src/teacher/my-sheetMusic/index.module.less

@@ -0,0 +1,11 @@
+.container{
+  min-height: calc(100vh - var(--van-tabs-line-height) - 20px);
+  
+}
+:global{
+  .van-tabs__wrap{
+    position: sticky;
+    top: 0;
+    z-index: 10;
+  }
+}

+ 39 - 32
src/teacher/my-sheetMusic/index.tsx

@@ -8,48 +8,55 @@ import Collection from '@/views/music/personal/collection'
 import Album from '@/views/music/personal/album'
 
 export default defineComponent({
-    name: 'mySheetMusic',
-    setup() {
-        localStorage.setItem('behaviorId', getRandomKey())
-        const activeTab = ref('personal')
-        const personal = ref()
-        const collection = ref()
-        const practice = ref()
-        onMounted(() => {
-          useEventTracking('我的乐谱')
-        })
-        return () => {
-          return (
-            <div>
-              <Tabs
-                color="var(--van-primary)"
-                lineWidth={20}
-                v-model:active={activeTab.value}
-                onChange={val => (activeTab.value = val)}
-              >
-                <Tab title="购买单曲" name="personal"></Tab>
-                <Tab title="收藏单曲" name="collection"></Tab>
-                <Tab title="收藏专辑" name="album"></Tab>
-              </Tabs>
-              {activeTab.value === 'personal' && (
+  name: 'mySheetMusic',
+  setup() {
+    localStorage.setItem('behaviorId', getRandomKey())
+    const activeTab = ref('personal')
+    const personal = ref()
+    const collection = ref()
+    const practice = ref()
+    onMounted(() => {
+      useEventTracking('我的乐谱')
+    })
+    return () => {
+      return (
+        <div>
+          <Tabs
+            animated
+            swipeable
+            color="var(--van-primary)"
+            lineWidth={20}
+            v-model:active={activeTab.value}
+            onChange={val => (activeTab.value = val)}
+          >
+            <Tab title="购买单曲" name="personal">
+              <div class={styles.container}>
                 <Personal
                   ref={personal}
                   onFavorite={() => {
                     practice.value?.reload?.()
                   }}
                 />
-              )}
-              {activeTab.value === 'collection' && (
+              </div>
+            </Tab>
+            <Tab title="收藏单曲" name="collection">
+              <div class={styles.container}>
                 <Collection
                   ref={collection}
                   onFavorite={() => {
                     practice.value?.reload?.()
                   }}
                 />
-              )}
-              {activeTab.value === 'album' && <Album />}
-            </div>
-          )
-        }
-      }
+              </div>
+            </Tab>
+            <Tab title="收藏专辑" name="album">
+              <div class={styles.container}>
+                <Album />
+              </div>
+            </Tab>
+          </Tabs>
+        </div>
+      )
+    }
+  }
 })