【Vue3网易云音乐项目实战教程】五、首页功能的实现（2）这节我们实现了首页热门歌单、新碟上架、排行榜、MV电台歌手等功

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情。

前言

上节课我们实现了用户的登录，接下来我们继续来完善剩下的首页功能。首页的各个模块的逻辑基本一致，请求数据渲染到页面上来。

本节实现功能

热门歌单
新碟上架
排行榜
最新MV
热门电台
热门歌手

热门歌单

// HOT playlist.js
import { getCurrentInstance, onMounted, reactive } from 'vue';

export function hotPlayList() {
    const { proxy } = getCurrentInstance();

    const playlist_info = reactive({
        tags: [],  // 热门标签列表
        lists: [], // 歌单列表
        index: 0,  // 当前选中标签
        loading: true,
        params: { limit: 6, offset: 0 }
    });

    // 获取热门推荐歌单标签
    const getHotTags = async() => {
        const { data: res } = await proxy.$http.hotPlayList()

        if (res.code !== 200) {
            return proxy.$msg.error('数据请求失败')
        }

        res.tags.unshift({ name: '为您推荐' })
        playlist_info['tags'] = res.tags.splice(0, 6);
    };

    // 切换热门推荐歌单标签
    const choosePlayListTag = (index) => {
        playlist_info['index'] = index;
        playlist_info['params']['cat'] = index !== 0 ? playlist_info['tags'][index].name : '';
        playlist_info['loading'] = true;
        getPlayList(playlist_info['params']);
    }

    // 分类歌单列表
    const getPlayList = async(params) => {
        const { data: res } = await proxy.$http.playList(params)

        if (res.code !== 200) {
            return proxy.$msg.error('数据请求失败')
        }

        playlist_info['lists'] = res.playlists;
        playlist_info['loading'] = false;
    }

    onMounted(() => {
        getHotTags();
        getPlayList(playlist_info['params']);
    });

    return {
        playlist_info,
        choosePlayListTag
    }
}

首页的这个歌单模块，在全部歌单列表里我们需要复用，需要抽取出来。


<!-- 首页热门歌单代码片段 --> 
<div class="card">
    <div class="card-title">
        <h3>热门推荐</h3>
        <span v-for="(item, index) in playlist_info.tags" :key="item.id" :class="{'active': index == playlist_info.index}" @click="choosePlayListTag(index)">{{item.name}}</span>
    </div>
    <div class="card-body">
        <play-list :playList="playlist_info.lists" :loading="playlist_info.loading" :num="playlist_info.params.limit"></play-list>
    </div>
</div>