添加我的专辑

src/views/music/personal/album-my.tsx

@@ -0,0 +1,66 @@
+import { defineComponent, reactive, ref } from 'vue'
+import { List } from 'vant'
+import request from '@/helpers/request'
+import Item from '../album/item'
+import { useRoute, useRouter } from 'vue-router'
+import ColResult from '@/components/col-result'
+import { state } from '@/state'
+
+export default defineComponent({
+  name: 'MusicList',
+  setup() {
+    const route = useRoute()
+    const params = reactive({
+      search: (route.query.search as string) || '',
+      musicTagIds: route.query.tagids || '',
+      page: 1
+    })
+    const rows = ref<any>([])
+    const data = ref<any>(null)
+    const loading = ref(false)
+    const finished = ref(false)
+    const isError = ref(false)
+
+    const FetchList = async () => {
+      if (loading.value) {
+        return
+      }
+      loading.value = true
+      isError.value = false
+      try {
+        const res = await request('/music/album/favorite', {
+          prefix:
+            state.platformType === 'TEACHER' ? '/api-teacher' : '/api-student',
+          params
+        })
+        rows.value = [...rows.value, ...res.data.rows]
+        data.value = res.data
+        params.page = res.data.pageNo + 1
+        finished.value = res.data.pageNo >= res.data.totalPage
+      } catch (error) {
+        isError.value = true
+      }
+      loading.value = false
+    }
+
+    return () => (
+      <List
+        loading={loading.value}
+        finished={finished.value}
+        finished-text={rows.value.length ? '没有更多了' : ''}
+        onLoad={FetchList}
+        error={isError.value}
+      >
+        {rows.value.length
+          ? rows.value.map(item => <Item data={item} />)
+          : !loading.value && (
+              <ColResult
+                tips="暂无收藏专辑"
+                classImgSize="SMALL"
+                btnStatus={false}
+              />
+            )}
+      </List>
+    )
+  }
+})

src/views/music/personal/index.tsx

@@ -5,6 +5,7 @@ import Practice from './practice'
 import Personal from './personal'
 import Collection from './collection'
 import Album from './album'
+import AlbumMy from './album-my'
 
 import styles from './index.module.less'
 import { getRandomKey } from '../music'
@@ -43,6 +44,7 @@ export default defineComponent({
             onChange={val => (activeTab.value = val)}
           >
             <Tab title="我的单曲" name="personal"></Tab>
+            <Tab title="我的专辑" name="personal-album"></Tab>
             <Tab title="收藏单曲" name="collection"></Tab>
             <Tab title="收藏专辑" name="album"></Tab>
           </Tabs>
@@ -54,6 +56,7 @@ export default defineComponent({
               }}
             />
           )}
+          {activeTab.value === 'personal-album' && <AlbumMy />}
           {activeTab.value === 'collection' && (
             <Collection
               ref={collection}