構建歌曲詳情頁面

1.playController.vue傳參

       <playMusicv :play="play" :paused="paused" :playDetail="playlist[playCurrentIndex]" v-show="show" @myback="show=!show"></playMusicv>
​

2.子元件接收

       props:['playDetail','paused','play']//接收歌曲詳情，歌曲暫停，play函式控制播放與暫停
​

3.大的背景圖

       <div class="bg" :style="{backgroundImage:`url(${playDetail.al.picUrl})`}"></div>
​
 

4.跑馬燈效果

  <marquee behavior="scroll" direction="left">{{playDetail.name}}</marquee>

5.播放時的唱片小白條設定

動態class繫結 ，當條件為true時新增class名稱

:class="{active:!paused}"

active:true 音樂播放，active:false 音樂暫停

 <div class="playContent">
       <img class="needle" :class="{active:!paused}" src="@/assets/img/needle-ip6.png" alt="">
       <img class="disc" src="@/assets/img/disc-ip6.png" alt="">
       <img class="playImg" :src="playDetail.al.picUrl" alt="">
   </div>
 

data(){
           return{
               paused:true,  //準備一個變數控制播放按鈕的切換
               show:false //歌單詳情是否顯示
          }
      },

?????唱片旋轉

6.唱片和歌詞的切換

預設一個顯示，一個不顯示

data() {
           return {
               isPlaycontent: true
          }

<div class="playContent" v-if="isPlaycontent" @click="isPlaycontent=!isPlaycontent">
           <img class="needle" :class="{active:!paused}" src="@/assets/img/needle-ip6.png" alt="">
           <img class="disc" src="@/assets/img/disc-ip6.png" alt="">
           <img class="playImg" :src="playDetail.al.picUrl" alt="">
       </div>
       <div class="playLyric" v-else @click="isPlaycontent=!isPlaycontent">
          我是歌詞模組內容
       </div>
 

7.找到介面文件，獲取當前音樂歌詞展示到頁面

api 獲取歌詞的封裝介面api/index.js ,api /liric?id=33894312 id 當前歌曲的id

export function getLyric(id) {
   return axios.get(`${baseUrl}/lyric?id=${id}`)
}
​

統一對外丟擲api/index.js

export default {
   getBanner,
   getMusic,
   getPlaylistDetail,
   getLyric
}

在store/index裡面state中準備一個當前播放歌曲的歌詞lyric:""

state: {
       playlist: [//音樂播放列表，預設有一條播放歌曲
          {
               name: "追夢赤子心",
               id: 355992,
               al: {
                   id: 35139,
                   name: "追夢痴子心",
                   pic: 19061133579343590,
                   picUrl: "http://p3.music.126.net/XDncptlBJ4_LN3hLBx-8aw==/19061133579343591.jpg",
                   pic_str: "19061133579343591",
              }
          }
      ],
       playCurrentIndex: 0, //當前播放的音樂在音樂列表中的下標
       lyric: ""
  },

mutations 中定義一個函式setLyric，用來修改歌詞資料

mutations: {
       setPlaylist(state, value) {
           state.playlist = value;
      },
       setPlayIndex(state, value) {
           state.playCurrentIndex = value;
      },
       setLyric(state, value) {
           state.lyric = value;
      }
  },

actions 獲取歌詞詳情的函式 content當前的store物件，payload傳遞引數

plyload.id當前播放歌曲的id

宣告一個變數，用來接收 result是當前歌詞的詳情

actions: {
       async resLyric(content,payload){
           let result=await api.getLyric(payload.id);
           console.log(result)
      }
​
  }    

dispath觸發action的方法，修改非同步資料

commit觸發mutation中的方法，修改同步資料

playControlller.vue

mounted() {//網頁一載入就觸發，view和model雙向繫結之後，觸發在store中的reqltric獲取當前播放歌曲，歌詞詳情
           this.$store.dispatch('reqLyric', {id: this.playlist[this.playCurrentIndex].id});
      },
       updated() {//播放音樂資料發生改變，重新獲取當前播放歌曲的歌詞
           this.$store.dispatch('reqLyric', {id: this.playlist[this.playCurrentIndex].id});
      },

修改歌詞內容為當前歌詞詳情

content.commit('setLyric',result.data.lrc.lyric)

把store資料拿過來，放在頁面上(在頁面上顯示歌詞)

   <div class="playLyric" v-else @click="isPlaycontent=!isPlaycontent">
           <p>{{$store.state.lyric}}</p>
       </div>

上一曲下一曲的切換

在playMusic.vue在按鈕裡新增點選事件

<svg class="icon" aria-hidden="true" @click="goplay(-1)"> //上一曲
   <use xlink:href="#icon-shangyishoushangyige"></use>
</svg>
<svg class="icon" aria-hidden="true" @click="goplay(1)">   //下一曲
   <use xlink:href="#icon-xiayigexiayishou"></use>
</svg>

引入import {mapState} from 'vuex'

computed:{
  ...mapState(['playlist','playCurrentIndex']) //從store中接受資料 playlist播放歌曲列表與       playCurrentIndex播放歌曲的下標
},
methods: {
          //上一首下一首的切換
          goplay(num) {
          // console.log(num);
          let index=this.playCurrentIndex+num;   //切換之後的播放下標
          console.log(index); //列印切換後的下表
          if(index<0){//
             index=this.playlist.length-1;   //切換到最後一首
​
          }else if(index==this.playlist.length){
              index=0;    //切換到第一首
          }
          this.$store.commit('setPlayIndex',index)
       }
      },