4.开发阶段—最近收听

开发思路

这个界面相当于是主页上的一级路由，与推荐界面recommend.vue同级的，所以路由设计也相同。
点击两个不同的栏目会显示不同的数据。

可复用组件抽取

通过比较发现，最近收听界面中的数据内容区域与推荐页中的最新音乐区域是相同的，因此可以将推荐页中的最新音乐里面的组件进行抽取，形成通用组件。

通用组件SongListItem.vue：

<template>
  <ul class="song-list">
    <li class="item" v-for="value in songs" :key="value.id" @click="selectMusic(value.id)">
      <img v-lazy="value.picUrl" alt="">
      <div>
        <h3>{{value.name}}</h3>
        <p>{{value.singer}}</p>
      </div>
    </li>
  </ul>
</template>
<script>
import { mapActions } from 'vuex'
export default {
  name: 'SongListItem',
  props: {
    songs: {
      type: Array,
      default: () => [],
      required: true
    }
  },
  methods: {
    ...mapActions([
      'setFullScreen',
      'setMiniPlayer',
      'setListPlayer',
      'setSongDetail'
    ]),
    selectMusic (id) {
      this.setFullScreen(true)
      this.setMiniPlayer(false)
      this.setListPlayer(false)
      this.setSongDetail([id])
    }
  }
}
</script>
<style scoped lang="scss">
@import "../assets/css/mixin";
@import "../assets/css/variable";
.song-list{
  width: 100%;
  .item{
    padding: 0 20px;
    width: 100%;
    height: 150px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
    img{
      width: 120px;
      height: 120px;
      border-radius: 20px;
      margin-right: 20px;
    }
    div{
      width: 70%;
      h3{
        @include no-wrap();
        @include font_size($font_medium);
        @include font_color();
      }
      p{
        @include no-wrap();
        @include font_size($font_samll);
        opacity: 0.6;
        @include font_color();
        margin-top: 20px;
      }
    }
  }
}
</style>

将组件封装为以上格式，以后就直接在父组件中使用，父组件将获取到的数据通过songs字段传递给子组件，子组件中渲染songs数据中的内容（歌曲名称、歌曲封面、歌手名称）。

根据条件渲染

当前由于收听页有两个板块（收藏歌曲、最近收听）所以父组件需要在使用时根据传入的不同类型来渲染不同数据，收藏歌曲的数据内容和最近收听的数据内容在之前的播放器环节中已经开发好保存在Vuex和localStorage中，数据名分别为favoriteList、 historyList。我们只需要针对收听页在Vuex中管理一个全局状态，就是当前选择的板块类型，取名为switchNum，取值为0代表收藏歌曲栏目，取值为1代表最近收听。

父组件中按条件传入值即可：

<div class="bottom-wrapper" ref="accountWrapper">
  <ScrollView ref="scrollView">
    <template #scorllContent>
            <SongListItem :songs="switchNum === 0 ? favoriteList : historyList"></SongListItem>
    </template>
  </ScrollView>
</div>

不建议调用本地缓存数据中歌曲的URL

虽然在收听页面是通过获取缓存的数据来渲染的，但是在播放歌曲的时候建议这里必须去反复调用api获取歌曲文件资源，不能直接取出Vuex中或者localstorage已有的歌曲url，因为网易云获取的歌曲链接具有时效性，也就是保存在历史记录中的歌曲url有可能已经过期失效。这样在播放歌曲的时候会导致一些未知的错误。