h5-colexiu/src/views/music/personal/collection.tsx

import { defineComponent, reactive, ref } from 'vue'
import { List } from 'vant'
import request from '@/helpers/request'
import { useRoute, useRouter } from 'vue-router'
import ColResult from '@/components/col-result'
import { openDefaultWebView, state } from '@/state'
import styles from './index.module.less'
import Song from '../component/song'

export default defineComponent({
  name: 'MusicList',
  emits: ['favorite'],
  setup(props, { expose, emit }) {
    const route = useRoute()
    const router = useRouter()
    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/sheet/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
    }

    const reset = () => {
      isError.value = false
      rows.value = []
      params.page = 1
      finished.value = false
      FetchList()
    }

    expose({
      reset,
      FetchList
    })

    return () => (
      <List
        loading={loading.value}
        finished={finished.value}
        finished-text={rows.value.length ? '没有更多了' : ''}
        onLoad={FetchList}
        error={isError.value}
      >
        {rows.value.length ? (
          <div class={styles.personalSong}>
            <Song
              list={rows.value}
              onDetail={(item: any) => {
                let url =
                  location.origin +
                  location.pathname +
                  '#/music-detail?id=' +
                  item.id
                if (item.favoriteProviderType) {
                  url += `&providerType=${item.favoriteProviderType}`
                }  
                openDefaultWebView(url, () => {
                  router.push({
                    path: '/music-detail',
                    query: {
                      id: item.id,
                      providerType: item.favoriteProviderType
                    }
                  })
                })
              }}
            />
          </div>
        ) : (
          !loading.value && (
            <ColResult
              tips="暂无收藏单曲"
              classImgSize="SMALL"
              btnStatus={false}
            />
          )
        )}
      </List>
    )
  }
})